슬라이드 1

Size: px

Start display at page:

Download "슬라이드 1"

호정 설
6 years ago
Views:

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

2 1. 개요 2. 배경 3. 실행환경특징 4. 실행환경구성 5. 실행환경구조 6. UX Component 7. 가이드프로그램 (UX Code Generator) 8. 참고사이트 - 2 -

3 1. 개요 전자정부모바일표준프레임워크실행환경의사용자경험 (UX) 지원기능은스마트기반모바일환경에서최적화된화면처리기능, 개발도구및모바일특화컴포넌트제공을통해모바일웹서비스개발에대한생선성향상, 모바일전자정부시스템간의컴포넌트재사용성향상, 연계표준을통한상호운용성향상, 응용소프트웨어의표준화효과를제공한다

모바일웹 모바일단말에내장된브라우저를통해서비스가제공 HTML4, HTML5,

4 2. 배경 전자정부모바일서비스의접근성제고를위하여모바일웹방식에의한서비스제공을권장하고있 으며, 모바일웹방식은모바일브라우저를통하여서비스가제공된다. 전자정부서비스호환성준수지침 모바일웹프레임워크 행정안전부고시 제 호 개정이유모바일전자정부서비스제공시접근성제고등을위하여공공기관이준수해야할사항을규정 모바일웹 모바일단말에내장된브라우저를통해서비스가제공 HTML4, HTML5, CSS 등표준기술활용 주요개정내용국민들이다양한모바일기기를사용할수있도록 ' 모바일앱 ' 방식보다 ' 모바일웹 ' 방식을권고 모바일웹방식개발을위한기술표준지침최소 3 종이상의웹브라우저에서동등한서비스제공국제표준화기구에서제공하는표준사용의무화 모바일앱 단말에종속된구축필요단말및 OS 별중복개발필요 ( 전용 SDK 활용 ) 전자정부모바일서비스제공원칙 다양한스마트폰사용자들이모두혜택을받을수있도록모바일웹방식의개발을권장 - 4 -

3. 실행환경특징 Cross-platform & Cross-device 를통한 Any Device Any platform

스마트폰의터치이벤트기반에가장최적화된전자정부모바일표준사용자경험 (UX/UI) 을제공한다.

유연하고쉽게, 모바일에특화된화면의그래픽레이아웃을설계 적용하고, 다양한테마디자인이가능하다.

5 3. 실행환경특징 Cross-platform & Cross-device 를통한 Any Device Any platform Any OS 서비스를지향 스마트기반의다양한모바일디바이스플랫폼에통합된사용자인터페이스를제공한다. 스마트폰의터치이벤트기반에가장최적화된전자정부모바일표준사용자경험 (UX/UI) 을제공한다. HTML5, CSS3, JavaScript 의경량화된코드로조합되어있는구조는터치이벤트환경에맞는화면구성을제공한다. 유연하고쉽게, 모바일에특화된화면의그래픽레이아웃을설계 적용하고, 다양한테마디자인이가능하다. 복잡한 cross-platform & cross-device 환경에서터치이벤트에최적화된그래픽레이아웃을제공한다. 개발편의성을고려하여쉽고편하게개발을진행하고적용할수있도록개발자표준코드및예제가적용된개발자가이드기능을제공한다

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

7 4. 실행환경구조 - 아키텍쳐구조 (2/2) UX 레이어는 UX/UI Controller Component, HTML5, CSS3 JavaScript Module App Framework 의 총 4 개의서비스를제공함 실행환경 화면처리레이어 UX 레이어 업무처리레이어 데이터처리레이어 연계통합레이어 Ajax Support Internationalization UX/UI Controller Component Biz. Process Management Data TBD Access DataSource Message Service MVC UI Adaptor Security HTML5 CSS3 JavaScript Module App Framework Exception Handling ORM TBD Transaction Naming Service Web Service 공통기반레이어 AOP Cache Compress/Decompress Encryption/Decryption Excel File Handling File Upload/Download FTP Hot-Deploy ID Generation IoC Container Logging Mail Marshalling/Unmarshalling Object Pooling Property Resource Scheduling String Util XML Manipulation 실행환경서비스그룹서비스 - 7 -

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

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

