슬라이드 1

Size: px

Start display at page:

Download "슬라이드 1"

수현 방
8 years ago
Views:

1 전자정부 모바일 표준프레임워크 하이브리드 프레임워크 서형주 (SK C&C) *) AD : Application Development

2 목차 1. 모바일 어플리케이션 2. 하이브리드 어플리케이션 3. 전자정부 모바일 표준프레임워크 4. Phone gap 5. 하이브리드 어플리케이션 적용 - 2 -

3 모바일 어플리케이션의 종류 1. 모바일 어플리케이션 일반적인 모바일 어플리케이션의 종류는 모바일 웹, 하이브리드 앱, 네이티브 앱 등으로 구분이 가능 구분 모바일 웹 모바일 웹앱 하이브리드 앱 네이티브 앱 개요 일반 웹 기술 개발 모바일 브라우저에 의해 실행 모바일 웹의 한 형태 앱 형태로 Wrapping 일반 웹 기술 개발 네이티브 앱 기능 활 용 플랫폼에 따른 프로 그래밍 언어 및 SDK 로 개발 그래픽 하 하 상 상 앱스토어 판매 불가능 가능 가능 가능 매쉬업 가능 가능 가능 불가능 멀티플랫폼 용이 용이 용이 어려움 스토리지 서버, 클라우드 서버, 클라우드 디바이스 제어 Local, 서버, 클라우드 Local 불가능 불가능 용이 용이 - 3 -

4 모바일 웹 & 네이티브 앱 1. 모바일 어플리케이션 모바일 웹 어플리케이션 방식과 모바일 네이티브 어플리케이션 방식 비교 모바일 웹 네이티브 앱 모바일 디바이스에 최적화된 웹사이트 모바일 디바이스 전용 앱 HTML, CSS, JavaScript Objective-C ( iphone ), Java ( Android ) 기존에 사용하던 웹 개발환경 XCode ( iphone ), Eclipse ( Android ) 웹 표준 컨트롤, iui, JQTouch, JQMobile, Sencha,WebApp.Net App 개발자 등록 필요 없음 제한적인 디바이스 사용 카메라/마이크.. 자체 결제시스템 구축필요 또는 광고 Cocoa Touch (iphone), UI Framework (Android) 개발자등록 년 $99 (iphone) or $35 (Android) 디바이스의 모든 기능을 활용 App Store/Market를 통한 판매/수익 & 광고 서버에서 바로 업데이트가능 업그레이드 할 때 마다 검수 ( iphone ) Android / ios/ Blackberry등으로도 바로 변환가능 실행속도가 빠르다 - 4 -

5 하이브리드 앱 Web App 1. 모바일 어플리케이션 Native App Hybrid App - 5 -

6 Jquery Mobile 1. 모바일 어플리케이션 개요 모바일 웹 어플리케이션 개발을 위한 자바스크립트 프레임워크 각종 UI 컨트롤과 이벤트 처리, 애니메이션 효과 및 자동 내비게이션, Ajax 통신 등 모바일에 최적화된 기능 제공 릴리즈 버전 : ( ) ( egovframe2.5 m.egovframe.go.kr ) 특징 jquery 기반, Markup 기반 HTML5, CSS3지원, 다양한 기기 지원 점진적 향상과 적절한 퇴보 원칙 준수 접근성 향상, 경량의 라이브러리, 다양한 테마, 모바일에 최적화된 기능 라이선스 MIT, GPL의 듀얼 라이선스 - 6 -

7 Jquery Mobile 1. 모바일 어플리케이션

8 개요 2. 하이브리드 어플리케이션 네이티브 앱과 Web App의 각 특성을 모아 하이브리드 앱 등장 HTML5 Mobile Ui Framework jquery Mobile Sencha Touch Cross Platform App Framework PhoneGap Titanium Appspresso Web App HTML + CSS + JavaScript WebView JavaScript Framework Device API Cross Platform Application Framework Native(iOS / Android) - 8 -

