jQuery Mobile

jQuery는 클라이언트 단의 스크립트 언어 사용을 단순화 할 수 있는 JavaScript 라이브러리입니다. 이 jQuery가 유명하고 널리 쓰이는 라이브러리이기 때문인지, jQuery Mobile을 jQuery의 어떤 기능 중 하나거나, 축소판 정도로 생각하기도 합니다. 하지만 jQuery Mobile은 ‘모바일 환경’에 알맞는 기능들을 제공하는 jQuery core를 바탕으로 만들어진 확장(Extension) 중에 하나입니다.

wikipedia에서는 jQuery Mobile을 다음과 같이 정의하고 있습니다.

jQuery Mobile is a touch-optimized web framework (additionally known as a JavaScript library or a mobile framework) currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is compatible with other mobile app frameworks and platforms such as PhoneGap, Worklight and more.

jQuery Mobile은 터치식 환경에 최적화 된 웹 프레임워크(JavaScript의 라이브러리 또는 모바일 프레임워크로도 알려진)입니다. 현재 jQuery 프로젝트 팀에 의해 개발되고 있습니다. 또한 여러 종류의 태블릿과 스마트 폰 시장의 성장으로 인해, 다양한 호환 프레임 워크를 만드는 방법에 개발의 초점을 맞추고 있습니다. jQuery Mobile 프레임워크는 다른 모바일 앱 프레임워크와 플랫폼(ex.PhoneGap, Worklight 등)과도 호환됩니다.

1. jQuery Mobile 기본 구조

다음은 jQuery Mobile의 기본구조입니다.

<!DOCTYPE html>
<html>
	<head>
	<title>My Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet"
		href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>My Title</h1>
		</div>
		<div data-role="content">
			<p>Hello world</p>
		</div>
		<div data-role="footer">
			<h3>Footer</h3>
		</div>
	</div><!-- /page -->
</body>
</html>

[예제1] jQuery Mobile의 기본구조

1) HTML5의 data-* 속성

data-* 속성은 HTML5에 새로 추가된 것으로 로컬에 임의의 사용자 정의 데이터를 저장하기 위한 표준 명세서(specification)입니다. HTML Element에 직접 데이터를 정의할 수 있어서 태그와 데이터를 묶어주기 편합니다. jQuery Mobile에서는 이 data-*속성을 활용해 페이지 내 각 요소의 역할을 결정합니다. ‘data-’ 접두어로 시작해서 key와 value를 이어서 지정하는 형식으로 사용합니다. (Ex) data-role="page") 또한 이들은 스크립트 영역에서 dataset 속성을 이용해서 접근이 가능합니다.

예를 들어 다음과 같이 사용자정의 데이터를 정의하고,

<li data-version="ver1" data-url="http://jquerymobile.com">jQuery Mobile</li>

스크립트 영역에서 dataset 속성을 이용해 데이터에 접근할 수 있습니다.

<script type="text/javascript">
	var framework = document.getElementsByTagName('li')[0];
	framework.dataset["version"]    // ver1
	framework.dataset["url"]        // jquerymobile.com
</script>

[예제2] data- 속성*

[예제1]의 기본구조에서 UI의 기본적인 레이아웃을 정의할 때를 예로 들 수 있습니다. jQuery Mobile은 ‘data-‘ 접두어로 시작하는 data-role속성을 통해 UI의 영역을 정해줍니다.

Page

한번에 모바일 브라우저 화면에 보여질 내용을 페이지에 담습니다. 페이지는 <body>요소의 내부에 정의 되는데 각 페이지 요소(주로, <div>)의 속성에 data-role=”page”를 지정하여 하나의 페이지를 나타냅니다. 페이지 내에는 유효한 HTML element들이 올 수 있지만, 일반적으로 영역을 구분하기 위해서 header, content, footer를 page의 자식으로 사용합니다. 이들 역시 일반적으로 <div>태그안에 data-role속성을 지정합니다.

Header - 페이지 상단에 툴바 형태로 표현되며, 보통 헤더(<h1>)태그와 함께 사용합니다.

Content - 실제 페이지의 콘텐츠를 기술하는 영역입니다.

Footer -페이지의 footer 영역을 지정하며, 페이지 하단에 툴바 형태로 표현됩니다.

2) Viewport meta 태그

각각의 모바일 기기에 알맞은 View를 제공하는 것은 모바일 환경에 최적화되기 위해 중요한 요소입니다. 이를 위해 <meta>태그에 viewport를 설정해줄 수 있습니다. (설정하지 않으면 대부분의 모바일 브라우저는 가상 페이지에 대해 약 900px로 설정하게 됩니다.) 코드1-1의 기본 페이지 구조에는 <head>태그 안쪽에 다음과 같이 정의하고 있습니다.

<meta name=“viewport” content=“width=device-width, initial-scale=1”>

이렇게 content속성의 width(가로)값은 device의 크기로 하고 initial-scale(최초 스케일)값은 1(초기배율)로 설정해주면 가로 화면을 device에 맞게 설정하여 줍니다. 안드로이드 device의 모바일 웹 화면인 [그림1]을 보면 알 수 있듯, 가로화면의 크기에 맞춰 화면의 배율이 변하는 것은 일반적인 설정값입니다.

2. 페이지 이동원리

1) 내부 링크 페이지 이동

<body>영역 내에 <div data-role=“page”>…</div>이 단 하나 존재하는 single page도 있지만, 두개 이상 존재하는 multi page도 있습니다. 이때는 첫번째로 정의된 page가 자동으로 표시됩니다. 그리고 이들 간에 연결은 내부 링크를 통해 이뤄집니다. 이동할 Page 영역을 식별하기 위해 <div>태그에 id값을 부여하고 이 값으로 링크를 연결합니다. 이 id값은 자동으로 data-url속성으로 설정되어 실행되기 때문에 data-url속성을 통해서도 가능합니다. id값이 없는 경우는 jQuery Mobile이 자동으로 해당 HTML파일의 절대 경로를 data-url값으로 설정합니다.

