웹뷰 (webView) 의미 / 장단점

1. 웹뷰의 의미 ? 

A WebView is a web browser that is embedded within an app 
웹 브라우저를 앱에 임베디드 하는 형식이라고 볼 수 있다.
앱 내에서 웹 콘텐츠를 사용할 수 있도록 해준다.

대표적으로:) 
- Android System WebView, based on Google Chrome
- Apple's WebView for its devices, based on its Safari browser
- Microsoft Edge WebView2

 

2. Google Chrome 을 베이스로 하는 안드로이드 시스템 웹뷰 

 

Android System WebView, based on Google Chrome (Android Webview) 

 

- WebView 를 사용하게 되면, 웹 애플리케이션이나 웹 페이지를 전달하는 데 사용됨.

- WebView class 를 Android의 View 클래스의 확장으로, 활동 레이아웃의 일부를 웹페이지로 보여줄 수 있게 해줌.

- Android 에서 WebView 를 사용하는 경우,주요 웹 브라우저의 화면 구성에서 적절한 크기와 배율로 표시되도록 뷰포트 및 스타일 속성을 지정할 수 있다.

- 웹 페이지의 JavaScript가 앱의 API를 호출하여 웹 기반 애플리케이션에 Android API를 제공할 수 있도록 Android 앱과 웹 페이지 간의 인터페이스를 정의할 수 있다.

 

- Android WebView 공식문서 참고 

https://developer.android.com/develop/ui/views/layout/webapps?hl=ko

웹 기반 콘텐츠  |  Views  |  Android Developers

 

3.Safari 브라우저를 기반으로 하는 애플 웹뷰 

 

Apple's WebView for its devices, based on its Safari browser (iOS WKWebView)

 

- 인앱 브라우저와 같이 인터렉티브 웹 컨텐츠를 표시하는 object 라 볼 수 있음.

- WKWebView 는 웹 컨텐츠를 앱의 UI에 원활하게 통합하는데 사용함. 

- 앱의 컨텐츠가 자주 변경되어야하는 경우에 사용한다.

 

- iOS WKWebView 공식문서 참고 

https://developer.apple.com/documentation/webkit/wkwebview

WKWebView | Apple Developer Documentation

 

4. 웹뷰의 장점 

 

(1) 배포가 쉽고 간단하다.

- 앱 배포 없이 레이아웃 변경이 가능하고, 웹뷰만 수정하여 배포하면 빠르게 반영이 가능하다.

- Android / iOS 배포의 경우 절차가 매우 까다롭다.

- 앱을 기본적으로 배포하기 위해서는 심사가 이루어져야하는데 그 과정에 시간이 소요됩니다.

(iOS : https://developer.apple.com/kr/distribute/app-review/)

 

(2) 웹뷰의 경우 ios/안드로이드 각각 플랫폼 별로 따로 개발할 필요가 없다. 
- 각각 플랫폼 별로 개발이 이루어져야할 경우, 다른 언어로 개발되기 때문에 개발 비용이 더 많이 든다. 

 

5. 웹뷰의 단점

 

(1) 로드시간이 느리며, 속도, 연결 문제가 발생할 수 있다.

- 페이지 이동할 경우에 반응성이 좋지 않을 수 있다.

-  성능 이슈로 인하여 화면 지연이 발생할 수 있다. 

- 네이티브는 사용자가 앱 스토어에서 빌드된 앱을 다운받아서 사용하는데 웹뷰는 필요한 리소스를 다운받아서

보여줘야하기에 시간이 필요하다.

 

(2) 오직 웹뷰만으로 구성된 경우 (추가적인 기능이 없는 케이스) 는 심사가 어려울 수 있으며, 앱 스토어에서 거부당할 수 있다.

- ios 관련 심사 가이드라인 : https://developer.apple.com/app-store/review/guidelines/#introduction 

- Android 관련 심사 가이드라인 : https://play.google.com/intl/ko/console/about/guides/releasewithconfidence/

 

6. 참고문서 

https://www.appmysite.com/blog/native-app-vs-webview-app-which-path-offers-better-odds-of-success/#one

Native app vs WebView app - Which Path Offers Better Odds of Success? - AppMySite

https://www.mobiloud.com/blog/native-app-vs-webview-app#what-is-a-native-app

Native Apps vs Webview Apps - What's the Best Choice for Your Business?

https://docs.tosspayments.com/resources/glossary/webview

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

 

https://developer.apple.com/documentation/webkit/wkwebview

WKWebView | Apple Developer Documentation

https://developer.android.com/develop/ui/views/layout/webapps?hl=ko

웹 기반 콘텐츠  |  Views  |  Android Developers