01.모바일 프레임워크 이론

1Page l 1
전자정부 모바일 표준프레임워크
실행 환경(모바일)

2Page l 2
1. 개요
2. 모바일 어플리케이션
3. 전자정부 모바일 표준프레임워크 구성
4. Web Resource
5. 모바일 웹
6. UX Component
7. 모바일 하이브리드 어플리케이션
8. Device API
목차

3Page l 3
1. 개요모바일 표준프레임워크 구성

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

5Page l 5
모바일 3.5 버전 업그레이드
q jQueryMobile 1.4.5 환경을 기반으로 모바일 UX컴포넌트 및 공통컴포넌트 표준코드 업그레이드
q jQuery.js 버전 업그레이드 (1.9.1 è 1.11.2)
q jQuery mobile 버전 업그레이드 (1.3.2 è 1.4.5)
*collapsible Menu삭제 되었습니다.
*$.mobile.showPageLoadingMsg è $.mobile.loading(“show”) 변경
*$.mobile.hidePageLoadingMsg è $.mobile.loading(“hide”) 변경
q Device API 폰갭(Cordova)
* 폰갭 4.3 적용 (iOS device v3.8, 안드로이드 device v3.7.1)
* 안드로이드 Interface API 최신폰 지원
* 아이폰 eGovComModule 64bit CPU 지원
* iScroll (4 è 5)
1. 개요

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

