하늘아래 같은 색조 없듯
앱에도 다양한 형태가 있느니라
앱의 다양한 형태 알아보기 #코드스테이츠 PMB 8기
조금씩 앱의 세계에 대해 알아가기 전, 내 눈에 모든 서비스는 앱 또는 웹으로 양분할되는 것으로 보였다. PC로 보는 것은 웹, 핸드폰에 다운로드 받아야하는 것은 앱. 분명 껍데기만 보면 다 같은 앱 같은데..? 웹도 앱도 프레임 워크나 개발 방식에 따라 다른 형태를 취한다는 얘기, 그래서 처음 들었을 때는 다소 생소한 내용이었다.
(나는 합성을 하려고 블로깅을 하는가)하지만 하늘 아래 같은 색조 없고 색깔의 미세한 차이가 오늘의 메이크업을 완성하듯이, 기획자로서 어떤 상황에서 어떤 앱/웹의 형식을 가져가야 할지 결정하는 것은 매우 중요한 일이다. 그래서 이번 글에서는 앱의 여러 형태를 살펴보고, 개발 단계에서 어떤 기준으로 선정하면 좋을지 탐구해보려고 한다.
어떤 서비스를 개발할 때, 고려하는 선택지인 모바일 웹/웹 앱, 네이티브 앱, 하이브리드 앱, 크로스플랫폼 앱, 프로그레시브 웹 앱의 개념을 알아보고, 각 특징과 장단점에 대해 알아보자. 배우는 입장에서 조금 틀린 이야기가 있을 수 있습니다, 댓글로 의견 편하게 나눠주세요 : >
모바일 웹 / 웹 앱
모바일 웹
우리에게 정말 익숙한 모바일 웹. 모바일 웹은 모바일 기기에서 사용하기 편한 방식으로 개발된 '웹 페이지' 기반 서비스를 의미한다. 크롬, 사파리 같은 웹 브라우저에서 동작한다.
웹 앱
웹앱은 '웹이지만, 모바일 화면에 맞게 앱처럼 구성한 웹'이다. 모바일 웹과 근본적으로 차이가 없지만, 보이는 화면 상 앱처럼 보인다는 것이 특징이다. 사용자가 앱을 설치할 필요가 없고, 따라서 수정 사항이 발생해도 따로 앱 업데이트를 통한 배포 없이 바로 수정이 가능하다.
다만 단점이라면, 앱이 아니므로 사용자가 검색이나 url을 통해 들어와야 한다. 또한, 핸드폰의 OS에서 제공하는 기능(카메라, 마이크, 푸시 알림 등)을 웹 앱 내에서 사용할 수 없다.
네이버 웹 앱 사례
네이버 PC 화면 / MO 화면 / App 캡처 화면네이버 예시로 살펴보자. PC(www.naver.com)와 MO(m.naver.com) 웹을 분리해서 사용하고 있는데, PC 화면을 만약 모바일 화면에 그대로 띄운다면 작은 화면이 너무 복잡해 보일 것이다. 그런데 MO화면과 App을 비교해보면 조금 다르지만 비슷하게 느껴질 것이다. 모바일 사이트도 앱처럼 보인다. 모바일에서도 네이버 앱을 쓰는 것과 비슷한 경험을 줄 수 있도록 '웹 앱' 형식으로 만들었다. 하지만, 위에서 언급했던 것처럼, 네이버 웹 앱에서는 OS에서 제공하는 기본 기능을 사용할 수 없다.
네이버 웹 앱에서 음성/렌즈 등 카메라나 마이크를 사용하는 기능을 누르면 앱을 설치하라는 화면이 노출되거나, 이미 설치되어 있는 경우에는 네이버 앱으로 전환된다.
펫프렌즈 웹 앱 사례
웹 화면이 크기에 따라 양쪽에 배너/검색창이 노출된다.반려동물 커머스 앱 '펫프렌즈'도 앱 외에 웹 앱 사이트를 운영하고 있다. 특이한 점은, 웹 앱 형식인데 PC 화면으로 볼 때 양쪽 여백을 검색창, 배너 등으로 소비자가 탐색할 수 있는 영역으로 이용했다.
PC로 열면 양쪽 여백이 보이는 페이지 예시종종 PC에 최적화된 사이트 없이 모바일 사이트만 개발해 운영 중인 서비스의 경우, PC로 열면 페이지 양쪽의 하얀 여백이 보일 때가 있다. (프레제뉴 예시) 하얀 여백을 보면서 조금은 심심하다 생각했었는데, 펫프렌즈는 이 여백을 심미적으로도, 사용성 측면에서도 적절하게 잘 사용한 예시인 것 같다.
네이티브 앱
네이티브 앱은 모바일 기기에 최적화된 언어로 개발된 앱이다. 각 OS별로 네이티브 언어가 존재하고, 그 언어로 만들어진 앱을 말한다(iOS - Swift/Obj-C, 안드로이드 Java/Kotlin). 바로 수정이 가능한 웹 앱이나, 서버 배포만으로 업데이트가 가능한 하이브리드 앱과 달리, 각 앱스토어에 심사 요청을 해야 업데이트 반영 버전의 배포가 가능하다.
네이티브 앱의 단점
간단한 레이아웃과 기능을 만드는 과정이 상당히 복잡하고, 각 언어를 사용할 수 있는 개발자를 채용해야 하기 때문에 이러한 이유들로 개발 시간/비용이 다른 앱 개발 방식에 비해 부담이 될 수 있다. 스마트폰 출시 초기인 5~10년 전만 해도 하이브리드 앱의 성능이 좋지 않아 비용이 들어도 네이티브로 제작해야 했단다. 그리고 간단한 레이아웃/기능 만드는 과정이 하이브리드 앱과 비교하면 상당히 복잡하고 시간이 걸린다.
네이티브 앱의 장점
그럼에도 네이티브를 사용하는 이유가 뭘까? 바로 '사용성 최적화'이다. 안드로이드, iOS 기반의 API로 개발하기 때문에 안정성, 보안, 그리고 동적 효과 구현에 장점이 있다. 스마트폰의 다양한 기능 접근이 자유롭기 때문에 어플 간 확장성도 높다고 할 수 있다. 보통 내부 개발팀이 꾸려진 스타트업에서 비용과 시간이 더 들더라도 '사용성 최적화'를 위해 네이티브 앱 방식을 선택한다고 한다.
하이브리드 앱
특정한 목표 달성을 위해 두 개 이상의 요소가 합쳐짐, Hybrid라는 이름에서도 알 수 있듯이 하이브리드앱은 '네이티브 앱의 구조'에 '일부 기능을 웹으로 구현해' 개발하는 방식이다. 웹의 기능을 쉽게 연결할 수 있는 특징이 있다. 하이브리드 앱도 네이티브 앱처럼 앱스토어를 통해 설치해야 한다. 하지만, 앱이 구동되고 나면 따로 심사 없이도 서버 배포만으로도 기능 추가가 가능하다.
(좌) 네이버 앱, (우) 네이버 모바일웹리서치를 해보면 대표적인 하이브리드 앱의 예시를 포털앱으로 들고 있는 경우가 많다. 이미지를 보면, 동시간 대에 App과 Web에 노출되는 콘텐츠가 동일한 것을 알 수 있다. 앱 내에서 웹 페이지 화면을 불러오는 것이다.
다만 여기서 궁금한 점이 하나 생기는데... 서치 해보니 다들 한 앱에 대해 네이티브/하이브리드라고 다르게 말하고 있는 것이었다! 어떤 사람은 "인스타그램이 하이브리드 앱이다"라고 말하는데, "아니다 네이티브인데 일부 하이브리드 앱 방식을 사용한 것이다" 말한다.
그래서 나는 네이버가 정말 하이브리드 앱인지 궁금해진다. OS에서 제공하는 다양한 기본 기능을 잘 사용할 수 있고, 네이버라는 IT 대기업에서 사용성 최적화에 대한 고민을 안 할 수 없을 텐데, 게다가 pay, QR 등 보안, 금융 정보가 다 들어가 있는 이 앱이 정말 하이브리드 앱일까? 네이티브앱에 일부분만 웹뷰 방식을 차용한 건 아닐지, 그리고 앱의 특성을 하이브리드다! 네이티브다! 라고 딱딱 나눌 수 있는 것인지부터 궁금해진다.
개발 비용 / 시간 절감
하이브리드앱은 앱 안에 웹페이지를 불러오는 방식이라, 개발 비용이나 시간 소요가 네이티브에 비해 적다(서비스 따라 다르겠지만, 보통 네이티브 앱 방식의 1/5 정도 비용). 그래서 네이티브 앱들도 일부 화면들은 하이브리드에서 사용하는 웹뷰 방식으로 제작해 개발 비용을 절감한다고 한다. 개발 시간 절감이라는 장점 때문에, 최근에는 내부 개발팀 + 충분한 자본이 있어도 시장 출시 속도를 위해 하이브리드 앱 개발 방식을 사용하기도 한다. 용량도 비교적 가볍다!
인터넷 쇼핑몰 프롬비기닝 (좌) App (우) Web간단한 모바일 웹 페이지를 앱으로 패키징해 앱스토어에 출시하는 것도 하이브리드 앱이라고 부른다. 보통 인터넷 쇼핑몰 앱이 이런 방식을 사용한다고 들어, 쇼핑몰 앱 몇 가지를 들어가 보았다. 웹 화면과 앱 화면이 동일한 모습을 볼 수 있다.
그리고 앱스토어에서 해당 쇼핑몰 앱 업데이트 버전 기록을 살펴보니 내역이 정~말 적고 '앱 아이콘 변경', '아이폰X 화면 대응' 등의 내용에 한정된 것을 볼 수 있었다. 웹뷰를 불러오는 것이니 '네이티브 앱의 구조'= 패키징만을 위한 업데이트가 이뤄진 것이 아닐까 추측해본다.
크로스 플랫폼
크로스 플랫폼은 한 가지 개발 언어/프레임워크로 iOS/안드로이드 양쪽 앱스토어에 출시할 수 있는 개발 방식이다. 앞서 네이티브 앱의 경우 각 OS에 맞는 언어로 개발해야 해서 비용/시간이라는 문제가 있었는데, 이에 대안으로 등장한 방식이 바로 크로스 플랫폼 개발 방식이다!
Flutter를 사용 과정 간단한 구조도크로스 플랫폼 개발 방식을 택하게 되면, React Native(페이스북), Flutter(플러터 -구글) 주로 이 두 프레임워크 중 하나를 선택하게 되는 것 같다. 아직 개발 개발 지식에 대해 먼지만큼 알고 있는 내가 이해한 바로는 리액트 네이티브/플러터에서 지정한 javascript로 개발을 하고 > 해당 프레임워크를 거치면 > iOS, 안드로이드 네이티브 언어로 변환해주어 > 앱 개발이 한 번에 가능하다. 구조도 이미지 출처
한 번의 코드 작성으로 두 OS 모두 개발이 가능하고, 네이티브와 가까운 앱을 제작할 수 있어 수요가 커지는 상황으로 보인다. 그리고 네이티브 앱 방식에 비해 언어/기술이 쉬운? 편이라고 한다. 다만, 하이브리드앱과 비교해 개발 비용이 비싼 편이고, 세밀한 디자인 적용은 조금 어려운 편이다. 리액트 네이티브나 플러터로 제작된 앱은 디자인이 아쉬운 경우가 많은 편이라고 한다.
PWA (Progressive Web App)
내가 이해한 바로.. 프로그레시브 웹 앱, PWA는 진화된 웹 앱의 느낌이다. 첫 실행은 웹 브라우저이지만, 브라우저 내에서 아이콘을 통해 홈 화면에 추가하면 하나의 앱처럼 작동한다.
푸시 알림 등 네이티브 앱에서 사용 가능한 OS의 기본 기능도 일부 사용 가능하다고 한다.(물론 iOS는 푸시 메시지가 불가능하다던가 하는 제약사항이 아직까지는 더 많아 보인다.) 웹에 일반 모바일 App과 최대한 비슷한 경험을 주고자 만들어진 개발 방법론이지만, 아직까지는 제약 사항이 많아 향상된 경험을 일반 사용자가 느끼기엔 조금 어렵다- 라는 의견이 종종 보였다. 아는 개발자 친구는 "PWA는 구글이 밀어줬지만, 애플이 도와주지 않아 망한 것 같다"라는 얘기를 해줬다. 아마 iOS 환경에서 서비스 구현의 한계가 많은 게 아닐까?
PWA 적용 후기 및 장단점에 대한 글/이미지를 공유한다.
요 블로그에서 예시 이미지를 가져왔는데, 내 글 100번 읽는 것보다, 이 글을 읽는 것이 PWA의 장단점 이해에 좋으니 읽어보면 좋을 것 같다. 나는 요 글을 읽고 PWA에 대해 쉽고 직관적으로 이해가 가능했다 : >
직접 해보자 feat. 또 한 번의 과몰입
이전 SQL 실습 글에서 직구 쇼핑몰 마케터였던 나, 오늘은 다른 과몰입으로 돌아왔다. 제품 기획 과정의 앱 형태 선정, 개발 단계 적용을 직접 고민해 보기 위해 "앱 제작 대행사"에 찾아온 클라이언트들에게 상담을 해주는 상상을 해보기로 한다. 앱 형태, 기술 스택 선정 과정은 이보다 훨씬 복잡하고 다양한 고려 요인들이 있겠지만, 이 글에서는 정말 간단하게 진행해보기로 한다!
패션 커머스 회사에서 새로 SNS 앱을 만들고 싶어 한다❗
타겟 페르소나는 패션에 관심이 많고, 디자인, 독립출판 등에 관심이 많은 20대 중후반~30대 여성이다. 모기업의 자본 상황이 좋은 편이라 개발 비용보다는 완성도에 치중하고 싶어 한다. 다만, 초반 사용자를 모으기 위한 방안으로, 웹 사이트를 함께 서비스하고 싶어 한다. 앱 설치를 하지 않아도 서비스에 대해 바로 볼 수 있게 하면 호기심을 앱 설치로 이어지게 할 수 있을 거라 얘기한다.
클라이언트와 이야기해보니, 네이티브 앱 개발에 큰 문제가 없어 보인다! "혹시 개발 예산이 어느 정도인가요?" 묻자 "대충 견적 보고 왔는데, 그건 문제가 안된다"는 쿨한 답변이 돌아왔다. 모기업 자본이 탄탄하고, 내부 개발팀에 (설정 충돌... 그럼 왜 나한테 상담하러 왔지?ㅎㅎㅎ) OS별로 앱을 개발하는데 인력도 충분하다고 한다. 고용성, 코칭 가능성, 스택의 신뢰성 등을 다 따져봐도, 지금 네이티브 앱 개발에 큰 어려움이 없어 보인다. 나는 네이티브 앱 형태로 개발할 것을 추천했다.
클라이언트가 묻는다. "저기.. 제가 크로스 플랫폼이란 걸 들어봤는데요? 그게 시간을 아끼기에 좀 좋은 방법이라던데?" 크로스 플랫폼이 OS 마다 앱을 개발해야 하는 상황에 속도 줄이기에 좋긴 하겠다만, "디자인 감도가 높은 사람들이 사용할 앱"을 만드려고 한다면 크로스 플랫폼 개발 환경은 디자인적 완성도가 떨어지는 한계가 아직까지 있다고 조언해주었다.
그리고 SNS인 만큼, 카메라, 마이크 등 OS의 기본 기능을 써야 할 일이 많을 테니, 안정성이 좋고 OS 기본 기능 확장이 용이한 네이티브 앱 개발을 한번 더 추천한다 ^-^ "혹시 론칭을 빨리 당겨야 하는 상황이세요?" 묻자 맞다는 대답이 돌아온다. 나는 네이티브 앱 일부에 웹뷰를 적용하는 방식도 있고, 그런 방식으로 조금 시간을 단축할 수 있다고 말해주었다.
앗 그리고 웹을 통해 앱에 대한 기대감을 심어주고, 앱과 동일한 경험을 주고 싶다 했으니, 모바일 웹은 앱 웹 형식으로 개발하는 것이 좋을 거 같다고도 조언한다. 물론 카메라 등 기본 기능을 사용하긴 힘들겠지만, 앱의 감성과 콘텐츠를 보여줄 수 있는 용도로 (인스타그램 웹을 레퍼런스로 들어주었다) 서비스하면 좋을 거 같았다.
- 클라이언트는 만족하며 상담비를 내고 돌아갔다 상담 끝 -
써놓고 보니
클라이언트는 만족하고 상담비를 내고 돌아갔다 -라고 써놓고 보니 이렇게 돈을 벌어도 되는 걸까 하는 생각이 든다. 어쨌든 다양한 앱 형식에 대해 배울 수 있었던 즐거운?! 하루였다. 이게 불편하면 다른 게 나오고, 그 다른 것의 불편함을 해소하기 위해 이것 + 저것 의 장점만 모이기도 하고. 진화하는 생물 같기도 했다. 이런 점이 불편하니까 A를 만들자! 해서 A가 뚝딱 나오진 않았을 텐데, 엄청난 시행착오들과 함께 만들어졌을 다양한 앱의 형태들. 사용으로 끝나지 않고 계속해서 넥스트 스텝을 위한 시도를 멈추지 않는 개발자들이 대단하게 느껴진다!
+ 최근에 재밌게 보고 있는 개발자님의 인스타툰을 소개한다. 내용 전달 + 그림체 + 내러티브 = 너무 재밌어서 열심히 보고 있다. 추천!
데브 경수(@waterglasstoon)
감사히 참고한 아티클입니다 : )
