토스에서 쓴다는 웹뷰(WebView)가 궁금하다.

호호호진 2024. 11. 19. 15:57

웹뷰란?

웹뷰(WebView)는 네이티브 앱에 내재되어 있는 웹 브라우저입니다. 웹뷰를 사용하면 웹 콘텐츠를 네이티브 앱 뷰와 같이 사용자에게 보여줄 수 있어요. 일반 웹 브라우저와 달리 웹뷰에는 주소창, 새로고침, 즐겨찾기와 같은 기능은 없고 단순히 웹페이지만 보여줘요.

Google에서 Android WebView 클래스를 아래와 같이 정의하고 있어요.

WebView 클래스는 Android의 View 클래스의 확장으로, 웹페이지를 활동 레이아웃의 일부로 표시할 수 있게 해 줍니다. 탐색 컨트롤이나 주소 표시줄 등 완전히 개발된 웹브라우저의 기능은 전혀 포함되어 있지 않습니다. WebView의 모든 작업은 기본적으로 웹페이지를 표시하는 것입니다.

Apple에서 iOS WKWebView 클래스를 아래와 같이 정의하고 있어요.

WKWebView 객체는 앱 UI에 매끄럽게 통합되는 네이티브 뷰입니다. 웹뷰는 HTML, CSS 및 JavaScript 콘텐츠를 지원하는 웹 브라우징 경험을 제공하며 네이티브 뷰와 함께 사용할 수 있습니다.

(출처 : 토스payments 개발자센터)

쉽게 말하면 IOS, Anroid 위에 WebView가 컨텐츠를 표시한다.

웹뷰의 장점

여러 플랫폼에서 사용할 수 있다. 웹페이지 하나를 만들어 놓고 Anroid, iOS에서 웹뷰를 사용하면 한 번만 개발해서 세 개의 플랫폼에 사용할 수 있다. 초기 개발 비용을 최소화하고 유지 보수도 편리하다.
배포 없이 업데이트할 수 있다. 앱 심사 없이 웹사이트 내용을 수정할 수 있기 떄문에 자주 바뀌거나 빠르게 업데이트가 피요한 화면은 웹뷰로 구현한다.
인터넷 연결이 필요한 데이터를 간단히 불러온다. 이메일과 같은 데이터는 항상 인터넷이 필요하다. 이러한 데이터는 네이티브 앱으로 네트워크를 설정하고, 데이터를 불러와서 앱 위에서 보여주는 것보다 항상 인터넷에 연결되어 있는 웹뷰로 보여주는 게 더 쉽다.

웹뷰의 단점

비교적 느리다. 네이티브 앱에 비해 로딩 시간이 느리다. 네이티브 앱은 이미 스토어에서 빌드가 완료되지만, 웹뷰는 해당 사이트에서 사용하는 리소스를 다운로드하고 보여주는 데 시간이 필요하다.
UI가 제한적이다. 웹뷰는 HTML,CSS,JavaScript를 사용하기 때문에, 네이티브 앱의 UI를 구성하는 것보다 제약적이다.
스토어 심사가 어려울 수 있다. 웹뷰만으로 구성된 앱은 스토어 심사가 어려울 수 있다. 허가 없는 웹사이트를 무단으로 사용하거나, 웹사이트만 보여주는 단순한 앱이 등록되는 걸 방지하고 있기 때문이다.

토스에서도 100% 웹뷰로 구현하고, 점점 웹뷰로 대체하려는 움직임이 많아진다고 들었는데 프론트엔드 개발자로서 개념정도는 익혀두어도 나쁘지 않을 것 같다.