Ionic, Cordova 기반 하이브리드 안드로이드 애플리케이션 개발 사례 공유

안녕하세요? SK 플래닛에서 시럽스토어 개발에 참여하고 있는 임상석입니다.

본 글에서는 최근 크로스 플랫폼 어플리케이션 개발 시 각광을 받고 있는 Ionic HTML5 프레임웍에 대해서 소개하고 이를 기반으로 시럽 스토어 어플리케이션 상용 개발 시 기술적으로 부딪혔던 각종 도전 및 해결 사례를 소개 드리고자 합니다.

Ionic은 Anjularjs를 기반으로 개발된 오픈소스 프레임웍(http://ionicframework.com/)으로 안드로이드와 iOS 어플리케이션을 자바스크립트로 개발 가능하게 해줍니다. 화면을 구성하기 위한 각종 UI 콤포넌트를 CSS, Angularjs Directive, JavaScript 형태로 제공하고 이를 이용해서 간편하게 구성 가능합니다. UI의 심미적인 특징으로는 기본 제공하는 UI Theme이 안드로이드와 iOS 네이티브 플랫폼에서 제공하는 UI Look&Feel을 매우 흡사하게 완성도가 높게 제공하고 있고, 이것의 동작 성능도 HTML5의 하드웨어 가속 기능을 최대한 활용하고 있어서 안드로이드 4.2 이상, iOS 7.0 이상에서는 상용화 가능한 수준의 성능을 기본적으로 제공합니다. 안드로이드 4.0-4.1에 대해서는 배포 바이너리 사이즈의 크기가 18MB 정도 증가하지만 인텔 크로스워크를 (https://crosswalk-project.org/) 사용하면 최소한의 UI 성능 확보가 가능합니다.

Ionic에서 제공하지 않는 네이티브 플랫폼 기능은 Cordova 프레임웍(https://cordova.apache.org/)을 통해 개발 가능합니다. Ionic은 기본적으로 Cordova와 CLI (Command Line Interface)를 통해서 통합 제공하고 있으므로 Cordova 플러그인들을 간단히 설치하고 개발 및 상용 배포까지 매우 간편하게 CLI를 사용하여 가능합니다.

Ionic에서 제공하는 기본 기능만을 통해서 일정 수준의 크로스 플랫폼 어플리케이션 개발이 가능하지만, 실제 상용 수준의 개발을 위해서는 Ionic의 내부 동작 특성을 충분히 이해하고 최적화를 진행해야 하고, 필요 시 프레임웍 변경이 필요합니다. 몇 가지 예로, 기본 제공되는 SVG 아이콘은 뷰포트 밖에서도 과도한 CPU의 사용으로 CSS 아이콘으로 대체를 해야하고, 안드로이드 롤리팝에서 CSS Gradient 속성의 성능 저하로, 각종 UI 요소의 border등은 CSS gradient를 사용하지 않고 비트맵 이미지를 사용하여 대체를 하였습니다. HTML5에서 가장 구현하기 난해한 ScrollView의 경우에는 Ionic에서 기본 제공하는 JS scroller와 CSS Transform 기반 Scroller를 단말의 성능 및 OS 버전별로 선택적으로 사용하도록 개발자가 직접 설정을 해주어야 합니다. 마지막으로 긴 리스트 뷰인 경우에는 Anjularjs의 ng-repeat를 개선한 collection-repeat를 사용하는 것을 권장합니다. 이때 collection-repeat의 성능은 item-render-buffer에 적절한 값을 설정해서 최적화하는 것은 필수입니다.

시럽 스토어 어플리케이션 개발사례(https://play.google.com/store/apps/details?id=com.skp.syrupstore.ssm)를 통해서 전체 코드를 분석 시 순수 JavaScript로 개발된 코드는 전체의 85% 수준이고, 나머지 부분은 Cordova 플러그인 형태로 Java와 Swift를 통해서 안드로이드와 iOS 버전을 각각 개발하였습니다. 이것의 의미는 크로스 플랫폼 구현을 위한 전체적인 코드 재활용률을 상당히 높일 수 있었고 이에 따른 개발 기간 및 투입 인력에서도 효율화가 가능하다는 것을 증명하였습니다. 크로스 플랫폼 어플리케이션 개발엔 관심이 많은 개발자라면 Ionic, Angularjs, Cordova 기반 어플리케이션 개발로써 충분히 달성 가능하고 추천 드립니다.

아래 강의자료와 동영상을 참고하시면 됩니다.

Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유

임상석 Syrup Store개발그룹

2000-2006년까지는 Linux network stack과 file system을 최적화하여 고성능 스트리밍 서버를 개발하였고, 2006-2011년까지는 Smart Phone용 WebKit 기반 Web Browser를 개발하였습니다. SK 플래닛에 합류한 2011년 부터는 JavaScript 기반 Web application platform을 개발중입니다.

Facebook LinkedIn 

공유하기