[코드스테이츠 PMB 11기]네이티브앱, 모바일 웹앱, 하이브리드앱 비교분석하기_W7D2

 

앱의 4가지 형태

출처:UXstory

우리가 사용하는 애플리케이션은 똑같아 보이지만 놀랍게도 4가지로 구분할 수 있다.

개발 방법이나 실행 방법에 따라 네이티브 앱(NATIVE APP), 모바일 웹(MOBILE WEB), 모바일 웹앱(MOBILE WEB APP), 하이브리드 앱(HYBRID APP)으로 구분이 된다. 이번 포스팅에서는 각 앱의 형태를 비교해보고 어떤 상황에서 쓰면 좋을지까지 알아보려 한다.

출처: 에이콘아카데미 공식블로그

 

네이티브 앱(NATIVE APP)

우리가 앱스토어에서 다운로드하는 '애플리케이션'을 뜻한다. 모바일 기기에 최적화된 언어로 개발된 앱으로 안드로이드(이용 언어 Java, Kotlin), iOS(이용 언어 Swift, Objective-C)에서 제공하는 SDK를 사용해 개발한다. 네이티브는 주로 게임, 지도, 차트를 사용하는 증권사 앱 및 대량의 이미지를 로딩하는 카메라 앱 등에 사용된다. 

장점	-디바이스 전체 액세스 권한을 가질 수 있어 기기의 기능(카메라, GPS, 주소록 등)을 활용 가능하다. -네이티브의 api를 통해 높은 사양의 그래픽과 성능을 자랑하면서도 구동 속도가 빨라 성능이 웹앱, 하이브리 앱에 비해 가장 높다. -어플 간 확장성이 높아 기본 앱에 쉽게 접근이 가능하다.
단점	-높은 수준의 기술력이 필요하며, 각기의 모바일 운영체제(OS)별로 앱을 개발해야하기 때문에 개발 기간이나 비용이 많이 든다. -앱 개발 후에도 지속적인 유지보수 때마다 플랫폼 별로 작업해야 한다. -업데이트시 마다 앱스토어를 통해 심사를 요청하고 승인 후 업데이트가 진행되 배포속도가 느릴 수 있다. -하이브리드 앱에 비해 용량이 크다.

예시) 유튜브, 카카오톡, 인스타그램, 페이스북 등

출처: 코드크레인

 

언제 사용할까?
-3D 게임이나 애니메이션 제작할 때
-어떤 장치의 특별한 기능을 사용하고 싶을 때
-기능 위주의 앱 제작 시 높은 성능을 정확히 제공하고 싶을 때

 

모바일 웹

PC용 사이트와 별개로 모바일 브라우저에 맞춰 표현한 사이트를 의미한다. 모바일 스크린 크기에 맞춰 자동으로 웹사이트가 줄어드는 반응형 웹이나 모바일용으로 별도의 url이 존재하는 경우도 이에 속한다. 네이버 같은 포털 사이트를 스마트폰으로 접속하면 URL 주소가 m.naver.com 표시되는데 PC용 웹사이트와 모바일용 웹사이트 두 가지 버전의 웹사이트가 존재한다는 것을 확인할 수 있다.

장점	-앱을 설치할 필요없이 모든 모바일 기기에서 빠르게 접근이 가능하다. -하나의 모바일 웹사이트로 여러 기기에서 접속 가능하다.(플랫폼에 독립적) -업데이트가 용이하다. -적은 비용과 시간으로 개발 가능하며 상대적으로 유지보수가 수월하다. -검색엔진에 노출돼 접근성이 좋다.
단점	-접속할 때마다 모든 데이터를 새로 받아야해 실행 속도가 느리다. -UI 구현에 제약이 있다. -기기의 하드웨어 기능(카메라, GPS, 주소록 등)을 사용할 수 없다. -url이나 검색을 통해 접속해야 한다. -인터넷 네트워크 상태에 영향을 받는다.

예시) 네이버, 다음, 구글 등의 모바일 웹

출처: 코드크레인

언제 사용할까?
-적은 비용과 시간으로 개발할 때

 

모바일 웹앱(MOBILE WEB APP)

모바일 웹과 네이티브 앱의 장점을 합쳐 모바일 웹과 근본적인 차이는 없지만 겉모습과 구동방식을 앱처럼 꾸며놓아 실제로는 웹 방식이지만 사용자는 마치 앱을 사용하는 것 같은 착각이 들 수 있다. 웹앱도 모바일 웹처럼 일반적인 웹 기술로 개발되고 모바일에서 실행되지만 풀 브라우저 방식이 아닌 단일 페이지 방식으로 속도가 빠르다.

