전자정부에서 효율적인 스마트 전자정부 기반시스템의 구축•운영을 통해 전자정부의 서비스 품질 UX 레이어는 UI/UX Controller Component, JavaScript Module App Framework, HTML5, CSS3 JavaScript Module App Framework 서비스를 제공한다. 오픈소스는 JQuery Mobile을 채택하였으며 jQuery Mobile은 html5, CSS3, javascript를 제공한다. 오픈 소스를 Customizing 하여 UI레이어의 기능을 사용 하며 내용은 아래와 같다 UI/UX Controller Component 모바일 웹 사용자 환경(UX/UI)에 대한 유연한 대응을 위해 Touch Optimized 된 필수 UI 컨트롤러 컴포넌트를 제공한다.
HTML5는 모바일 웹 페이지 구성 시 사용 할 수 있는 마크업 언어로서 모바일 특화 태그 밑 디바이스 API를 제공한다. CSS3는 모바일 기기 및 브라우저에 따라 적합한 컴포넌트가 보여지는 기능을 제공한다. 또한 JavaScript Module App Framework UX/UI controller component의 효율성을 보장하는 javascript 밑 Json 구조를 제공한다.

전자정부 모바일 표준프레임워크 실행환경은 기존 전자정부 표준프레임워크의 디렉터리 구조 및 표준을 준수하고 있으며, 모바일 웹 개발에 편의를 제공하기 위해 하위 디렉터리 구조를 다음과 같이 구성하고 있다.

• 프로젝트의 하위 폴더인 ‘src’ 에 실행환경을 지원하는 라이브러리 및 JSP 파일이 존재한다. 라이브러리는 CSS, JavaScript 및 이미지 파일로 구성되어 있다.
  

• 전자정부 모바일 표준 프레임워크는 CSS 및 JavaScript를 이용하여 실행환경을 제공하며 CSS , javascript, image는 각각 유기적으로 연결되어있다.
  

• HTML5 <Tag> 패턴인 ‘data-role’ 속성에 적용된 값에 따라 Page, Header, Content, Footer 영역으로 구분된다.
  

모바일 페이지 이동은 기본적으로 Ajax 를 이용하여 처리 된다. 이는 모바일에 최적화된 화면 전환 효과를 주기 위함으로 옵션 설정을 통해 변경 가능하다.

• 페이지 내부 이동
  • 하나의 HTML 파일 안에 여러 page 가 선언 되어 있는 경우에 사용 할 수 있는 방법으로 모바일 page 구성의 기본 방식이다. 페이지 내부 이동은 Ajax 통신을 사용하며 page 로 선언된 div 태그의 id 값을 링크의 href 속성 값(#pageId)으로 적용하여 사용 가능하다. (한 HTML 내에 여러 page가 선언 되어 있을 경우 제일 상단의 page를 첫 화면으로 인식 한다.)
  • 페이지 내부 이동은 Ajax 방식을 기본으로 하기 때문에 연속적으로 여러 번 사용하면 DOM 객체를 제대로 못불러 올 경우가 있으므로 외부 페이지 이동으로 권장한다.
    

• 페이지 외부 이동
  • 페이지 외부 이동은 Ajax 통신을 이용하며 Ajax 로 호출한 html 의 data-role=“page” 영역만 읽어 들여서 호출한 html 페이지의 DOM 요소에 추가 해 준다. (페이지 내부 이동과 유사 한 구조로 DOM 관리)
    ⋅ Ajax 로 호출된 HTML의 page 영역만 가져 오기 때문에 호출된 페이지에서 사용하는 JavaScript, CSS 등은 호출을 한 HTML내에 존재 해야 한다.
    ⋅ Ajax 통신을 사용하고 싶지 않은 경우 Internal / External UX Component를 참조하여 변경 가능하다.
    

• mobileinit 이벤트와 기본 환경 설정
  • 전자정부 모바일 표준프레임워크는 모바일 어플리케이션이 시작 될 때 각종 초기화 작업이 수행 될 수 있도록 mobileinit 이벤트를 통하여 기본 환경 설정을 변경할 수 있도록 한다.
  • mobileinit 이벤트는 page가 시작되자마자 발생하는 이벤트로 첫 번째 초기화 작업 시 실행되며, 함수 내부에 여러 이벤트를 적용하여 사용 할 수 있다.
    

    $(document).bind("mobileinit", function(){
           //apply overrides here
    });    
    

  • mobileinit 이벤트는 실행 즉시 발생 하므로 jquerymoible.js가 로드 되기 전에 바이딩 되어야 한다. 다시 말해 mobileinit 이벤트의 위치는 jquery 라이브러리와 jquerymobile 라이브러리 사이에 위치 해야 한다.
    

    <script src="jquery.js"></script>
    <script src="custom-scripting.js"></script>
    <script src="jquery-mobile.js"></script>
    

• $.mobile 객체를 통해 재설정이 가능한 주요 기본 환경설정

• 이벤트
  • 전자정부 모바일 표준프레임워크는 스마트기반 모바일 환경에 적합한 이벤트를 선별하여 제공한다. Touch, Mouse, Window 영역의 다양한 이벤트를 지원가능 여부에 따라 선택적으로 이용하기 때문에 모바일 환경과 데스크톱(Desktop) 환경 모두에서 사용 가능하다. live() 또는 bind() 메소드를 이용하여 여러 이벤트를 함께 사용 할 수 있다.
  • 지원 터치 이벤트

• 지원 화면 방향 전환 및 스크롤 이벤트

• 지원 페이지 이벤트

• Visual Mouse event

• 메소드 & 유틸리티
  • 전자정부 모바일 표준프레임워크는 $.mobile 객체에 대한 메소드와 속성들을(properties) 제공한다.

• HTML5
• CSS3
• JavaScript Module App Framework