모바일 App 유형 파헤치기 (feat. 텀블벅) #하이브리드 앱 _ 코드스테이츠 PMB 11기| W7D2

 스마트폰이 발명된 후 핸드폰의 필수 요소라 해도 과언이 아닌 앱(application)은 새로운 시장을 창조했고, 이제는 필수 불가결한 요소가 되었다. 어떤 사업이든 대부분 앱이나 웹을 적어도 1개 이상 갖고 있으며, 다양한 형태로 우리의 PC와 핸드폰 등에 구현된다.

출처: 모바일 인덱스 / 이코노미스트 2022.03.22 기사 발췌

 가장 최근 발표된 자료에 따르면, 국내 20대들이 한 달동안 1인당 사용하는 앱은 약 40개(평균 39.8개)에 달하며, 이용 시간 또한 147.8시간으로 결코 적은 수치가 아니다. 나 또한 멍 때리는 시간 없이 하루 종일 핸드폰과 PC를 넘나 든다 해도 과언이 아니며, 해당 수치가 오히려 적게 측정되었다고 느껴지기도 한다.

 이렇게 수많은 앱들을 사용하다보면, 가끔 이런 생각이 든다. "얘는 (로딩) 속도가 왜 이렇게 느리지?", "얘는 왜 @@처럼 생기지 않았을까?" 등 유저들은 앱을 사용하며 나름의 앱 평가를 내리게 된다. 나 또한 마찬가지였으며, 이러한 생각은 앱이 속한 분야에 관계없이 적용되었다.

---

 오늘의 학습 내용은 이러한 질문들의 Why에 대한 답을 찾을 수 있는 내용이었다. 모바일에서도 웹이 존재하며, 모바일 웹과 앱(네이티브)의 차이를 알 수 있는 계기였다. 물론 4가지 앱 유형이 헷갈리기도 하고, 하나의 서비스(회사)가 여러 형태의 앱을 운영하고 있기도 하지만! 개념을 배움으로써 어느 정도 가닥을 잡을 수 있었다.

 그래서 오늘의 글 내용은 "App의 유형 비교"이다! 마지막 부분에는 이를 적용하여, 특정 product의 PM이 된다면, 어떤 형태의 app을 구축할 것인지에 대해 생각해 보았다. (참고로 오늘 선정한 product는 어제의 프론트엔드 분석에 이어져 "텀블벅"을 선정했다) 

 본격적으로 과제 시작!

---

앱 유형 비교

한 눈에 개념 파악하기

출처: 에이콘아카데미

요약 정리

* 모바일 웹: PC웹을 모바일 환경에 맞게 구성한 웹

 

네이티브 앱

네이티브 앱은 우리가 흔히 생각하는 앱으로 모바일 운영체제에 맞춘 언어로 개발된 SW이다. 따라서 운영체제가 다르다면 다른 언어와 형식으로 개발해야 하며, 별도의 관리가 필요하다.

 네이티브 앱은 플랫폼(운영체제/네이티브)의 API/기능을 사용할 수 있으며,  SW의 성능이 높아 뛰어난 수준의 퍼포먼스를 구현할 수 있다는 장점이 있다. 각 운영체제에서 지원하는 기능들을 적극적으로 활용할 수 있고 업데이트를 통해 기능을 향상할 수 있다. 이러한 점들을 바탕으로 기능 위주의 앱 제작에 용이하며, 유저들에게 고도화된 기능을 서비스할 수 있다.

 다만 네이티브 앱은 "웹"과의 연결성이 떨어지기 때문에 해당 서비스를 PC에서 실행할 수 없다는 특징이 있다. 또한 운영체제별 개발이 필요하기에 많은 인/물적 리소스가 요구된다. 따라서 개발 기간과 인력 등은 많이 요구되므로 대규모 기업 등에서 주로 이용하는 형태이다. 추가적으로 운영체제별 성능이나 지원하는 기능이 다를 경우, 서비스 제공에 한계가 있다. 고객들이 동일한 유저 경험을 할 수 있도록 조율하는 과정이 필요하며, 이에 파생되는 부정적인 경험에 노출될 가능성을 무시할 수 없다.

 네이티브 앱의 예시로는 유튜브, 카카오톡, SNS, 스타벅스 등이 있다.

+ 개인적인 생각이지만 금융이나 포인트 어플도 여기에 포함되지 않을까?라는 생각:)

 

