모바일 웹 vs 웹 앱 vs 하이브리드 앱 vs 네이티브 앱 [W7D2_코드스테이츠 PMB 12기]

점차 기술이 고도화 됨에 따라 프로덕트의 형태도 다변화되고 있습니다. 모바일에서 살펴볼 수 있는 앱의 형태도 4가지나 되는데요. 오늘은 앱의 4가지 형태에 대해서 특징과 장단점을 비교해 정리해보려고 합니다. 

 

 

모바일 웹

모바일 사용자들을 고려하여 만든 웹사이트를 의미합니다. 그래서 데스크톱에서 접속 가능한 기존의 웹사이트를 모바일 화면에 맞게 레이아웃을 구현해 놓았습니다. 즉, 반응형 혹은 적응형 작업이 되어 있는 형태입니다. 웹 개발 방식과 동일하게 html, css, Javascript 등을 활용합니다. 보통 URL이 https://m.naver.com처럼 럼 앞에 m.이 붙습니다. 새로운 정보를 지속적으로 제공하는 것이 목적인 블로그, 뉴스 등 업데이트가 지속적으로 발생하는 경우에 많이 사용합니다.

 

 

장점	단점
● 네이티브 앱처럼 설치 없이도 이용 가능 ● OS 상관없이 다양한 웹 브라우저 통해 접근 가능 ● OS 승인 과정 없이도 배포가 가능하므로 업데이트나 유지보수에 용이함 ● 네이티브, 하이브리드 앱에 비해 개발에 적은 리소스가 소요됨	● 모바일 기기에서 사용 가능한 하드웨어적 기능 활용 불가 ● 네이버, 크롬 등의 별도 검색 엔진이나 URL 통해서 접속해야 함 ● OS나 브라우저게 제공하는 공통 기능만 활용 가능 →기능 및 성능의 한계 존재 ● 네이티브 앱보다 구동 속도가 떨어짐

 

 

 

웹 앱

속 내용은 모바일 웹과 같으나 겉보기에는, 그 구동방식이 마치 앱인 것처럼 꾸며놓은 앱입니다. 웹 기술로 네이티브 앱을 흉내냈기 때문에 실제로는 모바일 웹에서처럼 브라우저를 통해 접근해야 하지만 UX/UI는 앱과 같아서 사용자가 사용할 때 네이티브 앱과 유사한 동작이나 화면 전환 효과등을 경험할 수 있습니다. 즉, 모바일 웹고 네이티브 앱을 결합한 것입니다. 그래서 모바일 웹의 특징을 가지면서 네이티브 앱의 장점도 갖습니다. 모바일 웹처럼 HTML, CSS< Javascript, JSP, PHP, ASP, ASP NET등 일반적으로 웹을 만들 때 사용하는 기술들로 개발합니다.

 

장단점은 아래 파란색으로 표시한 부분 제외하고 위의 모바일 웹과 거의 비슷합니다. 

장점	단점
● 모바일 웹보다는 실행 속도가 빠름 ● 네이티브 앱처럼 설치 없이도 이용 가능 ● OS 상관없이 다양한 웹 브라우저 통해 접근 가능 ● OS 승인 과정 없이도 배포가 가능→ 업데이트나 유지보수에 용이함 ● 네이티브, 하이브리드 앱에 비해 개발에 적은 리소스가 소요됨	● 모바일 기기에서 사용 가능한 하드웨어적 기능 활용 불가 ● 네이버, 크롬 등의 별도 검색 엔진이나 URL 통해서 접속해야 함 ● OS나 브라우저게 제공하는 공통 기능만 활용 가능 →기능 및 성능의 한계 존재 ● 네이티브 앱보다 구동 속도가 떨어짐

 

 

 

네이티브 앱

iOS, 안드로이드 등 각 OS에 최적화된 프로그래밍 언어를 사용해서 개발된 앱입니다. 때문에 각각의 스마트폰 운영체제에 최적화 되어 있습니다. 보통 iOS는 Objective-C나 Swift로, 안드로이드는 Java나 Kotlin으로 개발하고 있다고 합니다.

 

장점	단점
● 높은 사양의 그래픽이나 동적인 효과 구현 가능 ● 빠른 속도와 안정성으로 높은 퍼포먼스 ● OS가 허용하는 모든 기능(카메라, 센서, 블루투스 등) 활용 가능 ● 더 많은 디바이스 접근 권한	● 각 OS에 맞는 프로그래밍 언어로 개발 필요 →개발, 유지보수에 더 많은 리소스(인력, 시간, 비용) 필요 ● 업데이트를 하려면 매번 Play Store, 앱스토어의 심사를 거쳐야 함 ● 사용자가 업데이트를 해야 업데이트 된 버전을 제공할 수 있음 ● 다른 앱 종류에 비해 용량이 큰 편

 

 

 

