하이브리드앱 개발 (1) – Ionic Framework 개발환경 구축

Ionic Framework는 Cordova 기반의 WebApp 개발 도구이다. Web 기반이라고 하지만 GPS, 카메라 등 스마트폰의 하드웨어에 접근하거나, 알림 등 시스템에 접근이 가능하기 때문에, 굳이 Native로 앱을 개발하지 않아도 다양한 어플리케이션 개발에 사용 될 수 있다. 현재 최신 버전은 v4 이고 Angular2 기반으로 UI 컴포넌트가 구성되어 있다. 동일한 코드로 UI 개발을 해도 안드로이드의 경우 Material Design, 아이폰의 경우 iOS Flat Design 기반으로 UI를 생성해준다. 주요 다룰 이슈는 아래와 같다.

• 웹 브라우저를 통한 개발환경 구축 (네트워킹 문제 포함)
• CORS (Cross Origin Resource Sharing) 관련 이슈
• Ionic Framework UI 컴포넌트 구성
• Ionic Framework Native API
• Ionic Framework와 Cordova 기반 개발환경의 차이

Ionic Framework 개발환경 구축

Ionic을 사용하기 위해서는 필요한 소프트웨어 패키지는 아래와 같다.

• Node.js
• Cordova
• Android Studio (안드로이드 앱 빌드), Xcode (iOS 앱 빌드)
• Gradle
• WebStorm 또는 Atom, VScode 등 에디터
• Firefox 또는 Chrome

Ionic은 Cordova 기반으로 모바일 어플리케이션을 빌드한다. Cordova는 Node.js로 만들어진 프로젝트로 NPM을 통해 설치 할 수 있다. 먼저 Node.js를 설치 한 후 아래 명령어를 통해 Ionic CLI를 설치한다.

$ npm install -g cordova ionic

위의 명령어를 실행하면 터미널에서 ionic 명령어를 사용하여 프로젝트를 생성하고 빌드 할 수 있다. 만약 리눅스나 Mac에서 설치가 안된다면, Node.js Global 라이브러리의 경로의 권한을 사용자에 맞게 변경하거나 sudo 명령어를 사용하여 ionic 명령어를 실행한다.

$ ionic start myApp tabs

Ionic 설치가 정상적으로 되었다면 위의 명령어를 실행하여 프로젝트를 생성한다. 위의 명령어는 myApp 이라는 이름으로 tab UI를 사용하는 프로젝트를 생성한다. UI 종류로는 blank / tabs / sidemenu 가 있는데, blank로 생성 한 후 직접 탭 또는 사이드메뉴를 구성 할 수도 있지만, 명령어를 통해 구성하면 기본 구조를 생성해주기 때문에 본인이 사용할 UI 구성에 따라 선택해서 사용하면 편리하다.

$ cd myApp && ionic serve

명령어를 통해 프로젝트를 생성하였다면 프로젝트 루트 경로로 이동하여 ionic serve 명령어를 실행한다. serve 명령어를 실행하면 웹 브라우저를 통해 개발하는 UI를 확인해 볼 수 있다. ionic serve –lab 명령어를 사용하면 운영체제에 따라 보이는 화면을 브라우저를 통해 확인 할 수 있다. 그냥 serve로 실행된 경우 http://localhost:8100, lab의 경우 http://localhost:8200 에 접속하여 화면을 볼 수 있다.

Lab을 사용하면 한번에 운영체제별로 보이는 화면을 확인 할 수 있지만, UI 오류를 확인하거나 요소검사가 불편하기 때문에 기본 serve를 사용하고 웹 브라우저에서 개발자모드에서 제공하는 device toolbar 기능을 사용하는 것을 추천한다.

웹 브라우저에서는 Cross Origin 문제로 인해 외부 서버에 접근하여 데이터를 로딩하는 것이 불가능하다. 본인이 구축한 서버에 접근하는 경우 CORS 설정을 통해 웹 서버의 리소스에 접근 할 수 있지만, 외부 서버의 API 등을 이용할 때는 접근이 불가능하다. Cordova에서 사용되는 웹뷰의 경우 Cross Origin을 무시하기 때문에 다른 도메인의 정보를 불러 올 수 있지만, 웹 브라우저에서는 접근이 안되기 때문에 개발 할 때 불편함이 있다. 이러한 문제의 경우 FireFox 브라우저의 CORS Everywhere 플러그인 설치를 통해 해결 할 수 있다. 하지만 Ionic v4부터는 Angular2 사용을 위해 Cordova와 별개의 웹뷰를 사용하는데, 이 경우 Cross Origin 문제가 발생한다. 이와 관련된 내용은 다음 글을 통해 해결 방법을 설명할 예정이다.

Ionic CLI 살펴보기

Ionic CLI를 통해 할 수 있는 작업들 중 중요한 내용을 살펴본다. 자세한 CLI 명령어는 공식 문서에서 확인하거나 –help 옵션을 통해 볼 수 있다.

$ ionic cordova platform <action> <platform> [options]
$ ionic cordova platform add androidCode language: HTML, XML (xml)

ionic cordova platform 명령어는 모바일 운영체제에 따른 어플리케이션을 빌드하기 위해 사용하는 명령어이다. 이 명령어를 실행하면 플랫폼에 따라 프로젝트가 생성된다.

$ ionic cordova build <platform> [options]
$ ionic cordova build android --prod --release --keystore=my.keystoreCode language: HTML, XML (xml)

ionic cordova build 명령어를 통해 운영체제별로 앱을 빌드하여 설치파일을 생성 할 수 있다. 안드로이드의 경우 Android Studio가 설치되어 있어야하고, Android Studio와 별개로 Gradle을 설치해야한다. Android Studio 내에 Gradle이 포함되어 있기는 하지만 Ionic을 위해 별도로 설치하는 것을 추천한다. 이 명령어를 통해 릴리즈용 어플리케이션으로 빌드가 가능하긴 하지만, 빌드된 프로젝트를 Android Studio나 Xcode에서 열어서 어플리케이션을 생성하는 것을 추천한다.

$ ionic cordova plugin <action> <plugin> [option]
$ ionic cordova plugin add cordova-plugin-cameraCode language: HTML, XML (xml)

ionic cordova plugin 명령어는 Native API 등을 사용하기 위한 Cordova Plugin을 설치하기 위해 사용된다. 이 명령어를 통해 카메라 등 스마트폰의 하드웨어 접근이 가능하도록 구성 할 수 있다.

$ ionic resources --icon
$ ionic resources --splash

ionic resources 명령어는 운영체제에 따라 필요한 아이콘, 스플래시 이미지를 자동으로 생성해주는 명령어이다. 프로젝트 내의 resources 폴더에 icon.png, splash.png를 본인이 사용할 이미지로 저장해 놓은 후 위의 명령어를 실행하면 android, ios 등 플랫폼에서 요구하는 사이즈별로 이미지를 생성해준다. 이미지를 생성 한후 플랫폼을 빌드하면 적용되어 어플리케이션이 생성된다.