Ionic Framework 설치 및 시작

아이오닉 프레임워크는 HTML, CSS, Javascript (특히 AngularJS) 를 기반으로, 모바일 하이브리드 앱을 구축하는 노드, Cordova 기반의 프레임워크다. 일단 설치만 하면 평범하게 AngularJS로 웹개발을 한다는 생각으로 작업을 하며 앱을 만들 수 있다는 장점이 있다. 스크립트 언어로 개발하는 것을 선호하는 입장에서 아이오닉은 매우 빠르고 편한 프레임워크라고 생각한다. 여기서는 설치하는 것만 기록한다.

1. 노드.js

우선 노드 (Node.js) 가 필요하다. 노드가 설치되어있지 않다면 노드 공식 페이지를 찾아가 설치하자.

2. 코도바, 아이오닉

npm (노드 패키지 매니저) 를 통해 코도바와 아이오닉을 전역 설치하자.

npm install -g cordova ionic

3. 아이오닉 프로젝트 시작

설치한 아이오닉의 명령어를 통해 새로운 프로젝트를 시작하자

ionic start newApp blank

마지막 blank는 아무 것도 없는 빈 앱을 만들어줌을 의미한다. 반대로 아이오닉에서 미리 만들어둔 템플렛들이 있어서 그 것을 사용하려면 blank 대신 입력하면 된다.

ionic start newApp tabs

ionic start newApp sidemenu

프로젝트를 시작하면 newApp이라는 이름의 폴더가 만들어지고 그 안에 ionic이 알아서 필요한 구성품을 기본으로 생성해준다.

4. 빌드

우선 아무 것도 작업을 하지 않고 바로 새 프로젝트를 확인만 해보자.

우선 웹브라우저에서 확인하려면 새 프로젝트 폴더 안으로 들어가서 다음 명령을 실행하면 된다.

ionic serve

그러면 자동으로 웹브라우저가 펼쳐지면서 멋진 빈 프로젝트를 볼 수 있다. serve 명령은 실시간으로 수정 사항을 반영해준다. 이 명령을 실행한 상태에서 내부 소스를 고쳐서 저장하는 순간 웹브라우저의 페이지 역시 새로고침되면서 바뀐 소스의 페이지가 반영된다.

다음은 실제 스마트폰에 앱을 설치해서 확인해본다. ios는 만져본 적이 없어서 안드로이드 플랫폼만 추가한다.

ionic platform add android

위 명령은 안드로이드 SDK를 설치하기 때문에 작업을 끝내려면 많은 시간이 걸린다. ionic을 통해 모바일 개발을 다루면서 SDK로 인한 기다림이 꽤 길기 때문에 잉여 시간에 무엇을 할 지 생각해보는 것도 필요할 것 같다. 위 작업이 끝나면, 다음 명령을 통해 연결된 스마트폰에 앱을 설치할 수 있다.

ionic run android

튜토리얼만 기록해두었다. 실제 개발은 결국 앵귤러 개발로 귀결된다. 앵귤러 공부를 잘 해두면 웹과 모바일 양 쪽을 고려할 수 있는 기술 스택이 될 것이다.

---

참조 링크

아이오닉 공식 페이지: 설치, 컴포넌트 설명, 포럼 등 모든게 다 있다.
http://ionicframework.com/