ionic framework 와의 첫 만남 ... 하이브리드앱 개발의 혁신

하이브리드앱 개발을 위해 Study 를 진행하던 중에, ionic framework 라는 것을 접하게 되었습니다. 아주 간단하고 빠르게 하이브리드앱을 개발할 수 있다는 말을 듣고, ionic 을 소개하는 유튜브 영상으로 Preview 를 해봤네요

이 영상대로만 된다면야, 워드문서 한장 만드는 것처럼 쉽다는 말인데.....  우선, ionic.io 에 접속하여 Get Started Free 버튼을 눌러 ionic 의 세계로 들어가 봅니다. 

참고 :  http://ionicframework.com/getting-started/

1번 안내에서 하라는 대로, 제일 먼저, Node.js 를 설치합니다

그리고는 cordva와 ionic 실행을 위한 command-line-tool 을 설치합니다. 좀 전에 node.js 를 설치했는데요, 시작메뉴에 보면 node.js commanline prompt 라는 메뉴가 추가되어 있을겁니다. 그걸 실행한 후에 npm install -g ionic 이라고 입력하면 됩니다.

이때, ionic 을 npm으로 설치한 후에 실행시켜보면, cordova 를 upgrade 하라고 나오는데요, npm install -g cordova 를 실행해 주면 됩니다.

이것을 한꺼번에 처리하려면 아래와 같이 실행해 주면 됩니다.

sudo npm install -g ionic cordova

그 다음 2번 안내에 따라, 원하는 타입의 template 을 선택하여 ionic 을 실행한 후, 

3번 안내에 따라 아래의 명령을 실행시켜주면 끝!!!

저의 경우에는 위와같이 실행시켜보니 아래와 같은 Error 가 발생했습니다.

Error : Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. 

Faild to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory. 

Error 해결은 일단, 다음으로 미루기로하고, 우선 브라우저 상에서 테스트 하기위해 아래의 명령을 입력해 봅니다. 

ionic serve

옵션을 주면, ios 와 Android 2개의 화면으로 보여집니다

ionic serve --lab

이 뿐만 아니라 ionic Creator 라는 Tool 도 있는데요, 이것은 마치 영화제작할때의 콘티처럼, 프로토타이핑 수준의 작업만으로도 훌륭한 하이브리드앱을 개발할 수 있게 해주는 일종의 에디터라고 보면 됩니다.

또한, 이러한 에디터에서 활용할 수 있는 앱/플러그인/템플릿 등이 많이 준비되어있는 마켓까지 있다고 하네요.

아래 화면이 ionic creator 화면인데요... 딱 보기만 해도 마치 파워포인트처럼 쉬운 인터페이스를 보여주고 있습니다. 

ionic 관련하여 참고할 만한 블로그 하나 기록으로 남깁니다.

http://blog.saltfactory.net/

ionic  : http://ionic.io
ionic framework : http://ionicframework.com

Ionic Framework를 이용하여 하이브리드앱 개발하기
http://blog.saltfactory.net/ionic/develop-hybrid-app-using-with-ionic-framework.html

Ionic framework를 이용하여 하이브리드 앱 개발하기 - 2. 탭메뉴, 슬라이드메뉴
http://blog.saltfactory.net/hybridapp/create-tabmenu-slidemenu-in-ionic.html

Ionic을 이용한 iOS, Android 하이브리드 앱 개발 사례
http://blog.saltfactory.net/ionic/create-hybrid-app-using-ionic.html

어제, ionic framework 관련 정보를 찾아보던중에, ionicframework.com 사이트에 가입하고, ionic creator 를 테스트 해봤었는데요, 환영 이메일이 오늘 도착했습니다.

프로토타이핑은 마치 영화의 콘티처럼, 큰 프로젝트를 진행할때 간략하게 UI를 구성해서 대략적인 흐름을 보기위해 사용하는 방식인데, ionic creator 는 프로토타이핑 정도의 단순한 방식만으로 하이브리드앱을 개발할 수 있는 툴 이라고 합니다.