brunch

You can make anything
by writing

C.S.Lewis

by 허윤희 Jul 16. 2021

어플을 만들기 전에 알아야 할 '앱 개발 유형 5가지'

하이브리드, 네이티브, 크로스플랫폼, 웹앱, 모바일웹

일반 사용자는 모바일 서비스를 똑같은 애플리케이션으로 받아들이겠지만, 알고 보면 개발 방법이나 실행 방법에 따라 애플리케이션 종류를 구분할 수 있다. 네이티브 앱(NATIVE APP), 모바일 웹(MOBILE WEB), 모바일 웹앱(MOBILE WEB APP), 하이브리드 앱(HYBRID APP) 그리고 최근 부상 중인 크로스 플랫폼 앱까지 다섯 가지를 알아보려고 한다.


각각의 앱 개발 방식은 특징에 따른 장단점이 있기 때문에, 하고자 하는 서비스에 따라 적절한 개발 방식을 이용한다면, 불필요한 비용과 개발 시간을 줄일 수 있다.



모바일 애플리케이션 종류 및 구분 / 출처 = http://uxstory.co.kr







모바일 웹

#url 접근 #html


우리는 모바일에 별도의 앱을 설치하지 않고도, 크롬, 네이버, 사파리 등의 검색엔진을 통해 특정 서비스를 이용할 수 있다. 이는 데스크톱에서 보던 웹사이트를 모바일 디스플레이에 맞춰 구성한 앱으로, 데스크톱에서 웹사이트에 접속할 때와 같이 url이나 브라우저 검색을 통해 접근 및 이용이 가능하다.



장점

반응형으로 제작할 경우, PC/태블릿/모바일에서 모두 기기에 적합한 형태로 이용 가능하다

개발 시 네이티브, 하이브리드 앱에 비해 적은 리소스, 비용, 시간이 들어간다

앱을 설치하지 않아도 된다

별도의 배포나 승인 절차가 필요하지 않으며, 수정 사항을 바로 반영할 수 있다


단점

검색 엔진이나 별도의 url을 통해서 접속해야 한다

OS에서 제공하는 기능을 활용할 수 없다

* OS 기능: 푸시 메시지, 블루투스, 위치기반 서비스, QR코드 인식, 주소록 연동, SNS 로그인, 인앱 결제 등



대표적인 모바일 웹

구글링/브라우저 검색을 통해 홈페이지를 검색할 수 있으며, 홈페이지에서 서비스 이용이 가능한 서비스

ex) 모바일 웹이 없는 서비스 :

카카오톡이나 뱅크 샐러드 등은 홈페이지에서 서비스 이용이 불가하며, 모바일 앱 설치 화면으로 유도한다.






네이티브 앱

#다운로드 필요


출처 = 위시캣


네이티브 앱은 게임, 카메라 어플, 지도 어플, 메신저 등 주로 기능 위주의 서비스에 많이 사용된다.



장점

높은 사양의 그래픽과 빠른 속도, 안정성, 동적인 효과를 구현하기 좋다

기기에 최적화된 기능 구현 : 스마트폰 OS에서 제공하는 기능에 대한 접근이 자유롭다

* OS 기능: 푸시 메시지, 블루투스, 위치기반 서비스, QR코드 인식, 주소록 연동, SNS 로그인, 인앱 결제 등

인터넷 연결이 끊어져도 미리 받아놓은 데이터를 이용하여 일부 기능을 사용하거나, 일정 부분에 대한 정보조회가 가능하다


단점

높은 수준의 기술력 요구 : 다양한 운영체제(안드로이드와 ios 버전)에 맞는 버전을 각각 개발해야 한다

따라서 개발 기간이나 비용이 상대적으로 많이 든다

수정이나 변경이 있을 시 변경사항을 적용한 후, 앱스토어 심사를 거쳐 배포해야 한다

사용자가 업데이트를 해야 개선된 버전을 제공할 수 있다

상대적으로 용량이 크다



대표적인 네이티브 앱

인스타그램(카메라 기능 위주), SNOW(카메라), 카카오 지하철(지도, 교통), 토스(금융), 애니팡(게임), 스타벅스(멤버십)

* 인스타그램의 경우, 데스크톱에서 사용할 수 있도록 별도의 웹 서비스도 제공하고 있다






웹앱

#url 접근 #html



