Ionic 하이브리드 앱

Ionic 접하기

휴... 이제는 Ionic이냐...

어찌어찌하다 배우려고 마음만 먹고 공부할 생각도 사용을 고려한적도 없던 Ionic을 보기로 했다. (그냥 쓰윽...) 우선은 Ionic 공식 사이트에서 친해지기 모드로 쑤욱~ 훑어보자. 일단 닥치고 시작하는게 최고!!!.

Ionic 공식 사이트

우선 계정을 만들고 Get Started를 눌러 천천히 살펴보자.

1. Install Ionic

개발의 기본은 설치다. 가끔 이걸 잊는 사람들이 많다. Ionic을 시작하기 앞서 자신의 맥 혹은 윈도우에 Node.js가 필요하다. NPM을 사용해 cordova와 ionic을 설치한다.

$ npm install -g cordova ionic

2. Start a project

cordova와 ionic 설치가 정상적으로 완료되었으면(저 윗단계에서 실패하는 사람들도 많다. 처음엔 나도 그랬으니 좌절하지 말고 sudo도 해보고 권한 조정도 잘해보자!) 이제 프로젝트를 생성한다. 자신이 원하는 디렉토리로 이동한 후 아래와 같은 명령어를 실행한다.

$ ionic start myApp tabs

명령어는 ionic으로 시작하며 start는 신규 프로젝트를 생성한다. 여기서는 공식 사이트에 나온 그대로의 명령어를 따라하여 myApp이라는 프로젝트를 생성하였다. 그러면 tabs는 뭐지??

Ionic은 ready-made app templates(미리 만들어 놓은 템플릿...)을 제공한다. 빈 템플릿까지 총 3가지의 템플릿 중 하나로 앱을 생성할 수 있다. 위의 명령어는 3가지의 템플릿 중 하나인 tabs를 선택하여 앱을 생성하는 명령어이다.

blank는 빈 템플릿의 앱을 실행한다. tabs는 하단의 메뉴 버튼을 제공하며 메뉴가 단순할 때 이용하면 효과적일 것 같다. sidemenu는 말 그대로 사이드 내비게이션 메뉴를 제공하는 템플릿이다.

3. Run it

자 그럼 실행해 보자. (앱등이는 아니고 아이맥, 맥북, 아이폰만 사용하는 관계로 맥에서만 테스트 해보았다.)

$ cd myApp

먼저 생성한 프로젝트의 디렉토리로 이동한다.

$ ionic platform add ios

그 후에 ios(여기서는 ios로 테스트했다. android는 android를 입력하면 된다.) ios 플랫폼을 추가하는 명령어를 실행한 후,

$ ionic build ios

빌드과정을 마친후 마지막 명령어를 입력한다.

$ ionic emulate ios

그러면 아래와 같이 시뮬레이터가 실행된다. (다시한번 말하지만 Mac OS에서 ios를 실행한 결과이다.)

물론, 이 외에도 웹브라우저에서 확인할 수 있는 serve 명령어와 앱스토어에 있는 Ionic View라는 어플을 이용해서 실행 및 확인하는 방법등이 존재한다.

Ionic은 무엇인가?

자 일단 아무것도 모르는 상태에서 Ionic을 접해보았다. 그러면 이쯤에서 갑자기 이런 생각이 들것이다. '나 왜 지금 이걸 왜 쳐다보고 있지?! 근데 도대체 이게 뭐지??'

Ionic은 하이브리드 모바일 앱을 빠르고 간편하고 아름답게 만들기 위한 결합체(Combination)라고 한다.( Ionic in action 인용) 못믿겠지만 그렇다더라... 그러면 이 프레임워크는 어떻게 동작하는가?!

먼저 사용자가 앱을 실행하면 Device, 즉 기기는 cordova app wrapper를 로드한다. cordova는 html, css, js를 사용하여 실행할 수 있는 모바일 앱을 만드는 플랫폼으로 web application을 로드하는 native app이다. 우리는 이것을 하이브리드 모바일 앱이라고 부른다. 웹 앱과는 다르게 하이브리드 모바일 앱은 html, css, js를 사용하여 구현하지만 native app안에서 구동되기 때문에 기기의 고유 기능에 접근할 수 있다.

