15 화면설계서 - 4편
네이티브와 하이브리드 그리고 모바일웹
요즘 많은 서비스가 모바일 퍼스트(Mobile First)를 지향합니다. 모바일 버전을 먼저 만들어 런칭 후 PC 버전을 만들기도 하고, 모바일 버전을 만들고 PC 버전은 App.에 대한 소개 페이지 정도로만 사용하기도 합니다. 세가지 종류의 모바일 버전이 있는데 각각 장단점을 지닙니다. 어떤 서비스 성격(게임, 커머스, 미디어 등)인지, 어떤 개발 환경(네이티브 앱 개발자 여부)인지에 따라 기획하기 전에 버전을 선택해야 하며, 그 버전으로 고려된 서비스 기획을 하게 됩니다.
각 버전의 특징에 대해 표로 작성하고 싶은데 아직은 지원하지 않는 편집 기능이라 또 주저리주저리 나열하겠습니다.
1. 네이티브 앱(Native App.)
저의 폰에 설치돼 있는 네이티브 앱을 예로 들면 스타벅스, 카카오톡, 멜론, 브런치, 배틀 그라운드, 토스, 하나은행 등입니다.
1) 장점: iOS 또는 안드로이드 OS 기반의 API로 개발 가능하여 속도가 빠르고, 안정적이며 동적인 효과 구현이 가장 자유롭습니다. 웹 기반일 때보다 좀 더 복잡하고 세밀한 기능들을 깔끔하게 구현할 수 있습니다.
유저들은 각 기능들이 부드럽고 유연하면서도 빠르게 반응하는 것을 인지하게 됩니다.
2) 단점: iOS개발자와 안드로이드 개발자가 각각 두 개의 버전으로 개발해야 하는 만큼 비용과 시간 소요가 가장 많이 듭니다. 앱 오픈시뿐 아니라 수정 사항이나 추가 개발 사항이 있을 경우 앱스토어에 심사 요청하여 승인 후 유저들이 업데이트를 해야 반영된 버전을 사용할 수 있습니다. 하이브리드 앱에 비해 앱의 용량이 더 클 수밖에 없습니다.
2. 하이브리드 앱(Hybrid App.)
저의 폰에 설치돼 있는 하이브리드 앱은 크롬, 네이버, yes24, 11번가 등입니다.
1) 장점: 앱 안에 웹페이지를 불러오는 방식이라 웹상에 수정 사항이 있는 경우 업데이트 이슈가 없습니다.
iOS나 안드로이드 버전 내에서 동일한 웹페이지를 사용할 수 있어 개발 비용 및 시간 소요가 네이티브에 비해 많이 단축되며 앱 용량도 가볍습니다. 폰의 카메라, 푸시, 음성 검색 기능 등을 활용하여 모바일웹 버전에 비해 앱처럼 보여질 수 있습니다.
2) 단점: 네이티브 앱처럼 부드럽거나 유연하지 못 하고, 동적인 요소 구현이 어렵습니다. 네트워크 환경과 웹사이트의 용량에 따라 속도가 느려질 수도 있습니다. 네이티브 영역에 수정 사항이 발생한 경우엔 이 역시 업데이트가 필요하나 네이티브 앱만큼 빈번하진 않습니다.
또 하나의 단점으로 네이티브 앱도 해당하는 부분인데 사용자가 앱을 폰에 다운로드 및 설치해야 서비스 접근이 가능합니다. 요즘엔 유명한 앱이나 본인이 주로 쓰는 앱 외 굳이 다운로드 자체를 하지 않습니다. 아무리 최선을 다해 만들어도 인지 부족으로 많은 앱들이 묻히고 있습니다. 그래서 대규모 형태의 게임 앱이 출시되거나 업데이트 되면 TV/버스/지하철 광고를 통해 아낌없이 엄청난 마케팅 비용을 투자하며 홍보하고 있습니다.
3. 모바일 웹(Mobile Web)
사파리나 크롬같은 브라우저로 검색 또는 URL을 통해 들어가 볼 수 있는 모든 사이트 형태의 서비스입니다.
1) 장점: 개발하는데 있어 위 두 모바일 버전 대비 가장 적은 리소스, 비용 그리고 시간을 투자합니다.
서비스 인지를 위한 마케팅은 필요하나 앱 다운로드 및 설치라는 허들은 없으며, 수정 사항이 발생해도 앱 업데이트 이슈가 없습니다. 반응형 웹으로 제작할 경우 PC/테블릿/모바일 어느 사이즈에서든 대응 가능합니다.
2) 단점: 앱이 아니기 때문에 아이콘 한 번 클릭으로 바로가는 기능이 없어 사용자는 매번 검색을 하거나 URL을 외우고 있거나 즐겨찾기를 통해 서비스를 이용해야 합니다.(그런 면에서 한 번 설치된 앱의 접근성은 매우 높은 편이죠) 네이티브 앱처럼 빠르거나 동적인 요소는 거의 없으며, 폰의 OS에서 제공하는 기능(카메라, 푸시, 위치정보 등)을 활용할 수 없습니다.
세 가지 모바일 버전에 대한 특징을 살펴봤습니다. 왜 모바일 버전의 종류를 먼저 결정하고, 그에 따른 화면 설계에 들어가는지 답변이 되었을 것입니다. 차이를 잘 모르겠다면 위에 예시로 제시한 앱들을 실행해 보길 권장합니다.
네이티브 앱+모바일 웹 또는 하이브리드 앱+모바일 웹으로 된 두 가지 버전과 함께 PC 버전으로 구현합니다.(EX. 네이버, 페이스북, 트위터 등) 스타트 업계에서는 한 가지 버전으로 출시했다가 상황을 보고, 확장하기도 합니다. 참고로 브런치는 네이티브 앱과 PC 버전으로 구현되어 있으며, 모바일웹 브런치 사이트를 방문해 보면 서비스 소개 및 다운로드 유도 링크 위주라는 걸 알 수 있습니다. 외부 SNS에 공유된 브런치 글을 웹상에서 읽기와 댓글까지는 가능하나 글 발행 기능은 없습니다. 브런치처럼 모바일 상에서 글쓰기/편집/수정 등의 기능을 유연하게 제공하기엔 앱이 가장 안정적인 부분도 있지만 (POC를 분산시키지 않으려는) 전략적인 부분도 있을 것입니다.
네이버는 오랫동안 앱에서만 제공하던 '스마트 에디터 3.0' 게시판을 최근 모바일웹 상에도 적용했습니다. 기존 모바일웹용 네이버 게시판 '스마트 에디터 2.0'의 경우 오픈 소스로 제공하는데 외부 서비스에서 활용하기엔 호환 이슈도 많고, 모바일 상에서는 더욱 불안정한 상태라 유저 프론트에서는 사용하는 곳이 거의 없습니다. '스마트 에디터 3.0' 모바일 웹버전(앱 버전도 오픈하면 더 좋겠지요)도 빠른 시일 내에 오픈하여 많은 외부 사이트에서 활용할 수 있기를 바래 봅니다.
점점 모바일에 최적화되고, 모바일 위주의 서비스들이 끊임없이 진화 발전해 가고 있습니다. 어드민(Administrator: 관리자 사이트)은 대부분 PC 버전으로 기획/구축 되나 즉시성과 알람을 위해(EX. 쇼핑몰) 모바일 어드민도 점차 확대 지원하는 곳이 많아지고 있습니다.
이 분야에서 시작하는 단계라면 모바일 버전을 위한 UI/UX 트렌드와 기획하는 학습에 먼저 관심을 가져도 좋겠습니다.
아직 여름이 많이 남았지만 폭염의 끝자락에 와있는 것만으로도 위안이 되는 저녁 날씨입니다.
조금이나마 시원한 풍경을 선물하고 싶어 지난 6월의 제주도를 담았습니다.
참고로 한여름엔 사무실이 피서지입니다.