5. 실행환경구조 페이지구조 (1/5) 전자정부모바일표준프레임워크실행환경은모바일환경에최적화된웹사이트를개발할수있도 록 HTML5 표준을준수하고있으며라이브러리를적용한기본페이지구조는아래와같다. 전자정부모바일표준프레임워크실행환경을구성하기위해서는파일의 <head> 영역에라이브러리 를적용한다. Header 영역 <!

10 5. 실행환경구조 페이지구조 (1/5) 전자정부모바일표준프레임워크실행환경은모바일환경에최적화된웹사이트를개발할수있도 록 HTML5 표준을준수하고있으며라이브러리를적용한기본페이지구조는아래와같다. 전자정부모바일표준프레임워크실행환경을구성하기위해서는파일의 <head> 영역에라이브러리 를적용한다. Header 영역 <!DOCTYPE html> <html> <head> <title>egovframe Mobile</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no"/> <link rel="stylesheet" href="/css/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.css" /> <link rel="stylesheet" href="/css/egovframework/mbl/cmm/egovmobile.css" /> <script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery min.js"></script> <script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery.mobile-1.0b3.min.js"></script> <script type="text/javascript" src="/js/egovframework/mbl/cmm/egovmobile.js"></script> </head> <body>... </body> </html>

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

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

12 5. 실행환경구조 페이지구조 (3/5) 전자정부모바일표준프레임워크실행환경의사용자경험 (UX) 지원기능을효과적으로적용하기위 해 <body> 영역의구조를다음과같이구분한다. 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>

13 5. 실행환경구조 페이지구조 (4/5) Theme Theme 기능을이용하여하위레벨의색상을변경할수있다. 테마변경최상위 Tag는 <data-role="page"> 이며변경시 page 하위의 Header, Footer, Panel, UX Component의색상이변한다. 테마를적용할최상위 div Tag에 data-theme="[a~g]" 를추가한다. 테마를적용할경우하위컴포넌트들의색상이일괄변형된다

14 5. 실행환경구조 페이지구조 (5/5) Theme 상위컴포넌트와독립적으로하위컴포넌트에테마를지정할수있으며해당컴포넌트에 datatheme= [a~g] 속성을추가하여원하는테마를개별적으로적용할수있다

5. 실행환경구조 페이지이동 (1/2) 모바일페이지이동은기본적으로 Ajax 를이용하여처리된다. 이는모바일에최적화된화면전환효과를주기위함으로옵션설정을통해변경가능하다. 페이지내부이동 하나의 HTML 파일안에여러 page 가선언되어있는경우에사용할수있는방법으로모바일 page 구성의기본방식이다.

) 페이지내부이동은 Ajax 방식을기본으로하기때문에연속적으로여러번사용하면 DOM 객체를제대로못불러올경우가있으므로외부페이지이동으로권장한다. <!

15 5. 실행환경구조 페이지이동 (1/2) 모바일페이지이동은기본적으로 Ajax 를이용하여처리된다. 이는모바일에최적화된화면전환효과를주기위함으로옵션설정을통해변경가능하다. 페이지내부이동 하나의 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 > <a href= #view > <div id= view data-role= page >

- Ajax 통신을사용하고싶지않은경우 Internal / External UX Component를참조하여변경가능하다. main.jsp <div id="main" data-role="page"> <a href="create.

16 5. 실행환경구조 페이지이동 (2/2) 페이지외부이동 페이지외부이동은 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> main.jsp 참조 <script> <link rel="stylesheet > <div id="main" data-role="page"> create.jsp <link rel="stylesheet > <div id="create data-role="page"> 참조 X create.jsp <div id="create" data-role="page"> <p> 글쓰기페이지 </p> </div> <a href= create.jsp > 페이지외부링크

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

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

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

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

21 5. 실행환경구조 API (4/5) 이벤트 Visual Mouse event 페이지이벤트 vmouseover 터치이벤트또는 mouseover가발생할때나타나는이벤트이다. vmousedown 터치이벤트또는 mousedown이발생할때나타나는이벤트이다. vmousemove 터치이벤트또는 mousemove가발생할때나타나는이벤트이다. vmouseup 터치이벤트또는 mouseup이발생할때나타나는이벤트이다. vclick 터치이벤트또는 click이발생할때나타나는이벤트이다. vmousecancel 터치이벤트또는 mousecancel가발생할때나타나는이벤트이다