모바일 웹

 모바일 웹의 경우 요약본에서 간단하게 언급한 것처럼, 단순하게 "모바일 기기에서 보는 PC 웹"이라 생각하면 된다. 대체로 모바일 환경에 맞춰 자동으로 폰트, 텍스트 크기, 콘텐츠, 아이콘 등을 조절해 보여주는 반응형 웹으로 제작되는 경우가 대부분이며, 웹만을 구축하면 자동으로 모바일에서도 이용할 수 있다. 이미 PC 웹이 있지만, 이를 모바일에 더욱 핏(fit)하게 만들기 위해서 m.naver.com, m.coupang.com처럼 별도의 URL을 가지는 것으로 확인할 수 있다. (대부분 기존 웹 URL 앞에 'm.'을 붙이는 형태)

 웹 기반의 형태이기 때문에 별도의 어플 설치가 불필요하며, 웹과 모바일에 동일한 서비스를 제공할 수 있다는 특징이 있다. 따라서 비교적 업데이트가 쉽고, App에 비해 구현 난이도가 낮다는 장점이 있다.

 하지만 PC 웹과 다른 도메인을 사용해야 하며, 업데이트 또한 별도로 진행해야 한다는 한계가 존재한다. 또한 브라우저가 필수적이며 실행 속도가 느리다는 단점도 있다. 

💡 PC 웹과 모바일 웹의 차이는? 

 모바일 웹에 대한 내용을 배우고, 이런 질문이 떠올랐다. 어차피 PC웹을 모바일에서 비슷하게 볼 수 있는데 굳이 모바일 웹을 구현하는 이유는 무엇일까?

 개발자 지인에게 질문한 결과 둘의 관계에 대해 다음과 같은 답변을 줬다.

나이키 운동화(PC 웹)와 나이키 운동화 여아용(모바일 웹)의 관계

 이 답변을 듣고 단번에 이해했다. 나이키 운동화와 여아용이라 할 지라도 나이키 운동화라는 사실은 변함이 없다. 또 다른 예시를 들자면, 둘 다 인터넷인 점은 동일하지만, 즐겨찾기로 들어가는 것과 앱 스토어에서 설치가 필요하다는 것이다. 이처럼 PC 웹에 비해 더 작은 화면으로 구현될 수밖에 없는 모바일 환경을 고려하여 이에 최적화된 웹을 비교적 쉽게 만든 것이다.

 

 모바일 웹앱

 모바일 웹 앱의 경우 모바일 웹과 네이티브 앱의 장점을 합친 형태이다. 구체적으로 얘기하자면 웹이지만 앱처럼 보이는 형태를 말한다. 일반적인 웹 기술로 개발할 수 있으며, 단일 페이지 방식으로 화면이 전환되기에 빠른 속도를 자랑한다.

 앱이지만 본질은 웹이기에 디바이스의 성능에 영향을 적게 받으며, 유지보수에 용이하다. HTML 언어로 하나의 서비스를 제작할 수 있기에 비교적 개발 난이도가 쉬운 편이며, 정보 위주의 앱 제작에 적합하다. 반면 운영체제와 플랫폼의 API가 아닌 브라우저의 API만 사용 가능하다는 단점이 존재하며, 실행이 까다롭다는 특징이 있다. 반응 속도가 느리고 유저들이 노출된 인터넷 환경의 속도에 영향을 많이 받는다. 또한, html, CSS, Javascript를 사용해야 하기 때문에 디자인 코딩 과정이 다소 어려운 편이다.

 

하이브리드 앱

 하이브리드 앱의 경우, 앱의 기반이 되는 콘텐츠 영역은 HTML로, 최종 앱 배포에 필요한 패키징 처리만 모바일 OS 안에서 처리한 형태이다. 네이티브 앱에 웹 view로 웹 앱을 실행한 형태이기 때문에 플랫폼(디바이스/운영체제)과 브라우저의 API를 모두 사용할 수 있다. React Native나 Flutter 등의 프레임워크를 활용하여 제작하는 경우가 대부분이다. 

(좌) 텀블벅 / (우) 네이버

 하이브리드 앱의 경우, 디바이스에서 인터넷(네트워크) 연결을 차단하면 그 형태를 알 수 있다. 위의 사진처럼 네이티브 앱의 특성들은 남아있지만, 정작 앱의 콘텐츠 부분은 웹 view이기 때문에 아무것도 보이지 않는다. 

 네이티브와 브라우저 API를 모두 사용할 수 있기에 다양한 기능을 개발할 수 있으며, 웹 개발 기술을 사용해 앱을 개발할 수 있다. 한 번의 개발로 다수의 플랫폼에 대응할 수 있다는 장점 또한 강력한 영향을 끼친다.

 반면 어쨌든 네이티브 앱의 요소가 사용되기에 네이티브 개발 지식이 필요하며, 앱의 성능이 곧 브라우저의 성능을 의미하기에 개발에 신경을 써야 한다. UI 프레임워크 도구를 사용하거나, 개발자가 직접 UI를 제작해야 한다는 단점도 존재한다. 

 