9 장점 및 단점 2. 하이브리드 어플리케이션 장점 단점 Cross-platform affinity -동일한 웹 리소스를 통해 다양한 플랫폼에 적용 가능 네이티브 앱 에 비해 상대적으로 성능 저하 -네이티브 앱에 비해서는 상대적으로 속도 및 그래픽 효과 수준은 떨어짐 Web technologies (HTML5, CSS3, JavaScript) 를 통한 구현 -기능 구현을 위한 다양한 웹 체크놀러지 (Ajax, rest) 및 오픈 소스 라이브러리 적용 가능 모바일 웹과 네이티브 앱 중간에 위치함에 따른 표준 준수 어려움 -웹 접근성, 웹 표준 준수 가능 성 및 필요성 여부 판단 필요 모바일 웹 형태로 구현 후 마켓에 판매 가능 모바일 환경의 빠른 변화에 대응 필요 -지속적인 모바일 기술 (모바일 OS 버전, 모바일 웹, 하이브리드 앱 프레임워크 버전) 업데이트 - 9 -

10 Hybrid Framework 2. 하이브리드 어플리케이션 PhoneGap은 현재 세계적으로 가장 대표적으로 사용되고 있는 Open 라이선스 기반 프 레임워크 이며, 가장 많은 OS를 지원하고 다양한 개발환경에서 쉽게 Import하여 사용할 수 있다. PhoneGap 적용사례 Nitobi 개발 어도비 (Adobe)사가 Nitobi를 인수 후 아파치 재단에 기부 WebView를 이용 각종 Device API 를 자바스크립트로 핸들링 오픈 소스 (Customizing 이 자유로움) 컴파일 시 HTML, 자바스크립트, CSS를 그대로 사용 (Run-Time 하이브리드 APP) 최다 모바일 플랫폼 지원 국제 표준을 지향 (W3C) 포스트 캡슐 - 아이폰용 유료 Hybrid앱 - 원하는 상대에게 날짜를 예약해 메시지를 보낼 - 폰갭과 j쿼리를 사용하 여 구현함 RNAO 간호 우수 사례 지 침 - 온타리오의 등록 간호사 '협회 (RNAO)에 의해 발 행하는 간호 우수 사례 지침의 적응 내용을 포 함

11 Hybrid Framework 2. 하이브리드 어플리케이션 Titanium는 근본적으로 개발 리소스에 대해 네이티브 자원을 활용해 네이티브와 동일한 성능을 지원한다. 그러나 솔루션 종속성이 존재함 Titanium 적용사례 Accelerator에서 개발 Mobile 디바이스와 Desktop 별도 지원 JavaScript Code를 Native Code로 변환 (Native Code 이므로 완벽한 native UI 와 Performance를 제공) Aptana를 인수하여 개발도구를 강화 컴파일 단계에서 HTML, 자바스크립트, CSS를 Binary Code로 변환 (Build-Time 하이브리드 APP) Eclipse 기반의 개발환경 제공 Native Code 변환을 위하여 약속된 API만을 사용하여 야 함 (실제로 Titanium 언어를 새로 배워야 함) Wunderlist - ToDo 리스트 관리 애 플리케이션 - 아이폰, 아이패드, 안 드로이드, 맥os, windows 전용 앱을 제 공하며 Web 버전도 제공 - cloud 연결을 통해 언 제 어디서나 똑같은 Task가 보여지도록 동 기화 되며 지원하는 플랫폼은 앞으로 계속 확대 예정 레잇 나잇 위드 지미 펄론 (LNJF) - 미국 방송사 NBC심야 토크쇼 '레잇 나잇 위 드 지미 펄론(LNJF) 과 동명의 하이브리드 앱 - 앱 안에서 방송영상과 사진을 보고 블로그 포스팅을 제공

12 Hybrid Framework 2. 하이브리드 어플리케이션 Appspresso는 국산 프레임워크로서 WAC API(Waikiki API)를 지원하고, 다양한 UX 라 이브러리 프레임워크 템플릿을 선택 생성하여 사용할 수 있는 도구와 Eclipse기반의 개발 환경을 제공한다 appspresso 적용사례 한국 기업인 KTH의 웹 플랫폼 연구소에서 개발 Device API : WAC API ( Waikiki API 2.0 ) 지원 WebView를 이용 Eclipse 기반의 개발환경 제공 (SDK 라이브러리 형태로 연결) jquerymobile, Sencha Touch 등 모바일 자바스크립트 프레임워크 템플릿 생성 도구 제공 푸딩얼굴인식 - 촬영된 인물사진으로 나 랑 닮은 연예인들을 찾 아주는 어플 Ucloud PC에 저장되어 있는 데 이터를 ucloud 서버에 안전하게 백업하고 언제 어디서든 빠르게 데이터 를 열람하거나 복원 할 수 있는 KT의 클라우드 기반 백업 서비스 개발 방식 아임 인

