하이브리드 앱 개발을 위한 Ionic 프레임워크 시작하기

Ionic 프레임워크란?

Ionic 프레임워크는 모바일 앱에서 사용되는 UI를 HTML, CSS, JavaScript 를 이용하여 아주 간단하게 제작할 수 있게 도와주는 프레임워크이다.

http://www.ionicframework.com/

발표된지 1년이 넘었으며 하이브리드와 모바일 커뮤니티에서 엄청난 지지를 받고 있으며 성능면에서도 부족한 점이 없는 네이티브 앱처럼 만들기 위해 Ionic 팀이 상당히 노력하고 있다고 한다.

npm 사용을 위해 Nodejs 설치하기

Ionic 을 설치 하기 위해서 npm 을 사용하기 때문에 이를 위해서 Node.js 를 설치해야 합니다. 참고로 npm(Node Packaged Module) 은 Node.js 에서 사용되는 모듈을 패키지로 모아놓은 곳입니다.

https://nodejs.org/

Cordova(폰갭), Ionic 설치하기

Cmd 창을 열고 npm 명령어를 이용하여 Cordova 와 Ionic 을 설치합니다. 참고로 -g 옵션은 글로벌 설치 옵션입니다.

$> npm install -g cordova ionic

Ionic 프로젝트 생성하기

프로젝트 생성을 원하는 경로로 이동을 한 후 Ionic start 명령어를 이용해서 프로젝트를 생성합니다.

$> ionic start 프로젝트명 템플릿옵션 
$> ionic start myApp tabs
$> cd myApp/

apk 파일 만들기

프로젝트 폴더로 이동 한 후 android 플랫폼을 추가하고 build 합니다.

apk 파일은 "myApp/platforms/android/build/outputs/.apk" 경로에 만들어 집니다.

$> cd myApp/
$> ionic platform add android
$> ionic build android

웹으로 확인하기

apk 파일을 만들기 전 UI 를 웹으로 확인 할 수 있습니다.

serve 명령어를 입력하시면 자동으로 브라우저가 실행되며 UI를 확인할 수 있습니다.

$> ionic serve