웹뷰? 웹의.. 풍경 🌌? 너 이거 알아??

오늘 블로그에서 다뤄볼 내용은 바로 웹뷰입니다. 갑자기 이 웹뷰에 대해서 왜 조사를 하게 되었냐면 ..

제가 최근에 해커톤을 다녀오게 되었습니다. 근데 저희 팀은 팀 전공이 애매하게 웹 Front 저 혼자, AOS 2명

UI/UX 디자이너, Back 1명 총 이렇게 5명으로 구성되어서 프로젝트를 진행하였습니다. 다른 팀들을 보면 웹이

나 앱 이렇게 한 번에 모여있었는데, 저희 팀은 구성이 그렇게 되어 있지 않더라구요 .. 그래서 생각을 해보다가

안드로이드 전공하는 친구가 웹뷰를 해보는 것은 어떠냐고 물어봐서 조사를 해보게 되었습니다. 사실 그 해커톤

에서는 웹뷰 사용은 하지는 않았지만 이번 계기를 통해서 더 알아보려고 합니다.

 

 

WebView란 무엇일까?

네이티브 앱에 내재되어 있는 웹 브라우저를 이야기합니다. 그래도 이해가 조금 어렵다고요?

 

여러분들이 어플리케이션을 이용하다 보면 어떤 서비스는 앱 전용이고 어떤 서비스는 웹뷰로 제작이 된 것을

볼 수 있을 것입니다. 쉽게 말해서 앱에서 웹브라우저를 이용하여 화면을 보여주는 방식입니다.

 

➡️ WebView는 프레임워크에 내장된 웹 브라우저가 컴포넌트로 뷰의 형태로 임베딩 한다는 것이다.

 

💡 WebView를 사용하면 웹 콘텐츠를 네이티브 앱 뷰와 같은 유저들에게 보여줄 수 있습니다.
또 일반적인 브라우저와 달리 WebView에서는 딱 페이지만 볼 수 있게 합니다.

 

이러한 웹뷰에서는 예시가 어떤 것이 있을까?

일반적으로 SNS를 통해서 예시를 들 수 있습니다. 
예를 들어서 인⭐️과 같은 경우에 많은 사람들이 블로그나 인터넷 링크를 주고받고 하시죠?
그러면 인⭐️와 같은 앱에서 웹뷰로 해당링크를 통해서 접속을 할 수 있습니다. 

궁금하시면 지금 한번 앱 내에 브라우저를 통해 해당 URL로 접근하는 것을 해보시면 좋을 것 같습니다.

 

왜 WebView를 사용하는 것일까?

1. 사용자들에게 기능을 빠르게 제공하고 수정할 수 있다. 서비스 개선이 가능하다.
2. 앱 개발자보다 웹 개발자의 공급과 수요가 더 높기 때문이다.
3. 여러 플랫폼에서 사용이 가능하다.

 

기존에 존재하던 앱으로 개발을 할 경우에는 앱은 스토어를 통해 배포 프로세스이기 때문에 기능개발이 끝나고

빌드 후에 배포를 하여도 바로 유저들에게 적용하기는 불가능하다. 또 앱은 최신 버전이 업데이트를 하게 된다면

자신들이 사용하는 앱의 버전을 업데이트를 해야 배포된 기능을 사용이 가능하다. 자주 쓰는 앱을 계속 업데이트

하라고 하는 것처럼 또 웹 개발자의 공급과 수요로 앱, 웹을 처리할 수 있는 장점을 가지고 있기 때문이다.

 

그리고 여러 플랫폼에서 사용이 가능하다는 장점을 가지고 있는데 웹 페이지, AOS, IOS는 다른 언어로 개발을

하는 거 모두 아시죠? Kotlin, Swift 등등 .. 여러 가지 언어가 필요한데 WebView를 사용함으로 웹 페이지 딱

"하나" 만들어 놓고 모든 플랫폼에서 사용을 할 수 있게 도와줍니다. 이런 기대 효과로는 초기 개발 비용이 줄고

유지 보수도 쉽다는 장점이 있죠.

 

 

WebView는 이런다고?

