이제 모든 서비스는 모바일 먼저 기획을 하고 웹 서비스로 넘어가야 한다고 생각한다. 즉, Contents -> UX -> Design -> Develop -> Launch로 넘어가면서 그 기본은 모바일이 먼저이다. 기존에 Bootstrap을 사용했을 경우 RWD (Response Web Design)이 적용되어 해상도에 따른 사용자 경험을 데스크탑과 모바일에 준하게 줄 수 있었지만 네이티브 앱과 유사한 UX 경험을 제공하기에는 부족하다. HTML5 기반으로 개발을 한다면 RWD 외에 Mobile First 전략을 가지고 있는 하이브리드 웹앱 Framework을 살펴 볼 필요가 있다. 살펴볼 두가지의-ionic, onsenui - 하이브리드 앱(모바일 웹앱) 프레임워크는 PhoneGap + Angular.js 와 결합되는 형태를 취하고 있다. mobile angular ui는 PhoneGap과 연결시키는 별도의 작업을 수반한다.
Ionic 하이브리드 웹앱 프레임워크
- Ionic 홈페이지
- PhoneGap에 최적화 되어 프로젝트를 생성해 준다.
- https://github.com/driftyco/ionic-starter-sidemenu 처럼 ionic-starter-xx의 sidemenu, tabs, blank 3가지 타입을 제고하고 있다
// 설치
$ sudo npm install -g cordova
/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
cordova@3.5.0-0.2.4 /usr/local/lib/node_modules/cordova
$ sudo npm install -g ionic
/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic
ionic@1.0.14 /usr/local/lib/node_modules/ionic
// 프로젝트 생성
$ ionic start myAppSideMenu sidemenu
Running start task...
Creating Ionic app in folder /Users/prototyping/myAppSideMenu based on sidemenu project
DOWNLOADING: https://github.com/driftyco/ionic-app-base/archive/master.zip
DOWNLOADING: https://github.com/driftyco/ionic-starter-sidemenu/archive/master.zip
Initializing cordova project.
Fetching plugin "org.apache.cordova.device" via plugin registry
Fetching plugin "org.apache.cordova.console" via plugin registry
Fetching plugin "https://github.com/driftyco/ionic-plugins-keyboard" via git clone
$ cd myAppSlideMenu
- ionic 수행
$ ionic platform add android
Running platform task...
Adding platform android
.. 생략 ..
Project successfully created.
Installing "com.ionic.keyboard" for android
Installing "org.apache.cordova.console" for android
Installing "org.apache.cordova.device" for android
$ ionic build android
Running build task...
Building platform android
Running command: /Users/prototyping/myAppSideMenu/platforms/android/cordova/build
Buildfile: /Users/prototyping/myAppSideMenu/platforms/android/build.xml
... 중략 ...
-post-build:
[move] Moving 1 file to /Usersprototyping/myAppSideMenu/platforms/android/ant-build
[move] Moving 1 file to /Users/prototyping/myAppSideMenu/platforms/android/CordovaLib/ant-build
debug:
BUILD SUCCESSFUL
Total time: 48 seconds
// Android의 AVD를 먼저 실행해야 한다
$ ionic emulate android
Running emulate task...
Emulating app on platform android
Running command: /Users/nulpulum/development/studygps_company/prototyping/myAppSideMenu/platforms/android/cordova/run --emulator
... 중략 ...
BUILD SUCCESSFUL
Total time: 9 seconds
Installing app on emulator...
Using apk: /Users/prototyping/myAppSideMenu/platforms/android/ant-build/HelloCordova-debug-unaligned.apk
Launching application...
LAUNCH SUCCESS
-- AVD 통해 본 모습
* 안드로이드 AVD 관리하기 (참조)
- ionic 분석
- ionic 명령을 통하여 ionic 프레임워크와의 통합 빌드작업을 자동 수행해 준다
// 완벽하게 angular.js 기반으로 운영된다 (angular.js v1.2.12 버전 번들링)
// www/lib/ionic/js/ionic.bundle.js
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Onsen UI 프레임워크
- PhoneGap을 설치와 Onsen ui 설치는 별개로 진행된다. 따라서 ionic과 같이 PhoneGap에 대한 기본 지식이 필요하다
- Onsen ui는 angular.js directive를 제공하는데 주력한다
- PhoneGap 환경 설정
// PhoneGap
$ npm install -g cordova
$ cordova create MyAppOnsenui && cd MyAppOnsenui
Creating a new cordova project with name "HelloCordova" and id "io.cordova.hellocordova" at location "/Users/prototyping/MyAppOnsenui"
Downloading cordova library for www...
Download complete
$ cordova platform add android
Creating android project...
Creating Cordova project for the Android platform:
Path: platforms/android
Package: io.cordova.hellocordova
Name: HelloCordova
Android target: android-19
Copying template files...
Running: android update project --subprojects --path "platforms/android" --target android-19 --library "CordovaLib"
Resolved location of library project to: /Users/prototyping/MyAppOnsenui/platforms/android/CordovaLib
Updated and renamed default.properties to project.properties
..중략..
Project successfully created.
-- build와 emulate 전에 하기의 Onsen ui 설치와 설정을 먼저 한 후에 수행한다
$ cordova build android
.. 중략 ..
BUILD SUCCESSFUL
Total time: 32 seconds
-- android의 AVD를 먼저 실행해야 한다
$ cordova emulate android
- Onsenui components : 가장 기본적인 것들을 제공함
- Phonegap과 Angular.js 의 결합을 개발자가 직접해야함
- 활발한 Community feedback이 없는 상태이다 (참조)
- Onsenui설치
// Onsen ui
$ cd MyAppOnsenui
$ bower init 명령으로 bower.json 파일을 만들거나 기존의 generator-angular-fullstack의 것을 사용한다
$ bower install onsenui --save
{
"name": "mobiconsoft-mobile-app",
"version": "0.1.0",
"dependencies": {
"angular": ">=1.2.*",
"json3": "~3.3.1",
"es5-shim": "~3.2.0",
"angular-resource": ">=1.2.*",
"angular-cookies": ">=1.2.*",
"angular-sanitize": ">=1.2.*",
"angular-ui-router": "~0.2.10",
"restangular": "~1.4.0",
"jquery": "1.11.1",
"modernizr": "~2.8.1",
"console-shim": "*",
"jStorage": "~0.4.8",
"angular-gettext": "~0.2.9",
"ladda-studygps": "~0.9.4",
"angular-ladda-studygps": "~0.1.7",
"onsenui": "~1.0.4"
},
"devDependencies": {
"angular-mocks": ">=1.2.*",
"angular-scenario": ">=1.2.*"
},
"testPath": "test/client/spec"
}
-- http://onsenui.io/OnsenUI/project_templates/sliding_menu_navigator.zip 에서 샘플 파일을 다운로드 받아서 app 폴더에 있는 것을 www 폴더로 복사한다. 그리고 index.html안에 cordova.js를 넣는다. (개발시에는 404 NOT Found 발생함)
$ cordova build android
$ cordova emulate android
-- AVD로 띄워본 결과
- Sliding Menu에 있어서는 Ionic 보다는 Onsenui가 좀 더 세련되어 보임
Mobile Angular UI
- Slide Menu 와 기본적인 모바일 화면 구성 컴포넌트를 angular.js 기반으로 Directive화 해놓았다.
- 친숙한 Bootstrap 기반의 UI를 제공한다. 그러나 Twitter bootstrap의 RWD기반은 아니다
ngCordova
- cordova에서 제공하는 API를 angular 에서 사용할 수 있도록 Angular Service로 만들어 놓았음
좀 더 잘 정비된 것을 쓰고 싶다면 Ionic을 기초 기술부터 체크하면 갈 것이라면 Onsenui를 추천한다. 또한 좀 더 세련되 UI는 Onsenui에 점 수를 더 주고 싶다. 그리고 서로의 아키텍쳐에 대한 부분과 커스터마이징 여부는 좀 더 들여다 보아야 할 것으로 보인다. 각각의 상황과 특성에 따라 선택하여 사용하면 될 것으로 보인다.
<참조>
sliding_menu_navigator.zip- 용어 정의
'AngularJS > Concept' 카테고리의 다른 글
| [Directive Driven] 히치하이커를 위한 Directive 만들어 보기 (0) | 2014.08.04 |
|---|---|
| [AngularJS] 배우는 방법 & 기본 개념 잡기 (2) | 2014.08.03 |
| [Directive Driven] Google Chart Directive 사용하기 (0) | 2014.06.04 |
| [AngularJS] Prototypal 상속과 Isolated Scope의 관계에 대하여 (0) | 2013.11.28 |
| [SPA] Modern Web에서의 Design Pattern 인식의 전환 (0) | 2013.09.28 |