어떤 앱으로 만드는 게 좋을까
앱의 4가지 형태별 장단점 [코드스테이츠 PMB 7기]
모바일 서비스를 기획할 때, 어떤 형태의 모바일 앱으로 제작할 것인가를 결정하는 것은 중요하다.
어떤 앱 형태를 선택하느냐에 따라 구현할 수 있는 기능, 비용, 개발에 드는 시간이 달라지기 때문이다.
모바일 앱의 형태로는 크게 4가지 - 네이티브 앱, 웹 앱, 모바일 웹, 하이브리드 앱 - 가 있다.
각 형태의 정의, 예시를 알아보고, 장단점을 비교해보자.
이를 통해 어떤 상황에서, 어떤 앱 형태를 선택하여 개발하는 것이 적합한지 알아보자.
네이티브 앱 = 앱 100
정의
- 모바일 기기에 최적화된 언어로 제작한 앱.
- 각 OS의 네이티브 언어로 개발한 앱.
- Android의 앱은 Java, Kotlin으로, iOS의 앱은 Objective-C, Swift로 개발한다.
예시: 카카오톡(메신저), 스타벅스, 인스타그램
PC에서 실행할 수 없으며, 놀라운 디자인, 사용성을 보인다면 대부분 네이티브 앱이다. 모바일 앱에 집중한 제품이므로, 앱 개발에 비용과 투자를 아끼지 않고 네이티브로 개발했을 것이다.
장점
1. 퀄리티, 퍼포먼스가 좋다. 동적인 효과를 구현하기에 알맞다. 속도가 빠르고, 안정적이다.
2. 스마트폰의 다양한 기능에 대한 접근이 자유롭다. - 카메라, 사진, 주소록, 캘린더, 녹음, 위치 기능 등
3. 높은 사양의 그래픽을 사용해, 다양하고 창의적인 디자인을 입힐 수 있다.
단점
1. 개발 시간, 비용이 많이 든다. - OS마다 개발자를 개별 채용해야 하며, 각 버전을 따로 제작해야 하므로
2. 사용자가 직접 App Store, Play Store에서 업데이트해야 하므로, 배포 속도가 느리다. 개발하면서도 지속적으로 심사를 받고 통과해야 하므로 번거롭다.
3. 사용자의 스마트폰에서 용량을 많이 차지한다.
모바일 웹 = 웹 100 + 브라우저
웹 앱 = 웹 100 + 앱 껍데기
정의
- 모바일 웹: 모바일 화면에 맞게 구성한 웹. 브라우저(Safari, Chrome 등)에 URL을 입력하여 들어가는 웹.
- 웹 앱: 모바일웹과 근본적으로 같지만, 겉모습, 구동 방식을 앱처럼 보이게 한 앱. 앱 껍데기를 쓴 웹.
예시
- 모바일 웹: Chrome에서 보는 네이버, Chrome에서 보는 인스타그램, Chrome에서 보는 노션 등
- 웹 앱: 홈 화면에 추가한 인스타그램
아래는 인스타그램의 Chrome에서 실행한 모바일 웹, 홈 화면에 추가한 웹 앱, Google Play Store에서 다운로드한 네이티브 앱이다. 네이티브 앱에서만 스토리를 올릴 때 다양한 효과(부메랑 등의 영상 효과, 편집 기능, 꾸미기 기능 등)를 사용할 수 있으며, 인스타 라이브를 할 수 있다. 웹 앱, 모바일 웹에서는 스토리로 사진을 올리기만 할 수 있으며(편집 효과 사용 불가), 라이브를 할 수 없다.
인스타그램의 모바일 웹 → 웹 앱 다운로드 팝업 → 앱 서랍 → 웹 앱 → 네이티브 앱장점
1. 개발 시간, 비용이 가장 적다. - Android, iOS를 동시 개발 가능하다. HTML, CSS, JS등 웹 개발 언어만 알아도 충분히 개발 가능하다.
2. 사용자가 앱을 설치할 필요가 없다. 업데이트도 필요 없어 유지, 보수도 용이하다.
3. 반응형으로 제작하여, 모든 기기와 브라우저에서 사용 가능하다. 즉, PC, 태블릿, 모바일 사이즈 모두에서 사용 가능하다.
단점
1. 사용자가 검색, url 입력 등을 통해 들어와야 하므로, depth가 깊다.
2. 기기 접근이 불가능해, 스마트폰 OS에서 제공하는 기능을 활용할 수 없다. - 카메라, 마이크, 푸시 알람 등
3. 속도가 느리고, 퍼포먼스가 안 좋다.
하이브리드 앱 = 일부는 웹 + 일부는 앱
정의
- 웹을 기반으로 앱의 기능을 차용한 형태의 앱
- 앱(패키징) 안에 웹 뷰를 불러오는 방식
- 웹 앱, 네이티브 앱의 장점을 모두 얻기 위한 앱
예시: 카카오톡, 네이버, 크롬, 티몬 등
하이브리드 앱은 웹 구현, 앱 구현의 비율이 정해져 있지 않아서 우리가 사용하는 수많은 앱이 포함된다.
스토어에서 다운로드 받았고, 앱 안에 웹 뷰가 있다면, 하이브리드 앱이라고 할 수 있다.
노션의 경우, 앱을 다운로드 받아서 실행하면 단, 하단 바의 구성을 제외하고 콘텐츠가 유사하게 보이는 것을 통해 웹 뷰가 있는 하이브리드 앱임을 확인할 수 있다.
네이버의 경우, 앱을 다운로드 받아서 실행하면 모바일 웹뷰가 전체적으로 유사하며, 일부 기능의 차이가 있다. 검색 기능을 보면, 모바일 웹에도 마이크 모양이 있지만, 막상 실행하면 앱으로 옮겨간다. 이를 통해 모바일 웹에서보다 하이브리드 앱에서 기기 접근 및 기능 사용 권한이 생긴다는 것을 확인할 수 있다. 또한, 하이브리드 앱에서의 작동이 모바일 웹에서보다 더 부드럽다.
노션의 모바일 웹, 하이브리드 앱 / 네이버의 모바일 웹, 하이브리드 앱장점
네이티브보다,
1. 웹 상의 업데이트가 자동적으로 반영되므로, 웹 부분에 있어서는 사용자가 업데이트 할 필요가 없다.
2. 앱 용량이 비교적 가볍다.
3. 앱과 웹의 API를 모두 사용할 수 있다.
웹 앱 보다,
4. 스마트폰의 기능에 더 많이 접근할 수 있다. (전부는 아니다.) - 위치, 네트워크, 연락처, 파일 등
단점
1. 기기에 접근하기 위해서는 결국 네이티브 앱 개발 지식이 필요하다.
2. 앱의 성능은 네이티브보다 떨어진다.
리소스, 비용에 관하여
하이브리드 앱은 웹 뷰, 사용하는 앱 기능의 정도에 따라 다양한 모습을 보이는 만큼, 리소스, 비용에도 큰 변동이 있다. 물론 대체로 네이티브로 제작할 때 보다는 리소스가 절약되지만,
- 웹 뷰가 대부분을 차지하고 기기 기능에 거의 접근하지 않는 노션의 경우는 리소스가 훨씬 적게 들어간다.
- 웹 뷰 뿐만 아니라, 기기 기능에 접근하여 높은 퍼포먼스를 보이는 네이버의 경우는 역시나 막대한 리소스가 들 것이다.
그래서 어떤 형태의 앱으로 개발할까?
앱의 퍼포먼스, 디바이스 접근 기능이 중요하며, 충분한 리소스, 능력 있는 앱 개발자가 있다면?? 네이티브 앱
1) 기능, 디자인, 사용성이 중요한 경우: 게임 앱, 지도 앱(카카오맵, 네이버 지도), 교통 앱, 카메라 앱
2) 업데이트가 드문 경우: 멤버쉽 앱 (스타벅스, T멤버쉽)
리소스(시간, 비용)가 지극히 제한적이며, 업데이트가 잦은 제품이라면?? 모바일 웹, 웹앱
일부 디바이스 접근 기능이 필요하고, 쉬운 유지, 보수, 업데이트를 위해서는?? 하이브리드 앱
1) 콘텐츠가 지속적으로 업데이트 되는 경우: 포털 앱(네이버, 다음, 구글), 쇼핑 앱(11번가, 쿠팡, 지그재그)
2) 보안이 중요한 경우: 은행 앱, 카드 앱
카카오뱅크는 기존 은행 앱들이 하이브리드 앱으로 개발한 것과 달리 모바일 온리, 빠른 속도, 높은 사용성과 UX를 제공하기 위해 네이티브 앱으로 개발하였으며, 현재 수많은 고객을 만족시키고 있다.
어떠한 형식의 앱으로 만들 것이냐는 그만큼 제품의 특색에 중요한 요소가 될 것이다.
참고한 내용
2. https://blog.bitsrc.io/4-ways-to-build-your-mobile-app-make-the-right-choice-efe079c7c817
