모바일웹･웹앱･하이브리드앱･네이티브앱
코드스테이츠PMB12기W7D2
모바일로 서비스를 만나는 방법은 여러가지가 있다. 브라우저로 접속하거나, 스마트폰에 직접 앱을 다운로드하거나. 모바일 웹과 앱의 종류도 다양하다. 프로덕트 기획~배포까지 전 과정을 책임지는 PM은 전략적으로 서비스를 어떤 형태로 구현하는 게 효율적일지 의사결정할 필요가 있다. 오늘은 모바일 웹/앱 형태에 대해 이야기해보고자 한다.
모바일 웹
모바일 웹은 '반응형 웹'과 '적응형 웹'으로 나뉜다.
반응형 웹
반응형 웹은 하나의 템플릿으로 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹이다. 미디어쿼리를 사용해서 해상도, 디바이스 등 특정 화면에 따라 레이아웃을 변경한다. 하나의 템플릿을 사용해 개발이 간편하다는 장점이 있다. 그러나 사용자가 단 하나의 기기만으로 접속하더라도 모든 기기를 위한 CSS를 전부 다운로드해야 하기 때문에 데이터를 낭비하고 로딩시간을 늘린다는 단점을 가진다.
예시: 유튜브
화면 크기에 따라 설정한 비율에 맞춰 이미지와 폰트, 레이아웃이 조정된다.
적응형 웹
모바일, 데스크탑 각각의 디바이스 별로 독립적인 템플릿을 만들고 디바이스에 맞는 페이지를 별도 제작 후 랜딩하는 웹이다. 기존 사이트를 재구축할 필요가 없고 디바이스에 최적화된 성능을 가져올 수 있다. 사용자 기기에 맞는 템플릿 및 CSS만 다운로드하므로 데이터 낭비가 적고 로딩 속도가 빠르다. 단점으로는 각 기기별로 템플릿을 제작해야하므로 개발이 복잡하다.
예시: 네이버
대표적인 예시로 네이버를 들 수 있다. 네이버 데스크탑 웹의 경우 주소가 www.naver.com이고, 모바일 웹의 경우 m.naver.com으로 디바이스에 따라 사용자가 접근할 수 있는 주소를 분리해놓았음을 알 수 있다.
웹앱
웹 기술로 구현한 앱을 이야기한다. HTML,CSS,JS 등 웹표준을 사용해 만들어진 애플리케이션이다. 애플리케이션 개념이지만, 브라우저를 통해 접속하기 때문에 주소창이 존재한다. 장점으로는 네이티브앱과 달리 별도의 설치 없이 브라우저로 접근이 가능하다. 업데이트가 빠르다. 단점으로는 모바일 기기의 카메라 등의 기능을 사용할 수 없다.
예시: 무신사 모바일 웹
하이브리드 앱
네이티브+웹 앱의 기술을 함께 사용하는 앱이다. 콘텐츠 영역을 HTML 기반 웹 앱으로 개발 하되, 패키징 처리를 ios, 안드로이드 플랫폼 안에서 하여 앱 배포를 가능하게 만들었다. 장점으로 웹 기술만으로 개발해서 앱 스토어에 배포할 수 있다. 단점으로 네이티브앱만큼 기능을 제공하지 않고, 3D기능 지원이 취약하다.
예시: 네이버 앱
네이티브 앱
모바일 기기에 직접 다운로드하여 로컬에 저장되는 앱이다. 우리가 일반적으로 설치해서 사용하는 앱. 안드로이드, ios기반 API로 개발하여 속도가 빠르고 안정적이고 고성능 그래픽 처리가 가능하다는 장점이 있다. 특정 플랫폼 별 앱스토어 심사를 통과해야 하기 때문에 업데이트가 늦게 반영된다는 단점이 있다.
예시: 카카오톡, 인스타그램, 트위터 등
내가 만약 신규 커머스 앱 PM이라면?
네이티브 앱을 MVP 단위로 배포한 다음, 점차 기능을 확장시키겠다. PMF를 찾았을 때, 네이티브앱 기반으로 웹앱을 개발할 것이다. 왜냐하면, 웹앱은 운영 개발 비용이 적게 들고 별도의 승인 과정이 필요하지 않아서 업데이트가 쉽다는 장점이 있다. 앱 설치가 번거롭다고 생각하는 이용자들이 브라우저에서도 이용하게 만들고 끝내 네이티브 앱 설치를 유도하기 위해 웹 앱을 개발하겠다.