혹시 여러분들은 앱으로 휴대폰을 보다가 로딩이 3초 이상 걸린 적을 경험해 본 적이 있나요?? 거의 웬만해서

일반적인 어플리케이션에서는 경험하기 힘들 텐데 그만큼 웨이팅 렌더링 속도가 빠르다는 걸 인지할 것입니다.

하지만 웹에서 3초 정도 기다리는 것은 일반적으로 큰 이슈라고 생각은 하진 않을 것입니다. 어쩌면 사용자는

익숙하다는 것이죠. 하지만 모바일 앱을 사용하는 유저 입장에서는 즉각적으로 컨텐츠가 표현이 돼야 하는 화면에

익숙하고, 원하고 있습니다.

 

이러한 점에서 궁금적으로 하고자 하는 말을 좀 알 것 같나요? 

 

➡️ WebView는 모바일 앱처럼 빨라야 한다. 일반적인 웹과 다른 성능 지표를 생각하며 개발을 해야 합니다.

 

 

TOSS 에서도 WebView를 사용한다는 사실 알고 계신가요?? 한번 알아보시는 걸 추천드립니다.

웹뷰(WebView) | 토스페이먼츠 개발자센터

웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터

 

대표적으로 React-Native를 웹뷰로 연결하는 코드를 작성을 해보겠습니다.

 

먼저 필요한 web-view 라이브러리를 install 해주셔야 합니다.

npm install react-native-webview

 

1. uri로 웹 연결

import React from 'react';
import { WebView } from 'react-native-webview';

const App = () => {  
	return (
    	  <Webview source={{uri: 'https:...중략'}} />
  );
};

 

2.  inline HTML 사용

import React from 'react';
import { WebView } from 'react-native-webview';

const App = () => {  
	return (
    	  <Webview originWhitelist={['*']} source={{html: '<h1>Hello world</h1>'}} />
  );
};

 

 

코드를 작성하고 실행할 수 있는 Native 사이트가 있어서 해보았는데 생각보다 재밌다!!

이거 보면 확실히 이해가 빠를 듯합니다.

 

방법은 2가지가 위처럼 존재하는데 전자 방법을 훨씬 더 많이 사용하는 듯했다. 저건 React-Native 기준으로

사용하는 WebView 방법이며 다른 Android와 IOS 방법이 있는 것 같은데 더 공부를 해봐야 알 것 같다.

 

이번에 해커톤을 가면서 추가적인 내용이 담겨 있는 레포를 공유받았는데 바로 대덕소마고에서 하고 있는

프로젝트 중 하나인 것 같다. 여기서 웹뷰를 사용하였는데 정리가 잘 되고 이해하기 쉽다고 하여서 공유하면

좋을 것 같아서 공유를 해보겠습니다~ 🔥 좋은 자료 줘서 고마워 ㅇㅇ야!!

 

여기에 있는 service에 bridge 연결에 있는 내용이 좋은 것 같다.

GitHub - team-xquare/xquare-frontend: DSM을 위한 단 하나의 웹서비스

 

기본적으로 해커톤 마무리 단계에 팀원 중에도 있었고 또 우리 팀원중 친구분이 현업에서 웹뷰 사용한 적이 있는

개발자님이 계셔서 좀 맛보기를 조금 했었는데 신기했다. 그냥 내가 사용하는 리액트 파일에서 컴포넌트나 페이지

를 만들고  똑같이 웹뷰 bridge 연결만 하면 바로 Android 앱에서 내가 만든 것이 앱으로 뜨는 것이 신기했다.

아 물론 반응형 해야 한다!! ㅎㄹ

 

느낀 점

갑작스럽게 WebView에 대해서 조사를 해보았는데 너무 재밌는 거 아닌가. React-Native는 내가 사용하는

언어 이기도 하고 도전하면 좋을 것 같다. 요즘 개발 시장이 Flutter가 뜨고 있는 추세인데 지금 막 엄청 열심히

해서 Flutter를 할 것은 아니고 React-Native는 도전해보는 것도 재밌을 것 같다. 이번 해커톤에서 느끼는 것이

엄청 많은 활동이었다.. ⭐️