4. 모바일 앱 종류 별
비교
Nativ
e
App
We
b
App
Hybri
d
App
디바이스 접근 가능 부분적 가능 가능
앱 속도 (성능) 매우 빠름 보통
빠름
(Native에 근
접)
개발비용 높음 낮음 보통
앱 스토어 이용 가능 불가능 가능
5. Ionic
Framework
• Drifty에서 개발한 HTML5 기반 하이브리드 앱 개발 프레임워크
• http://ionicframework.com
• 무료 & 오픈소스 (MIT License)
• 크로스 플랫폼 지원 (Android, iOS, Windows 등)
• 다양한 네이티브 플러그인(Cordova/PhoneGap)과 클라우드 개발환경,
UI도구 지원
Angula
r
JavaScript
TypeScript
HTML
5 +
6. Apache
Cordova
• 크로스 플랫폼 개발을 위한 오픈소스 모바일 프레임
워크
• JavaScript를 이용하여 Native 코드와 통신할 수 있도
록 기능 제공
• Android, iOS, Windows, Blackberry 등 다양한 플랫폼
지원
7. Cordova
Plugins
., Battery Status ., Media
., Camera ., Media
Capture
., Console ., Network
., Contacts ., Splashscreen
., Device ., Vibration
., Device Motion ., Statusbar
.,
.,
Device Orientation
Dialogs
., Whitelist
., File
., File Transfer
., Geolocation
., Globalization
., Inappbrowser
8. Ionic
Framework
• 어떤 경우에 유용할까?
., iOS와 안드로이드 앱을 동시에 개
발
., 네이티브 앱 개발보다 Web 개발에
익숙
., 단순하고 표준적인 UI
., 플랫폼 간 모듈의 공유
9. Ionic
History
• 2013년 11월 알파버전 발표
• 2014년 3월 1.0 베타버전 발표
• 2015년 5월 1.0 정식버전 발표
• 2016년 11월 2.0 정식버전 발표
• 2017년 5월 3.0 정식버전 발표
• 3백만 개 이상의 앱이 Ionic으
로 개발
• 5백만명 이상의 Ionic 개발자
활동
10. Ionic Framework 개발환경
설치
• Node.js 설치 (v6 이상)
., http://nodejs.org
., 플랫폼 별 LTS 다운로드
., 설치 후 버전 확인 (node -v, npm
-v)
11. Ionic Framework 개발환경
설치
• Ionic 설치
$ (sudo) npm install -g cordova ionic C:> npm
install -g cordova ionic
• 설치 확인
$ cordova -v
$ ionic -v
$ ionic info
12. Ionic 프로젝트 생
성
• Ionic App 생성 (from template)
$ cd {PROJECT_PATH}
$ ionic start myApp [template option]
blan
k
tab
s
sidemen
u
32. 참고 사
항
• App Layout
., 다양한 기기에서 테스트 필요
., 안드로이의 버전 별 webview에 따른 차이
• App Performance
., VirtualScroll
., Android 구형 기기(4.0-4.3)에서 성능 이슈
존재
., 애니메이션 효과 제거