[웹키워드#7] 하이브리드앱, ionic

잡스에 의해 아이폰이 세상에 공개된 이후, 스마트폰은 전세계로 퍼져나갔다. IT 생태계도 기존 PC에서 모바일로 급격히 이동되었다. 이에, 모바일 애플리케이션에 대한 사람들의 요구가 증가하였다. 

현재 모바일 시장은 Android와 iOS가 양분하고 있다. 하지만 대기업 혹은 대형 포털회사를 제외한 곳에서 2개의 언어로 애플리케이션을 개발하기란 쉽지 않다. 이를 보완하고자 등장한 것이 하이브리드 앱이다. 

하이브리드앱이란? 

하이브리드앱이란 '웹 + 네이티브앱' 으로 이루어진 애플리케이션이다. 애플리케이션 내 내용을 HTML, CSS등을 이용한 기술로 구성한다. 이 구성된 내용을 가지고, 네이티브 앱이란 그릇에 담아 출시하는 것이 하이브리드 앱의 기본 개념이다. 

하이브리드 앱 기술을 사용하면 웹 기술로 만든 하나의 page로 iOS와 Android 2개 부분에서 퍼블리싱이 가능하다. 이에 시간을 단축 할 수 있으며, 각각 iOS와 Android에 대한 많지 않은 지식으로도 애플리케이션을 퍼블리싱할 수 있다는 장점이 있다. 

- 하이브리드앱의 장점

• 네이티브API와 브라우저 API를 이용한 다양한 개발이 가능
• 웹 기술을 사용해 앱을 개발 가능 (UI를 통합하여 단일 코드로 개발 가능)
• 한번의 개발로 다수의 플랫폼에 대응 가능 

- 하이브리드앱의 단점

• 네이티브 기능에 접근하기 위해 결국 네이티브 지식이 필요
• 웹뷰에서 앱을 실행하는 경우이기에 앱의 성능이 곧 브라우저의 성능
• UI프레임워크 도구를 사용하지 않는다면 개발자가 UI를 제작해야 함

Ionic (아이오닉)

위에 언급한 것과 같이 하이브리드앱이 비록 성능 부분에서 단점을 가지고 있지만, 가지고 있는 여러 장점들 덕분에 활용하려는 사람들이 점점 늘어나고 있다. 이에 발 맞추어 하이브리드 앱 기술 및 Framework 또한 여러가지 것들이 세상에 나오고 있다. 

Phonegap, Framework7, JQuery mobile, senchatouch등 많은 기술들이 세상에 나왔다. 그 중 현재 전세계적으로 가장 많이 사용되고 있는 하이브리드앱 기술이 Ionic이다. ionic은 nodeJS와 AngularJS를 기반으로 만들어졌으며, 다음과 같은 특징들을 가진다. 

- Ionic의 특징

• Cordova(Phonegap) 환겨을 제공한다. 
• Cordova(Phonegap) 플러그인을 사용할 수 있다. 
• AngularJS 기반으로 SPA(Single Page Application)를 MVC나 MVVM 패턴으로 개발할 수 있다. 
• 네이티브에 가까운 UI 컴포넌트들을 제공한다. 
• HTML5 애플리케이션을 빠른 시간 안에 개발할 수 있다. 

(출처: http://mobicon.tistory.com/488)

Ionic 공식 블로그에서는 다음과 같이 소개하고 있다. Where does the Ionic framework fit in Ionic"의 궁극적인 목표는 HTML5를 이용해 네이티브 앱을 더 쉽게 개발하기 위한 것이라고 소개하고 있다. 

Ionic은 nodeJS를 사용하여 자체적인 command를 가지고 있다. AngularJS를 사용하여 UI 또한 구성할 수 있다. 앱스토어 및 플레이스토어에 쉽게 등록할 수 있도록 설정을 할 수 있다. 마지막으로 위에 장점에도 설명하였듯이 자체적인 UI 컴포넌트를 가지고 있어 쉽게 애플리케이션을 구성할 수 있다. 아래 사진은 Ionic 자체 컴퍼넌트를 사용한 예제이다. 

(출처: http://blog.saltfactory.net/ionic/create-hybrid-app-using-ionic.html)

최근 Ionic 팀에서는 Ionic2를 배포하엿다. (Ionic팀의 Ionic2 소개) 기존 Ionic에서는 AngularJS를 사용하였지만 Ionic2에서는 시대의 흐름에 맞추어 AngularJS2를 사용하였다. 그러면서 자연스럽게 AngularJS 버전이 바뀌면 JavaScript에서 TypeScript로 옮겨간 것 처럼, Ionic또한 TypeSript를 사용하고 있다. 

Ionic에 대한 자세한 정보를 알아보기 위해서는 'Ionic 공식 홈페이지' 및 'Ionic 포럼'을 확인해보면 좋다. 현재 Ionic에 대한 정보는 Stackoverflow보다 Ionic 포럼을 활용해야만 더 자세히 알 수 있을 것이다. 

참고

http://blog.saltfactory.net/ionic/create-hybrid-app-using-ionic.html

http://mobicon.tistory.com/488