*오호... 그럼 앱 개발은 무조건 이걸로 하면 되겠네라는 쓸데없는 생각은 접어두자. 그런 생각을 하다가 망한 회사도 봤다. 그 부분은 추후에 언급하겠다.

cordova app wrapper가 열리면 cordova javascript api를 통하여 WebView가 index.html 파일을 렌더링한다. 이 index.html은 AngularJS의 인덱스 페이지로, 이제부터는 웹 어플리케이션이 실행된다. Ionic은 웹 어플리케이션에서 UI 컴퍼넌트를 렌더링하게 된다.

그럼 앱 개발자가 필요없겠네?!

대뜸 이런말부터 하면 좀 맞아야 된다.

우선은 네이티브 앱의 장점에 대해서 얘기해보자. 

장점 1. Native APIs

네이티브 앱이니까 당연한 이야기이지만 네이티브 API를 앱 내에서 직접 사용함으로써 플랫폼과 견고하게 연결될 수 있다.

장점 2. 성능

당연히 기기 혹은 환경 등에 맞는 최상의 성능까지 끌어올릴 수 있다.

장점 3. 동일한 환경

1번과 같은 이야기지만 동일하거나 친숙한 언어와 API를 사용하므로 개발자 친화적이다.

그러면 단점은 없을까??

단점 1. 언어(학습 혹은 개발자가 필요하다)

당연한 이야기지만 앱 개발에는 그에 맞는 언어가 필요하다. 그리고 플랫폼의 특정 API에 대한 선행지식이 반드시 필요하다. (그럼 Ionic은 아니냐!!!)

단점 2. 따로 개발해야한다.

뭐 특별히 방법이 없지는 않지만 그 성능과 잡무의 가능성을 생각하면 플랫폼에 맞게 따로 개발을 해야한다. 이는 곧 인건비의 상승!!! (심신의 안녕과 평화를 위해서는 인건비가 더 드는게 대수냐)

단점 3. 비용의 상승

2번에서 언급했듯이 따로 개발해야한다. 그러면 한 사람이 android와 ios를 둘 다 개발하거나 아니면 두 개발자가 한 app을 플랫폼 별로 따로 만들어야 한다. 전자의 개발자는 많이 없고(두 가지의 품질을 맞춰줄만한...) 그만큼 시간이 더 걸린다. 후자는 인원의 부담이 생긴다. 어찌됐건 쩐이 많이 든다.

내가 좀 아재스러워서 그런지 아니면 변화를 싫어해서 그런지는 모르겠지만 단점들에 대해 거부감은 없다. (상기 내용은 Ionic in actions에 기술된 내용이다.) 그만큼 장점들이 (특히나 성능에 있어서는 더할나위 없이) 단점을 커버할만큼의 이점을 준다고 생각한다. 우선, 플랫폼에 맞는 전문지식을 가진 개발자가 있기에 프로젝트의 한 부분을 맡길 수 있고 또 그걸 바탕으로 안정적인 개발이 진행될 수 있으며 사후 품질관리 역시도 원활하게 수행할 수 있지 않을까?!

카메라, 사진첩의 접근이라든지, 위치기반 서비스가 필요한 곳이라면 모바일 웹으로는 대체할 수 없는 프로젝트들이 상당수 존재한다. (물론 안되는거 빼고 까라면 까겠지만 성능과 기능의 구현에서는 많은 차이가 날 것이다.)

그런데 왜 Ionic을 사용하는가?! (물론 어쩔 수 없을때 사용하게 된다.) 네이티브 앱 개발자가 존재하지 않을 때, 비교적 간단한 어플리케이션을 빠르게 만들어야 할 때 필요할 것이며 이 외에도 저마다의 이유가 여럿 있을것이다. 그중에서도 위의 네이티브 앱의 단점 3가지 중 3가지 모두가 부담이 되거나 가능하지 않을 때에는 하이브리드가 정답이 될 수 있을것이다. (이 부분은 지극히 개인적인 의견임!!!) 그 중에서도 AngularJS에 대한 경험이 있다면 Ionic 사용이 도움이 될것이다.

맛보기는 여기까지만...

오늘은 Ionic의 간단한 설치와 프로젝트 생성, 프레임워크의 구조를 알아보았다. 다음에는 이것저것 하나씩 뜯어보겠다. 언제할지는 모른다. 안할수도 있다. 이건 연재가 아니기 때문에...