22 5. 실행환경구조 API (5/5) 메소드 & 유틸리티 전자정부모바일표준프레임워크는 $.mobile 객체에대한메소드와속성들을 (properties) 제공한다. 주요메소드 : 메소드 $.mobile.changepage (method) $.mobile.loadpage (method) 프로그램코드상에서페이지를이동할수있도록지원하는메소드이다. 주로화면전환, 페이지로딩등의기능이가능한환경에서링크클릭이나폼전송을할때내부적으로사용된다. 외부페이지를로드하고,DOM 에추가한다. 이메소드는첫번째인자로 URL 이올때 changepage() 함수를통해내부적으로호출된다. 이함수는현재활성화된페이지에는영향을주지않고, 백그라운드에서페이지를로드할때사용된다. $.mobile.showpageloadingmsg () 페이지로딩메시지를보여준다. $.mobile.hidepageloadingmsg () 페이지로딩메시지를숨긴다

23 6. UX Component UX Component 개요 NO. UX Component 1 Button 명령수행, 옵션선택, 다른대화상자열기등에사용하는컴포넌트제공 2 Panel Header/Footer 와함께페이지를구성하는요소 3 Internal / External Link 표준링크기능을제공하며기본적으로 Ajax 를사용한링크방식제공 4 Label / Text 글꼴, 색상, 배치를지정할수있는가이드제공 5 Tabs Header와 Footer 에사용되며탭버튼으로문서간이동기능제공 6 Form HTML Form 요소를모바일환경에최적화하여제공 7 Menu Dialog, Grid, List, Collapsible 컴포넌트를사용하여메뉴구성기능제공 8 Progress Dialog / Bar 페이지전환간진행상태를확인할수있는 Progress Dialog/Bar 제공 9 Dialog 사용자와상호작용할수있는 Dialog 기능을제공 10 Grid View Grid 형태로콘텐츠를배치할수있는컴포넌트제공 11 Table / List View Table 형태로콘텐츠를배치할수있는컴포넌트제공 12 Date / Time Picker 날짜와시간을선택할수있는 Picker 제공 13 Check / Radio Check / Radio 형태로항목을선택할수있는기능을제공 14 Icon 모바일어플리케이션에가장많이사용되는아이콘을제공 15 Selector / Switch Selector / Switch 형태로항목을선택할수있는기능을제공

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

기본코드 <div class="ui-body-c center"><h4>panel</h4></div> 컴포넌트제공기능그래픽레이아웃

25 6. UX Component - Panel Panel은 Header/Footer bar와함께페이지를구성하는요소이다. Panel의기본코드는 <div class="ui-body-[a~g]"> 를사용하며 a~g는 Panel 의색상변경을지원한다. 기본코드 <div class="ui-body-c center"><h4>panel</h4></div> 컴포넌트제공기능그래픽레이아웃 Header/footer 와함께페이지를구성하는요소 Panel 무늬 격자형태무늬제공 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

6. UX Component Internal / External Link 전자정부모바일표준프레임워크는 HTML의모든표준링크를지원하며기본적으로 Ajax 방식을이용하여페이지를전환한다. HTML의 Anchor 태그를이용하여링크기능을사용할수있다. 기본코드 <a href="#two"> 페이지내부링크 </a> <a href="/guide/guide.

26 6. UX Component Internal / External Link 전자정부모바일표준프레임워크는 HTML의모든표준링크를지원하며기본적으로 Ajax 방식을이용하여페이지를전환한다. HTML의 Anchor 태그를이용하여링크기능을사용할수있다. 기본코드 <a href="#two"> 페이지내부링크 </a> <a href="/guide/guide.do"> 도메인내부링크 </a> <a href=" 외부링크 </a> 컴포넌트제공기능그래픽레이아웃 Internal/ External Link 링크 (6 종 ) 표준링크기능을제공하며기본적으로 Ajax 를사용한링크방식제공 Page link internal, Domain link internal, Link external, links, Phone links, Error page

27 6. UX Component Label / Text Label / Text 는 HTML 의 <h1>, <p> Tag 를사용하며 CSS 정의하여색상, 크기, 폰트를변경하여사용할수있다. 기본코드 <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> 컴포넌트제공기능그래픽레이아웃 Label / Text 글꼴, 색상, 배치를지정할수있는가이드제공

