Mobile WebView 살펴보기

박성룡 ( Andrew park )
3 min readJul 17, 2017

--

모바일 앱내에서 WebView를 이용하면 웹사이트 화면을 앱내에서 보여줄 수 있다. 그렇다면 웹사이트를 개발할때 고려해야할 사항은 없을까?

들어가기 앞서
1. WebView란?
2. Android의 WebView
3. IOS의 WebView
4. WebView 권한 문제

1. WebView란

각 OS별 내장된 웹 브라우저를 뷰형태로 앱에서 표현할 수 있는 방법이다. WebView를 이용하여 웹페이지를 앱내에서 호출하여 하이브리드 현태의 앱을 개발하는데 유용하게 사용이 가능하다. 하지만 모바일에서 직접적으로 작성된것이 아니므로 성능에서 부족함을 많이 보여줄수 있으나 그 이상의 효과를 볼수 있어 많이 사용하고 있다.

Android Studio에서 Emulator를 돌린모습

2. Android의 WebView

https://developer.android.com/reference/android/webkit/WebView.html 에서 웹뷰에 대한 API를 확인해 볼수 있다.

Android는 4.4 kiket이전 버전에서는 크로미움으로 작성된 프로토타입의 웹뷰가 사용되었다가, Android 4.4.3 KitKat에서 Chrome 30.0.0.0 기반의 웹뷰가 사용되면서 버전이 픽스 되었다. 최근에는 Android 5.0 LOLLIPOP에서는 37.0.0.0 기반으로 제공되며 시스템상에서 System WebView를 제공하여 Google Play Store를 통해 지속적으로 업데이트 되어 파편화 문제가 사라지게 되었다.

만약 웹뷰를 지원하는 웹사이트를 만들게된다면 안드로이드 버전별로 이슈를 대응해야할 필요가 있다.

또한 Android에서는 앱내에서 구동되는 웹뷰 화면을 크롬 Inspect를 활용하여 확인 및 Debug할 수 있다.

3. IOS의 Webview
IOS는 apple 정책에 따라 OS별로 safari 버전을 이용하여 웹뷰를 구동하며, IOS에서 사용하는 웹뷰의 종류가 여러가지가 존재한다.

  1. UIWebView
  2. WKWebView
  3. SFSafariView

UIWebView와 WKWebView는 앱내에서 웹뷰를 보여주는 방식이며, SFSafariView는 앱내에서 사파리 브라우저를 띄우는 형태로 보여준다.

4. WebView의 권한 문제

만약 당신이 Google Map을 활용한 페이지를 만들었고, 그것을 모바일 웹뷰로 보여줄 필요가 있다. 모바일 웹뷰에서는 큰 문제가 없이 작동할까?

일반적인 브라우저에서는 위치에대한 권한을 얻기위해서는 브라우저에서 해당 위치권한에대해 유저에게 묻는다.

크롬브라우저에서 위치 권한 묻기

웹상에서 해당 권한을 얻기위해서 쉬운 방법으로는 HTML5에서 추가된 API인 navigator.geolocation 객체를 통해서 해당 위치 정보를 받아올수 있다. 이때 정보를 얻으려고 할때 브라우저에서 위치 권한에 대해 유저에게 묻는다.
https://developer.mozilla.org/ko/docs/WebAPI/Using_geolocation

만약 유저가 차단한다면 브라우저에서 해당 객체의 Error function을 callback 하게된다.

모바일상에서는 어떤 방식으로 처리될까?

먼저 모바일 WebView의 모든 권한은 Mobile App에서 허락해 주어야 해당 내용을 받아 처리할 수 있다.

//Android

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setGeolocationEnabled(true);

Android의 경우 Javascript와 Geolocation을 허락해 주어야만 해당 내용을 처리 할 수 있다. 만약 권한을 주지 않았다면, geolocation API는 작동하지 않는다.

IOS의 경우 위치정보를 받아오게 설정 하였다면 해당 권한을 웹뷰와 공유한다. 또한 3가지 타입의 웹뷰중 UIWebView에서만 작동을 확인했다.( TODO:: 다른 웹뷰는 혹시 작동이 가능한지 조금 더 확인이 필요하다.)
만약 유저가 설정에서 위치정보를 막았다면 웹뷰에서 권한을 가져올수 있는 방법은 없다.

해당 권한에 대한 내용은 각 모바일사의 API에서 좀 더 확인할 수 있다. 혹시 Web에서 해당 권한 정보를 받아올수 있을까 찾아보았지만 받아올수 있는 방법을 아직 내 역량으로는 찾을수 없었다. 아직 공부가 많이 부족함을 느낄수 있는 문제였다.

--

--