Angular js 기반 하이브리드 앱 프레임워크 “ionic”

ionic 소개 : http://lazydev.tistory.com/category/DevLab/Ionic

ionic은 Angular JS 및 cordova 기반의 Hybrid App Framework입니다. 정말 다양한 기능을 내포하고 있으나, 이번에는 간략한 소개 및 설치 방법에 대해 알아보려고 합니다.

1) 만들기 쉬운 App

ionic framework는 명령어 하나만으로도 간단하게 앱을 구성할 수 있습니다. 또한, Angular JS 기반이기 떄문에, Angular JS만 익숙하시다면 금새 디자인적으로나 기능적으로 완벽한 Hybrid App을 구현할 수 있습니다.

자세한 내용은 설치 방법과 함께 보시면, 정말 이렇게 간단하게 앱을 만들 수 있구나를 알게 되실겁니다.

2) 쉬운 Build

기존의 Hybrid App은 Android Studio나 xcode를 통해서 폰갭을 활용하여 앱을 만들고, 빌드를 수동으로 해주어야 했습니다. 따라서, 다양한 플랫폼의 앱을 만들기 위해서는 그에 맞는 개발 환경이 갖추어져야 했습니다.

그러나, ionic framework는 이러한 불편한 점 없이, command를 통해 간단하게 플랫폼 환경을 추가할 수 있으며, build 및 emulate도 가능합니다.

3) Live Reloading 지원, 쉬운 디버그

Hybrid App은 HTML5를 통해서 만드는 특성 상, 디버깅이 어려웠습니다.

따로 웹 환경을 구성하여 테스트하고, 이를 디바이스에 적용할때도 어려운 점들이 한두가지가 아니었습니다. 그러나, ionic framework는 자체적으로 server에 올리고, live reloading을 통해서 실시간으로 변경 사항을 확인하실 수 있습니다.

실제로, 현재 하고 있는 프로젝트의 클라이언트에게 앱을 보여주기 위해 실시간으로 앱 업데이트를 해주어야 하는 사항이 있었습니다. 기존 같으면, 오프라인으로 자주 만나서 회의를 해야 했으나, ionic에서는 계정 등록을 하고, 자체적으로 android, iOS에 ionic Viewer App이 있어서, upload를 통해서 실시간으로 클라이언트들이 확인할 수있는 환경이 제공될 수 있었습니다.

제가 알려드린 특성만으로도 충분히, Hybrid App 개발자 분들은 솔깃하실 것이라고 생각합니다.

간단한 ionic 설치 및 App 시작을 해보도록 하겠습니다.

설치하기

ionic framework는 Node JS 환경이 갖추어져야 합니다. Node JS를 설치하시고, npm을 통해 install이 가능합니다.

node js가 설치되셨다면, command(Windows 환경에서는 Git Bash를 추천드립니다.)창에서 npm을 통해 ionic을 install합니다.
$ npm install ionic -g
간단한 명령어 만으로 ionic이 설치 되었습니다. 여기서 주의하실 부분은 command에 -g를 통해서 전역으로 설치해주셔야 합니다.

App 생성

이제 준비는 끝났습니다. App을 만들기 위해서는 코드 한줄이면 끝납니다. 생성할 수 있는 ionic project는 3가지입니다.

1) blank : 아무것도 구성되어 있지 않은 빈페이지 프로젝트를 생성합니다.

2) tabs : 하단에 탭메뉴가 구성되고, 헤더가 있으며, 콘텐츠가 구성되어 있는 프로젝트를 생성합니다.

3) sidemenu : 왼쪽 상단의 햄버거버튼과, 왼쪽에서 슬라이드 되는 사이드메뉴가 포함된 프로젝트를 생성합니다.

기본적인 프로젝트 생성 명령어는 다음과 같습니다.

$ ionic start "App이름" "Project 타입"

예를 들면, MyApp이라는 이름을 가진 sidemenu가 포함된 App Project를 생성하고자 할때에는
$ ionic start MyApp sidemenu

명령어 한줄로, 프로젝트를 다운로드함과 동시에 sidemenu가 포함된 MyApp이라는 이름의 프로젝트가 생성됩니다.
이제, 프로젝트 기획에 맞춰서 코딩만 하시면 됩니다.

빌드 & 실행하기

준비가 다 되셨다면, 이제 실행해볼 일만 남았습니다.구동하고자 하는 플랫폼에 따라 약간의 준비과정이 필요합니다.

1) iOS : XCode가 설치되어 있어야 합니다.

2) Android : 구동을 위해서는 JAVA 설치 및 Android SDK가 설치되어 있어야 합니다.

플랫폼 환경 구성이 완료되셨다면, 프로젝트를 생성한 폴더로 이동합니다.MyApp이라는 프로젝트를 생성하면서, 폴더 이름도 MyApp으로 되어 있을테니, MyApp 폴더로 이동합니다.

$cd MyApp

MyApp으로 이동하셨다면, ionic 명령어를 통해서 플랫폼 환경을 add해 주어야 합니다.

1) iOS
$ ionic platform add ios
2) Android
$ ionic platform add android
플랫폼 환경이 추가되었다면, 빌드 과정이 남았습니다. 빌드 과정도 한줄이면 끝납니다.


$ ionic emulate ios
$ ionic emulate android


두 명령어중, 플랫폼에 맞는 명령어를 사용하시면 됩니다.

이제, 만든 앱을 테스트 해보기 위해서 실행을 해야합니다. 실행은 emulate로 하는 방법과, android는 기기에 직접 테스트 하는 방법이 있습니다.

1) emulate

$ ionic emulate ios
$ ionic emulate android

위의 명령어를 입력하시면, 플랫폼에 맞는 에뮬레이터가 실행되며, MyApp으로 만든 프로젝트가 실행됩니다.
2) android device running

$ ionic run android
android 환경 테스트를 위해, 안드로이드 환경설정에서 개발자모드에 USB 디버깅에 체크를 하신 후,
USB를 연결합니다. 연결 후에 위 명령어를 치시면, 자동으로 기기에 MyApp Project App이 설치됩니다.