네이티브 앱, 웹앱, 웹뷰(하이브리드앱)
사실 나는 웹뷰에 대해 막연히 '모바일위에 브라우저 띄우는거~' 라고만 생각했다.
그러나 최근에 여러 상황으로 인해 이 개념에 대해 제대로 파악할 수 있는 계기가 되었다.
상황1
회사에서는 유니티(모바일)과 웹뷰(브라우저)간에 통신이 안되는 에러를 해결하며 이 둘이 통신하는 원리에 대해 알게되었다.
또한 우리회사 제품은 웹앱이 아닌 웹뷰 개발 방식이다. 웹앱과 웹뷰의 차이에 대해 알게되었다.
상황2
그리고 최근 사이드 프로젝트를 진행하면서 팀원 모두 어플 개발을 원했는데, 나는 웹 개발자라
웹뷰 형태로 가는 것에 대해 설명하느라 좀 애먹었던 시간이 있었다.
프론트 개발자 끼리라면 그냥 용어를 말하면 되지만, 웹,앱 개발을 모르는 분들에게 설명하는건 좀 당혹스럽기도 했다.
나에겐 당연한 개념이 이들에겐 당연한게 아닐 수도 있으니
✅ 웹앱 vs 네이티브 앱
| 네이티브 앱 | 웹앱 | |
| 개념 | 디바이스에 다운하여 설치할 수 있는 앱 (모바일 디바이스용으로 개발된 앱) |
웹 브라우저를 통해 제공됨. : 반응형 웹으로 웹페이지를 모바일 크기로 줄인 모바일 웹. : 데스크톱 or 모바일에서 브라우저에 액세스 할 수 있는 앱 |
| 접근 플랫폼 | 모바일에서만 접근 가능 : 디바이스 유형에 맞춰 개발됨. (fullter를 쓰면 한 코드로 안드로이드,IOS 둘 다 된다고 들었는데 자세히는 모르겠음) |
여러 플랫폼에서 접근 가능( 모바일~웹) : 모바일에만 국한되지 않고, 브라우저를 띄울 수 있는 플랫폼 이면 모두 구현 가능함. |
| 디바이스 설치 | 앱 설치 필요 | 디바이스에 앱 설치 필요없음. |
| 로딩 속도 | 빠름 : 사용자 기기에 설치되므로 이미 스토어에서 다운 받을 떄 빌드가 완료되서 |
네이티브 앱에 비해 느림 : 브라우저 접속시 리소스를 다운하기 때문에 |
| 배포 | 배포시 스토어 심사가 필요 (심사 퇴짜 맞을 수도 있다) | 빠른 배포 가능 배포시 스토어 심사가 필요하지 않음. |
| 구현 기능 | 사용자가 디바이스 컨트롤 하는 기능 구현가능 : 디바이스 위치 추적 : 디바이스 마이크 , 카메라 기능 : 사용자 연락처 목록 : 디바이스 기울이기, 지문인식, 등등 |
브라우저에서 지원하는 기능만 사용 가능함. 디바이스 기능에 접근 불가 : 푸시 알림, 지문 인식 등 기능 구현 불가 |
| 그 외 | 동일한 UI | 브라우저에 따라 기능이 달라질 수 있음 |
✅ 웹뷰(하이브리드 앱)
: native 앱 과 웹앱의 장점을 결합한 형태
: native 앱에 웹 브라우저를 띄워 실행됨
: 네이티브 앱 API와 브라우저 API 모두 를 이용한 개발 가능
: A2HS 방식으로 홈화면 바로가기 추가 가능
: 앱스토어에서 배포해야 한다.
✅ PWA (Progressive Web App)
https://www.youtube.com/watch?v=NMdnzvPsGu8&t=122s
웹앱은 그냥 html로 만들어진 프로그램인데
이걸 native app 처럼 쓸 수 있게끔 만들어주는 스펙
✅ WebView <-> Native app 통신
모바일 앱 위에 브라우저를 띄우는건 모바일 개발자가 처리하게 된다.
: 모바일에서는 웹뷰가 표시할 URL 주소를 지정할 수 있고, 웹 페이지를 로드 시킬 수 있다.
: 안드로이드와 IOS 일 때 팝업 웹뷰 처리 코드는 다른 것 같다. (카카오 개발자 페이지 글 참조)
// WebView에 스크립트 로드
webView.loadUrl("file:///android_asset/your_script.html");
// WebView에 스크립트 로드
if let url = Bundle.main.url(forResource: "your_script", withExtension: "html") {
webView.loadFileURL(url, allowingReadAccessTo: url)
window.webkit.messageHandlers
: iOS의 WKWebView에서 사용되는 웹뷰JavaScript와 네이티브 코드 간의 통신을 담당하는 객체
: 웹뷰 JavaScript 에서 이 객체를 사용하여 네이티브 코드에 메시지를 전달할 수 있음.
// 웹뷰 JavaScript 코드
// myHandler는 네이티브 측에서 등록한 핸들러의 이름과 동일하게 맞춰줘야함.
window.webkit.messageHandlers.myHandler.postMessage('Hello World');
💡
우리 회사 서비스는 안드로이드만 지원하는데, 최근데 IOS도 지원하는 케이스가 생겼다.
그런데 유니티(모바일 개발)쪽에서 ios일 때만 브라우저 window객체에 값을 설정해주지 못하는 문제가 발생하였다.
난 처음에 웹뷰 브라우저에서 native 모바일에 접근할 수 있는 법이 없다고 생각했는데 이런 방법이 있었구나.
내일 가서 한번 시도해봐야겠다!
참고자료
https://aws.amazon.com/ko/compare/the-difference-between-web-apps-native-apps-and-hybrid-apps/