11월 29일
1.모바일 표준프레임워크 개요
전자정부 모바일 표준 프레임워크 실행환경의 사용자 경험(UX)지원 기능은 스마트 디바이스에서의 사용자 터치 기반 화면 처리 기능, 개발도구 및 모바일 UX컴포넌트를 제공한다.
1-1.모바일 애플리케이션의 종류
(1)모바일 웹:일반 웹기술로 개발 할 수 있으며, 모바일 브라우저에 의해 실행된다.
(2)모바일 웹앱: 겉으로 보기에는 앱처럼 보이는데 모바일웹의 한종류로 웹의 기술을 사용하여 앱 형태를 Wrapping한 기술이다.
(3)하이브리드앱:일반 웹기술+네이티브 앱, 전자정부 프레임 워크에서는 하이브리드앱인 PhoneGap(=Cordova)기반으로 제공한다.
(4)네이티브 앱:플레이스토어나 앱스토어에서 다운 받았을때 앱들중에 반응이 빠른것들로 안드로이드 같은경우 자바, 아이폰 같은경우는 Object C, Swift 등 네이티브 언어를 쓰기 때문에 굉장히 빠른 편이다.
1-2.JQuery mobile
JQuery mobile은 화면처리를 담당하는 API 이다.
즉, 모바일 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크 이다.
1-3.하이브리드앱
JQuery mobile 또는 Sencha Touch를 이용하여 모바일 웹앱을 만들수 있다. 이건 웹기술 임.
CrossPlatform App Framework 은 PhoneGap(=Cordova)기반으로 제공하고 있으며, 이기반으로 컴파일을 시켜서 빌드하고 앱스토어 반영하면 하이브리드앱이 배포가 될수 있다.
여기서 제일 중요한 개념이 "WebView" 이다."WebView"는 일종의 웹브라우져 인데, 앱안에 포함된 웹브라우져이다. "WebView" 위에 html+css+javascript를 얹져 놓는다. JavaScriptFramework와 Divice API의 도움을 받아 인터페이스를 구현 하게 된다.
이걸 빌드를 시켜서 하이브리드앱을 만들수 있다.
2.HTML5 변경사항
2-1.HTML5 JavaScript API
웹브라우져단에서 제공해주는 JavaScript 기능
(1)Web Storage
(2)Web SQL Database
(3)IndexedDB
(4)Application Cache
통신이 끊겼을때 바로 엑스박스가 뜨는게 아니라 Cache에 담아서 오프라인 상태에서도 서비스를 이어서 할수 있게 하는 기능
(5)Quota API
(6)Web Worker:웹에서 돌아가는 쓰레드
(7)WebSoket
기존의 웹의 한계는 단방향임. 클라이언트가 요청을 해야 서버가 거기에 대한 응답을 해줬던거고 그 반대는 불가능 했음.그러나 WebSoket은 서버에서 필요한 메세지를 전달해 줄수 있음.
(8)Notifications:수신된 메세지를 한쪽 귀퉁이에 보여주는 기능
(9)Native Drag & Drop
(10)Desktop Drag-In/Out(File API)
(11)FileSystemAPIs
(12)Geolocation: 위치정보
(13)Divice Orientation
3.모바일웹
3-1.모바일 웹 구성
모바일 전자정부 프레임워크의 실행환경은 UX레이어를 통해 이루어지며 화면처리 레이어 및 업무처리 레이어와의 상호 작용을 통하여 이루어진다.
3-2.페이지 구성
(1)head 부분 설정
전자정부 모바일 표준프레임워크 실행환경을 구성하기 위해서는 파일의 head 영역에 관련 라이브러리를 적용한다.
(2)body 부분 설정
JQuery mobile로 기본적으로 구성이 되어 있고, body영역은 data-role 속성에 적용된 값에 따라 Page,Header,Content,Footer 영역으로 구분된다.
data-role은 JQuery mobile에서만 쓰는 속성.
page는 보여주는 화면하나하나가 page이다.
*전자정브프레임워크 모바일 가이드
http://m.egovframe.go.kr/mguide2.0/
3-3.페이지 이동
모바일 페이지 이동은 기본적으로 Ajax를 이용하여 처리 된다. 이는 모바일에 최적화된 화면 전환 효과를 주기 위함으로 옵션 설정을 통해 변경 가능하다.
(1)페이지 내부이동
하나의 HTML파일 안에 여러 page가 선언 되어 있는 경우레 사용 할 수 있는 방법으로 모바일 page구성의 기본 방식이다. 페이지 내부이동은 Ajax 통신을 사용하여 page로 선언된 div 태그를 이용하여 사용이 가능하다
아래 예시를 보자!
<a href="#view" data-role="button">글쓰기</a>#view로 지정한 부분이 아래부분의 id="view" 를 찾아 page를 이동하게 된다. 이러한 방식이 페이지 내부이동 방식이다.
(2)페이지 외부이동
-페이지 외부 이동은 Ajax 통신을 이용하며 Ajax로 호출한 html의 data-role="page" 영역만 읽어 들여서 호출한 html페이지의 DOM요소에 추가 해 준다.
-Ajax로 호출된 html의 page 영역만 가져 오기 때문에 호출된 페이지에서 사용하는 JavsScript,css등은 호출을 한 html내에 존재 해야 한다.
<a href="create.html" data-role="button">글쓰기</a>Ajax통신을 통해서 이동하는 "create.html"의 DOM내용을 뽑아와서 파싱해서 원래있던 화면에 덮어준다.
이게 html 요소만 뽑아가기 때문에 필요하다면 JavsScript,css등 불러오는 페이지에 구현해 놓아야 한다.
3-4.API
(1)Pageinit
모바일 애플리케이션이 시작될때 초기화 작업을 수행 함.
(2)지원 터치 이벤트