28 6. UX Component - Tabs 탭은버튼이수평으로나열된형태로모바일환경에최적화된내비게이션 UI를제공한다. data-role="navbar" 를이용하여내비게이션기능을사용하며 ui-btn-active 클래스값으로활성화된탭을나타낼수있다. 기본코드 <div data-role="navbar"> <ul><li><a href="#" class="ui-btn-active">one</a></li> <li><a href="#">two</a></li></ul> </div> 컴포넌트제공기능그래픽레이아웃 Header 와 footer 에사용되며탭버튼으로문서간이동기능제공 Tabs 형태 (2 종 ) 배치 (6 종 ) round tab(radius: 40x), normal tab(radius: 0px) 1, 1/2, 1/3, 1/4, 1/5, ½ 다중행 tab 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

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

30 6. UX Component - Menu 모바일 Page 의메뉴기능은 Dialog, Grid, List, Collapsible 의기능을활용하여구현할수있다. 링크에 data-rel="dialog" 및 data-transition="slide, slidedown, slideup, fade, flip" 속성을추가 하여다이얼로그의효과적인표출효과를사용할수있다. 컴포넌트제공기능그래픽레이아웃 Dialog, Grid, List, Collapsible 컴포넌트를사용하여메뉴구성기능제공 효과 (6 종 ) slide, slideup, slidedown, pop, fade, flip Menu 형태 (4 종 ) Dialog, Grid, List, Collapsible 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

31 6. UX Component Progress Dialog / Bar Progress Dialog 와 Bar 는모바일 Page 전환시진행상태를표시해주는역할을한다. Progress Dialog 는 Ajax 통신을이용할경우 Default 로나타난다. Progress Bar 는 Ajax 통신을이용할경우나타나고설정을통해 Default 로사용가능하다. $(document).bind("mobileinit", function(){ }); $.mobile.progressbar = true; </script> 컴포넌트제공기능그래픽레이아웃 페이지전환간진행상태를확인할수있는 Progress Dialog/Bar 제공 Progress Dialog / Bar 형태 (2 종 ) Processing Dialog, Processing Bar 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

<input id="overlay_dialog" type="button" value="overlay" /> 컴포넌트제공기능그래픽레이아웃 사용자와상호작용할수있는

32 6. UX Component Dialog 다이얼로그를새창으로전환할경우팝업효과등으로나타낼수있으며 Anchor Tag에 datarel="dialog" 를추가하면기본다이얼로그효과가나타난다. 기타 Dialog는자바스크립트를이용하여 Alert, Confirm 등의창을띄운다. <input id="overlay_dialog" type="button" value="overlay" /> 컴포넌트제공기능그래픽레이아웃 사용자와상호작용할수있는 Dialog 기능을제공 Dialog 형태 (6 종 ) Dialog, Action Sheet, Overlay, Alert, Prompt, Confirm 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

6. UX Component Grid View Grid View는 UX Component를같은넓이, 같은행으로나타낼때사용되며 Grid View 안에컴포넌트를넣어나란하게배열할수있다. Grid 속성으로칼럼 (column) 수를지정하고 Block 속성으로내부의셀을지정한다.

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

기본코드 <ul data-role="listview" data-inset="true"> </ul> <li>list Item 1</li><li>List Item 2</li> 컴포넌트제공기능그래픽레이아웃 Table

34 6. UX Component Table / List View 전자정부모바일표준프레임워크를통해생성된리스트는모바일환경에최적화된형태로제공된다. 리스트 Tag(ol, ul) 에 data-role= listview 속성을추가하면전자정부모바일표준프레임워크에서제공하는리스트를생성할수있다. 기본코드 <ul data-role="listview" data-inset="true"> </ul> <li>list Item 1</li><li>List Item 2</li> 컴포넌트제공기능그래픽레이아웃 Table 형태로콘텐츠를배치할수있는컴포넌트제공 Table / List View 형태 (2 종 ) 기능 (8 종 ) Read-only list, Link list Nested List, Numbered List, Split Button, List Divider, Count Bubble, Thumbnail, List icon, Content Formatting, Search Filter Bar 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