💡 모바일 웹 앱과 하이브리드 앱의 차이는? 

 앞서 두 개념을 배우고 계속 헷갈렸던 부분이다. 둘 다 콘텐츠는 웹으로 볼 수 있다는 공통점이 있는데, 그렇다면 둘의 차이는 무엇일까? 해당 질문도 개발자 분이 답을 주셨는데... 답은 코드를 봐야 한다는 것이었다.

앱의 네이티브 부분에 사용된 언어에 따라 다르다.
(정교한 html = 모바일 웹 앱 / 앱 코드 = 하이브리드)

 이해가 된 듯 안 된 듯한 답변... 유저들이 이를 보고 알아차릴 수는 없느냐에 대한 질문을 추가로 했지만 "개발자의 역량에 따라 다르다"는 답을 받았다. 개발자가 정교하게 html 코드를 짠다면 유저들이 충분히 앱이라고 착각할 수 있다는 것이다. 반면 대충 만들면 유저들이 금방 알아챈다는...ㅋㅋㅋ 뭔가 앱인 것 같은데 인터넷처럼 버벅거린다? 그럼 해당 부분은 웹 영역이라는:)ㅋㅋㅋㅋ 또 하나 중요한 차이점은 '플랫폼의 API'의 유무였다. 하이브리드 앱은 플랫폼과 브라우저의 API를 모두 사용할 수 있다는 부분이 아마 핵심인 듯하다. 

 

---

만약 내가 텀블벅의 PM이라면

 어제 과제에서 프론트엔드를 분석해 본 것에 이어, 오늘 배운 앱까지 '텀블벅'에 대해 생각해보자. 텀블벅은 크라우드 펀딩 서비스이긴 하지만 일종의 '커머스'라 볼 수 있을 것이다. 물론! 두 개의 개념이 다른 것은 알지만, 특정 프로젝트(상품)에 대한 지불(결제)이 이루어진다는 것을 고려하면 커머스의 형태를 일부 갖고 있다 볼 수 있다. 그렇다면 텀블벅 앱은 어떤 형태를 띠어야 할까?

 만약 내가 텀블벅의 PM이라면, 나는 하이브리드 앱 형태를 채택할 것 같다. 우선 커머스의 형태를 띠기 때문에, 텀블벅의 고객은 크게 구매자(투자자, 일반 유저)와 판매자(셀러)로 구성될 것이다. 크라우드 펀딩의 특성을 고려하면 텀블벅의 콘텐츠(프로젝트)들은 다량의 정보를 포함하고 있다. 따라서 프로젝트를 업로드하는 셀러들은 웹 환경에서 콘텐츠 작업을 수행할 가능성이 높다. 다만 일반 유저들의 경우에는 쇼핑하듯 크라우드 펀딩을 접하기 때문에 모바일 환경에서 손쉽게 정보를 획득하기 원할 것이다. 따라서 웹과 앱의 특징을 모두 가져갈 수 있는 하이브리드 앱 형태를 선정하는 것이 효율적일 것이다. 

 

개발 과정에서의 요구 사항

 그렇다면 텀블벅의 앱을 개발하기 위해서는 어떤 요구 사항을 작성(?) 해야 할까. 우선 하이브리드 앱이기에 각 운영체제별 개발자를 섭외해야 할 것이다. 최소한 웹(프론트엔드)과 서버(백엔드), AOS, iOS 영역의 개발자가 필요할 것이며, PM으로써 어떤 부분은 네이티브이고, 어떤 부분은 웹 view로 구현할지 개발자들과 논의해야 한다.

 위 사항만 본다면 앱 개발자(AOS, iOS)들의 업무량이 적어 보일 수 있지만, 그렇지 않다. 하이브리드 앱도 네이티브 앱의 요소를 포함하기에 UI 구현이 필수적이며, 앱의 성능이 곧 브라우저 성능이기에 앱 성능 향상을 위해 총력을 기울여야 한다. 

 그리고 현재의 텀블벅처럼, 프로젝트 콘텐츠 부분은 웹 view로, 나머지 영역은 네이티브 요소를 적용할 것 같다. 네이티브 요소를 가미하여 안정성을 추구하면서도, 셀러와 유저들의 활발한 정보 교류를 위해 프로젝트 부분은 웹의 영역으로 남길 것 같다. 또한 유저들의 경우 모바일에 익숙하고, 펀딩뿐만 아니라 레퍼럴을 위한 리뷰를 작성할 가능성도 있기에, 네이티브 API(카메라 등)가 필요하다.

 

