by
Nov 12. 2021
문과생도 쉽게 이해하는
App(앱) 유형별 특징
[코드스테이츠 PMB 8기] 7주차 Daily project (2)
우리는 현재 스마트폰 없는 일상을 상상하기 어려운 시대에 살고있다.
이에 대응해 기존 웹 방식들은 자연스럽게 앱 방식으로 바뀌고 있다.
이미지 출처 : https://webclub.tistory.com/초창기 프로덕트는 리소스가 많이 드는 '앱 개발'보다 '웹 개발'을 먼저 진행하는 경우가 많다. 물론 초창기 프로덕트가 아니더라도 앱 개발에는 많은 비용과 시간이 들기 때문에 쉽게 개발하지 못하는 회사도 많다.
하지만 더 많은 유저의 유입을 위해서는 모바일 환경을 포기할 수 없기에,
다양한 앱 유형이 시도되고 발전되고 있다.
앱은 크게 4가지 유형(네이티브 앱, 모바일 웹, 모바일 웹 앱, 하이브리드 앱)으로 나뉜다고 한다.
그리고 여기서 더 나아가 크로스 플랫폼 앱, 프로그레시브 웹 앱이라는 2가지 유형이 더 있다.
우리가 항상 사용하는 앱이기 때문에 이해하기 쉬울 것 같으면서도,
위 유형들을 막상 개념적으로 구분하려고 하면 헷갈리는 것 같다.
이에 많은 자료들을 서칭 하며 학습한 내용들을 최대한 문과생도 쉽게 이해하도록 정리해 보고자 한다.
그리고 자료를 서치해 나아가면서 유독 정리가 매우 잘 된 유튜브 영상(얄팍한 코딩사전)을 발견하게 되었다.
해당 글은 위 '얄팍한 코딩사전 영상' 내용을 기반으로 기타 참고 자료들과 예시들을 추가한 것이다.
유형 1.
네이티브 앱 (Native App)
네이티브 앱은 우리가 흔히 알고 있는 스마트폰의 가장 기본적인 앱 형태이다.
즉 모바일 기기에 최적화된 앱으로써, iOS와 안드로이드 플레이 스토어에서 등록하고 다운, 설치가 가능하다.
이미지 출처 : 중앙일보네이티브 앱으로 개발을 하면 안드로이드와 iOS가 제공하는 모든 자원과 기능을 활용할 수 있다.
더불어 최상의 퀄리티로 앱을 구축할 수 있다.
하지만 그런 네이티브 앱에게도 단점이 있다.
개발을 위한 인력, 시간, 비용 등 리소스가 많이 든다.
운영체제(iOS, 안드로이드)마다 스토어 등록 기준이 다르다.
특히 iOS 앱스토어 심사가 까다로워 거절당하는 경우가 많다.
(결국 안드로이드, iOS 함께 개발하거나 앱을 배포(스토어에 공개)하는 것이 어려워진다.)
결국 위와 같은 단점을 한 마디로 표현하면 개발하기 까다롭다는 것이다.
이것이 위에서 말한 초장기 프로덕트뿐만 아니라 보통 앱 개발을 쉽게 시도하지 못하는 이유다.
그래서 게임이나 앱 환경이 매우 중요한 서비스나 프로덕트가 아니라면
최대한 제한된 자원을 아끼면서 쉽게 개발하기를 원할 것이다.
유형 2~3.
모바일 웹 (Mobile Web) / 웹 앱 (Web App)
그래서 나온 것이 '모바일 웹'이다.
모바일 웹은 기존의 웹 화면(쉽게 PC에서 보는 화면)을 작은 스마트폰 화면 크기에 맞춰 줄여놓은 것이다.
우리가 모바일 브라우저(크롬, 사파리 등)를 통해 특정 사이트를 검색해 들어가면 흔히 보이는 화면이다.
이미지 출처 : 네이버위 네이버 예시 이미지처럼 왼쪽 기존 웹 화면을 오른쪽 화면(모바일 웹)으로 만들어 보다 모바일로 편하게 볼 수 있다. URL이 같은 경우도 있다고 하는데, 국내에서는 보통 모바일 웹을 만들면 URL에 별도로 표시를 해두는 것 같다. 네이버도 모바일 웹 URL에 'm'자가 붙는다.
· 웹 URL : naver.com
· 모바일 웹 URL : m.naver.com
여기서 함께 이야기할 앱 유형은 '모바일 웹 앱'이다.
웹 앱은 모바일 웹보다 '앱'에 가까운 형태다.
모바일 웹보다는 모바일 환경에서 더 좋은 사용자 경험을 줄 수 있도록 만들어졌다.
더 쉽게 이야기하면 모바일 웹과 네이티브 앱을 합친 것으로, 웹 기술로 네이티브 앱을 따라한 것이다.
하지만 표면상 모바일 웹과 큰 차이가 없고 실제 구분이 명확하지 않다고 한다.
그만큼 모바일 웹과 웹 앱은 공통점도 많아 같이 설명하고자 한다.
가장 큰 장점으로 모바일 웹/웹 앱은 네이티브 앱과 비교하면 훨씬 개발하고 운영하기가 편하다.
운영체제(iOS, 안드로이드) 구분 없이 웹 개발로만 구현이 가능하기 때문이며, 핸드폰 기기 종류에도 영향을 받지 않는다. 또한 내부적으로 업데이트가 필요할 시 웹 개발 하나만 수정하면 되기 때문에 유지보수(관리)하기도 편하다.
하지만 단점도 있다.
우선 플레이 스토어에 등록 및 설치 등이 안된다. 인터넷 브라우저 통해서만 접근이 가능하다.
그러다 보니 기능과 성능이 네이티브 앱보다 확실히 떨어진다. 예를들어 운영체제에서 사용 가능한 모든 기능을 100이라 쳤을 때 모바일 웹과 웹 앱은 브라우저에서 20 정도만 기능을 구현할 수 있다.
(수치는 설명을 위한 가정이다. 실제 X)
마지막으로 스마트폰 하드웨어(카메라, 센스 등)를 사용할 수 없다는 단점도 있다.
유형 4.
하이브리드 앱 (Hybrid App)
모바일 웹/웹 앱의 이러한 단점을 보완하고 네이티브 앱 성능을 따라가기 위해 만들어진 것이 '하이브리드 앱'이다. 모바일 웹/앱 웹과 네이티브 앱의 장점만 모은 것이다.
쉽게 포장지는 '앱'으로 만드는데, 내용물은 웹(이를 웹뷰라고 한다)인 형태이다.
즉 겉에는 네이티브 앱으로 만드는데, 그 앱을 들어가면 내부는 브라우저 웹 화면인 것이다.
모바일 웹/웹 앱 보다 훨씬 앱의 모양을 갖추고 있다.
모바일 웹/웹 앱과 가장 큰 차이는 하이브리드 앱은 플레이 스토어에 설치 및 다운이 가능하다는 것이다. 유저들은 플레이 스토어에 가서 하이브리드 앱을 기존 네이티브 앱처럼 다운로드할 수 있다.
이를 다른 말로 하면 하이브리드 앱은 모바일 웹에서는 불가능한 '네이티브 기능'을 구현할 수 있다는 것이다. 즉 더 많은 기능을 개발할 수 있다.
(아래 이미지의 네이버 하이브리드 앱은 실제 스토어에서 다운로드한 앱 내부 화면이다.)
이미지 출처 : 네이버하지만 물론 네이티브 앱보다는 속도, 동작 등 성능이 떨어진다. 또한 네이티브와 웹사이트 환경에 모두 영향을 받기 때문에 환경과 용량에 따라 속도가 느려질 수 있다는 단점이 있다.
유형 5.
크로스 플랫폼 앱 (Cross-platform App)
iOS와 안드로이드는 각각 다른 운영체제(OS)이기 때문에 사용하는 언어도 개발 방식도 다르다. 실제 개발자도 iOS 개발자와 안드로이드 개발자로 나뉘기도 한다. 그것이 네이티브 앱의 가장 큰 단점이었다.
이에 대한 대안으로 크로스 플랫폼 앱이라는 새로운 개발 방법론이 생겨났다.
크로스 플랫폼 앱은 하나의 프로그래밍 언어, 한 번의 개발로 iOS와 안드로이드 모두 동작하는 효율적인 네이티브 앱을 만드는 것을 말한다.
하지만 정통(?) 네이티브 앱처럼 OS의 모든 기능들을 다 사용할 수 없다. 즉 크로스 플랫폼 앱도 결국 네이티브 앱보다 속도 등의 성능이 떨어진다는 것이다. 그러나 계속 퀄리티는 발전되고 있으며, 현재도 네이티브 앱과 견줄 정도의 우수한 퀄리티를 자랑한다.
유형 6.
프로그레시브 웹 앱 (PWA, Progressive Web Apps)
프로그레시브 웹 앱(이하 PWA)도 또 하나의 개발 방법론이다.
PWA는 스토어가 아닌 브라우저(크롬, 사파리 등) 발전을 통하여 더 많은 운영체제(OS) 기능을 활용하도록 하는 것이다. 즉 웹뷰를 PWA로 업그레이드하여 활용할 수 있다.
사실 PWA는 안드로이드 스토어 등록 및 설치가 가능하다. 하지만 iOS에서는 불가능하다.
그러나 PWA는 스토어에 등록되지 않아도 웹뷰에서 '바로가기' 버튼을 통해 핸드폰 바탕화면에 '아이콘'을 생성할 수 있다. 그 아이콘을 통해 네이티브 앱처럼 사용 가능하다.
그런데 여기서 의문이 들었던 것은 모바일 웹/웹 앱과의 차이다.
모바일 웹/웹 앱도 '바로가기' 버튼으로 아이콘을 바탕화면에 생성할 수 있는데,
왜 PWA에서 이를 큰 특장점으로 강조하는 것인지 개인적으로 궁금했었다.
실제 네이버 앱을 통해 확인해 보니 위 이미지와 같은 차이가 있었다.
네이버가 PWA로 개발된 것은 아니기 때문에(네이버는 하이브리드 앱으로 개발됨) 오른쪽 이미지를 PWA 예시로 볼 수 없지만 설명을 위해 이미지만 활용했다. PWA는 스토어에서 다운을 받지 않고 '바로가기'로 아이콘을 생성해도 왼쪽 이미지처럼 네이티브 앱 아이콘 모양 그대로 생성되기 때문이다.
반면 모바일 웹/웹 앱을 아이콘으로 생성하면 왼쪽 이미지처럼 '브라우저' 모양이 함께 보이게 됨으로써 실제 네이티브 앱 아이콘과는 상이한 모습이다.
어떤 유형의 앱을 선택해야 할까?
이렇게 총 6가지의 앱 유형을 살펴보았다.
각자의 장단점이 있지만 언뜻 살펴보면 '유형 6'으로 갈수록 좋은 앱 개발론이 아닌가 싶다.
하지만 우리가 가진 인력, 시간 등의 리소스와 프로덕트에 따라 좋은 앱 유형은 달라질 수 있다고 생각한다.
초기 프러덕트이고 이커머스처럼 '웹' 사용성도 중요한 경우에는 하이브리드 앱, PWA 등 보다 난이도가 낮고 빠르게 개발할 수 있는 모바일 웹을 만드는 것이 적합할 것이다.
하지만 위에서 언급한 것처럼 모바일 환경을 무시할 수 없다. 이에 '반응형' 모바일 웹을 만드는 것이 어떨까 싶다.
반응형으로 웹 페이지를 만들면 모바일 환경에서는 앱 화면이 자동으로 앱 크기에 맞게 축소되어 나타난다. 결국 따로 모바일 기기 크기에 맞춰 디자인 및 추가 개발이 필요하지 않다는 뜻이다.
이는 최대한 개발 리소스를 줄이는 방법이 될 것이라 여긴다.
이미지 출처 : 오픈애즈· 반응형 웹이란?
반응형 웹 디자인이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.
(참고 : 위키백과)
※ 참고 반응형 웹 사이트 : https://mediaqueri.es/
※ 위 사이트 접속 시 PC 화면을 축소하는 대로 이미지와 텍스트도 비례하게 자동으로 축소된다.
· 적응형 웹이란?
반응형 웹과 다른 기법으로 각 디바이스의 디스플레이에 맞는 웹을 디자인한 것을 말한다. 기기별로 화면의 크기 등을 고려해 웹 화면을 각각 만들어야 한다.
(참고 : 위키백과)
