0. 공부하게 된 계기
회사에서 웹뷰를 개발하고 있다.
간단한 개념이지만 웹앱, 네이티브앱, 하이브리드앱, 모바일웹 등 간에 계속 헷갈려서 이참에 정리해보기로 했다.
1. 모바일웹
쉽게 말하면 반응형 웹 이다.
PC용 사이트를 모바일에서도 사용자가 이질감 없이 같은 사이트를 사용하고 있다는 느낌을 받도록 하게 하기 위해 폰트나 이미지, 아이콘 등의 위치를 조정하여 모바일에 맞게 다시 구현하는 방식이다.
브라우저 어플리케이션을 통해 url을 이용해 접속하여 이용한다.
- 장점
- 다른 방식보다 개발에 대한 시간과 비용이 덜 든다.
- 수정 사항이 발생해도 스토어에 업데이트를 할 필요가 없이 배포만 진행하면 된다.
- 단점
- URL을 통해 들어와야 하며, 모바일 OS에서 제공하는 기능들을 사용할 수 없다.
모바일웹 vs 하이브리드앱
다음 모바일웹과 하이브리드앱을 비교해보면 두 가지의 차이점이 명확해진다.
검색바 영역을 보면 모바일웹 같은 경우에는 검색바에 '음성검색 모양의 아이콘'이 있는 반면 하이브리드앱은 '꽃검색 모양의 아이콘'이 있다.
다음 모바일웹의 '음성검색 아이콘'을 누르면 드롭다운 메뉴가 나오는데, 해당 기능들은 '다음앱에서 사용할 수 있다'고 설명하고 있으며 메뉴를 누르면 다음 앱을 설치할 수 있는 페이지로 이동 한다.
만약 앱이 설치되어 있다면 앱으로 바로 이동하게 되는데, 그렇게 되면 운영체제의 기능인 카메라나 마이크 기능을 활용하여 다음 앱의 기능을 사용 할 수 있다.
2. 웹앱
반응형웹은 아니지만 홈페이지와 같은 웹을 스마트폰 화면 크기로 줄인 것 을 말한다.
PC나 스마트폰 등 단말기의 기종에 관계 없이 모든 단말기에서 같은 콘텐츠를 볼 수 있도록 해준다.
웹앱은 사용자 스마트폰에 설치되어 있는 인터넷 브라우저를 기반으로 동작하는 앱이다.
~첫 번째 장점 제외하고 모바일웹과 동일~
- 장점
- 모바일웹과 큰 차이점은 없지만 겉으로 보이는 모습이나 구동 방식을 앱처럼 보이게 만들어서 모바일로 사이트를 이용하는 사용자는 조금 더 익숙하게 사용할 수 있다.
- 웹에서 사용하는 언어(HTML, CSS, JSP, PHP, .NET)로 개발하기 때문에 비용과 시간이 절약된다.
- 설치 없이 인터넷 브라우저만 있으면 접속 가능하다.
- 수정사항에 따라 스토어에 업데이트 하지 않아도 된다.
- 단점
- URL을 통해 들어와야 하며, 모바일 OS에서 제공하는 기능들을 사용할 수 없다.
3. 하이브리드앱
겉으로 보기에는 일반 어플로 보이지만 실제로는 웹을 기반으로 하는 앱 이다.
즉, 어플 안에서 웹을 불러오는 방식으로 실제로는 앱이 아닌 웹이 실행되는 것 이다.
기본적인 기능은 HTML 등의 웹문서로 구현하고 디자인과 같은 패키징은 모바일 OS 별로 구현한다.
네이티브앱과 웹앱의 장점을 합친 개발 방식이다.
- 장점
- 네이티브에 비해 개발이 비교적 쉽다.
- 기기간 호환성을 해결하기 쉽다.
- 타 웹 사이트로 가는 기능 등을 지원할 수 있다.
- 카메라, 음성검색 및 인식 등의 스마트폰 기능 사용이 가능하다.
- 단점
- 네이티브앱보다 UI를 구성하는 디자인 부분이 취약하다.
- 네이티브앱 개발 지식이 필요하다.
- 각 클라이언트마다 웹 페이지를 호출하므로 서버 자원을 더 사용한다.
- 웹뷰에서 앱을 실행하게 되기 때문에 브라우저의 성능에 따라서 앱의 성능이 결정된다. 즉, 네트워크 환경이나 웹 사이트의 용량에 따라 앱의 속도가 느려질 수 있다.
- 일반적으로 네이티브보다 느리다. 네이티브는 앱 스토어에서 빌드된 앱을 다운받는 것임에 반해, 웹뷰는 html 등의 리소스를 다운받고 파싱 & 렌더링을 해야되기 때문이다.
구현 방법
-
웹뷰를 이용한 앱
네이티브로 웹뷰 관련 코드만 구현하고 나머지는 웹에서 모두 구현한다. 웹 구현과 동일하고 웹브라우저를 가진 앱이기 때문에 비교적 러닝커브가 적다. -
아이오닉이나 코르도바처럼 웹뷰 기반의 프레임워크 이용
1번과 거의 같은 수준의 구현방법이지만 프레임워크가 도와주기 때문에 좀더 쉽게 구현할수 있다.
다만 프레임워크가 주는 제한도 있기 때문에 오히려 자유도는 떨어진다. -
리액트네이티브나 플러터 같은 크로스플랫폼 빌드 툴을 이용한 개발
하나의 소스로 안드로이드/ios 각각의 네이티브 소스를 생성해주는 방식이다.
프레임워크 의존성이 가장 크지만 준수한 performance와 생산성을 가진다.
웹뷰
모바일 앱 어플리케이션의 일부 부분 및 페이지를 웹 어플리케이션 및 웹 페이지로 제공하는 기능 을 말한다.
안드로이드와 ios 모두에서 제공해주는 기능이다.
- 장점
- 웹 배포만 하면 바로 수정 내용이 반영되기 때문에 배포 주기를 빠르게 가져갈 수 있다.
- 단점
- 네이티브와 동일한 UX를 제공할 수 없다.
- 네이티브 API를 직접 가져다가 쓸 수 없어서 앱을 거쳐서 사용하는 등의 방법이 필요하다.
- 스토어 심사가 반려되는 사유가 될 수 있다.
4. 네이티브앱
구글 플레이 스토어나 앱 스토어에서 다운로드하여 사용할 수 있는, 흔히 말하는 어플리케이션 이다.
모바일 기기에 최적화된 언어(swift, Objective C 등)으로 개발되어 있다.
- 장점
- 속도가 빠르고 안정적이다.
- 높은 사용의 그래픽을 이용해 다양하고 창의적인 디자인을 입힐 수 있다.
- 디바이스 전체에 엑세스 권한을 가질 수 있기 때문에 기기에 저장된 사진, 주소록, 캘린더 정보들을 사용할 수 있다.
- 단점
- 다른 방식에 비해 높은 기술력이 필요하여 시간과 비용이 많이 든다.
- PC로는 접속이 불가능하다.
- 수정사항이 발생할 시 스토어를 통한 업데이트가 필요해 반영이 늦을 수 있다.
- (크로스플랫폼 개발툴을 이용하지 않는다면)각각의 모바일 OS별로 앱을 개발해줘야 하기 때문에 그에 따른 언어와 API를 다룰 줄 알아야 한다.
참고 및 출처