장단점은 모바일 웹과 동일하나 아래 색을 칠한 부분은 모바일 웹과 다른 차이를 가지고 있다.

장점	-앱을 설치할 필요없이 모든 모바일 기기에서 빠르게 접근이 가능하다. -하나의 모바일 웹사이트로 여러 기기에서 접속 가능하다.(플랫폼에 독립적) -업데이트가 용이하다. -적은 비용과 시간으로 개발 가능하며 상대적으로 유지보수가 수월하다. -검색엔진에 노출돼 접근성이 좋다. -사용자에게 네이티브 앱과 같은 UX 제공 -풀 브라우저 방식이 아닌 단일 페이지 방식(SPA)으로 속도가 빠르다.
단점	-접속할 때마다 모든 데이터를 새로 받아야해 실행 속도가 느리다. -UI 구현에 제약이 있다. -기기의 하드웨어 기능(카메라, GPS, 주소록 등)을 사용할 수 없다. -url이나 검색을 통해 접속해야 한다. -인터넷 네트워크 상태에 영향을 받는다.

예시)조선비즈 웹앱(UI를 네이티브앱처럼 구성했다)

출처: 코드스테이츠

언제 사용할까?
-적은 비용과 시간으로 개발할 때
-사용자에게 네이티브 앱의 UX를 제공하고 싶을 때

 

 하이브리드 앱(HYBRID APP) 

겉으로는 네이티브 앱과 동일하게 보이지만 실제로는 웹뷰(web view)를 띄워 웹을 실행시키는 형태로 구성된 앱이다. 최초에 앱스토어를 통해 다운로드하여 실행시켜야 하지만 앱이 구동되고 나면 정해진 웹페이지를 불러온다. 네이티브 앱과 웹앱을 장점을 합쳐서 만들어진 앱이다. 

 

장점	-웹 개발 기술로 앱 개발을 할 수 있다. -네이티브 API와 브라우저 API를 모두 이용 가능해 다양한 개발이 가능하다. -한번의 개발로 다수의 플랫폼에 대응할 수 있다. -유지보수가 편하고 사용자가 업데이트할 필요가 없다 -개발비용과 시간 소요가 네이티브에 비해 적다. -앱 용량이 비교적 가볍다.
단점	-웹뷰에서 앱을 실행하기에 앱의 성능이 곧 브라우저의 성능이다. -네이티브 앱보다 동적인 요소의 구현이 어렵다. -네트워크 환경과 웹사이트의 용량에 따라 속도가 느려질 수 있다. -네이티브 기능에 접근하기 위해선 결국 네이티브 개발 지식이 필요하다.

예시) 네이버, 크롬, 다음

출처: 코드크레인

언제 사용할까?
-다양한 플랫폼을 통한 사용자층이 넓을 때
-단기간에 적은 비용으로 개발하며 동시에 네이티브의 기능도 필요할 때
-웹 개발에 익숙하고 빠른 기간 내에 앱을 구축하고 싶을 때

 

 

어떤 형태의 앱을 사용할까

앱의 형태별로 장단점이 존재하고 개발상황, 리소스 앱의 목적에 따라 적절하게 선택할 필요가 있어보인다.

내가 PM이 되었을 때 프로덕트를 어떤 형태의 앱으로 만들지 표로 정리해보았다.

앱의 형태	선정 이유
네이티브 앱	기능 위주의 앱을 제작하거나 충분한 리소스(시간과 비용)가 있을 때 선택할 것이다. 디바이스의 기능(카메라, GPS, 주소록 등)을 활용할 수 있는 지도 앱 또는 카메라 앱, 성능과 퍼포먼스가 중요한 게임등을 개발할 수 있기 때문이다.
모바일 웹/웹앱	디바이스의 기능이 없어도 사용에 문제가 없고 업데이트가 잦으며 리소스가 제한적일 때 선택할 것이다. 또한 플랫폼의 제약 없이 모바일과 웹에서 서비스를 제공하고 싶을때도 고려할 것이다.
하이브리드 앱	단기간에 적은 비용으로 개발하며 동시에 디바이스의 기능도 어느정도 이용하고 싶을 때 선택할 것이다. 또한 앱설치를 통한 충성고객을 확보하고 리텐션율을 높이고 싶을때도 고려할 것이다.

---

참고 : 

https://www.hanl.tech/blog/native-vs-hybrid-vs-pwa/

네이티브 앱(Native App) vs 하이브리드 앱(Hybrid App) vs 프로그레시브 웹 앱(PWA) – 정의와 장단점 - 하

https://m.blog.naver.com/acornedu/221012420292

[모바일] 네이티브앱 vs 모바일웹앱 vs 하이브리드앱