13 Device API 2. 하이브리드 어플리케이션 Device API 란? 모바일 디바이스의 서로 다른 네이티브 API를 이용하기 위하여 표준화된 인터페이 스 제공을 위한 표준 정의된 Device API 표준 자체가 완결되어 있지 않음 대부분의 브라우저가 현재까지 정의된 Device API를 지원하고 있거나, 지원을 약속 하고 있다 W3C DAP W3C에서 주최한 워크샵등을 통해 2009년 8월 신설, 이통사, 브라우저 벤더, 글로벌 포털, 제조업체 등 20여 개 기관 활동 국내에서 ETRI, SKT, 삼성전자가 참여하고 있음 주요 Device API WAC Waikiki OMTP BONDI 40개 이상의 통신사/제조사 협의체 : BONDI + JIL ~= Waikiki Beta 원래 BONDI와 JIL 그리고 W3C spec 을 기반으로 앱스토어를 구성할 수 있 는 시스템 으로 JIL과의 병합(merge)을 통한 표준 제시 실질적 국제 표준 활동을 위해 OMTP BONDI와 Nokia가 Device API and Policy WG에 표준안 제출 웹 개발자들이 웹 중심 실행환경하에서 편리하게 모바일 서비스(Widget)를 개발할 수 있는 서비스 인터페이스 및 보안 문제에 대한 해결 방안을 제시 JIL Platform Operator간 서비스 규격과 플랫폼 외연을 넓히고 표준화 선점과 비용절감을 위해 One Widget Platform 환경을 개발하고 개발자에게 SDK 제공 OMTP BONDI와 개념적 유사성을 가지고 있으나 세부 API 규격에서는 차이 를 보이고 있음

14 Device API 2. 하이브리드 어플리케이션 예시 (W3C DAP Device API) Calendar Contact Media Capture Messaging System Information Gallery Powerbox Application Launcher Tasks API Application Configuration User Interaction Communication Log 일정 정보에 접근 주소록 정보에 접근 오디오, 이미지, 비디오 기능에 접근 SMS, MMS, 기능에 접근 기본적인 System 속성에 대한 API 미디어 갤러리(media gallery)접근 사용자 개인 리소스 요청 인스톨된 어플리케이션 접근 저장된 업무(task) 관리 웹 어플리케이션의 설정 변경 서로 다른 플랫폼에서 조작 디바이스 내 전화, 문자의 기록 접근 1 API 표준화 및 확장성 2 기술적 완성도 표준만으로는 사업에 한계가 있다는 현실. 관련이슈 3 보안 정책의 유연성 4 사업자 별 요구사항의 수용 방법 5 현 단말 spec 에서의 퍼포먼스

15 향 후 전망 2. 하이브리드 어플리케이션 웹 기술의 빠른 발전 HTML 및 CSS 표준화 HTML5, CSS3에 따른 기능 확장 JavaScript Framework 다양화 (OpenGl, Three.js) 적용 범위의 변화 웹 기술은 데스크탑 웹 브라우저만 적용이 가능? Mobile & TV 등 브라우저 기반 : 현재 사용 중!! Device 표준 적용 : HTML5.1 에서? 모바일 디바이스의 성능 개선 디바이스 H/W 및 S/W Spec 갤.. S3 (LTE) : 1.4GHz 쿼드코어, 2GB램

16 관련 지침 2. 하이브리드 어플리케이션 한국형 웹 콘텐츠 지침 2.0 정보시스템의 구축 운영 지침(행고시 제 호, ) 서비스 (가이드 프로그램) 구현 시 참고 행정정보데이터베이스 표준화 지침(행고시 제 호) 사업계획서 작성 시 관련 산출물 확인 준수 전자정부 웹 호환성 준수지침(행고시 제 호) 모바일 서비스 호환성 확보 준수 모바일 전자정부 서비스 관리 지침(행안부 예규 372호) 모바일 전자정부 서비스 사용자 인터페이스 설계 지침(행고시 제 호) 디자인 구현 시 참고 (모바일 실행환경과 관련 됨) 장애인 고령자 등의 정보 접근 및 이용 편의 증진을 위한 지침 을 준수 대국민 모바일 서비스 구축 가이드라인(행안부, ) 행정안전부 모바일 공통기반 서비스 연계 모바일 애플리케이션 접근성 지침(행고시 제 호) 모바일 앱 보안성 검증 일부 접근성 지침에 대해서는 네이티브 앱 을 고려하여 작성 되었기 때 문에 하이브리드 앱에 적용되지 않는 사항 존재 KISA 보안 검증 필요 (하이브리드 어플리케이션 내 JavaScript 및 Native Code)

17 개요 3. 전자정부 모바일 표준프레임워크 12.06~ 모바일 웹 오픈 소스 업그레이드 (UX컴포넌트 upgrade) Device API 구현 Device API 실행환경 구축 Device API 12 종 제공 표준패턴 및 가이드코드 제공 Device API 개발환경 구축 Device API 템플릿 및 프로젝트 생성도구 제공 Device API 가이드 프로그램 구축 Device API 별 가이드 프로그램 제공 11.06~ 모바일 표준프레임워크 구축 (모바일 웹) 모바일 웹 실행환경 구축 모바일 UX 컴포넌트 (사용자 경험 지원 기능) 모바일 웹 표준패턴 및 가이드코드 제공 모바일 웹 개발환경 구축 모바일 웹 템플릿 및 프로젝트 생성도구 제공 모바일 웹 공통컴포넌트 구축 기존 30종 모바일 전환 개발, 신규 공통컴포넌트 10종 구축

18 구성도 3. 전자정부 모바일 표준프레임워크 모바일 웹 개발을 위한 실행환경, 개발환경, 공통컴포넌트 및 하이브리드 어플리케이션 개발을 위한 실행환경, 개발환경, 가이드 프로그램을 제공

19 구성 상세 3. 전자정부 모바일 표준프레임워크 구분 환경 설명 모바일 웹 디바이스 API 실행 환경 모바일 공통 컴포넌트 개발 환경 실행 환경 모바일 디바이스 API 가이드 프로그램 기존 표준프레임워크 실행환경을 활용한 모바일 웹 표준패턴 및 가이드 코드 개발 모바일 사용자 경험 개발 - 일반 스마트 폰 사용자들의 디바이스 터치 기반의 사용자 경험 기능 제공 기존 공통컴포넌트를 모바일 웹 환경에 적합하게 전환 - 웹 공통컴포넌트 219종 중 게시판, 행사관리, 온라인 참여 등 모바일 신규 공통컴포넌트 구축 - 위치 정보 연계 등 HTML5 기능 활용 중심 모바일 웹 개발을 위한 표준 소스코드 제공 기능 웹 표준 적합성 검증도구 연계 모바일 웹 템플릿 및 사이트 생성 도구 - 유형별 모바일 사이트 템플릿 개발 및 코드를 생성하는 적용 도구 개발 전자정부 모바일 하이브리드 어플리케이션 개발 프레임워크 라이브러리 제공 - Open Source(PhoneGap) 적용 - 표준 코드 및 하이브리드 앱 샘플 템플릿 제공 Device API 개발 모바일 하이브리드 어플리케이션 개발 시 가이드 및 재사용을 위한 디바이스 API 가이드 프로그램 제공 - 12종의 디바이스 API 가이드 하이브리드 앱 개발 - 디바이스 API 가이드 하이브리드 앱과 통신을 위한 전자정부 표준프레임워크 기반 웹 서버 어플리케이션 개발 개발 환경 플랫폼 별 하이브리드 앱 개발 템플릿 프로젝트 생성 플러그인 구현

20 구성 4. Phonegap Device API 제어를 위해 미리 구현 한 JavaScript 및 SDK 연계를 위한 Native Code 외 에 추가기능을 위해 구현 된 Plug-In을 구성하고 있는 폰갭 Custom Plug-In 과 폰갭 Custom Native Plug-In이 추가

21 구성 4. Phonegap 구분 설명 모바일 웹 Application HTML, CSS, 사용자 정의 JavaScript PhoneGap JavaScript Engine Device API 제어를 위해JavaScript로 구현되어 제공 cordova.js PhoneGap Native Engine PhoneGap Custom Plugin 플랫폼 별 WebView를 상속받아 모바일 웹 Application과 연계를 위한 Native Code cordova.jar cordova.framework 기능 확장을 위해 추가 된 Plug-In을 위한 JavaScript 코드 사용자 정의 JavaScript Plug-In 을 포함 플랫폼 별로 플러그인을 위한 Native 코드 구성이 상이함에 따라 JavaScript 구성 또한 다를 수 있음 PhoneGap Custom Native Plugin 기능 확장을 위해 추가 된 Plug-In을 위한 플랫폼 Native 코드

22 동작방식 4. Phonegap Phonegap 기반 하이브리드 어플리케이션은 웹 리소스로 구현 된 기능이 네이티브 앱 형 태로 래핑되어 동작 된다. 하이브리드 앱 구조 Client OS 상의 하이브리드 앱 Package 형태 HTML + JS + CSS Application 개발자는 Web 개발 방식으로 HTML, JS, CSS 를 사용하여 개발한다. JS API Hybrid Core Hybrid Application Hybrid Platform으로 최종 Build 된 하이브리드 앱은 네이티브 앱과 같은 모습으로 Package 되고, 관리된다. Interface wrapper 네이티브 앱s Client OS Webkit Webkit 상에서 구동되는 Web App 형태로 개발함 HTML + JS + CSS Hybrid Platform Webkit ~.apk (안드로이드) ~.ipa (아이폰)... 최종 생성된 App.은 Native와 같이 배포/ 관리할 수 있 다 Application 은 Hybrid Platform에서 제공되는 JS를 통해 Native Feature를 이용한다. Client OS

23 웹뷰 인터페이스 4. Phonegap 폰갭은 플랫폼 별 SDK내에 내장 되어있는 Web View 와의 연계를 통해 하이브리드 앱 실행 시 사용자가 구현 한 HTML 파일을 출력하고 JavaScript 소스를 실행 SDK 로 부터 상속받은 웹 뷰를 생성해서 웹 뷰 내에 소스를 로드 한 후 네이티브API를 사용할 수 있도록 연계 하이브리드 어플리케이션의 디바이스 API 호출을 위 한 브릿지 역할 Interface Module (BrowserControl <-> Device API) -iphone shouldstartloadwithrequest stringbyevaluationjavascriptfromstring [gap://] protocol catch -Android addjavascriptinterface Class & JavaScript Binding

24 Web Resource 4. Phonegap 폰갭 프로젝트는 일반적인 웹 리소스 (HTML, CSS, JavaScript) 등을 활용하여 하이브리 드 APP을 구현하며 해당 웹 리소스는 디바이스의 종류에 상관없이 재활용이 가능 일반적인 안드로이드 어플리케이션의 경우 메인 클래스는 Activity 로부터 상속받는다 그리고 setcontentview 메서드를 통해 View를 Activity 에 바인딩하는 구조이다 하지만 폰갭 어플의 경우 cordova.jar 에 있는 DroidGap 클래스로부터 상속을 받도록 되어있다 이 DroidGap 클래스에 정의된 loaduri 메서드를 통해 html과 같은 웹 리소스를 바인딩 하는 구조이다. 다음 코드는 자동으로 생성된 폰갭 프로그램의 메인 클래스 전체 코드이다 라이브러리로 추가된 com.phonegap 패키지를 import 하고 DroidGap를 상속받으며 loadurl 을 통해 html 파일을 화면에 바인딩하고 있다

25 JavaScript 프레임워크 4. Phonegap 폰갭 프로젝트에서는 블렉베리를 제외한 모든 디바이스 SDK 에서.JS 등의 JavaScript Framework를 추가하여 활용하는 방식의 개발이 가능 폰갭 에 적용 가능한 UI 개발 Framework -iphone-universal - CSS/HTML framework for iphone web development. Contains the iphone-like Chat Balloons just like SMS on the iphone (GPL) -iui - make iphone-feeling interfaces -iwebkit - Quick and easy iphone-like web framework, great documentation (LGPL). -Jo - a lightweight JavaScript framework for HTML5 apps, build with PhoneGap in mind -JQTouch - JQuery Plugin for Making iphone-like apps -JQuery Mobile - JQuery's Take on Mobile Interfaces. -Magic Framework - make fast and smooth iphone-feeling apps with native-feeling widgets, lists, etc. Also provides an easy HTML5 db storage interface. -qooxdoo - Universal JavaScript framework for creating apps for a wide range of platforms, from mobile apps on smartphones and tablets to desktop-style RIAs. -Safire - izillow JS/CSS framework (MIT License) -Sencha Touch HTML5/CSS3/Javascript framework with a variety of native-style widgets, flexible theming via SASS/Compass, data feature like models, stores, and proxies. -Unify - HTML5 framework to create native-like applications for smartphones, tablets and desktops -CiUI - CNET iphone UI 폰갭 에 적용 가능한 JavaScript Framework -Dashcode - Framework from Apple (only for iphone) -NS Basic/App Studio - Full IDE, drag and drop designer, program using Visual BASIC or JavaScript. -The Dojo Toolkit - Flexible and extensible JavaScript framework -WebApp.Net -xui - slimmed down jquery work-alike

26 플러그인 4. Phonegap 폰갭은 브라우저에서 실행되는 기본 기능을 제공하는 JavaScript API 및 JavaScript와 관 여 된 플랫폼 특정 기본코드로 구성되어 있으며 제한 및 확장을 위한 Plug-in 방식의 추 가 기능을 제공 플러그인 추가기능이 필요 한 경우 APP 구현시의 일부 제약사항 존재 -JavaScript 언어의 특성 상 소스의 양이 많을 경우 네이티브 코드에 비해 구동 속도의 제한이 존재 -Background Processing (eg Background Services in Android) 이 필요 한 경우 JavaScript 로는 구현이 안됨 -JavaScript 로는 구현하기가 복잡한 업무 기능을 개발 할 경우 폰갭 프레임워크 확장을 위한 방안 -폰갭 프레임워크에서 제공하는 기능 확장을 위한 방안으로 폰갭 플러그인 추가 기능 활용 폰갭 플러그인 구성요소 -사용자 정의 기본 구성요소 -사용자 정의 JavaScript API 폰갭 플러그인 구현 방안 폰갭 플러그인 개요 -폰갭 플러그인 구현을 위해서는 다음의 두 가지를 작성 JavaScript Component, which will expose the Custom Native Component Native Component, which does the heavy lifting -구현 시 SDK 별로 구현되어 있는 구조가 다르므로, 각 플랫폼 마다 독립적인 JavaScript 와 Native Component 가 필요함

27 개요 5.하이브리드 어플리케이션 적용 하이브리드 앱 적용 시 특징 동일한 웹 리소스를 다양한 플랫폼에 적용이 가능함에 따른 개발 비용 절감 디바이스 플랫폼 종속성이 비교적 적어 유지보수 용이 웹 표준 및 Device API 표준에 따른 재 사용성 증가 제약 사항 웹 리소스 기반 개발에 따른 한계 존재 (속도 및 성능, UI 구현) UI 구현을 위한 추가 라이브러리 스토어 별 어플리케이션 정책 (UI 구조, 하이브리드 프레임워크 API) 디바이스 또는 하이브리드 프레임워크에 따른 종속성이 없다고는 할 수 없음 전자정부 모바일 표준프레임워크 적용 전자정부 모바일 웹 프레임워크 디바이스 API 가이드 프로그램 전자정부 표준프레임워크 개발환경

28 디바이스 API 가이드 프로그램 5.하이브리드 어플리케이션 적용 전자정부 모바일 표준프레임워크 에서는 각 디바이스API별 특성에 따라 서버 모듈 연계 기능을 쉽게 이해하여 활용할 수 있도록 디바이스 API 가이드 프로그램을 개발환경을 통 해 제공 디바이스API 별 하이브리드 앱 가이드 프로그램 가이드 프로그램 연계 전자정부 표준프레임워크 어플리케이션 하이브리드 앱 가이드 코드 디바이스 API` 인터페이스 API Spring MVC 디바이스API 별 서버 모듈 구현 코드 Controller Service DAO 하이브리드 앱 가이드 코드 디바이스 API` 인터페이스 API Controller Service DAO Controller Service DAO 하이브리드 앱 가이드 코드 디바이스 API` 인터페이스 API Controller Service DAO Controller Service DAO

29 기본 지원 디바이스 API 웹 리소스를 통해 디바이스 내의 Native 기능을 호출하기 위하여 전자정부 모바일 표준프레임워크를 통해 JavaScript 형태의 API를 제공 5.하이브리드 어플리케이션 적용 순번 디바이스 API 설명 1 Accelerator 단말기의 가속도계 정보를 제공하는 API(단말기의 움직임 정보를 x, y, z 축의 값으로 제공) 2 GPS 단말기의 현재 위치에 대한 정보를 제공하는 API 3 Vibrator 단말기의 진동 및 알림음 기능을 호출 할 수 있는 API 4 Camera 단말기의 카메라 촬영 기능을 호출 할 수 있는 API 5 Contact 단말기의 주소록(연락처) 정보를 조회 및 수정 할 수 있는 API 6 Compass 단말기의 방향정보를 조회 할 수 있는 API 7 File Reader/File Writer 단말기의 내장 저장 장치의 파일을 읽기/쓰기 할 수 있는 API 8 Network 단말기의 네트워크 연결 정보를 조회 할 수 있는 API 9 Device 단말기의 기본 정보(UUID, 버전 등)을 조회 할 수 있는 API 10 Media 단말기의 오디오 파일을 컨트롤 할 수 있는 API 11 Interface 전자정부 표준프레임워크 기반 웹 서버 어플리케이션과 연계를 지원하는 API 12 NPKI 단말기에 설치 된 npki 모듈을 호출 할 수 있는 API

30 관련 라이브러리 5.하이브리드 어플리케이션 적용 디바이스 API 실행환경은 추가 플러그인 및 UX 컴포넌트 활용을 위해 폰갭 프레임워크 이외에도 다음과 같은 오픈 소스 라이브러리 활용 Spring For Android 전자정부 서버 어플리케이션과 Rest 통신을 위한 안드로이드 용 네이티브 Restful 서비스 오픈 소스 라이브러리로 Interface Device API(Android) 개발에 사용 되었다. ASIHTTPRequest 전자정부 서버 어플리케이션과 Rest 통신을 위한 ios 용 네이티브 Restful 서비스 오픈 소스 라이브러리로 Interface Device API(iOS) 개발에 사용 되었다. jquery Mobile 전자정부 모바일 웹 표준프레임워크의 코어 프레임워크로서 하이브리드 앱의 UX 개발 시에 사용된다. 네이티브 어플리케이션의 화면 전환 효과 및 각종 버튼 리스트 등을 활용한 개발을 위해 사용된다. jquery jquery Mobile 프레임워크의 코어 프레임워크로 jquery Mobile을 사용하기 위해서 필수로 사용된다. Dom Control, Ajax, Restful 서비스 연계 등 다양한 기능을 제공하며 자바스크립트를 이용한 개발을 간단하게 해준다. iscroll 어플리케이션의 헤더와 푸터를 고정시킨 채 컨텐츠 내용만 스크롤 해주는 기능을 제공한다. jquery Mobile에서 제공하지 못하는 UX 효과를 보조하기 위해 사용할 수 있다

31 유의사항 5.하이브리드 어플리케이션 적용 모바일 기술의 빠른 변화에 따른 Version 및 호환성 여부 확인 Phonegap.. jquerymobile.. Android ADT, SDK.. ios.. 모바일 하이브리드 어플리케이션의 한계 인식 모바일 하이브리드 어플리케이션 장단점 (성능, 구현 범위 등..) 하이브리드 라고는 하나 같은 자바스크립트 코드여도 OS에 따라 결과값의 차이 발생 가능 모바일 특성에 의한 다양한 운영환경 다양한 모바일 OS 및 Device 환경에 다른 다른 결과 발생 가능

32 지원범위 5.하이브리드 어플리케이션 적용 전자정부 모바일 표준프레임워크 범위 Phonegap : cordova 1.9 jquery : jquery jquery Mobile : jquery.mobile 지원 방식 전자정부 표준프레임워크 센터를 통해.. 기존 전자정부 표준프레임워크 지원과 동일

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

WAC 2.0 & Hybrid Web App 권정혁 ( @xguru ) 1 HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API Mobile Web App needs Device APIs Camera Filesystem Acclerometer Web Browser Contacts Messaging