네이티브, HTML5, 하이브리드 모바일 앱: 장단점 분석하기

ITWorld

다음은 모바일 앱을 개발하는 세 가지 주요 방법이다. 각각의 스냅샷에는 간략한 설명, 가장 적합한 분야, 장단점, 관련 개발 도구가 포함되어 있다.

네이티브 앱 개발
네이티브 앱 개발에서 모바일 앱은 iOS, 안드로이드, 윈도우 폰을 비롯한 특정 모바일 플랫폼에 맞게 작성된다. 모바일 기기에 상주하며 일반적으로 플랫폼 제작사의 개발 도구를 사용해 만들어진다. 다른 플랫폼에서 코드를 재사용할 수 없다.

가장 적합한 분야…
- 소비자용 앱
- 게임
- 그래픽 및 멀티미디어 집약적인 앱

장점
- 특히 게임의 경우 웹 기반 앱 또는 하이브리드 앱에 비해 일반적으로 높은 성능
- 기기의 모든 센서, 하드웨어, 연락처, 알림에 접근 가능
- 애플 앱 스토어, 구글 플레이, 윈도우 스토어와 같은 공개 앱 스토어를 통해 배포
- 설치 시 즉시 기기의 홈 스크린에 아이콘 표시

단점
- 개발자 부족
- 플랫폼별로 따로 앱을 만드는 데 따르는 비용 소비
- 플랫폼별로 별도의 코드 베이스를 관리하는 데 따르는 비용과 시간 소비
- 긴 개발 시간
- 상이한 개발 시간으로 인해 플랫폼 간 버전이 일치하지 않을 수 있음
- 각 앱 스토어의 승인 절차를 거쳐야 하므로 앱 배포 속도가 느려질 수 있음

개발 도구
- 애플 iOS: 엑스코드(XCode)
- 안드로이드 : 구글 안드로이드 스튜디오(Google Angoid Studio)
- 윈도우 폰: 비주얼 스튜디오(Visual Studio)

HTML 5, CSS, 자바스크립트로 만들어지는 웹 앱
웹 앱은 HTML 5, CSS, 자바스크립트로 만들어진다. 모바일 기기의 브라우저를 통해 접근할 수 있고 인터랙티브한 특성을 갖는다. 연락처 목록이나 센서와 같은 모바일 기기의 기능에 접근하는 데 제약이 있다. 한 번만 만들어 웹 서버에 배포하면 된다.

가장 적합한 분야…
- B2B 및 B2E 앱, 내부 회사 서비스 및 리소스

장점
- 웹 표준을 사용하여 제작되지만 “응답성이 높은” 앱으로 설계됨
- 기업에서 기존 웹 개발자를 활용해 제작 가능
- 가장 비용이 덜 드는 앱 제작 방법
- 하나의 코드 베이스만 관리하면 됨
- 신속한 수정, 업데이트 및 배포 가능

단점
- 인터페이스가 표준 네이티브 앱과 다를 수 있음
- 특히 게임 및 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어짐
- 사람들이 새로운 앱을 찾는 주 경로인 앱 스토어에 없음
- 기기의 센서, 하드웨어, 알림과 같은 기능에 대한 접근이 제한될 수 있음
- 사용자가 직접 아이콘을 배치하지 않는 한 기기의 홈 스크린에 아이콘이 표시되지 않음

개발 도구
HTML 5, 자바스크립트, CSS를 사용하여 웹 페이지를 구축하는 데 사용되는 모든 개발 도구는 모바일 웹 앱을 제작하는 데 사용 가능하다. 

- 앵귤러JS(AngularJS) – 구글이 관리하는 오픈 소스 웹 애플리케이션 프레임워크
- Ember.js – 오픈 소스 자바스크립트 웹 애플리케이션 프레임워크
- 리액트(React) – 페이스북 등이 구축하고 관리하는 오픈 소스 자바스크립트 라이브러리
- Backbone.js : 자바스크립트 라이브러리
- J쿼리(JQuery) : 자바스크립트 라이브러리
- 미티어(Meteor) : 오픈 소스 자바스크립트 프레임워크
- 부트스트랩(Bootstrap)과 부트스트랩 자바스크립트(Bootstrap Javascript) : “응답성”을 강조하며 모바일을 우선하는 CSS 프레임워크

하이브리드 앱
하이브리드 앱은 HTML 5, CSS, 자바스크립트를 사용해 만들어진 다음 래퍼 안에서 다양한 모바일 플랫폼에서 네이티브 앱으로 실행된다. 표준 웹 개발을 사용하지만, 최종 앱은 기기에서 네이티브 앱으로 실행된다. 네이티브 앱과 웹 기반 앱의 장점만 결합하기 위한 방법이다.

가장 적합한 분야…
- B2B 및 B2E 앱
- 내부 회사 서비스 및 리소스
- 여러 플랫폼에 네이티브 앱을 배포하고자 하는 기업

장점
- 웹 표준을 사용하여 제작(API를 통해 폰 기능에 접근하기 위한 약간의 특수한 코딩이 필요)
- 기업은 기존 웹 개발자를 활용하여 하이브리드 앱 개발 가능
- 신속한 수정, 업데이트 및 배포 가능
- 각 플랫폼에서 네이티브 앱으로 실행됨

단점
- 인터페이스가 표준 네이티브 앱과 다를 수 있음
- 특히 게임 및 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있음
- 일반적으로 장치의 모든 센서 및 하드웨어에 접근할 수 있지만 새 기능을 지원할 때까지 다소 시간 지연 발생 가능
- 네이티브 애플리케이션 “셸”의 각기 다른 코드 베이스를 유지해야 할 수 있음
- 개발자는 웹 앱을 네이티브 앱으로 변환시키기 위한 부가적인 소프트웨어를 사용해야 함

개발 도구
기존 웹 코드를 가져와 네이티브 앱으로 변환해주는 도구부터 일체의 개발 환경에 이르기까지, 세 가지 중 개발 도구가 가장 다양하다. 다음은 그 중 극히 일부일 뿐이다.

- 아파치 코도바(Apache Cordova) : HTML 5, CSS, 자바스크립트를 사용하는 모바일 웹 앱을 가져와 이를 기반으로 네이티브 모바일 앱을 빌드하는 오픈 소스 플랫폼
- 어도비 폰갭(Adobe PhoneGap) : 어도비에서 만든 아파치 코도바의 변형
- 알파 애니웨어(Alpha Anywhere) : 웹 앱을 제작하고 이를 네이티브 앱으로 배포할 수 있게 해주는 개발 환경. 프로그래밍 경험이 부족하면 부족한대로 사용 가능하고, 숙련된 프로그래머라면 자신의 코딩 기술을 활용할 수 있다.
- 아이오닉 프레임워크(Ionic Framework) : 앵귤러JS 및 코도바와 연계해 웹 앱을 기반으로 네이티브 앱을 빌드하는 사용자 인터페이스 중심의 프레임워크
- 아웃시스템(OutSystems) : 시각적 도구를 사용한 웹 앱/네이티브 앱 빌드 지원
- 코니(Kony) : 다양한 플랫폼의 네이티브 앱 빌드를 위한 다양한 도구를 제공하는 플랫폼
- 자마린(Xamarin) : 네이티브 앱 빌드를 위한 크로스 플랫폼 개발 플랫폼
- 앱셀러레이터(Appcelerator) : 자바스크립트로 앱을 작성한 다음 이를 기반으로 네이티브 앱을 빌드할 수 있게 해주는 크로스 개발 플랫폼

editor@itworld.co.kr