7Page l 7
• 모바일 웹 어플리케이션 개발을 위한 자바스크립트 프레임워크
• 각종 UI 컨트롤과 이벤트 처리, 애니메이션 효과 및 자동 내비게이션, Ajax 통신 등 모바일에 최적화된 기능 제공
• 릴리즈 버전 : 1.4.5(2015.06) ( http://jquerymobile.com/ )
• jQuery 기반, Markup 기반
• HTML5, CSS3지원, 다양한 기기 지원
• 점진적 향상과 적절한 퇴보 원칙 준수
• 접근성 향상, 경량의 라이브러리, 다양한 테마, 모바일에 최적화된 기능
• MIT, GPL의 듀얼 라이선스
q 개요
q 특징
q 라이선스
2. 모바일 어플리케이션모바일 어플리케이션의 종류 – jQuery mobile

8Page l 8
Hybrid App
Web App Native App
2. 모바일 어플리케이션모바일 어플리케이션의 종류 – Hybrid App

9Page l 9
클로스플랫폼 앱 프레임워크
HTML5HTML5
Mobile Ui Framework
jQuery Mobile
Sencha Touch
Cross Platform
App Framework
Cross Platform
App Framework
PhoneGap
Titanium
Appspresso
Web App
HTML + CSS + JavaScript
Native(iOS / Android)
WebView
JavaScript
Framework
Device API
q Native App과 Web App의 각 특성을 모아 Hybrid App 등장
Hybrid App

10Page l 10
모바일 어플리케이션 예제 – 모바일 웹
http://www.jqmgallery.com/

11Page l 11
모바일 어플리케이션 예제 – 모바일 웹앱
조선비즈
http://app.chosunbi
z.com/plugins/apps
/www/i.html?server
_no=2&c=0
BrowserQuest
모질라 재단
데모게임
http://browserqu
est.mozilla.org/
BananaBread
모질라재단
테스트프로젝트
https://developer.c
dn.mozilla.net/med
ia/uploads/demos/a
/z/azakai/3baf4ad7
e600cbda06ec46efe
c5ec3b8/bananabre
ad_1424465008_de
mo_package/index.
html
3D샘플
모질라 재단
https://develope
r.mozilla.org/ko/
demos/detail/pla
yroom/launch

12Page l 12
• 민원24
-아이폰,안드로이드
용 Hybrid앱
-건축물대장,토지대
장,전입신고,주민등
록 분실신고,병적증
명서 등 조회
• 예비군
-나의 훈련정보 조회
-인터넷 훈련신청
-훈련연기
-보류/해소
-예비군훈련장 안내
-공지사항 및 뉴스 제공
• Wunderlist
-ToDo 리스트
관리 애플리케이션
-아이폰, 아이패드,
안드로이드, 맥os,
windows 전용 앱
제공
• 푸딩얼굴인식
-촬영된 인물사진
으로 나와 닮은 연
예인들을 찾아주
는 어플
모바일 어플리케이션 예제 – 하이브리드 어플리케이션 2. 모바일 어플리케이션
* 폰갭 샘플앱은 폰갭(코도바)사이트에서 각 OS별로 확인가능
http://phonegap.com/app/

13Page l 13
3. 전자정부 모바일 표준프레임워크 구성모바일 표준프레임워크 개요
q 전자정부 모바일 표준프레임워크는 모바일 웹 개발을 위한 실행환경, 개발환경, 공통컴포넌트
및 하이브리드 어플리케이션 개발을 위한 실행환경, 개발환경, 가이드 프로그램을 제공한다.
전자정부
표준프레임워크 3.2
업그레이드 및 경량화
실행환경
개발환경
공통컴포넌트
전자정부
표준프레임워크 3.5의
구성개념
배치실행
배치개발
배치운영
모바일 실행환경
모바일 개발환경
모바일 공통컴포넌트
모바일 웹
모바일디바이스 API
실행환경
모바일 개발환경
모바일 디바이스 API
모바일
표준프레임워크
전자정부 표준프레임워크 3.5

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

15Page l 15
개요
• HTML(Hyper Text Markup Language)의 최신 버전.
(현재 가장 널리 사용되고 있는 버전은? HTML4.01 )
• 웹 브라우저간 호환성이 낮음
• 문서 내에 포함된 ‘의미’ 가 불명확함.
• 웹 어플리케이션 기능이 제한됨.
• 웹 기술의 진보, 시장의 요구
• 모바일 시장의 확대
• 클로스 플랫폼 지원, 웹 표준 기술의 강점
→ 웹 브라우저간 호환성을 높임!
→ Rich한 웹 어플리케이션 개발 기능 강화.
→ 문서 내에 포함된 ‘의미’ 를 명확하게 함.
… 라고는 하지만 HTML5라고 불리는 기술은 실제로 HTML과 직접적인
관계가 없는 JavaScript API를 포함하는 것이 일반적임
HTML5 = HTML + JavaScript + CSS
• ‘오픈된 표준을 기반으로 한 웹 어플리케이션 구축 플랫폼’
- 멀티미디어 및 어플리케이션 구축을 위한 기능 강화
HTML 4.01
4. HTML5
Ø HTML5 란?
Ø HTML5이 해결하려는 웹의 문제점
Ø HTML5 인가?

16Page l 16
HTML5 역사
• 1993.03 HTML 1.0 팀 버너스리(CERN)가 개발 및 표준화 제안
• 1995.11 HTML 2.0
• 1996.04 HTML 3.0
• 1997.01 HTML 3.2
• 1997.12 HTML 4.0
• 1999.12 HTML 4.01 현재의 HTML
• 2000.01 XHTML 1.0 HTML + XML
• 2001.05 XHTML 1.1
• 2006.07 XHTML 2.0
• 2004. WHATWG 발족 (Web Hypertext Application Technology Working Group)
WHATWG
• 2007. W3C에서 HTML5 채택
• 2009. HTML5 Last Call
• 2011.05 HTML5 Last Call Finish
• 2014.10 HTML5 표준안 확정 ( 2014.10.28 W3C Recommendation )
4. HTML5
Ø HTML5 역사

17Page l 17
HTML5 범위
웹 표준 기술을 ‘HTML5’ 범위
HTML5
DOM
HTML 문법
windows object
……
JavaScript API
Web Storage
Web Socket
Indexed DB
……
CSS3
Transition
Animation
Transform
……
etc…
SVG
MathML
WebGL
……
4. HTML5

18Page l 18
• 기본 마크업 변화
- <doctype> 정의, 문자 인코딩 변화
• 새로운 태그 추가
- <nav>, <section>, <article>, <aside> 등
• 새로운 Form 요소 추가
- input type : range, calendar 등
• 웹 브라우저 멀티미디어 요소 지원
- <video>, <audio>, <canvas>
• 새로운 HTML5 JavaScript API 추가
- Canvas, Video, Web Storage, Geolocation API 등
변경사항 4. HTML5
Ø HTML5 변경사항

19Page l 19
기본 마크업 변화
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8”>
<title>foo</title>
</head>
...
<script src=”foo.js”>
</script>
<link href=”foo.css”></link>
4. HTML5
Ø Less Header Code Ø No need for type attribute
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>foo</title>
</head>
...
<script type=“javascript” src=”foo.js”>
</script>
<link rel=“css” href=”foo.css”></link>
<이전 버전>
<HTML5 버전>

20Page l 20
Semantic Structure Elements
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>
4. HTML5
Ø More Semantic HTML tags Ø Example
q HTML5는 시맨틱 웹과 나은 문서 구조를 지향한다.

21Page l 21
HTML5 = HTML + JS + CSS3
q (https://github.com/html5rocks/slides.html5rocks.com) 접속
q 우측 하단 Download ZIP 클릭!
q 바탕화면 저장 및 압축 풀기
q HTML5 파일 실행(Chrome실행)
<다운로드 화면> <압축 풀기 후 화면> <실행 화면>
4. HTML5

22Page l 22
Form
<input type=“email” />
tel, datetime, search, date, email, range, url, color
<input type=“file” multiple />
autocomplete, autofocus, list, multiple,
pattern, placeholder, required
<output name="result"></output>
<progress id="p" max=100><span>0</span>%</progress>
Datalist, Keygen, Output, Progress, meta
4. HTML5
Ø Input Types
Ø Attributes
Ø Elements

23Page l 23
Media & Canvas Example
<video src=” cat.ogg” />
<video src=”cat.ogg” controls />
<video controls/>
<source src=”cat.mp4” />
<source src=”cat.ogg” />
</video>
<audio src=”test.ogg”></audio>
<audio src=”test.ogg” autoplay controls loop>
<a href=”test.ogg”>download</a>
</audio>
<canvas id=”square”>
fallback content
</canvas>
<script>
canvas = canvas.getElementById(‘square’);
context = canvas.getContext(‘2d’);
context.fillStyle = “#000000”;
con text.fillRect(0, 0, 100, 100);
</script>
웹그림판 : http://mudcu.be/sketchpad/
4. HTML5
Ø Media Tags Ø Canvas
q HTML5 Canvas란 자바스크립트를 이용하여 웹페이지에 동작인 2비트맵 이미지를 그릴 수 있다

24Page l 24
Graphics & Multimedia
Canvas
(http://www.canvasdemos.com/2010/
02/12/sketchpad/.)
Video
(http://www.apple.com/html5/sh
owcase/video/,)
4. HTML5
q HTML5는 그래픽 활용을 위한 Canvas와 동영상 및 오디오 활용을 위한 Audio & Video 가 포함
된다.

25Page l 25
• Device API (Web-based)
• Realtime Communication
- Web Workers : 비동기 처리
- Web Socket : 실시간 통신
- Server-send events : Push 기능
• Offline & Storage & Database
- Local Storage : cookie의 확장
- Web SQL Database & IndexedDB
- Application Cache : offline 처리
• Geolocation
• Drag & Drop API
• ……
JavaScript APIs
Server-sent events
Geolocation
(http://htmlfive.apps
pot.com/static/wher
eami.html)
4. HTML5
Ø JavaScript APIs

26Page l 26
JavaScript API
var ws = new WebSocket("ws://hostname:80/");
ws.onmessage = function (event) {
event.data
};
ws.onclose = function () {};
ws.onopen = function () {};
new Worker("worker.js");
- terminate()
- postMessage()
- onMessage
- onError• Chatting
• Messenger
• Server Push
Client Browser
Server
WS Port
80 Web Server
WebSocket API
WebSocket Server
①
③
②
• 현재 브라우저는 하나의 쓰레드로 실행
• JavaScript를 백그라운드에서 실행시키는 기술
• JavaScript 이미지 렌더링 등에 사용
• 브라우저와 서버간에 양방향 Socket 통신
4. HTML5
Ø Web Sockets Ø Web Worker

27Page l 27
JavaScript API
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
localStorage.setItem(key, value);
localStorage.key = value;
localStorage[key] = value;
localStorage.getItem(key);
localStorage.key;
localStorage[key];
• 클라이언트의 디스크에 데이터를 저장하는 API
• 도메인별 관리, 세션단위 관리
• 객체 저장 가능, 유효기간 없음
• 비교적 큰 용량 저장
• DB를 사용할 수 있음
• SQL 표준 이슈
• DB 생성 및 핸들링 가능
• JavaScript를 통해 사용
• Geolocation Api는 디바이스의 위치정보를 얻는
API
• Widow,navigation 객체로 부터 정보를 얻음
4. HTML5
Ø Web Storage Ø Web SQL Database
Ø IndexedDB
Ø Application Cache
Ø Geolocation

28Page l 28
• Cascading Style Sheet의 최신 버전.
(현재 가장 널리 사용되고 있는 버전은? )
• 마크업 언어가 실제 표시(디자인)되는 방법을 기술하는 언어
• W3C 표준
• 화려한 화면 구성 – 다양한 화면 구성 속성 추가 및 Animation 효과 추가
• CSS3의 이미지 대체 – 화려한 폰트, 그라데이션 효과, 테이블 모서리의 둥근 효과
• 간결한 소스코드(CSS2.1 -> CSS3) – 디바이스 특징에 따른 화면 구성
• Media Query 가능 – 디바이스 특징에 따른 화면 구성 가능
CSS3 ?
CSS 2.1
4. HTML5
Ø CSS 란?
Ø CSS 특징

29Page l 29
CSS역사
• 1996.12 CSS1 Recommendation
• 1998.05 CSS2 Recommendation
• 2005.07 CSS2.1 Proposed Recommendation
• 2005.12 ~ CSS3 진행중 (2011년~2013년 확장된 정의에대한 확정안 존재)
Working Drafts Last Call(최종 초안)
Candidate Recommendation(권고안)
Proposed Recommendation(권고 후보)
Recommendation(권고)
Working Drafts (초안)
4. HTML5
Ø CSS 의 역사
* 모질라 재단 자료
https://developer.mozilla.org/ko/docs/Web/CSS/CSS3

30Page l 30
CSS3?
http://www.westciv.com/tools/3Dtransforms/index.html http://thewebrocks.com/demos/3D-css-tester/
4. HTML5
Ø text-shadow, border-radius, box-shadow 등 그래픽 요소 추가
Ø Animation, transition, transform
Ø Web Fonts - @font-face 사용
q CSS3에서 Animation, transition, transform, Web Font 등 새로운 기술이 추가되었다

31Page l 31
HTML5 지원 현황
• Chrome > Safari > Android > UC Browser > … • Android > Chrome > Safari >…
• iOS3+, Android2+, RIM OS6+, palm webOS 1.4+, WM7 20113Q, IE9+, FF3+, Chrome6+, Safari4+, Opera10+
4. HTML5
Ø HTML5 주요 스팩 지원 브라우저
Ø World Mobile Browser (2014 ~ 2015) Ø Korea Mobile Browser (2014 ~ 2015)
참고사이트
http://gs.statcounter.com/?PHPSESSID=brji2e10i125oqi1cv4nf5jhb3

32Page l 32
HTML5 지원 현황
• PC (Desktop)
- IE 10버전 이후 지원
- Windows XP OS에서 IE 브라우저 지원 불가(IE7~8 불가) : 크롬,파이어폭스등 다른 브라우저는 가능
- IE9이하 지원 불가
- 윈10 기본 탑재＂마이크로소프트 엣지“ : 브라우저 자체적으로 플래시와pdf 내장!!
=> 액티브X 사용 불가
• Mac OSX
- 기본 Safari 브라우저 기존 지원
- 크롬, 파이어폭스 등 모두 지원가능
• Linux (Ubuntu 및 CentOS 등)
- 크롬 브라우저 및 파이어폭스 브라우저 기본 지원
• 모바일 OS
- iOS 및 안드로이드 기본 지원
- 플래시 사용불가 (한정된 자원)
• TV및 기타 Embeded환경에서 브라우저 기반 : 현재 사용 중 !!
è 윈도우 XP에서 IE 7,8버전 불가
4. HTML5
Ø HTML5 지원현황

33Page l 33
개요
q 전자정부 모바일 표준프레임워크 실행환경의 사용자 경험(UX) 지원 기능은 스마트 디바이스 에서
의 사용자 터치 기반 화면 처리 기능, 개발도구 및 모바일 UX 컴포넌트를 제공한다.
5. 모바일 웹

34Page l 34
5. 모바일 웹
q 모바일 전자정부 프레임워크의 실행환경은 UX 레이어를 통해 이루어지며 화면처리 레이어 및
업무처리 레이어와의 상호작용을 통하여 이루어진다.
구성요소 설명
Presentation Layer
업무 프로그램과 사용자 간의 Interface를 담당하는 Layer로서, 사용자 화면 구성, 사용자 입력 정보 검증 등의 기
능을 지원함
UX Layer
모바일 웹 애플리케이션 적용 시 업무 프로그램과 사용자간의 interface를 담당하는 Layer로서, UI/ UI Controller
Component , JavaScript Module App Framework 등을 지원함
(Business Logic Layer 업무 프로그램의 업무 로직을 담당하는 Layer로서, 업무흐름 제어, 트랜잭션 관리, 에러 처리 등의 기능을 지원함
Persistence Layer 업무 프로그램에서 사용하는 데이터에 대한 CRUD 기능을 지원함
Integration Layer 타 시스템과의 연동 기능을 지원함
Foundation Layer 실행 환경의 각 Layer에서 공통적으로 사용하는 공통 기능을 지원함
모바일 웹 구성

35Page l 35
5. 모바일 웹
q 전자정부 모바일 표준프레임워크 실행환경은 기존 전자정부 표준프레임워크의 디렉터리 구조 및
표준을 준수하고 있으며, 모바일 웹 개발을 위해 하위 디렉터리 구조를 다음과 같이 구성하고 있다.
§ 프로젝트의 하위 폴더인 ‘src’ 에 실행환경을 지원하는 라이브러리 및 JSP 파일이 존재한다.
라이브러리는 CSS, JavaScript 및 이미지 파일로 구성되어 있다.
디렉터리 구조 (1/2)
실행환경
라이브러리

36Page l 36
5. 모바일 웹
Ø CSS Ø JavaScript Ø image
Jquerymobile 에서 제공하는 CSS 및
표준프레임워크를 통해 커스터마이징 된
CSS(EgovMobile)를 이용하여 UX
컴포넌트의 색상, 배치,테마 등을 정의
q 전자정부 모바일 표준 프레임워크는 CSS 및 JavaScript를 이용하여 실행환경을 제공하며 CSS ,
javascript, image는 각각 유기적으로 연결되어있다.
q 실행환경 라이브러리 구성
Jquerymobile 에서 제공하는 javascipt 및
javascipt(EgovMobile)를 이용하여 jsp 및
css와의 연동 및 화면 전환, Ajax 통신
등의 기능 제공
Jquerymobile 에서 제공하는 image 및
image를 이용하여 주로 icon 및 무늬에
대한 이미지가 정의
디렉터리 구조 (2/2)

37Page l 37
페이지 구조 (1/5)
q 모바일 웹 구현을 위한 페이지는 HTML5 표준을 준수하고 있으며, 화면 구성을 위한 JS 및 CSS 등
을 임포트 하여 작성된다.
q 전자정부 모바일 표준프레임워크 실행환경을 구성하기 위해서는 파일의 <head>영역에 관련 라이
브러리를 적용한다.
Ø Header 영역
<!DOCTYPE html>
<html>
<head>
<title>eGovFrame Mobile</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no"/>
<link rel="stylesheet" href="/css/egovframework/mbl/cmm/jquery.mobile-1.4.5.css" />
<link rel="stylesheet" href="/css/egovframework/mbl/cmm/EgovMobile-1.4.5.css" />
<script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="/js/egovframework/mbl/cmm/EgovMobile-1.4.5.js"></script>
</head>
<body>
...
</body>
</html>
5. 모바일 웹

38Page l 38
q <body> 영역은 ‘data-role’ 속성에 적용된 값에 따라 Page, Header, Content, Footer 영역으로 구
분된다.
header 영역
data-role=“header”
content 영역
data-role=“content”
footer 영역
data-role=“footer”
§ Header bar는 좌우에 버
튼 및 헤더제목틀 넣을 수
있다.
§ Footer bar는 브라우저
하단에 위치하며 버튼,
탭, 링크 등 컴포넌트 요
소 등을 넣을 수 있다.
§ Content는
UX Component를
이용하여 구성 할 수 있다.
Page 영역
data-role=“page”
§ Page는 Header Footer bar 및
Content를 포함 하고 있으며
Header /Footer bar와 Content
와 달리 반드시 필요한 요소 이
다.
§ Page 컴포넌트의 기능을 이용
하며 Page간 전환을 할 수 있
다.
페이지 구조 (2/5) 5. 모바일 웹

39Page l 39
q 각 페이지 단위의 일반적인 구조는 다음과 같이 구분된다.
Ø Body 영역

<div data-role="page">

<div data-role="header">
<h1>Header Title</h1>
</div>


<div data-role="content">
<p>전자정부 모바일 표준프레임워크
Default Page 화면 입니다.</p>
</div>


<div data-role="footer“>
<h4>Footer Title</h4>
</div>

</div>

Ø 실행 화면
5. 모바일 웹

40Page l 40
q 각 페이지 별로 Theme를 적용하여 해당 페이지 영역에 공통색상 적용이 가능하다.
§ Theme 기능을 이용하여 하위 레벨의 색상을 변경할 수 있다. 테마 변경 최상위 Tag는 <data-role="page"> 이
며 변경시 page 하위의 Header, Footer, Panel, UX Component의 색상이 변한다.
§ 테마를 적용할 최상위 div Tag에 data-theme="[a~g]"를 추가한다. 테마를 적용 할 경우 하위 컴포넌트들의 색
상이 일괄 변형된다.
5. 모바일 웹

41Page l 41
q Theme는 페이지 뿐만 아니라 모든 독립 컴포넌트에 적용이 가능하다
§ 상위 컴포넌트와 독립적으로 하위 컴포넌트에 테마를 지정할 수 있으며 해당 컴포넌트에 data-
theme=“[a~g]” 속성을 추가하여 원하는 테마를 개별적으로 적용할 수 있다.
5. 모바일 웹

42Page l 42
모바일 실행환경 가이드 3.5 실습
q 인터넷 가능 환경
– 표준프레임워크 포탈 제공 : http://m.egovframe.go.kr/mguide3.5/
q 교육교재
– Eclipse 실행
– 프로젝트 lab401-mobile-guide-3.5 실행
– Run on Server
– Chrome 브라우저 실행
5. 모바일 웹

43Page l 43
페이지 이동 (1/2)
q 모바일 페이지 이동은 기본적으로 Ajax 를 이용하여 처리 된다. 이는 모바일에 최적화된 화면 전환
효과를 주기 위함으로 옵션 설정을 통해 변경 가능하다.
q 페이지 내부 이동
§ 하나의 HTML 파일 안에 여러 page 가 선언 되어 있는 경우에 사용 할 수 있는 방법으로 모바일 page 구성의 기
본 방식이다. 페이지 내부 이동은 Ajax 통신을 사용하며 page 로 선언된 div 태그의 id 값을 링크의 href 속성 값
(#pageId)으로 적용하여 사용 가능하다. (한 HTML 내에 여러 page가 선언 되어 있을 경우 제일 상단의 page를 첫
화면으로 인식 한다.)
§페이지 내부 이동은 Ajax 방식을 기본으로 하기 때문에 연속적으로 여러 번 사용하면 DOM 객체를 제대로 못불러 올 경우가 있으므로 외부 페이지 이동으로 권
장한다.

<div id="main" data-role="page">
<a href="#view" data-role="button">글쓰기</a>
<p>Main Page 입니다.</p>
</div>

<div id="view" data-role="page">
<p>상세보기 페이지</p>
</div>
<div id=“main”
data-role=“page”>
<div id=“view”
data-role=“page”>
<a href=“#view “>
내부
링크
5. 모바일 웹

44Page l 44
페이지 이동 (2/2)
q 페이지 외부 이동
§ 페이지 외부 이동은 Ajax 통신을 이용하며 Ajax 로 호출한 html 의 data-role=“page” 영역만 읽어 들여서 호출
한 html 페이지의 DOM 요소에 추가 해 준다. (페이지 내부 이동과 유사 한 구조로 DOM 관리)
- Ajax 로 호출된 HTML의 page 영역만 가져 오기 때문에 호출된 페이지에서 사용하는 JavaScript, CSS 등은 호출을 한 HTML내
에 존재 해야 한다.
- Ajax 통신을 사용하고 싶지 않은 경우 Internal / External UX Component를 참조하여 변경 가능하다.
main.jsp
<div id="main" data-role="page">
<a href="create.html" data-role="button">글쓰기</a>
<p>Main Page 입니다.</p>
</div>
create.jsp
<div id="create" data-role="page">
<p>글쓰기 페이지</p>
</div>
<script>
<link rel="stylesheet“ …>
<div id="main"
data-role="page">
<link rel="stylesheet“ …>
<div id="create“
data-role="page">
<a href=“create.jsp“>
main.jsp create.jsp
페이지 외부 링크
참조 참조X
5. 모바일 웹

45Page l 45
API (1/7)
q pageinit 이벤트와 기본 환경 설정
§ 모바일 어플리케이션이 시작 될 때 각종 초기화 작업이 수행 될 수 있도록 pageinit 이벤트를 통하여 기본 환
경 설정을 변경할 수 있도록 한다.
§ pageinit 이벤트는 page가 시작되자마자 발생하는 이벤트로 첫 번째 초기화 작업 시 실행되며, 함수 내부에
여러 이벤트를 적용하여 사용 할 수 있다.
$(document).on("pageinit ", function(){
//apply overrides here
});
§ pageinit 이벤트는 실행 즉시 발생 하므로 jquerymoible.js가 로드 되기 전에 바인딩 되어야 한다. 다시 말해
pageinit 이벤트의 위치는 jquery 라이브러리와 jquerymobile 라이브러리 사이에 위치 해야 한다.
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
5. 모바일 웹

46Page l 46
API (2/7)
q pageinit 이벤트와 기본 환경 설정
§ 기본 환경설정을 변경하는 방법에는 $.extend 메소드를 이용하여 여러 속성을 한 번에 변경하거나 .mobile 객
체를 사용하여 개별적으로 변경하는 방법이 있다.
§ $.mobile 객체를 통해 재설정이 가능한 주요 기본 환경설정:
기본 환경설정 설명
loadingMessage (string, default: "loading")
페이지가 로딩될 때 나타나는 텍스트를 설정한다. ‘false’로 설정하면 로딩
메시지가 나타나지 않는다.
pageLoadErrorMessage (string, default: "Error Loading Page")
Ajax 방식의 페이지이동에서 페이지를 로드하지 못했을 경우 나타나는 에
러메시지의 텍스트를 설정한다.
defaultDialogTransition (string, default: 'pop')
다이얼로그에서 Ajax 방식을 통한 페이지 전환에 관여하는 기본 환경설정
을 변경한다. defaultDialogTransition 옵션을 ‘none’으로 설정하면 화면전
환 효과가 적용되지 않는다.
defaultPageTransition (string, default: ‘fade')
Ajax 방식을 사용하는 페이지 전환에 관여하는 기본 환경설정을 변경한다.
defaultPageTransition 옵션을 ‘none’으로 설정하면 화면전환 효과가 적용
되지 않는다.
ajaxEnabled (boolean, default: true)
모든 링크 이동이나 폼 전송은 기본적으로 Ajax 방식을 기반으로 하고 있다.
Ajax가 아니라 일반 방식으로 페이지 이동을 처리하고 싶다면 이 값을
‘false’로 지정한다.
5. 모바일 웹

47Page l 47
API (3/7)
q 이벤트
§ 전자정부 모바일 표준프레임워크는 스마트기반 모바일 환경에 적합한 이벤트를 선별하여 제공한다. Touch,
Mouse, Window 영역의 다양한 이벤트를 지원가능 여부에 따라 선택적으로 이용하기 때문에 모바일 환경과
데스크톱(Desktop) 환경 모두에서 사용 가능하다. live() 또는 bind() 메소드를 이용하여 여러 이벤트를 함께 사
용 할 수 있다.
§ 지원 터치 이벤트:
터치 이벤트 설명
tap Touch 가 감지되면 즉시 발생하는 이벤트이다.
taphold tap을 일정 시간 이상 지속했을 때 발생하는 이벤트이다.
swipe 30pixel 이상의 수평 방향이나 20pixel 이상의 수직 방향으로 드래그(drag)되면 발생하는 이벤트이다.
swipeleft swipe 이벤트가 왼쪽으로 일어났을 때 발생하는 이벤트이다.
swiperight swipe 이벤트가 오른쪽으로 일어났을 때 발생하는 이벤트이다.
5. 모바일 웹

48Page l 48
API (4/7)
q 이벤트
§ 지원 화면 방향 전환 및 스크롤 이벤트:
§ 지원 페이지 이벤트:
화면 방향 전환 및 스크롤 이벤트 설명
orientationChange
기기의 방향이 수평 또는 수직으로 바뀌었을 때 발생하는 이벤트이다. orientationChange 이벤
트가 지원되지 않을 경우에는 resize 이벤트가 자동으로 bind 된다.
scrollstart
스크롤(scroll)이 시작되면 발생하는 이벤트이다. (iOS 기기는 스크롤 중에는 DOM 을 변경하지
않고 queue 에 저장해두었다가 스크롤이 끝난 후에 변경한다.)
scrollstop 스크롤이 끝나면 발생하는 이벤트이다.
페이지 이벤트 설명
pagebeforecreate
페이지가 초기화되기 직전에 발생하며 페이지 로딩 시 가장 먼저 발생하는 이벤트이다. 페이지 생성 시에만
이벤트가 발생한다.
pagecreate 페이지 초기화가 끝나면 발생하는 이벤트이다. 페이지 생성이 완료된 시점에만 이벤트가 발생한다.
pagebeforeshow 화면전환이 일어나기 전, 즉 페이지가 보여지기 전에 매번 발생하는 이벤트이다.
pageshow 화면전환이 완료되었거나 페이지가 보여진 후에 매번 발생하는 이벤트이다.
pagebeforehide 화면전환이 일어나기 전, 즉 페이지가 숨겨지기 전에 매번 발생하는 이벤트이다.
pagehide 화면전환이 완료되었거나 페이지가 가려진 후에 매번 발생하는 이벤트이다.
5. 모바일 웹

49Page l 49
API (5/7)
q 이벤트
페이지 이벤트 설명
pagebeforeload 페이지 로딩이 일어나기 전에 발생하는 이벤트이다.
pageload 페이지 로딩이 성공한 경우(DOM에 정상적으로 통합된 경우) 에 발생하는 이벤트이다.
pageloadfailed 페이지 로딩이 실패한 경우(DOM에 정상적으로 통합되지 못한 경우) 에 발생하는 이벤트이다.
pagebeforechange 대상 페이지로 이동하는 애니메이션이 보여지기 전에 발생하는 이벤트이다.
pagechange
대상 페이지가 정상적으로 로딩된 후에 애니메이션을 포함한 페이지 이동까지 정상적으로 완료된 경우 발생
하는 이벤트이다.
pagechangefailed 대상 페이지를 로딩하지 못했거나 페이지 이동이 정상적으로 완료되지 않았을 때 발생하는 이벤트이다.
pageinit
페이지 초기화가 완료된 이후(DOM객체가 생성된 후 모든 요소들의 스타일이 적용된 이후)에 발생하는 이벤
트이다.
pageremove
페이지의 링크 태그에 external-page=“true” 속성을 추가함으로서, 외부페이지로 이동 후 다시 돌아올 때 외
부페이지가 제거되면서 이벤트가 발생한다.
5. 모바일 웹

50Page l 50
API (6/7)
q 이벤트
§ Virtual Mouse event
Virtual Mouse 이벤트 설명
vmouseover 터치 이벤트 또는 mouseover가 발생할 때 나타나는 이벤트이다.
vmousedown 터치 이벤트 또는 mousedown이 발생할 때 나타나는 이벤트이다.
vmousemove 터치 이벤트 또는 mousemove가 발생할 때 나타나는 이벤트이다.
vmouseup 터치 이벤트 또는 mouseup이 발생할 때 나타나는 이벤트이다.
vclick 터치 이벤트 또는 click이 발생할 때 나타나는 이벤트이다.
vmousecancel 터치 이벤트 또는 mousecancel가 발생할 때 나타나는 이벤트이다..
vmouseout 터치 이벤트 또는 mouseout이 발생할 때 나타나는 이벤트이다.
5. 모바일 웹

51Page l 51
API (7/7)
q 메소드 & 유틸리티
§ 전자정부 모바일 표준프레임워크는 $.mobile 객체에 대한 메소드와 속성들 (properties) 을 제공한다.
§ $.mobile 객체는 페이지 정보를 제공하거나, 페이지 전환을 제어하는 것이 주요한 기능이고, 페이지 제어 또는
스크롤 제어 등의 방법을 제공한다.
§ 주요 메소드:
메소드 설명
$.mobile.changePage (method)
프로그램 코드 상에서 페이지를 이동할 수 있도록 지원하는 메소드이다. 주로 화면전환, 페이지 로
딩 등의 기능이 가능한 환경에서 링크 클릭이나 폼 전송을 할 때 내부적으로 사용된다.
$.mobile.loadPage (method)
외부 페이지를 로드하고,DOM에 추가한다. 이 메소드는 첫 번째 인자로 URL이 올 때 changePage()
함수를 통해 내부적으로 호출된다. 이 함수는 현재 활성화된 페이지에는 영향을 주지 않고, 백그라
운드에서 페이지를 로드 할 때 사용된다.
$.mobile.showPageLoadingMsg ()
-> $.mobile.loading(“show”) 변경
페이지 로딩 메시지를 보여준다.
$.mobile.hidePageLoadingMsg ()
->$.mobile.loading(“hide”)
페이지 로딩 메시지를 숨긴다.
5. 모바일 웹

52Page l 52
q 모바일 신규 공통컴포넌트 10종
§ 모바일 정보시스템 구축 시 공통 활용 및 재사용이 가능하도록 화면, DB, 로직 등을 포함한
기능위주의 10종을 구현
구 분 공통컴포넌트
모바일
신규 공통컴포넌트
(10종)
협업
실시간 공지 서비스
동기화 서비스
오프라인 웹 서비스
모바일 기기 식별
위치정보연계
시스템/서비스 연계
OPEN-API 연계 서비스
MMS 서비스 연계
디지털 자산관리
모바일 차트/그래프
모바일 사진앨범
멀티미디어 제어
5. 모바일 웹

53Page l 53
q 모바일 전환 공통컴포넌트 30종
§ 모바일 정보시스템 구축 시 공통 활용 및 재사용이 가능하도록 화면, DB, 로직 등을 포함한
기능위주의 30종을 구현
구 분 공통컴포넌트
모바일
전환 컴포넌트
(30종)
사용자 디렉토리/통
합인증(1종)
사용자 통합인증 일반로그인
협업(14종)
게시판 게시판, 공지사항, 유효게시판, 익명게시판, 댓글, 스크랩기능
동호회 커뮤니티, 커뮤니티 방명록, 커뮤니티 사진첩
일정관리 부서일정관리, 일정관리, 일지관리, 전체일정
주소록/명함록 주소록
사용자지원(15종)
약관관리 약관관리
온라인 참여 상담관리, 설문조사, 온라인 POLL
온라인 헬프 도움말, 용어사전, FAQ, Q&A, 행정전문용어사전, 온라인 매뉴얼
정보제공/알림 뉴스, 사이트맵, 추천사이트, 행사/이벤트/캠페인
개인화 마이페이지
5. 모바일 웹

54Page l 54
개요
q UX Component 개요
NO. UX Component 설명
1 Button 명령 수행, 옵션 선택, 다른 대화 상자 열기 등에 사용하는 컴포넌트 제공
2 Panel Header/Footer 와 함께 페이지를 구성하는 요소
3 Panel Widget 메뉴 또는 collapsible columns 을 쉽게 만들 수 있게 제공되는 요소
4 Internal / External Link 표준 링크 기능을 제공 하며 기본적으로 Ajax 를 사용한 링크 방식 제공
5 Label / Text 글꼴, 색상, 배치를 지정 할 수 있는 가이드 제공
6 Tabs Header와 Footer 에 사용되며 탭 버튼으로 문서간 이동 기능 제공
7 Form HTML Form 요소를 모바일 환경에 최적화하여 제공
8 Menu Dialog, Grid, List, Collapsible 컴포넌트를 사용하여 메뉴 구성 기능 제공
9 Loader Widget 페이지 전환간 진행 상태를 확인 할 수 있는 Loader Widget 제공
10 Dialog 사용자와 상호 작용 할 수 있는 Dialog 기능을 제공
11 Grid View Grid 형태로 콘텐츠를 배치 할 수 있는 컴포넌트 제공
12 Table / List View Table 형태로 콘텐츠를 배치 할 수 있는 컴포넌트 제공
13 Check / Radio Check / Radio 형태로 항목을 선택할 수 있는 기능을 제공
14 Icon 모바일 어플리케이션에 가장 많이 사용되는 아이콘을 제공
15 Selector / Switch Selector / Switch 형태로 항목을 선택 할 수 있는 기능을 제공
16 Collapsible Block 콘텐츠 영역을 접었다 펼 수 있는 컨트롤 기능 제공
17 Popup Widget DIV 영역으로 작성 된 팝업 컨텐츠를 팝업 형태로 출력할 수 있는 기능을 제공
6. UX Component

55Page l 55
Button
q 버튼은 핵심적인 위젯으로서 여러 플러그인에서 광범위하게 사용된다.
q Anchor 링크에 data-role="button" 속성을 추가하면 전자정부 모바일 표준프레임워크에서 제공하
는 버튼의 스타일을 적용할 수 있다.
q 기본코드
<a href="#" data-role="button">Button</a>
컴포넌트 제공 기능 그래픽 레이아웃
Button
설명
명령 수행, 옵션 선택, 다른 대화 상자 열기 등에
사용하는 컴포넌트 제공
형태 (2종) 둥근 형(radius: 16px), 사각형(radius: 0px)
배치 (2종) vertical group, horizontal group
색상 (7종) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록
높이 (2종) normal(39px), small (28px)
넓이 (2종) 화면에 맞게 , 텍스트에 맞게
그림자(2종) 포함, 미포함
6. UX Component

56Page l 56
Panel
q Panel은 Header/Footer bar와 함께 페이지를 구성하는 요소이다.
q Panel의 기본코드는 <div class="ui-body-[a~g]">를 사용하며 a~g는 Panel 의 색상 변경을 지원
한다.
q 기본코드
<div class="ui-body-c center"><h4>Panel</h4></div>
Panel
설명
Header/footer 와 함께 페이지를 구성하는 요
소
무늬 격자 형태 무늬 제공
6. UX Component

57Page l 57
Panel Widget
q Panels widget은 data-role="panel“로 정의된 영역을 페이지 내에서 호출하여 쉽게 메뉴 또는
Collapsible 영역 등을 구성할 수 있도록 해주는 요소이다
q 기본코드
<div data-role="page">
<div role="main" class="ui-content">
<a href="#defaultpanel" data-role="button"
data-inline="true" data-icon="bars">
Default panel</a>
</div>
<div data-role="panel" id="mypanel">

<h3>Default panel example</h3>
<a href="#demo-links" data-rel="close" data-role="button"
data-theme="a" data-icon="delete" data-inline="true">Close panel</a>
</div>
</div>
6. UX Component

58Page l 58
Internal / External Link
q 전자정부 모바일 표준프레임워크는 HTML의 모든 표준 링크를 지원하며 기본적으로 Ajax 방식을
이용하여 페이지를 전환한다.
q HTML의 Anchor 태그를 이용하여 링크 기능을 사용할 수 있다.
q 기본코드
<a href="#Two">페이지 내부 링크</a>
<a href="/guide/guide.do">도메인 내부 링크</a>
<a href="http://www.egovframe.go.kr">외부 링크</a>
Internal/
External
Link
설명
표준 링크 기능을 제공 하며 기본적으로 Ajax 를
사용한 링크 방식 제공
링크 (6종)
Page link internal, Domain link internal, Link
external, Email links, Phone links, Error page
6. UX Component

59Page l 59
Label / Text
q Label / Text 는 HTML 의 <h1>, <p> Tag 를 사용하며 CSS 정의하여 색상, 배치, 크기, 폰트를 변경
하여 사용 할 수 있다.
q 기본코드
<div class="egov-color-green">This paragraph is in green.</div>
<div class="egov-font-size25">This paragraph is in size 25px.</div>
<div class="egov-font-tahoma">This paragraph is in tahoma.</div>
<div class="egov-align-right">This paragraph is right alignment.</div>
Label /
Text
설명
글꼴, 색상, 배치, 폰트를 지정 할 수 있는 가이드
제공
6. UX Component

60Page l 60
Tabs
q 탭은 버튼이 수평으로 나열된 형태로 모바일 환경에 최적화된 내비게이션 UI를 제공한다.
q data-role="navbar" 를 이용하여 내비게이션 기능을 사용하며 ui-btn-active 클래스 값으로 활성화
된 탭을 나타낼 수 있다.
q 기본코드
<div data-role="navbar">
<ul><li><a href="#" class="ui-btn-active">One</a></li> <li><a href="#">Two</a></li></ul>
</div>
Tabs
설명
Header와 footer 에 사용되며 탭 버튼으로 문서
간 이동 기능 제공
형태 (2종) round tab(radius: 40x), normal tab(radius: 0px)
배치 (6종) 1, 1/2, 1/3, 1/4, 1/5, ½ 다중행 tab
아이콘위
치(4종)
상, 하, 좌, 우
6. UX Component

61Page l 61
Form
q HTML의 모든 폼 요소를 모바일 환경에 최적화된 UI로 제공한다. 폼을 사용할 때는 여러 페이지가
하나의 DOM 에 속할 수 있으므로 id 속성을 사이트 범위에서 유일한 값으로 지정해야 한다.
q 전자정부 모바일 표준프레임워크를 이용하여 폼을 생성하면 레이블 및 폼 구성요소가 화면의 너비
에 맞게 자동으로 배열된다.
q 폼 요소 배열의 구성을 향상시키려면 <div data-role="fieldcontain"> Tag 내부에 레이블 및 폼 요
소를 포함시킨다.
Form
설명
Html form 요소를 모바일 환경에 최적화하여 제
공
요소 (7종)
Text inputs, Search inputs, Sliders, Switches,
Radio buttons, Check boxes, Selectors
6. UX Component

62Page l 62
Menu
q 모바일 Page의 메뉴 기능은 Dialog, Grid, List, Collapsible 의 기능을 활용하여 구현할 수 있다.
q 링크에 data-rel="dialog" 및 data-transition="slide, slidedown, slideup, fade, flip, turn, flow,
slidefade" 속성을 추가하여 다이얼 로그의 효과적인 표출 효과를 사용 할 수 있다.
Menu
설명
Dialog, Grid, List, Collapsible 컴포넌트를 사용하
여 메뉴 구성 기능 제공
효과 (9종)
slide, slideup, slidedown, pop, fade, flip, turn,
flow, slidefade
형태 (4종) Dialog, Grid, List, Collapsible
6. UX Component

63Page l 63
Loader Widget
q Loader Widget은 모바일 Page 전환 시 진행 상태를 표시해 주는 역할을 한다.
q Loader Widget은 Ajax 통신을 이용할 경우 Default 로 나타난다.
q Progress Bar 는 Ajax 통신을 이용할 경우 나타나고 설정을 통해 Default 로 사용 가능하다.
pageinit 이벤트에 $.mobile.loader.prototype.options 관련 속성을 추가하면 Loader Widget을 적용할 수 있다.
Loader
Widget
설명
페이지 전환간 진행 상태를 확인 할 수 있는
Loader Widget 제공
6. UX Component

64Page l 64
Dialog
q 다이얼로그를 새 창으로 전환 할 경우 팝업 효과 등으로 나타낼 수 있으며 Anchor Tag에 data-
rel="dialog"를 추가 하면 기본 다이얼로그 효과가 나타난다.
q 기타 Dialog는 자바 스크립트를 이용하여 Alert, Confirm 등의 창을 띄운다.
<input id="overlay_dialog" type="button" value="Overlay" />
Dialog
설명
사용자와 상호 작용 할 수 있는 Dialog 기능을 제
공
형태 (6종)
Dialog, Action Sheet, Overlay, Alert, Prompt,
Confirm
6. UX Component

65Page l 65
Grid View
q Grid View는 UX Component를 같은 넓이, 같은 행으로 나타 낼 때 사용되며 Grid View 안에 컴포
넌트를 넣어 나란하게 배열 할 수 있다.
q Grid 속성으로 칼럼(column) 수를 지정하고 Block 속성으로 내부의 셀을 지정한다.
q 기본코드
<div class="ui-grid-a">
<div class="ui-block-a">Block A</div> <div class="ui-block-b">Block B</div>
</div>
Grid
View
설명
Grid 형태로 콘텐츠를 배치 할 수 있는 컴포넌트
제공
배치 (5종) 1/2, 1/3, 1/4, 1/5, 가변 Grid View
6. UX Component

66Page l 66
Table / List View
q 전자정부 모바일 표준프레임워크를 통해 생성된 리스트는 모바일 환경에 최적화된 형태로 제공된다.
q 리스트 Tag(ol, ul)에 data-role=”listview” 속성을 추가하면 전자정부 모바일 표준프레임워크에서
제공하는 리스트를 생성할 수 있다.
q 기본코드
<ul data-role="listview" data-inset="true">
<li>List Item 1</li><li>List Item 2</li>
</ul>
Table /
List View
설명
Table 형태로 콘텐츠를 배치 할 수 있는 컴포넌트
제공
형태 (2종) Read-only list, Link list
기능(11종)
Nested List, Numbered List, Split Button,
List Divider, Count Bubble, Thumbnail, List icon,
Content Formatting, Search Filter Bar,
Change Mode List, Checked List
6. UX Component

67Page l 67
Check / Radio
q 체크 박스는 하나 이상의 항목을 선택 할 수 있는 기능을 제공한다
q 체크 박스를 세로로 정렬 하기 위해서는 <fieldset data-role="controlgroup">으로 체크 박스를 감
싸 주어야 한다.
q 기본코드
<fieldset data-role="controlgroup">
<legend>취미 선택 :</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1 /> <label for="checkbox-1">음악감상</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked"/> <label for="checkbox-2">
영화감상</label>
</fieldset>
Check /
Radio
설명
Check/Radio 형태로 항목을 선택할 수 있는 기
능을 제공
6. UX Component

68Page l 68
Check / Radio
q 라디오 버튼은 여러 개의 항목에서 하나를 선택 할 수 있는 기능을 제공한다.
q 라디오 버튼을 사용 할 경우 <input type="radio">의 name 속성이 동일 해야 하며 세로로 정렬 하기
위해서는 <fieldset data-role="controlgroup">으로 라디오 버튼을 감싸 주어야 한다.
q 기본코드
<fieldset data-role="controlgroup">
<legend>동의 여부: </legend>
<input type="radio" name="radio-1" id="radio-1" value="choice-1" checked="checked" />
<label for="radio-1">동의합니다.</label>
<input type="radio" name="radio-1" id="radio-2" value="choice-2" />
<label for="radio-2">동의 하지 않습니다.</label>
</fieldset>
Check /
Radio
설명
Check/Radio 형태로 항목을 선택할 수 있는 기
능을 제공
6. UX Component

69Page l 69
Icon
q 전자정부 모바일 표준프레임워크 실행환경은 모바일 어플리케이션에 가장 많이 사용되는 아이콘을
선별하여 제공한다. 기본으로 제공되는 아이콘은 흰색의 아이콘 모양과 반투명의 검은 원형 배경으
로 이루어져있어 어떤 배경색과도 대비를 이룰 수 있다.
q data-icon 속성값으로 생성할 아이콘 이름을 지정하여 아이콘을 추가한다.
<a href="#" data-role="button" data-icon="home">Home</a>
Icon
설명
모바일 어플리케이션에 가장 많이 사용되는 아이
콘을 제공
형태
(26종)
arrow-l, arrow-r, arrow-u, arrow-d, delete, plus,
minus, check, gear, refresh, forward, back, grid,
star, alert, info, search, home, phone, mail, gps,
audio, camera, file, mic, explorer
6. UX Component

70Page l 70
Selector / Switch
q Selector의 기본 형식은 OS의 Selector 메뉴 형식에 따라 다르게 나타난다. 또한 팝업 형으로 펼침
방식을 변경 할 수 있으며 <option>의 개수에 따라 자동적으로 형태를 바꿔준다.
q Selector를 <label>과 같은 행으로 나타 내고 싶을 때는 <fieldcontain>으로 <label>과 <select>를
감싸야 하며 <label> for 속성과 <selector>의 id 속성의 값이 동일 해야 한다.
q 기본코드
<label for="select-choice-1" class="select">선택 하시오:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="apple">사과</option>
<option value="banana">바나나</option>
</select></fieldset>
Selector
/ Switch
설명
Selector/Switch 형태로 항목을 선택 할 수 있는
기능을 제공
효과 (2종) pop-up, list
기능 (2종) 다중선택, 단일 선택
모양(2종) 둥근 형(radius: 1em) 사각형(radius: 0em)
넒이(2종) 화면에 맞게 , 텍스트에 맞게
6. UX Component

71Page l 71
Selector / Switch
q Switch는 이진 형식을 따르며 좌우로 선택 하도록 되어있다.
q Switch를 <label>과 같은 행으로 나타 내고 싶을 때는 <fieldcontain>으로 <label>과 <slider>를 감
싸야 하며 <label>의 for 속성과 <slider>의 id 속성 값이 동일 해야 한다.
q 기본코드
<label for="slider">선택하시오 :</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
Selector
/ Switch
설명
Selector/Switch 형태로 항목을 선택 할 수 있는
기능을 제공
효과(2종) Shadow 적용 Shadow 제거
형태(2종) 비 그룹, 그룹
6. UX Component

72Page l 72
Collapsible Block
q Collapsible Block는 콘텐츠 영역을 접었다 펼 수 있는 컨트롤 기능을 제공한다.
q Collapsible Block 를 그룹형태로 나타내고 싶을 경우는 <div data-role="collapsible-set">으로
영역을 감싼다.
q 기본코드
<div data-role="collapsible" data-theme="b">
<h3>data-theme="b" collapsible header</h3>
<p>data-theme="b" collapsible header content</p>
</div>
Collapsi
ble
Block
설명
콘텐츠 영역을 접었다 펼 수 있는 컨트롤 기능
제공
형태(3종) Normal, Group, Nested
6. UX Component

73Page l 73
Popup Widget
q data-role="popup“ 을 추가하면 div 영역으로 정의 된 내용이 팝업 형태로 출력된다.
q a href 링크에서 data-rel="popup“ 을 추가한 후 data-role="popup“으로 정의 된 div 의 id를 호출
하면 팝업 형태로 해당 내용을 출력할 수 있다.
q 기본코드
<div data-role="page" id="page1">
<a href="#popupBasic" data-rel="popup">Popup Widget</a>
<div data-role="popup" id="popupBasic">
<p>This Popup Example.</p>
</div>
</div>
6. UX Component
component Provided functionality Graphic Layout
Collapsible
Block
Explanation
content area collapsible control Function
provides
Form(5) Tooltip, Menu, Form, Dialog, Photo
color (7) Black, blue, gray, white, yellow, red, green

74Page l 74
개요
디바이스 API
Plug-in
(하드웨어 기능 확장)
개발도구
(Eclipse)
Android SDK
Windows
Mac OSX
Linux
ADT
개발도구
(XCode)
Mac OSX
Cocoa Touch
Framework
전자정부 모바일 웹 실행환경
Android 개발 환경 iOS 개발 환경
Mobile
Hybrid
APP
모바일 어플리케이션 개발환경 모바일 하이브리드 어플리케이션
q 전자정부 디바이스 API 실행환경은 기존 모바일 어플리케이션 개발 환경에서 Plug-in 형태로
구현되어 있는 디바이스 API를 추가하여 모바일 하이브리드 어플리케이션을 구현하는 방식이다.
앱스토어 등록
적응 및 개발 용이함
기반 환경 제공

75Page l 75
개요
q 모바일 하이브리드 어플리케이션 구현을 위한 하이브리드 프레임워크 기반 제공
– 디바이스 고유기능 호출을 위한 Native Code 및 JavaScript Code 제공
q HTML 페이지에서 디바이스 고유기능의 호출을 위한 디바이스 API 제공
– 10종의 오픈 소스 디바이스 API 제공
– Accelorator, Compass, Camera, Media, File Read/Write, Device, Vibrator, Network, GPS, Contact 등
q 플러그인 형태의 추가 API 제공
– NPKI 네이티브 코드와 연계를 위한 JavaScript 형태의 연계 템플릿 API 제공
– 기존의 전자정부 표준프레임워크로 구현 된 웹 서버 어플리케이션과의 연계를 위한 연계 API 제공
q 하이브리드 어플리케이션 개발을 위한 오픈 소스 소프트웨어 선정
– 전자정부 모바일 하이브리드 어플리케이션은 PhoneGap 프레임워크를 기반으로 하며,
HTML5 기반의 화면 구성을 위하여 전자정부 모바일웹 실행환경을 적용

76Page l 76
q 전자정부 디바이스 API 실행환경은 하이브리드 어플리케이션의 구성 기반이 되며, 하이브리드
어플리케이션 구현 및 실행 시 필요한 기본기능을 제공한다.
환경 설명
실행 환경
• 전자정부 모바일 하이브리드 어플리케이션 개발 프레임워크 라이브러리 제공
- Open Source(PhoneGap)
- 표준 코드 및 하이브리드 앱 샘플 템플릿 제공
• Device API 지원
- 10종의 Open Source Device API
- 추가 Device API 2종 제공
• 모바일 하이브리드 어플리케이션 개발 시 가이드 및 재사용을 위한 디바이스 API 가이드 프로그램 제공
- 12종의 디바이스 API 가이드 하이브리드 앱 개발
- 디바이스 API 가이드 하이브리드 앱과 통신을 위한
전자정부 표준프레임워크 기반 웹 서버 어플리케이션 개발
개발 환경 • 플랫폼 별 하이브리드 앱 개발 템플릿 프로젝트 생성 도구 제공
전자정부 디바이스 API 실행환경 구성

77Page l 77
구성요소
q 디바이스 API 실행환경은 웹 리소스를 통한 디바이스 하이브리드 어플리케이션 구현을 지원하며
플랫폼 별 SDK를 활용하여 구현된 웹 리소스 내의 JavaScript 형태의 Device API와 각 플랫폼 별
Native Code가 하이브리드 프레임워크 및 웹 뷰 인터페이스를 통해 연동되어 실제 디바이스의
고유 기능을 호출할 수 있도록 지원 한다.
구현 환경
Android SDK iOS SDK
Natïve 연계
기능 구현
디바이스 API 웹 리소스 JavaScript Framework
디바이스 API 10종
하이브리드 프레임워크 Web View Interface
전자정부 특화 디바이스
API 2종
HTML5
CSS3
JavaScript
전자정부 모바일
웹 실행환경
Custom JavaScript
Framework
• 웹기능
호출
* 하드웨어
기능호출

78Page l 78
• Linux kernel
- 하드웨어 드라이버, 프로세스와 메모리 관리, 보안, 네트
워크, 전력 관리 등의 핵심 서비스 담당.
• Libraries
- Android libc와 SSL 같은 다양한 C/C++ 코어 라이브러리
- 핸드폰에 사용되는 하드웨어를 지원하기 위해 컴파일 되
어 핸드폰 공급업체에 의해 핸드폰에 미리 설치 됨
• Android Runtime
- Core Libraries, Dalvik Virtual Machine으로 구성.
- 커널위에 존재하며 Dalvik, VM, 코어 라이브러리 등이 포
함된다.
• Application Framework
- Android Application을 만드는데 필요한 기능을 지원,
App들을 관리하는 역할을 한다.
- 직접만든 컴포넌트를 통해 확장 시킬 수 있다.
• Application
- 안드로이드 아키텍처 다이어그램의 최상위 계층
- 안드로이드의 특징 중 하나로 모든 어플리케이션이
동일한 수준으로 실행됨
모바일 운영체제 7. 모바일 하이브리드 어플리케이션
q Android 운영체제의 구성은 다음과 같다.

79Page l 79
모바일 운영체제 7. 모바일 하이브리드 어플리케이션
q iOS 운영체제의 구성은 다음과 같다.
• iOS의 커널
- Mac OS X와 같은 Mach에 기초한다.
• Core OS와 Core Services 계층
- 매우 기본 적인 iOS의 인터페이스를 가지고 있다. 데이터
타입들, 봉주르 서비스, 네트워크 소켓 등이 있다.
• Media 계층
- 2D/3D 그리고, 오디오, 비디오 등의 기반 기술을 가지고
있다. OpenGL ES, Quartz Core Audio와 Core
Animation이 있다.
• Cocoa Touch 계층
- 모든 기술이 Objective-C를 기본으로 하며, 각종 프레임워
크로 응용프로그램을 만들 때 가장 기본적인 인프라를 제공
한다.

80Page l 80
Application 은 Hybrid Platform에서 제공되는 JS를
통해 Native Feature를 이용한다.
Hybrid
ApplicationHybrid
Platform
(폰갭,코도바)
WebkitNative Apps
Hybrid Core
Interface wrapper
JS API
Client OS
(iOS, Android …)
HTML + JS + CSS
Webkit 상에서
구동되는
Web App
형태로 개발함
Hybrid Application의 구조
Application 개발자는 Web 개발 방식으로 HTML,
JS, CSS 를 사용하여 개발한다.
Hybrid Platform으로 최종 Build 된 Hybrid
Application은 Native Application과 같은 모습으로
Package 되고, 관리된다.
HTML + JS +
CSS
Client
OS
Webkit
Hybrid Custom
Plugin
~.apk
(안드로이드)
~.ipa
(아이폰)
최종 생성된 App은
앱스토어에
등록 될 수 있다
Client OS 상의 Hybrid Application의 Package 형태
q 모바일 디바이스 API 실행환경 기반 프레임워크는 하이브리드 어플리케이션을 구현하기 위한
기반 환경으로서 웹 리소스로 구현 된 기능을 네이티브 앱 형태로 래핑하는 역할을 한다.
기본 구조
Hybrid Platform
Comple
& Build
개발자
작업영역

81Page l 81
하이브리드 프레임워크(PhoneGap)
q 디바이스 API 실행환경의 주요 구성요소 인 하이브리드 어플리케이션 프레임워크의 구성은 다음
과 같다.
HTML CSS JS
WebView
PhoneGap
Plug-ins
Android iPhone
Window
Phone
PhoneGap
Native API
PhoneGap API
....
OS APIs
PhoneGapAppMobileOS

82Page l 82
하이브리드 프레임워크
q 폰갭은 Device API 제어를 위해 미리 구현 한 JavaScript 및 SDK 연계를 위한 Native Code 외에
추가기능을 위해 구현 된 Plug-In을 구성하고 있는 폰갭 Custom Plug-In 과 폰갭 Custom
Native Plug-In이 추가된 구조이다.
구분 설명
Mobile Web Application • HTML, CSS, 사용자 정의 JavaScript
PhoneGap JavaScript
Engine
• Device API 제어를 위해JavaScript로 구현되어 제공
• PhoneGap.js
PhoneGap Native Engine
• 플랫폼 별 WebView를 상속받아 Mobile Web Application과 연계를 위한 Native
Code
• PhoneGap.jar
• phoneGap.framework
PhoneGap Custom
Plugin
• 기능 확장을 위해 추가 된 Plug-In을 위한 JavaScript 코드
• 사용자 정의 JavaScript Plug-In 을 포함
• 플랫폼 별로 플러그인을 위한 Native 코드 구성이 상이함에 따라 JavaScript 구성
또한 다를 수 있음
PhoneGap Custom
Native Plugin
• 기능 확장을 위해 추가 된 Plug-In을 위한 플랫폼 Native 코드

83Page l 83
웹뷰 인터페이스
q 폰갭은 플랫폼 별 SDK내에 내장 되어있는 Web View를 활용하여 하이브리드 앱 실행 시
사용자가 구현 한 HTML 파일을 출력하고 JavaScript 소스를 실행한다.
q 하이브리드 어플리케이션의 디바이스 API 호출을 위한 브릿지 역할을 해준다.
• SDK 로 부터 상속받은 웹 뷰를 생성해서
웹 뷰 내에 소스를 로드 한 후 네이티브API를
사용할 수 있도록 연계 
• Interface Module (BrowserControl <-> Device API)
－iPhone
· shouldStartLoadWithRequest
· stringByEvaluationJavaScriptFromString
à [gap://] protocol catch
－Android
· addJavascriptInterface
àClass & JavaScript Binding

84Page l 84
프로젝트 구조
q 디바이스 API 실행환경을 적용한 하이브리드 앱 프로젝트를 생성하면 다음과 같이 네이티브 코드,
웹 리소스, 네이티브 라이브러리, 환경 설정 파일로 구성된다.
웹리소스
웹리소스
Android App
eclipse
Project
iOS App
XCode
Project

85Page l 85
q Android Platform 기반 하이브리드 앱의 메인 클래스 (Activity)는 Phonegap 의 CordovaActivity 클
래스를 상속받아 웹 리소스를 loadUrl 형태로 읽어오는 방식이다.
메인 클래스(Android Platform) 7. 모바일 하이브리드 어플리케이션
package kr.go.egovframework.hyb.cameraapp;
import android.os.Bundle;
import android.webkit.WebSettings;
import org.apache.cordova.*;
public class MainActivity extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.init();
super.appView.getSettings().setAppCacheEnabled(false);
super.appView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
super.appView.clearCache(true);
super.appView.getSettings().setJavaScriptEnabled(true);
super.appView.getSettings().setDomStorageEnabled(true);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
}
}
MainActivity.java

86Page l 86
q iOS Platform 기반 하이브리드 앱의 메인 클래스 (MainViewController)는 Phonegap의
CDVViewController를 상속받아 config.xml의 url을 호출하며 주요 코드는 다음과 같다.
메인 클래스(iOS Platform) 7. 모바일 하이브리드 어플리케이션
#import <Cordova/CDVViewController.h>
#import <Cordova/CDVCommandDelegateImpl.h>
#import <Cordova/CDVCommandQueue.h>
@interface MainViewController : CDVViewController
@end
@interface MainCommandDelegate : CDVCommandDelegateImpl
@end
@interface MainCommandQueue : CDVCommandQueue
@end;
#import "MainViewController.h"
@implementation MainViewController
- (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
}
return self;
}
- (id)init
{
self = [super init];
if (self) {
}
return self;
}
MainViewController.h
MainViewController.m

87Page l 87
q 어플리케이션의 주요 로직을 담고 있는 웹 리소스(HTML5)는 HTML, JavaScript, CSS로 구성되며
플랫폼에 비종속적으로 iOS와 Android 플랫폼 간 재사용이 가능하다.
웹 리소스 (Android/iOS Platform) 7. 모바일 하이브리드 어플리케이션
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=yes" />
<title>Network API Guide</title>

<link rel="stylesheet" href="css/egovframework/mbl/cmm/jquery.mobile-1.4.5.css" />
<link rel="stylesheet" href="css/egovframework/mbl/cmm/EgovMobile-1.4.5.css" />
<script type="text/javascript" src="js/egovframework/mbl/cmm/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/jquery.history.js"></script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/EgovMobile-1.4.5.js"></script>
<script type="text/javascript" src="js/egovframework/mbl/cmm/EgovHybrid.js"></script>
<link rel="stylesheet" href="css/egovframework/mbl/hyb/guide.css" />

<script type="text/javascript" src="js/iscroll/iscroll.js"></script>

<script type="text/javascript" charset="utf-8" src="js/egovframework/mbl/cmm/cordova.js"></script>
<script type="text/javascript">
</script>
</head>

88Page l 88
q 각 디바이스API별 특성에 따라 서버 모듈 연계 기능을 쉽게 이해하여 활용할 수 있도록
디바이스 API 가이드 프로그램을 개발환경을 통해 제공한다.
…
가이드 코드
디바이스 API`
하이브리드 앱 C
…
디바이스API 별
서버 모듈 구현 코드
인터페이스 API
가이드 코드
디바이스 API`
하이브리드 앱 B
가이드 코드
디바이스 API`
하이브리드 앱 A
인터페이스 API
인터페이스 API
가이드 프로그램 연계
전자정부 표준프레임워크 어플리케이션
디바이스API 별 하이브리드 앱
디바이스 API 가이드 프로그램
<App> <Restful Server>
DB
…
인터넷 구간
Spring
MVC
Controller
Service
DAO
Controller
Service
DAO
Controller
Service
DAO
WAS Server
DB Server

89Page l 89
q 디바이스 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 효과를 보조하기 위해 사용할 수 있다.

90Page l 90
q 디바이스 API는 웹 리소스를 통해 디바이스 내의 Native 기능을 호출하기 위하여
디바이스 API 실행환경 내에서 JavaScript 형태로 제공되는 API의 모음이며 각 디바이스 API 별
특징은 다음과 같다.
순번 디바이스 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
개요 8. Device API

91Page l 91
q 디바이스의 움직임에 대하여 X, Y, Z축의 방향을 감지한다.
Device API - Accelrometer
유형 구분 설명
Methods
accelerometer.getCurrentAcceleration
• 현재 가속 센서가 감지한 좌표 값 (x, y, z) 을 구한다.
• navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);
accelerometer.watchAcceleration
• 특정 시간 간격으로 가속 센서가 감지한 좌표 값 (x, y, z) 을 받아온다.
• var watchID = navigator.accelerometer.watchAcceleration(accelerometerSuccess,
accelerometerError,
[accelerometerOptions]);
accelerometer.clearWatch
• watchAccelaeration()을 통해 작동 중인 가속 센서(watchID) 감지를 종료한다.
• navigator.accelerometer.clearWatch(watchID);
Argument
accelerometerSuccess
• 가속 센서의 method 가 성공했을 때 실행하는 함수.
(가속 센서의 정보를 가지는 Acceleration 객체를 매개변수로 가진다)
accelerometerError • 가속 센서의 method 가 실패했을 때 실행하는 함수.
accelerometerOptions
• 감지할 가속 센서의 옵션을 설정한다.
• Options
－ frequency: 특정 시간 간격으로 가속 센서를 감지한다.
(Number) (Default: 10000)
Object Acceleration
• 가속 센서가 감지한 가속도 정보를 가지는 객체 (phoneGap이 생성)
• x: x 축 가속 값을 기록. (값 : 0 ~ 1) (Number)
• y: x 축 가속 값을 기록. (값 : 0 ~ 1) (Number)
• z: z 축 가속 값을 기록. (값 : 0 ~ 1) (Number)
• timestamp: 측정한 milliseconds 단위의 시간 (DOMTimeStamp)
8. Device API

92Page l 92
q 제약사항
유형 구분 지원플랫폼 설명
Methods
accelerometer.getCurrentAcceleratio
n
Android -
iOS
- iPhone은 어떤 주어진 점에서 가속 센서가 감지한 좌표 값을 주지 않는다.
- 특정 시간 간격으로 가속 센서를 감지해야 한다.
- getCurrentAcceleration() 은 watchAcceletometer() 을 통해 마지막으로 감지된 좌표
값을 나타낸다.
accelerometer.watchAcceleration
Android -
iOS
- iPhone에서는 가속 센서 감지 간격이 40 milliseconds에서 1000 milliseconds에서만
유효하게 적용된다.
- 만약 3초 간격으로 watchAcceleration()을 요청하게 되면, phoneGap을 통해 1초 간
격으로 가속 센서의 좌표 값을
받아오지만, phoneGap은 3초 단위로 callback함수를 요청하도록 자체 보정한다.
8. Device API

93Page l 93
q Sample Code
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + 'n' +
'Acceleration Y: ' + acceleration.y + 'n' +
'Acceleration Z: ' + acceleration.z + 'n' +
'Timestamp: ' + acceleration.timestamp + 'n');
}
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<h1>Example</h1>
</body>
</html>
8. Device API

94Page l 94
q 디바이스의 기본 카메라 어플리케이션에 접속하는 기능을 제공한다.
Device API - Camera
Methods camera.getPicture
• 카메라로 사진을 찍고 찍은 사진을 가져오거나, 단말기의 앨범에서 사진을
선택해서 가져온다.
• base64로 인코딩된 이미지를 가져오거나 사진 파일의 경로를 통해 사진을
가져온다.
• navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
Arguments
cameraSuccess • 사진을 찍거나 선택하는데 성공했을 때 실행하는 callback 함수.
cameraError
• 사진을 찍거나 선택하는데 실패했을 때 메시지를 매개변수로 하는 callback 함수.
• Parameters
－ message: 단말기에서 제공하는 오류 메시지를 문자열로 받아오는
매개변수.
cameraOptions
• Optional parameters to customize the camera settings.
• Options
－ quality: 이미지의 품질(해상도)을 백분율로 정의한다. (0~100) (Number)
－ destinationType: 결과 값의 포맷을 정의한다..
navigator.camera.DestinationType (Number)
－ sourceType: 포토 라이브러리, 카메라에서 찍은 사진 등 선택할 소스를
설정한다. nagivator.camera.PictureSourceType (Number)
－ allowEdit: 이미지 선택 전, 이미지 편집 여부. (Boolean)
－ encodingType: 이미지 파일의 인코딩 종류를 정의한다.
navigator.camera.EncodingType (Number)
－ targetWidth: 이미지의 너비(pixel)를 설정한다. 비율은 고정. (Number)
－ targetHeight: 이미지의 높이(pixel)를 설정한다. 비율은 고정. (Number)
－ mediaType: pictureSourceType이 PHOTOLIBRARY 또는 SAVEDPHOTOALBUM
일 때, 미디어의 타입을 설정한다.
nagivator.camera.MediaType (Number)
－ correctOrientation: 이미지를 담는 동안 이미지 회전 여부. (boolean)
－ saveToPhotoAlbum: 이미지를 담은 후, 단말기 저장 여부. (boolean)
8. Device API

95Page l 95
q 제약사항
Device API - Camera
Arguments cameraOptions
Android
- allowEdit옵션을 지원하지 않는다.
- sourceType은 PHOTOLIBRARY, SAVEDPHOTOALBUM 구분 없이
모두 포토 앨범을 나타낸다.
- Camera.EncodingType을 지원하지 않는다.
- correctOrientation을 지원하지 않는다.
- saveToPhotoAlbum을 지원하지 않는다.
iOS
- Quality를 50 이하로 설정해야 특정 단말기에서 나타나는
메모리 오류를 피할 수 있다.
- destinationType.FILE_URI을 사용할 경우,
사진이 어플리케이션의 임시폴더에 저장된다.
- 어플리케이션이 종료될 때, 어플리케이션 임시폴더 내의 사진들은 삭제된다.
사진들의 용량이 대체로 크기 때문에
navigator.fileMgr를 통해 단말기의 용량을 조절해야 한다.
8. Device API

96Page l 96
q Sample Code
Device API - Camera
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
var pictureSource; // picture source
var destinationType; // sets the format of returned value
document.addEventListener("deviceready",onDeviceReady,false);
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function onPhotoDataSuccess(imageData) {
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
}
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
8. Device API

97Page l 97
q Sample Code
Device API - Camera
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
8. Device API

98Page l 98
q 디바이스의 오디오, 이미지, 비디오 캡쳐를 위한 기능을 제공한다.
Device API - Capture
Methods
capture.captureAudio
• 단말기의 녹음 프로그램을 호출하여 녹음을 하고, 녹음을 완료하면 녹음한 데이터(clip)를 가져온다.
• navigator.device.capture.captureAudio( CaptureCB captureSuccess, CaptureErrorCB
captureError, [CaptureAudioOptions options]);
capture.captureImage
• 단말기의 카메라 프로그램을 호출하여 사진을 찍고, 찍은 이미지를 가져온다.
• navigator.device.capture.captureImage( CaptureCB captureSuccess, CaptureErrorCB
captureError, [CaptureImageOptions options]);
capture.captureVideo
• 단말기의 카메라 프로그램을 호출하여 동영상을 촬영하고 촬영한 비디오를 가져온다.
• navigator.device.capture.captureVideo( CaptureCB captureSuccess, CaptureErrorCB
captureError, [CaptureVideoOptions options]);
MediaFile.getFormatData
• 미디어 파일의 포맷 정보를 가져온다.
• mediaFile.getFormatData( MediaFileDataSuccessCB successCallback,
[MediaFileDataErrorCB errorCallback]);
Objects CaptureAudioOptions
• 녹음을 지원하는 captureAudio() 메소드에 대한 옵션 객체.
• Properties
－ limit: 한번에 녹음할 수 있는 횟수를 정의한다. (기본 값 : 1, 값 : 1 이상)
－ duration: 녹음할 경우, 최대 녹음시간을 정의한다.
－ mode: capture.supportedAudioModes에서 지원하는 오디오 모드 중 하나를 지정한다.
8. Device API

99Page l 99
Objects
CaptureImageOptions
• 이미지 촬영을 지원하는 captureImage() 메소드에 대한 옵션 객체.
• Properties
－ limit: 한번에 사진 촬영할 수 있는 횟수를 정의한다.
(기본 값 : 1, 값 : 1 이상)
－ mode: capture.supportedImageModes 에서 지원하는 오디오 모드중
하나를 지정한다.
CaptureVideoOptions
• 동영상 촬영을 지원하는 captureVideo() 메소드에 대한 옵션 객체.
• Properties
－ limit: 한번에 촬영할 수 있는 횟수를 정의한다. (기본 값 : 1, 값 : 1 이상)
－ duration: 촬영할 경우, 최대 촬영시간을 정의한다.
－ mode: capture.supportedVideoModes 에서 지원하는 비디오 모드중
하나를 지정한다.
CaptureError
• 미디어 촬영 중에 발생할 수 있는 오류코드를 기록하는 객체.
• Properties
－ code: 아래 정의된 상수 중 하나를 값으로 사용한다..
• Constants
－ CaptureError.CAPTURE_INTERNAL_ERR: 카메라가 사진을 찍거나 마이크로폰이 녹음을 하는 데
실패했을 경우의 오류.
－ CaptureError.CAPTURE_APPLICATION_BUSY: 카메라 또는 녹음 프로그램을 다른 서비스로 인
해 호출할 수 없는 경우의 오류.
－ CaptureError.CAPTURE_INVALID_ARGUMENT: 옵션의 설정이 올바르지 않을 경우 phoneGap
API에서 발생하는 오류.
－ CaptureError.CAPTURE_NO_MEDIA_FILES: 사용자가 촬영을 중단하고 임의로 빠져 나왔을 때
발생하는 오류.
－ CaptureError.CAPTURE_NOT_SUPPORTED: 요청한 미디어 촬영이 지원하지 않을 때 발생하는
오류.
8. Device API

100Page l 100
Objects
CaptureCB
• 미디어 촬영에 성공했을 때 실행하는 함수.
• function captureSuccess( MediaFile[] mediaFiles ) { ... };
CaptureErrorCB
• 미디어 촬영에 실패했을 때 실행하는 함수.
• function captureError( CaptureError error ) { ... };
ConfigurationData
• 단말기에서 지원하는 캡처 속성들을 기록할 수 있는 객체.
• Properties
－ type: 미디어 유형을 ASCII 코드로 인코딩한 소문자 문자열. (DOMString)
－ height: 이미지나 비디오의 높이(pixel)를 정의하며, 오디오의 경우 0으로 처리한다. (Number)
－ width: 이미지나 비디오의 너비(pixel)를 정의하며, 오디오의 경우 0으로 처리한다. (Number)
MediaFile
• 캡처한 파일의 속성들을 기록할 수 있는 객체.
• Properties
－ name: 경로를 제외한 파일명. (DOMString)
－ fullPath: 파일명을 제외한 전체경로. (DOMString)
－ type: 미디어 파일의 mime type. (DOMString)
－ lastModifiedDate: 파일의 최종수정날짜. (Date)
－ size: byte 단위를 가지는 파일의 크기. (Number)
• Methods
－ MediaFile.getFormatData: 미디어 파일의 포맷을 리턴한다.
8. Device API

101Page l 101
Objects MediaFileData
• 미디어 파일에 대한 포맷 정보를 나타내는 객체.
• Properties
－ codecs: 오디오 및 비디오의 포맷. (DOMString)
－ bitrate: 오디오나 비디오의 전송 속도를 나타낸다.
이미지의 경우 0. (Number)
－ height: 이미지나 비디오의 높이를 나타낸다. 오디오의 경우 0. (Number)
－ width: 이미지나 비디오의 너비를 나타낸다. 오디오의 경우 0. (Number)
－ duration: 오디오와 비디오의 재생시간을 나타낸다.
이미지의 경우 0. (Number)
properties
supportedAudioModes • 단말기에서 지원하는 오디오 녹음 포맷. (ConfigurationData[])
supportedImageModes • 단말기에서 지원하는 이미지 크기와 포맷. (ConfigurationData[])
supportedVideoModes • 단말기에서 지원하는 비디오 포맷. (ConfigurationData[])
Scope
• capture는 navigator.device 객체에 속하며, 전역에서 쓸 수 있다.
• var capture = navigator.device.capture;
8. Device API

102Page l 102
q 제약사항
Methods
capture.captureAudio
Android -
iOS
- iOS는 단순한 유저 인터페이스를 가지기 때문에 기본적으로 오디오 녹음을 지원하지
않는다.
MediaFile.getFormatData
Android
- 미디어 파일의 포맷 정보를 수집하는 API에 대해 제한이 있어, 일부 MediaFileData
속성을 지원하지 않는다.
- MediaFileData : codecs, bitrate를 지원하지 않는다.
iOS
- 미디어 파일의 포맷 정보를 수집하는 API에 대해 제한이 있어, 일부 MediaFileData
속성을 지원하지 않는다.
- MediaFileData : codecs 을 지원하지 않는다.
- MediaFileData : bitrate 는 iOS4 에서만 지원한다.
Objects CaptureAudioOptions
Android
- duration 파라미터를 지원하지 않는다.
- 프로그램적으로 녹음 시간을 제한할 수 없다.
- mode 파라미터를 지원하지 않는다.
- 오디오 녹음 포맷을 프로그램적으로 정의할 수 없다.
- 오디오 녹음의 포맷은 audio/amr 만을 사용할 수 있다.
iOS
- limit 파라미터를 지원하지 않는다.
- 한 번에 하나의 녹음만 실행할 수 있다.
- 오디오 녹음 포맷을 프로그램적으로 정의할 수 없다.
- 오디오 녹음의 포맷은 audio/wav 만을 사용할 수 있다.
8. Device API

103Page l 103
q 제약사항
Objects
CaptureImageOptions
Android
- 이미지의 크기와 포맷을 프로그램적으로 정의할 수 없다.
- 하지만 단말기 사용자가 이미지의 크기는 지정할 수 있다.
- 이미지는 JPEG (image/jpeg) 로 저장된다.
iOS
- limit 파라미터를 지원하지 않는다.
- 한 번에 하나의 이미지만을 캡처할 수 있다
- 이미지의 크기와 포맷을 프로그램적으로 정의할 수 없다.
- 이미지는 JPEG (image/jpeg) 로 저장된다.
CaptureVideoOptions
Android
- 비디오 촬영 크기를 프로그램적으로 제한할 수 없다.
- 비디오의 크기와 파라미터를 프로그램적으로 정의할 수 없다.
- 비디오는 3GPP (videp/3gpp) 로 기본적으로 촬영된다.
iOS
- limit 파라미터는 지원하지 않는다.
- 한 번에 하나의 비디오 촬영만 할 수 있다.
- 비디오 촬영 크기를 프로그램적으로 제한할 수 없다.
- 비디오의 크기와 파라미터를 프로그램적으로 정의할 수 없다.
- 비디오는 MOV (video/quicktime) 로 기본적으로 촬영된다.
8. Device API

104Page l 104
q 제약사항
Objects MediaFileData
Android
• MediaFileData는 다음과 같이 지원한다.
- codecs: 지원하지 않음. 항상 null 이다.
- bitrate: 지원하지 않음. 항상 0 이다.
- height: 지원. (단, image와 video 파일인 경우).
- width: 지원. (단, image와 video 파일인 경우).
- duration: 지원. (단, audio와 video 파일인 경우).
iOS
• MediaFileData는 다음과 같이 지원한다.
- codecs: 지원하지 않음. 항상 null 이다.
- bitrate: iOS4 단말기에서 오디오인 경우에만 지원.
(이미지와 비디오인 경우, 항상 0.)
- height: 지원. (단, image와 video 파일인 경우).
- width: 지원. (단, image와 video 파일인 경우).
- duration: 지원. (단, audio와 video 파일인 경우).
8. Device API

105Page l 105
q Sample Code
<!DOCTYPE html>
<html>
<head>
<title>Capture Audio</title>
<script type="text/javascript" charset="utf-8" src="json2.js"></script>
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
function captureAudio() {
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2});
}
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path, "http://my.domain.com/upload.php", function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
}, function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
}, { fileName: name });
}
</script> </head>
<body> <button onclick="captureAudio();">Capture Audio</button> <br> </body>
</html>
8. Device API

106Page l 106
q 디바이스의 방향(방위각)을 구하는 기능을 제공한다.
Device API - Compass
Methods
compass.getCurrentHeading
• 단말기의 방위 센서가 감지한 현재 방향을 가져온다. ( 0 ~ 359.9)
• navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);
compass.watchHeading
• 특정 시간 간격으로 방위 센서가 감지한 빙향 정보를 가져온다.
• var watchID = navigator.compass.watchHeading(compassSuccess, compassError,
[compassOptions]);
compass.clearWatch
• watchHeading()을 통해 작동 중인 방위 센서(watchID)를 중지한다.
• navigator.compass.clearWatch(watchID);
• watchID: The ID returned by compass.watchHeading.
compassSuccess
• 방위 센서의 메소드가 성공했을 때 실행하는 함수.
• Parameters
－ heading: 방위 센서가 감지한 방위 정보. (compassHeading)
compassError • 방위 센서의 메소드가 실패했을 때 실행하는 함수.
8. Device API

107Page l 107
Arguments
compassError • 방위 센서의 메소드가 실패했을 때의 파라미터.
compassOptions
• 방위 센서의 옵션을 정의한다.
• Options
－ frequency: 특정 시간 간격으로 방위 센서를 감지한다.
(Number) (기본: 100)
－ filter: watchHeadingFilter() 메소드에 사용하는 속성으로, 특정 filter 값 이상일 때만 감지한다.
(Number)
compassHeading
• 방위 센서에서 전달받은 방향 정보를 나타낸다.
• Properties
－ magneticHeading: 자기 방위 값을 나타낸다. (0 ~ 359.99) (Number)
－ trueHeading: 진북을 기준으로 진방위 값을 나타낸다. (0 ~ 359.99)
음수는 진방위 값을 나타낼 수 없음을 의미한다. (Number)
－ headingAccuracy: 방위 각도에 대한 편차 값을 나타낸다. (Number)
－ timestamp: 방위를 감지한 시각을 milliseconds 단위로 나타낸다.
8. Device API

108Page l 108
q 제약사항
Argumetns
compassOptions
Android - filter 를 지원하지 않는다.
iOS -
compassHeading
Android
- trueHeading 을 지원하지 않는다. magneticHeading과 동일.
- magneticHeading과 magneticHeading 이 동일하기 때문에 headingAccuracy 는 항
상 0 이다.
iOS
- trueHeading은 navigator.geolocation.watchLocation()이
동작하고 있을 때만 감지된다.
- iOS4 이상의 단말기에서는 단말기가 회전했을 때 trueHeading 값을 감지한다.
8. Device API

109Page l 109
q Sample Code
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
navigator.compass.getCurrentHeading(onSuccess, onError);
}
function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
}
function onError(compassError) {
alert('Compass Error: ' + compassError.code);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentHeading</p>
</body>
</html>
8. Device API

110Page l 110
Device API - Connection
Properties connection.type • 단말기에서 지원하는 통신방법에 대한 정보를 나타낸다.
Constants
• Connection.UNKNOWN : 알 수 없는 통신 방식.
• Connection.ETHERNET : 이더넷 통신 방식.
• Connection.WIFI : Wi-Fi 통신 방식.
• Connection.CELL_2G : 2G 통신 방식.
• Connection.NONE : 통신을 지원하지 않음.
8. Device API

111Page l 111
q Sample Code
Device API - Connection
<!DOCTYPE html>
<html>
<head>
<title>navigator.network.connection.type Example</title>
checkConnection();
}
function checkConnection() {
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.NONE] = 'No network connection';
alert('Connection type: ' + states[networkState]);
}
</script>
</head>
<body>
<p>A dialog box will report the network state.</p>
</body>
</html>
8. Device API

01.모바일 프레임워크 이론

01.모바일 프레임워크 이론

Recommended

Recommended

More Related Content

Similar to 01.모바일 프레임워크 이론

Similar to 01.모바일 프레임워크 이론 (20)

More from Hankyo

More from Hankyo (20)

01.모바일 프레임워크 이론