모바일 웹처럼 브라우저를 통해 접근해야 하지만, UIUX를 앱처럼 만들어 네이티브 앱과 유사한 동작과 화면 전환 효과를 보여주는 방식을 웹앱 형태라고 부른다. 보통 반응형 디자인의 형태를 보여주는 모바일 웹과는 달리 별도의 url을 가지고 있으며, 기존 url 앞에 m 이 붙어있다.(예시 참조)



장점

- 모든 os와 브라우저에서 접근이 가능하다

- 개발기간 및 비용이 상대적으로 적게 든다

- 별도의 설치나 앱 스토어 승인과정을 거치지 않아도 배포가 가능하기 때문에 유지보수가 용이하다


단점

플랫폼 API를 사용할 수 없고 브라우저 API만 사용이 가능하여 os 기능의 일정 부분의 사용이 어렵다

* os 기능: 푸시 메시지, 블루투스, 위치기반 서비스, QR코드 인식, 주소록 연동, SNS 로그인, 인앱 결제 등

별도의 url을 통해 접속해야 한다

페이지 로딩 속도가 상대적으로 느리다

네이티브 앱과 달리, 네트워크가 연결되지 않으면 서비스를 아예 이용할 수 없다



대표적인 웹앱

우리은행, 신한은행







하이브리드 앱

#다운로드 필수



네이티브 앱과 웹 기술을 융합한 방식이다. 앱 안에서 웹페이지를 불러오는 방식으로 실행된다.

주로 실시간으로 신규 콘텐츠와 정보를 노출해야 하는 서비스에서 사용한다.


장점

유지보수가 용이함 : 웹 영역에 수정이 있을 경우 업데이트 없이 바로 반영할 수 있다

브라우저 API와 모바일 os의 기능들을 이용해 다양한 개발이 가능하다

* os 기능: 푸시 메시지, 블루투스, 위치기반 서비스, QR코드 인식, 주소록 연동, SNS 로그인, 인앱 결제 등

한 번의 개발로 다수의 플랫폼에 대응할 수 있다

안드로이드와 ios 모두 동일한 웹페이지를 사용할 수 있어서 개발 비용 및 시간 소요가 네이티브에 비해 적다

앱 용량도 비교적으로 가볍다


단점

네이티브 앱보다는 동적인 요소의 구현이나 디자인 부분이 취약하다

네트워크 환경과 웹사이트의 용량에 따라 속도가 느려질 수 있다



대표적인 하이브리드 앱

다운로드하여 사용하는 네이버, 크롬 어플(포털), 쿠팡, 여기 어때(쇼핑, 실시간 예약), 우버(승차 예약), 지메일







크로스 플랫폼 앱

#리액트 네이티브 #플러터


출처 = https://it-eldorado.tistory.com/132


한 가지 언어와 프레임워크로 ios/안드로이드 양쪽 앱 스토어에 출시할 수 있는 방식이다. 예를 들면 (네이티브 코드가 아닌) 리액트로 코딩을 하고, 자바스크립트 코드로 컴파일한 후에 ios/안드로이드가 이 코드를 각자의 자바스크립트 엔진으로 실행하는 것이다.


장점

네이티브 앱과 비교하여 개발 속도가 빠르고, 성능 차이가 크지 않다


단점

네이티브 언어가 아니기 때문에 퍼포먼스 이슈가 발생할 수 있다

기능 구현에 제약이 많아 외부 API를 이용하므로 확장성이 떨어진다

하이브리드 앱과 비교하여 디자인을 세밀하게 적용하는 것이 어렵다







#우리은행 #신한은행

동일한 서비스의 모바일 웹 vs 웹앱 vs 네이티브 앱 비교



모바일 웹 

(별도의 웹앱을 제공하고 있기 때문에 반응형 모바일 버전으로 구현이 안되며, PC버전으로만 보인다.)




 웹앱 

(웹사이트의 url 앞에 모바일을 뜻하는 m. 이 붙어있는 것을 볼 수 있다)



네이티브 앱  

(별도의 다운로드가 필요하며, Face ID 등의 자동 로그인을 통해 개인에게 최적화된 상태로 이용이 가능하다)





== 요약 ==

모바일 웹 : 반응형/적응형 모바일 웹사이트
네이티브 앱 : 기능 위주의 서비스
웹앱 : url 앞에 m
하이브리드 앱 : 주로 실시간 콘텐츠와 정보를 노출해야 하는 서비스
크로스 플랫폼 앱 : 한 가지 언어로 개발하고 컴파일
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari