지난번에 이어 오늘은 jQuery Mobile을 이용하여 단일 HTML 페이지 안에서 여러 멀티 페이지 UI를 포함하도록 모바일 페이지를 만들어 볼 것이다. 적어도 이 정도는 되어야 흔히 말하는 모바일 기반의 웹 사이트를 상상할 수 있는 첫 걸음이 될 것이다.
지난번에 간단히 소개한대로, data-role Attribute가 jQuery Mobile에서는 핵심적인 역할을 수행하며, Page <DIV> 태그가 컨테이너 노릇을 하고, 여기 아래에 Header, Content, Footer 순으로 <DIV> 태그가 배치되어야 한다고 하였다. 그리고 Page <DIV> 태그들 중 가장 먼저 DOM에서 검색되는 항목이 jQuery Mobile에서 가장 처음 노출시키는 페이지가 된다고 하였다. 멀티 페이지 UI는 단순히 여기에 다른 Page <DIV> 태그들을 첫 Page <DIV> 태그 뒤에 이어붙이고 이들 사이를 하이퍼링크로 연결하는 작업만을 하는 것 뿐이다.
따라하기 쉬운 예제를 위하여, 오늘 만들어 볼 것은 모바일 사진 갤러리이다. 준비물은 모바일에서 로드하기에 부담스럽지 않을 정도의 해상도와 품질을 가진 사진 파일 3~4장 정도면 된다. 필요하다면 여러분이 가지고 있는 디카 사진을 적당히 해상도를 줄이거나 품질을 떨어뜨려 샘플 사진을 만들기 바란다.
멀티 페이지 UI 흐름 구상하기
멀티 페이지 UI를 만들기에 앞서, 어떤 순서로 사람들이 페이지를 네비게이션하게 될 것인지를 기획하는 작업이 선행될 필요가 있다. 연필과 종이를 이용해서 스케치를 해도 되고, 좀 더 체계적인 시스템을 사용하기 원한다면 Balsamiq과 같은 전문적인 Mock up 도구를 이용해도 된다. 필자는 아래와 같이 정말 draft type의 mock up을 Balsamiq Online Version을 통해서 만들어 보았다. (사실 이런 것을 따로 기획하지 않아도 될 만큼 단순하지만 여러분의 이해를 돕기 위하여 시도해 본 다소 성의 없는 mock up이니 넓은 이해를 바란다.)
세 장의 사진을 모바일 상에서 표시하기 위하여 위와 같은 UI와 흐름을 가진 멀티 페이지 템플릿 UI를 만들어보려고 한다. 버튼 1과 버튼2와 버튼 3을 눌렀을 때 나타낼 사진은 여러분의 재량에 따르기로 하고 계속해서 페이지 구성을 실제 마크업으로 옮겨보도록 하자.
멀티 페이지 만들기
이제 위의 레이아웃을 실제 멀티 페이지로 옮겨 볼 차례이다. 세 페이지의 화면이 모두 동일하므로 첫 Page <DIV> 태그를 만들고 이 태그를 응용하여 뒤에 다른 페이지들을 붙여나가면 쉽게 완성할 수 있을 것이다. 갤러리 페이지의 화면은 다음과 같은 코드로 나타낼 수 있을 것이다.
<div data-role="page" id="first">
<div data-role="header">
<h1>My Mobile Gallery</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<img src="Chrysanthemum.jpg" border="0" alt="Chrysanthemum" class="galleryWidget" />
</div>
<br />
<div class="galleryWidget">
<a data-role="button" data-inline="true" data-theme="b" href="#first">1</a>
<a data-role="button" data-inline="true" href="#second">2</a>
<a data-role="button" data-inline="true" href="#third">3</a>
</div>
</div>
</div>
위의 코드에서 굵게 표시한 부분들이 jQuery Mobile이 이해하고 처리하는 실질적인 부분들임을 기억하도록 하자. 위의 코드가 얼핏 보기에는 HTML의 규격을 벗어난 것처럼 보이거나 혹은 서버 사이드에서만 처리가 가능할 것처럼 보일 수 있지만 위의 규격은 HTML5에서 매우 합당하고 정확한 규격이다. 바로 Custom Attribute 덕분인데, 이와 같이 jQuery Mobile과 사전에 약속한 Custom Attribute를 사용함으로서 jQuery Mobile이 이 페이지의 내용을 자유롭게 다룰 수 있도록 해주는 것이다. 반대로 말하면, 위와 같이 지정하지 않은 HTML 요소에 대해서는 jQuery Mobile이 일절 간섭하지 않는다는 뜻이기도 하다.
뷰 포트에 대한 이야기
모바일 웹 페이지를 만들 때 가장 중요한 것이 하나 있는데 바로 뷰 포트에 관한 사항이다. 이제까지 우리가 다루어왔던 웹은 모두 데스크 탑 브라우저를 기준으로 설계되어왔다. WML을 이용하여 모바일 페이지를 디자인하던 시절도 있었지만 이 때만 하더라도 뷰 포트에 대한 이야기는 거의 없었다고 봐야 하겠다. 하지만 HTML이라는 통일된 수단을 가지고 모바일 페이지를 설계하면서부터 이런 논의가 활발해졌고 지금은 하나의 규칙으로 정해져있다.
우리가 일상적으로 보는 뷰포트는 해상도가 아무리 못해도 640x480 이상이 되는 디스플레이를 기준으로 하고 있으며 이는 스마트폰의 디스플레이보다는 어떤 이유에서이든 압도적으로 높은 해상도이다. 당연히 스마트폰이 표시할 수 있는 해상도와는 차이가 생길 수 밖에 없는데 스마트폰 제조 업체들은 나름대로 이에 대한 해결책을 모색하기 위하여 뷰포트를 억지로 맞추어 웹 페이지를 표시한다. 여러분이 초창기 스마트폰을 가지고 스스로 만든 웹 사이트를 브라우징해보면 이를 곧바로 알 수 있는데, 화면이 실제 데스크탑에서 보여지는 것과 비슷하게 보이기는 하지만 너무 작아져서 브라우징하기 참 어려운 모양으로 페이지가 나타나게 됨을 확인한다. 물론 사용자는 이가 없으면 잇몸이라도 쓰는 심정으로 화면을 연신 확대하고 스크롤 해가면서 어렵게 쓰기야 하겠지만.
이런 문제점을 예방하고 꼭 필요한 컨텐츠만을 계획적이면서도 알차게 담을 수 있도록 하기 위하여 스마트폰을 기획하지만 더 구체적으로는 스마트폰이 이런 식의 재정의를 임의로 하지 않도록 규정을 강제할 필요가 있는데 이를 위하여 메타 태그로 페이지마다 뷰포트에 대한 설정을 잡아주는 것이 꼭 필요하다. 우리가 사용할 뷰 포트는 아래와 같으며 아래의 메타 태그를 지금 여러분이 실습할 페이지의 <HEAD> 태그에 추가하기만 하면 된다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
실제로 살펴보기
위의 페이지를 모바일 웹 사이트에서 미리 보면 다음과 같은 모습이 될 것이다. 아래의 화면은 Windows Phone 7.1 Emulator로 살펴본 웹 사이트의 모습이다. 예상한 대로 첫 화면이 잘 보인다.
페이지 나머지 완성하기
이제 나머지 페이지를 완성하도록 해보자. 전체 페이지의 코드는 다음과 같이 작성되면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<link rel="stylesheet" media="all" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<title>My Mobile Gallery</title>
<style type="text/css" media="all">
.galleryWidget { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.ui-grid-b img { width: 80%; height: auto; }
</style>
</head>
<body>
<div data-role="page" id="first">
<div data-role="header">
<h1>My Mobile Gallery</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<img src="Chrysanthemum.jpg" border="0" alt="Chrysanthemum" class="galleryWidget" />
</div>
<br />
<div class="galleryWidget">
<a data-role="button" data-inline="true" data-theme="b" href="#first">1</a>
<a data-role="button" data-inline="true" href="#second">2</a>
<a data-role="button" data-inline="true" href="#third">3</a>
</div>
</div>
</div>
<div data-role="page" id="second">
<div data-role="header">
<h1>My Mobile Gallery</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<img src="Hydrangeas.jpg" border="0" alt="Hydrangeas" class="galleryWidget" />
</div>
<br />
<div class="galleryWidget">
<a data-role="button" data-inline="true" href="#first">1</a>
<a data-role="button" data-inline="true" data-theme="b" href="#second">2</a>
<a data-role="button" data-inline="true" href="#third">3</a>
</div>
</div>
</div>
<div data-role="page" id="third">
<div data-role="header">
<h1>My Mobile Gallery</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<img src="Tulips.jpg" border="0" alt="Tulips" class="galleryWidget" />
</div>
<br />
<div class="galleryWidget">
<a data-role="button" data-inline="true" href="#first">1</a>
<a data-role="button" data-inline="true" href="#second">2</a>
<a data-role="button" data-inline="true" data-theme="b" href="#third">3</a>
</div>
</div>
</div>
</body>
</html>
페이지 간 탐색을 위하여, data-role이 page로 설정된 <DIV> 요소에 대해서 ID 속성을 지정하였고 이를 Hyperlink에서 Anchor 속성으로 지정한 것에 주목하라. jQuery Mobile은 이에 대한 자바스크립트 수준의 처리를 자동으로 구현해주고 있으므로 여러분이 각 <DIV> 요소의 비주얼을 일일이 관리할 필요가 없다는 것이 매우 바람직하다. 아쉽게도 Windows Phone 7.1에 포함된 IE에서는 조금 미미하지만 다른 스마트폰의 WebKit 기반 브라우저들로 살펴보면 페이지 간 애니메이션 전환 효과도 정확하게 보인다.
마무리하며
jQuery Mobile에 대한 관심은 나날이 늘어가고 있다. PhoneGap에 대한 직접적인 지원도 하고 있으며, 뿐만 아니라 PhoneGap 그 자체도 영역을 넓혀서 이제 Windows Phone 7에서도 직접 사용할 수 있을만큼 프레임워크 수준이 많이 좋아졌다.
jQuery Mobile 덕분에 여러분이 이미 만들었거나 운영 중인 웹 사이트에 이와 같이 모바일 사이트를 하나 더 만드는 것은 약간의 노력을 기울이기만 한다면 얼마든지 손쉽게 추가할 수 있게 되었다. 게다가 이제는 버전 1.0이므로 믿고 사용할 수 있을만큼의 수준이 되었다. 오늘 한 번 시험 삼아서 여러분만의 모바일 웹을 만들어보기 바란다. 홈페이지가 웹 호스팅 환경에서 실행된다고 할지라도 라이브러리나 프레임워크는 CDN에서 내려받도록 걸어주기만 하면 되므로 트래픽 걱정도 할 필요가 없으니 더더욱 자신감을 가지고 만들어보기 바란다. :-)
'Web Development > jQuery Mobile' 카테고리의 다른 글
| jQuery Mobile 멀티 페이지 UI 작성하기 (0) | 2011/12/26 |
|---|---|
| jQuery Mobile로 페이지 만들기 (0) | 2011/12/16 |
| jQuery Mobile에 대한 소개 (0) | 2011/12/15 |
