Preview
개발 공부를 하다보면 WebApp, Web View 라는 용어를 자주 보게된다. 어렴풋이 어떤 의미인지는 알고는 있었지만 조금 헷갈리는 부분이 있어 확실하게 정리해보고자 한다
Web App???? WebView ?????
WebView는 네이티브 앱 내부에서 웹 콘텐츠를 띄우는 용도인 반면, Web App은 브라우저에서 실행되는 독립적인 앱 기반 어플리케이션이라는 것 ~
- WebView
- 정의
- 네이티브 어플리케이션(Android, iOS 등) 내부에서 웹 콘텐츠를 표시하기 위해 사용되는 컴포넌트
- 앱 안에 브라우저 창을 넣어 웹 페이지를 띄우는 방식
- 장점: 네이티브 앱 안에서 웹 기술(HTML, CSS, JS)를 이용할 수 있어서, 앱과 웹을 동시에 사용하는 것이 가능함
- 단점: 웹뷰는 주로 네이티브 앱의 부가 기능으로 사용되며, 네이티브 앱에 비해 성능이 다소 떨어질 수 있음
- 사용 사례
- 카카오톡
- 친구가 보낸 링크를 클릭했을 때, 카카오톡 앱 내부의 웹뷰를 통해 해당 사이트가 열림. 별도의 브라우저를 실행하지 않고도 친구가 보낸 링크의 웹 콘텐츠를 볼 수 있음
- 토스
- 다양한 금융 서비스나 이벤트 페이지를 표시할 때 웹뷰를 활용함
- 카카오톡
- 정의
- Web App
- 정의
- 브라우저에서 동작하는 어플리케이션
- 모바일 또는 데스크탑에서 브라우저를 통해 접속할 수 있으며, 기본적으로 웹 기술로 구성됨
- 사용자가 따로 설치할 필요 없이, 브라우저를 통해 바로 접근할 수 있음 (별도의 앱 스토어를 거치지 않고도 제공 가능)
- 장점: 플랫폼에 상관없이 브라우저만 있으면 작동 가능하므로 범용성이 높으며, 서버 측에서 관리되기 때문에 사용자 쪽에서 따로 작업할 필요가 없음
- 단점: 네이티브 기능을 완전히 사용하지 못하거나 제한적으로 사용할 수 있음. 성능 또한 네이티브 앱에 비해 다소 떨어질 수 있음
- 사용 사례
- 네이버
- 모바일 웹 브라우저에서 실행되는 웹앱을 제공함. 네이버 검색, 블로그 뉴스, 카페 등의 서비스를 설치 없이 모바일 브라우저에서 바로 이용할 수 있음
- 네이버 웹앱은 PWA(Progressive Web App, 홈 화면에 저장되면 브라우저에서 실행되고, 네이티브 앱처럼 동작함) 기술을 적용함
- 쿠팡
- 쿠팡 모바일 웹 버전은 웹앱 형태로 작동해, 사용자가 별도의 앱 설치 없이 모바일 브라우저를 통해 상품 검색, 구매, 결제 등의 기능을 웹앱에서 처리가 가능함
- ChatGP
- 브라우저 기반의 ChatGPT는 웹앱임
- 네이버
- 정의
Native App과 WebView는 뭐가 다른거지?
Web App과 WebView에 대해 알아볼수록, 웹뷰는 네이티브 앱 안에서 ~ 이런 말이 자주 나오는데,, 그러면 네이티브 앱과 웹뷰는 뭐가 다른거지?
- Native App(네이티브 앱)
- 정의
- 특정 플랫폼(iOS, Android)에 맞춰 개발된 어플리케이션
- 해당 운영체제의 고유 기능과 API(카메라, GPS, 알림 등)를 직접적으로 사용할 수 있음
- 앱스토어에서 다운로드하여 설치해야 하며, 설치 후 오프라인에서도 실행할 수 있는 경우가 많음
- 특징
- OS에 맞춰 각각 개발됨
- 앱스토어를 통해 배포 및 설치
- 네이티브 앱 안에서 웹뷰를 사용하는 경우
- 앱 내부에서 웹 페이지나 웹 콘텐츠를 보여주는 것으로, 네이티브 앱 내부에 웹 브라우저를 임베디드한 것과 비슷한 개념임
- 특징
- 네이티브 앱의 UX/UI와 성능을 유지하면서, 일부 컨텐츠는 웹 페이지로 불러옴
- 외부 서비스나 결제 등에서 주로 사용
- 차이점
- 네이티브 앱을 제공한다: 앱 전체가 특정 OS에 맞춰 네이티브 코드로 개발된 앱을 사용한다는 뜻
- 네이티브 앱 안에서 웹뷰를 사용한다: 네이티브 앱이지만, 일부 기능이나 페이지는 웹 컨텐츠로 처리한다는 뜻 (앱 내에서 외부 페이지를 보여줄 때 웹뷰를 사용하는 방식)
Deep Link, App Link란 무엇일까?
네이티브 앱까지 알아보고 나니, 하나 더 궁금한 점이 생겼다. 카카오톡 안에서 친구가 보낸 링크를 클릭해서, 카카오톡 앱 안에서 해당 링크의 웹 페이지를 보는 것은 WebView에 해당하지만, 만약에 특정 앱으로 넘어가 링크가 열리는 것은 어디에 해당하는 것인지 궁금해졌다.
- Deep Link
- 정의
- 단순히 웹페이지로 연결되는 것이 아닌, 특정 앱 내의 특정 화면이나 기능으로 바로 이동시키는 링크
- 일반적인 링크는 웹 브라우저에서 열리지만, 딥 링크는 사용자가 이미 해당 앱을 설치해두었다면 그 앱이 열리고, 해당 앱 안에서 지정된 컨텐츠가 바로 표시됨
- App Link와 Deep Link의 관계
- 앱 링크: 딥 링크의 한 종류로, 웹 브라우저에서 앱을 여는 방식임. 만약 사용자가 해당 앱을 설치하지 않았다면, 앱스토어로 연결되어 앱을 설치하도록 유도함
- 딥 링크: 앱이 설치된 상태에서만 작동하며, 사용자가 앱을 이미 설치한 경우 해당 앱의 특정 위치로 이동함
아! 그러면 내가 카카오톡으로 받은 링크를 클릭했을 때, 처음에는 WebView로 열리고, 이후 "외부 브라우저로 열기" 버튼을 눌러 외부 브라우저에서 해당 링크를 여는 경우는 Deep Link일까?
정답은 딥링크에 해당하지 않는다
처음에는 WebView를 통해 실행되는 것은 맞지만, 외부 브라우저로 열기를 통해 열리는 경우는, 단순히 링크를 브라우저로 옮겨서 다시 로드하는 것일 뿐, Deep Link가 아니다!!!
Conclusion
웹앱, 웹뷰에 대해 알아보면서, 앱 개발 시 사용자의 경험을 고려하여 기술을 선택하는 것이 매우 중요하다는 생각이 크게 들었다. 지금까지 알아본 기술들이 어느 경우에 적합한지 한번 생각해보자
- Web App: 설치 과정 없이 바로 사용할 수 있으므로 접근성이 중요한 서비스에 적합함. 빠른 업데이트와 유지보수가 가능하기 때문에 자주 변경되는 컨텐츠나 간단한 기능을 제공하는 서비스에 알맞음
- WebView: 네이티브 앱에서 특정 웹페이지를 빠르게 제공할 때 유용함. 특히, 앱 내부에 많은 기능이 필요하지 않고, 외부 웹페이지를 임시로 띄울 때 많이 사용됨
- Native App: 성능, 안정성, 사용자 맞춤형 경험이 중요한 경우, 네이티브 앱이 적합함. 모바일 기기의 하드웨어와 깊이 상호작용하거나 복잡한 기능을 요구하는 서비스(게임, 사진 편집 앱 등)에 적합함
- Deep Link: 사용자가 클릭한 링크에 맞춰 앱 내부의 특정 위치로 바로 이동할 때 딥 링크를 사용함.