+ 덧

 마침 오늘 토론 시간에 텀블벅을 주제로 동기분들과 얘기를 나누었다. 논의 결과 하이브리드 앱이라고 의견을 모았으며, 그에 대한 논의 내용이 흥미로워서 공유하고자 몇 가지 언급한다.

 하이브리드 앱이라고 판단한 이유는 앞서 언급한 네트워크 유실 상태의 앱 프레임과, 위의 사진들처럼 플랫폼 API 권한을 요청했기 때문이다. 프로젝트 업로드를 위해서는 별도 브라우저의 웹으로 전환되었기에, 위의 카메라 및 사진 권한은 리뷰 작성을 위함이라 판단했다. 알림 기능 또한 네이티브 요소이기에 하이브리드 앱이라는 결론에 비교적 쉽게 도달할 수 있었다.

 추가적으로 텀블벅은 비교적 앱을 늦게 출시했다. 웹 서비스를 출시한 지 10년이 넘었지만, 앱은 아직 만 1년이 채 되지 않았다. 텀블벅의 실제 개발자 분들의 인터뷰를 참작해도, 기존의 웹 사용자에게 친숙하게 다가가기 위해 웹 형식을 취했을 것으로 추정되며, 앱을 잘 사용할지 고민하는 테스트 하는 성격이 강함을 엿볼 수 있었다.

 서비스가 더욱 고도화되어 고객 니즈가 다각화되면 네이티브 앱으로 변모할 가능성도 있지만, 우리의 의견은 현황(하이브리드 앱)을 유지하는 쪽으로 의견이 모였다. 그 이유는 한 마디로 "굳이?"이다. 이미 네이티브 요소는 일반 유저(구매자)에게 맞춰서 운영하고 있다. 셀러(판매자, 프로젝트 등록자)의 경우 PC 웹을 주로 이용할 것이기 때문에 굳이 네이티브 앱으로 구현할 필요가 없다는 것이다.

 글을 쓰며 조금 더 덧붙이자면, 네이티브 앱으로 변모했을 때 텀블벅이 얻을 수 있는 득 보다 실이 많다고 생각하기 때문이다. 셀러들이 네이티브 앱에서 얻을 수 있는 이득이 적고, 웹을 통해 실시간으로 셀러-유저가 소통하는 것이 더욱 효율적이지 않을까!

 

---

 오늘의 과제는 어제보다는 뭔가 더 알게 된 느낌이다:) 네이티브와 웹의 차이는 극명하지만, 웹과 웹 앱, 웹 앱과 하이브리드, 또 여기까지 배우니 하이브리드와 네이티브까지... 끝없는 혼란이 왔지만, 과제를 작성하며 어느 정도 정리가 되었다. 물론 이 4가지 앱 유형에 대해서는 구글에 많은 자료들이 존재하지만, 다들 블로거(?)가 정의내린 글들이라 불명확하고 불충분한 부분이 많았다😭 이 부분은 개발자 분께 조언을 구해 어느 정도 해결했으며, 내가 아는 언어로 정리해 보면서 머릿속에 욱여넣었다...ㅋㅋㅋ 

 이번 과제를 통해 개발자 분들이 대단하다는 점을 새삼 깨달으며... 이제까지 앱을 사용하며 불평불만을 쉽게 뱉어냈던 내 자신을 반성했다. 물론 사용자로서 불편한 부분도 있지만! 그분들의 노고를 생각하며... 앞으로는 조금은 감내해야겠다.

 아마 오늘 이후로 앱을 사용할 때 "음, 얘는 네이티브군!", "로딩이 느린 걸 보니 이 부분은 웹인가?"라는 생각을 할 수도 있을 것 같다. 다른 친구들이 보면 정신 나갔냐고 욕할 수도 있으니 혼자만의 생각으로 남겨두거나, 동기분들과 이러한 생각들을 나눠봐야겠다:) 

 자기만족일 수도 있지만 오랜만에 과제를 깔끔하게 한 것 같아 기분이 좋다! 물론 부족한 부분은 있겠지만, 페어님이 잘 지적해 주실 거라 생각한다^^! (페어님 떠넘겨서 죄송해요😅 하지만 믿어요ㅎ) 오늘의 과제는 여기서 마무리!

fin.

 

참고 자료

어떤 앱으로 만드는 게 좋을까

 

기획자라면 알고 있어야 할 '앱 유형'

 

웹과 앱 개발 방식 종류

 

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