네이티브 앱, 웹앱, 웹뷰(하이브리드앱)

사실 나는 웹뷰에 대해 막연히 '모바일위에 브라우저 띄우는거~' 라고만 생각했다. 

그러나 최근에 여러 상황으로 인해 이 개념에 대해 제대로 파악할 수 있는 계기가 되었다.

 

상황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/

https://www.mobiloud.com/blog/native-app-vs-webview-app

https://docs.tosspayments.com/common/glossary/webview#-%EC%97%AC%EB%9F%AC-%ED%94%8C%EB%9E%AB%ED%8F%BC%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4%EC%9A%94

https://docs.tosspayments.com/common/glossary/webview#-%EC%8A%A4%ED%86%A0%EC%96%B4-%EC%8B%AC%EC%82%AC%EA%B0%80-%EC%96%B4%EB%A0%A4%EC%9A%B8-%EC%88%98-%EC%9E%88%EC%96%B4%EC%9A%94