6. UX Component Date / Time Picker Date picker는팝업형태로나타나며날짜를선택할수있도록기능을제공한다.

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode":

35 6. UX Component Date / Time Picker Date picker는팝업형태로나타나며날짜를선택할수있도록기능을제공한다. <input name= datepicker" id= datepicker" type="date" data-role="datebox" /> <input name= datepicker" id= datepicker" type="date" data-role="datebox" data-options='{"mode": "calbox" }' > Time picker는팝업형태로나타나며시간을선택할수있도록한다. <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "timebox"}'> 컴포넌트제공기능그래픽레이아웃 날짜와시간을선택할수있는 Picker 제공 Date / Time Picker 형태 (3 종 ) Android Date Picker, Popup Calendar, Android Time Picker

36 6. UX Component Check / Radio 체크박스는하나이상의항목을선택할수있는기능을제공한다 체크박스를세로로정렬하기위해서는 <fieldset data-role="controlgroup"> 으로체크박스를감 싸주어야한다. 기본코드 <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 배치 (2 종 ) Check/Radio 형태로항목을선택할수있는기능을제공 vertical group, horizontal group 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

37 6. UX Component Check / Radio 라디오버튼은여러개의항목에서하나를선택할수있는기능을제공한다. 라디오버튼을사용할경우 <input type="radio"> 의 name 속성이동일해야하며세로로정렬하기 위해서는 <fieldset data-role="controlgroup"> 으로라디오버튼을감싸주어야한다. 기본코드 <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 배치 (2 종 ) Check/Radio 형태로항목을선택할수있는기능을제공 vertical group, horizontal group 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

<a href="#" data-role="button" data-icon="home">home</a> 컴포넌트제공기능그래픽레이아웃 모바일어플리케이션에가장많이사용되는아이콘을제공 Icon 형태 (20 종 )

38 6. UX Component Icon 전자정부모바일표준프레임워크실행환경은모바일어플리케이션에가장많이사용되는아이콘을선별하여제공한다. 기본으로제공되는아이콘은흰색의아이콘모양과반투명의검은원형배경으로이루어져있어어떤배경색과도대비를이룰수있다. data-icon 속성값으로생성할아이콘이름을지정하여아이콘을추가한다. <a href="#" data-role="button" data-icon="home">home</a> 컴포넌트제공기능그래픽레이아웃 모바일어플리케이션에가장많이사용되는아이콘을제공 Icon 형태 (20 종 ) arrow-l, arrow-r, arrow-u, arrow-d, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, info, search, home, phone, mail 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

기본코드 <label for="select-choice-1" class="select"> 선택하시오 :</label> <select name="select-choice-1" id="select-choice-1"> <option value="apple"> 사과 </option>

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

40 6. UX Component Selector / Switch Switch는이진형식을따르며좌우로선택하도록되어있다. Switch를 <label> 과같은행으로나타내고싶을때는 <fieldcontain> 으로 <label> 과 <slider> 를감싸야하며 <label> 의 for 속성과 <slider> 의 id 속성값이동일해야한다. 기본코드 <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 종 ) 형태 (2 종 ) Shadow 적용 Shadow 제거 비그룹, 그룹 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

41 7. UX Code Generator 가이드 / 샘플코드자동생성 각 Component 별설정정보들을 xml 파일을이용하여소스코드생성, 수정, 삭제기능제공및샘플소스코드기능을제공 개발자 15개 UX 컴포넌트소스코드생성편의성제공

8. 참고사이트 전자정부표준프레임워크 egovframe Portal http://www.egovframe.go.kr/ 모바일실행환경가이드 http://mguide.egovframe.go.kr/ JQuery Mobile JQuery Mobile http://jquerymobile.

42 8. 참고사이트 전자정부표준프레임워크 egovframe Portal 모바일실행환경가이드 JQuery Mobile JQuery Mobile Jquery: The Write Less, Do More, JavaScript Library

슬라이드 1

슬라이드 1 전자정부모바일표준프레임워크실행환경컴포넌트별실습 - 1 - UX Component 실습목차 Step 1. Step 2. Step 3. Step 4. Step 5. Step 6. Step 7. Step 8. Step 9. Page Structure Button Panel Internal / External Link Label / Text Tabs Form Menu