<!-- Page 1 -->
<div data-role="page" id="home" data-url="home">       
	<div data-role="header">                            
		<h1>Page 1</h1>
	</div>                            
	<div data-role="content">  
		<h1>First Page</h1>
		<a href="#secondPage">Go To Second Page</a>
	</div>            
</div>

<!-- Page 2 -->
<div data-role="page" id="secondPage" data-url="secondPage">       
	<div data-role="header">                            
		<h1>Page 2</h1>
	</div>                            
	<div data-role="content">  
		<h1>Second Page</h1>
	</div>            
</div>

[예제3] 내부 링크 페이지 이동

이때 Page 2로 이동하게 되면 코드에서 정의하지 않았던 “back”버튼이 자동 생성됩니다. 이 버튼이 자동으로 만들어지지 않게 하려면 header bar에 data-backbtn=”false”속성을 지정합니다. 그리고 Back버튼을 Header bar가 아닌 콘텐츠 영역에 명시적으로 생성할 경우 앵커 태그에 data-rel="back" 속성을 지정합니다.

2) 외부 링크 페이지 이동

기본적인 흐름(jQuery Mobile's navigation model)은 다음과 같습니다.

페이지는 일반적인 HTTP request 로 요청합니다.
다음 페이지들이 요청되고, 이는 이전 페이지의 DOM으로 inject(주입)됩니다. 그래서 DOM은 한번에 그 안에 여러 개의 페이지들을 가지고 있습니다. 그 페이지들은 data-url 속성의 링크를 통해 다시 방문할 수 있습니다.

jQuery Mobile의 외부 링크 페이지 이동은 자동으로 Ajax통신으로 처리합니다(Ajax driven page navigation). 그래서 jQuery Mobile의 모든 navigation은 location.hash를 바꾸고 업데이트 하는 방법을 사용합니다. 이때, 이동될 페이지가 DOM안에 이미 존재하거나 Ajax를 통해 자동적으로 로딩되거나에 상관없이 페이지 간의 부드러운 화면 전환이 가능합니다.

3) 외부 사이트 이동 및 링크 옵션

// 다른 도메인으로 링크하는 경우
// → 보안 문제 때문에 프레임워크는 항상 외부 도메인으로의 링크에서는 Ajax를 적용하지 않음
<p><a href="http://jquerymobile.com">Go To External Site </a></p>  

// rel="external"속성 지정하는 경우
// → 다른 site나 다른 도메인으로 링크를 걸 때 사용되어지는 것
<p><a href="Page2.html" rel="external">Go To Page2.html (rel="external")</a></p>   

// data-ajax="false"속성 지정하는 경우
// → 같은 도메인 내에서 간단하게 Ajax 로딩을 하지 않을 때 사용
<p><a href="Page2.html" data-ajax="false">Go To Page2.html (data-ajax="false")</a></p>  
   
// 링크의 target정보를 명시적으로 지정하는 경우
<p><a href="Page2.html" target="_blank">Go To Page2.html (target="_blank")</a></p>

[예제4] 외부 사이트 이동 및 링크 옵션

위 예시는 모두 Ajax가 로드하지 못하는 경우입니다. 이렇게 하면 full page refresh가 일어나며, 동적인 화면 전환이 일어나지 않습니다. (새로고침 방식)

4) 페이지 이동 API

스크립트 영역에서 페이지 이동을 처리하고 싶다면 jQuery Mobile에서 제공하는 mobile 객체의 changePage() 메서드를 이용하면 됩니다. changePage() 메서드의 매개변수에는 차례대로 이동할 페이지, Transition, Transition 방향을 지정합니다.

내부 링크 페이지 이동 $.mobile.changePage('#secondPage','slide','reverse');
외부 링크 레이지 이동 $.mobile.changePage('Page2.html','slide','reverse');

3. How jQuery Mobile supports RWD(Responsive Web Design)?

어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만들어주는 반응형 웹(Responsive Web)을 구현할 때에도 jQuery Mobile의 기능이 도움이 됩니다.

반응형 웹과 jQuery Mobile에 대한 내용은 다음 글들을 참고하세요.

넥스트리 홈블로그 / 서지수 / CSS : 반응형 웹(Responsive Web) (http://www.nextree.co.kr/p8622/)
Responsive Web Design with jQuery Mobile (http://www.codeproject.com/Articles/652004/Responsive-Web-Design-with-jQuery-Mobile)

맺음말

지금까지 jQuery Mobile의 기본구조와 몇 가지 원리를 살펴보았습니다. 이러한 구조와 원리를 통해 모바일 환경에서 “잘 보이는” 웹 사이트를 만들 수 있습니다. 하지만 여기에 더하여, jQuery Mobile 역시 마치 앱을 사용하는 것처럼 뛰어난 사용자 경험을 제공해야 하는 모바일 웹의 공통 과제를 안고 있습니다.감사합니다.

참고도서 및 사이트

jQuery Mobile (http://jquerymobile.com)
w3schools (http://www.w3schools.com/jquerymobile/jquerymobile_intro.asp)
jQuery Mobile에 대한 소개 (http://www.rkttu.com/?p=1129)
jQuery Mobile 개발을 위한 기본 사항 (http://mylko72.maru.net/jquerylab/mobile/jquery.mobile.1.1.html?hn=6&sn=1)
JQuery Mobile - Ajax, hashes & history 01 – (http://coronasdk.tistory.com/288)