하이브리드 앱

기본적인 형태는 네이티브 앱 형태이되, 앱 안에 웹사이트를 띄울 수 있도록 사파리나 크롬 같이 웹사이트를 보여줄 수 있는 브라우저 창을 삽입하여 제공하는 앱을 의미합니다. 이 창을 바로 웹 뷰(Web view)라고 부릅니다. 그래서 껍데기만 앱이고 내용물은 앱이라고 볼 수 있다고 합니다. 기본 기능은 HTML등의 웹 문서로 구현하고, 최종 앱 배포에 필요한 패키징은 OS별로 구현하며 대표적으로 네이버, 구글 등의 검색 플랫폼에 활용된다고 합니다.

 

장점	단점
● 웹뷰 영역에서의 유지보수나 업데이트가 용이함(웹 사이트만 수정하면 심사 잆이 바로 반영 가능하므로) ● 네이티브 앱에 비해 비교적 가벼운 앱 용량 ● 웹 페이지는 안드로이드와 iOS 모두 활용 가능 → 개발 비용과 시간이 네이티브 앱에 비해 적음 ● 모바일 기기의 하드웨어에서 제공하는 API와 브라우저 API 모두 사용 가능 → 다양한 개발이 가능함	● 네이티브 앱보다는 제한적인 기능으로, 동적인 요소의 구현이나 디자인 부분에 취약함(ex. GPS가 원활히 동작 x) ● 개발 시 원하는 UI를 하나부터 열까지 모두 구성해야 함 ● 네이티브 앱이 웹앱 혹은 모바일 웹을 구동시키는 것 →네트워크 환경과 웹사이트 용량, 브라우저 성능에 따라 속도가 느려질 수 있음 ● 업데이트 시 심사 과정 존재 ● 네이티브 개발 지식 필요

 

 

 

만약 내가 PM이라면

앱의 형태를 정할 수 있는 권한이 생긴다면 어떤 기준으로 선정할 수 있을까요? 개발 목적과 리소스(시간, 인력) 부분에 대한 고민을 중심적으로 해볼 것 같습니다. 먼저, 현재 투입 가능한 리소스를 살펴볼 것 같습니다. 그 다음에는 왜 만드는 것이고, 정말 개발이 필요한지, 완성도는 어느 정도여야 하는지 그 목적과 중요성에 대해서 고민을 하게 될 것 같네요. 정말 중요하다면 지금 투입 가능한 리소스 중 최대한의 범위를 고려해볼 것이고, 그렇게까지 중요하지 않다면 개발 리소스를 줄일 수 있는 방법을 모색해볼 것 같습니다. 현재 리소스가 부족하지만 정말 중요한 부분인 경우에는 구현이 가능하도록 외주나 추가적인 인력 고용도 생각해볼 것 같습니다.

 

간단하게는 다음과 같은 내용을 살펴보고 고려할 것 같네요 :)

고려사항	모바일 웹	웹앱	네이티브 앱	하이브리드 앱
프로덕트를 이용함에 있어서 모바일 기기의 기능(카메라 등) 사용이 필요/중요한가?			√	√
높은 사양의 그래픽이나 동적인 효과 등이 중요한가?			√	√
잦은 업데이트가 필요한가?	√	√		√
새로운 서비스를 빠르게 개발해서 검증해야 하는 경우?	√	√

 

 

 

---

참고

https://jhxxn919.tistory.com/27?category=990360 

[W7D2] 모바일 앱 유형 정리

https://brunch.co.kr/@oeun33/33

창업 경험의 회고로 알아보는 앱의 4가지 형태

https://brunch.co.kr/@rlatjrwn9086/61

모바일웹 / 웹앱 / 하이브리드앱 / 네이티브앱  

https://aboveimagine.tistory.com/81#:~:text=%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%9B%B9%EC%9D%80%20%EB%A7%90%EA%B7%B8%EB%8C%80%EB%A1%9C,%EC%9D%B4%EA%B3%A0%20%EB%82%B4%EC%9A%A9%EB%AC%BC%EC%9D%80%20%EC%9B%B9%EC%9D%B4%EB%8B%A4.

모바일 웹 vs 웹 앱 차이점 feat. 네이티브앱, 하이브리드앱