지난번에는 jQuery Mobile의 필요성과 사용을 위한 준비 방법을 살펴보았다. 그리고 오늘은 jQuery Mobile을 이용하여 실제로 페이지를 만들 때 주의할 사항들과 대망의 첫 예제 Hello, World!를 만들어보려고 한다.
개발 환경의 선택
계속하기에 앞서 한 가지 언급하고 넘어가도록 하겠다. 웹 개발을 할 때 웹 서버와 함께 좋은 IDE를 반드시 하나 이상 활용하기 바란다. 파일 시스템에서 웹 페이지를 불러와 테스트하는 방법은 요즈음 웹 환경에서는 그다지 좋은 방법이 아니다. 만약 마땅히 테스트 베드로 삼을만한 웹 플랫폼이 없다면, 여러분이 선택할 수 있는 테스트 베드는 두 가지 종류가 있다. 하나는 Visual Web Developer 2010 Express를 사용하는 것이고, 또 다른 하나는 Microsoft WebMatrix를 이용하는 방법이다. 만약 여러분이 ASP.NET에 별로 친숙하지 않다면 ASP나 PHP 개발을 WebMatrix에서 쉽게 진행할 수 있으므로 일반적인 텍스트 에디터만 사용하기보다는 WebMatrix를 병행할 것을 권한다.
Visual Web Developer 2010 Express를 사용하면 서버 사이드 프로그래밍에 필요한 디버거와 웹 응용프로그램 서버를 기본으로 획득한 상태에서 프로젝트 단위로 고급 프로그래밍 기법을 시도해볼 수 있다. 만약 순수하게 자바스크립트를 테스트해볼 수 있는 테스트 베드가 필요하다면 WebMatrix를 사용해도 된다. 양쪽 모두 무료 도구이며 둘 다 설치해서 여러분의 기호에 맞는 도구를 먼저 테스트해볼 수도 있다. 양쪽 도구 모두 http://www.microsoft.com/web 에서 제공하는 Web Platform Installer를 이용하여 손쉽게 설치할 수 있다.
HTML5 제대로 쓰기
다시 본론으로 돌아와서, jQuery Mobile은 이전 시간에 마무리하면서 이야기하기를, HTML5의 사양이 필요하다고 하였다. 기본적으로 우리가 아는 HTML은 HTML4 혹은 XHTML 1.1의 사양이다. 그리고 이를 계승하는 것이 HTML5와 XHTML5가 된다. 버전 4를 계승하여 버전 5가 나온 것이므로 양쪽의 차이점은 사실 그다지 크지 않다. 하지만 jQuery Mobile이 기대는 부분 중에서 굉장히 중요한 부분이 하나 있는데 바로 Custom Attribute의 사용이다. HTML4나 XHTML1.1에서는 Custom Attribute를 사용하는데 제약이 따르게 된다. 그러나 HTML5와 XHTML5에서는 이러한 설정을 공식적으로 지원한다.
웹 브라우저의 입장에서는 HTML4와 HTML5를 구분할 수 있는 방법이 필요한데, 별다른 언급 없이 웹 페이지를 써내려가기 시작하면 브라우저의 선호도에 따라 페이지의 버전이 달리 선택되므로 웹 페이지가 브라우저의 종류나 버전에 따라 일관성없는 결과를 낼 가능성이 크다. 이를 바로잡기 위하여 DOCTYPE을 정확히 지정해야 하며, 그 중에서도 HTML5의 DOCTYPE을 정확히 지정해야 한다. HTML5의 DOCTYPE은 페이지의 제일 첫 줄에 아래와 같이 작성하는것만으로 끝난다.
<!doctype html>
HTML4나 XHTML1.1의 DOCTYPE을 기억하는 이들이라면 위의 DOCTYPE이 정말 전부인지 당황스럽게 느껴질 것이다. 실제로 그렇다. 위와 같이 서술하면 HTML5를 제대로 지원하는 브라우저에서는 HTML5 상태로 페이지를 해석하고 렌더링하게 될 것이고, 그렇지 않은 브라우저들은 HTML4를 기반으로 해석을 시작할 것이다.
그리고 주의할 점이 하나 더 있는데, DOCTYPE 앞에는 어떤 추가적인 요소도 등장해서는 안된다. 즉, DOCTYPE이 공백 문자들을 제외하고 웹 페이지안에서는 절대적으로 최우선이어야만 한다는 뜻이다. 이를 위반하면 페이지가 의도하지 않은 모습으로 표시될 가능성이 커진다.
Hello, World! in jQuery Mobile
드디어 모든 프로그래밍 과제의 첫 번째 예제인 Hello, World!를 jQuery Mobile 스타일로 만들어 볼 차례이다. 여러분의 웹 개발 IDE에서 새 프로젝트를 각자 만들고, 첫 index 페이지를 만들어 아래와 같이 코드를 작성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" media="all" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<title>오늘의 뉴스</title>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>페이지 제목</h1>
</div>
<div data-role="content">
<p>Hello, World!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus vehicula libero a fringilla. Nunc volutpat adipiscing felis, non iaculis arcu consectetur vitae. Aliquam tincidunt ultricies dui sed laoreet. Integer ligula tellus, porttitor in ornare vel, eleifend a eros. Ut lacinia porttitor sagittis. Integer interdum metus ligula, in lacinia leo. Cras scelerisque porttitor sagittis. Praesent eget orci eu est sollicitudin faucibus. Duis euismod neque quis nunc malesuada nec tincidunt mi varius. Duis at feugiat odio.</p>...
</div>
<div data-role="footer">
<h1>아무개가 만든 페이지</h1>
</div>
</div>
</body>
</html>
jQuery Mobile을 사용한 페이지이지만 어쩐지 자바스크립트 코드가 단 한줄도 보이지 않는다. 어떻게 된 것일까? 의문을 풀기 위하여 실제로 웹 서버에 올려 웹 페이지를 살펴보면 아래와 같이 재미있는 결과가 나오는 것을 볼 수 있다.
특별한 자바스크립트 코드나 CSS 클래스 설정을 하지 않고 단번에 모바일 웹 페이지의 UI가 완성된 모습이 보인다. 첫 시작치고 굉장히 많은 것을 가져다주고 있는 것이다. jQuery Mobile이 기본적으로 하는 일은 바로 이런 일이다. 여러 모바일 브라우저에서 이 페이지에 접근하면 모두 이와 같은 모습으로 페이지를 렌더링해주는 것은 물론, 모바일 브라우저의 해상도와 뷰 포트에 알맞게 와이드 스크린을 지원하는 모바일 장치에서는 지금 여러분이 보는 것과 비슷한 화면으로 웹 페이지가 나타날 것이고, 스마트폰 계열 스크린에서도 약간의 뷰포트 조정을 통해서 적당한 화면을 얻을 수도 있다.
참고로 위의 예제 코드에서 라틴어로 주절주절 써놓은 것은 데모용 웹 페이지에서 흔히 잘 쓰이는 Lorem Ipsum (이하 Lipsum) 텍스트이다. http://www.lipsum.com/ 에서 원하는 분량만큼 만들 수 있으며 여러분의 모바일 디자인을 테스트하기 위하여 양껏 만들어 위와 같이 사용하면 된다.
jQuery Mobile의 UI 구조
다음 시간에 좀 더 구체적으로 살펴보겠지만 jQuery Mobile의 UI 구조는 WML의 카드 레이아웃과 비슷한 점이 많다. 여러분이 어떻게 구현하는가에 따라서 달라질 가능성은 충분히 있지만 페이지를 한 번만 다운로드해서 필요한 모든 UI를 제공할 수 있도록 기능을 만들어주는 것이 jQuery Mobile의 UI 설계 방향이다. 페이지의 구조가 복잡하게 그려질 가능성이 없진 않으나, 정확한 이해와 활용을 전제로 한다면 곧 익숙해질 것이다.
여러분이 위의 스크린 샷에서 본 화면은 페이지의 화면이 아니라 제일 처음 등장하는, 페이지로서의 역할을 수행하도록 설정된 <DIV> 태그의 화면이다. 보통의 <DIV> 태그와 구분되는 점은, HTML5의 Custom Attribute를 이용하여 이 <DIV> 태그가 jQuery Mobile에 의하여 특별하게 취급될 수 있도록 되어야함을 지시할 수 있다는 것인데, 바로 그 Attribute가 data-role Attribute이다. jQuery Mobile 세계 안에서 가장 키포인트가 되는 Attribute가 바로 이 data-role Attribute이므로 잘 봐두길 바란다.
data-role이 page로 지정된 <DIV> 태그 안에는 Header, Content, Footer 순서로 <DIV> 태그가 배치되어야 한다. 시각적으로 일관성있고 이해하기 쉬운 모바일 레이아웃을 만들기 위하여 Header는 사용하는 것이 필요하고, Content야 두 말할 필요 없이 본문에 해당되는 내용이다. 그리고 Footer는 옵션이다. 세 가지 섹션 모두 <DIV> 태그로 구성되지만 당연히 data-role Attribute를 사용하여 각자의 역할을 jQuery Mobile에게 알려주어야 한다. 그러면 jQuery Mobile은 이 부분에 대한 처리를 수행하여 여러분이 보고 있는 화면과 같이 디자인을 마무리해주게 된다.
기존에는 <BODY> 태그 아래에 여러분이 필요한 내용을 직접 써내려가면 그만이었지만 jQuery Mobile 환경 아래에서 모바일 페이지를 프로그래밍하는 것은 이와 같이 약간의 규칙이 따른다. 다음 강좌에서는 지금 보여준 페이지 UI를 하나의 HTML 페이지 안에서 여러 개를 포함하고 전환할 수 있는 방법을 본격적으로 소개하도록 하겠다.
'Web Development > jQuery Mobile' 카테고리의 다른 글
| jQuery Mobile 멀티 페이지 UI 작성하기 (0) | 2011/12/26 |
|---|---|
| jQuery Mobile로 페이지 만들기 (0) | 2011/12/16 |
| jQuery Mobile에 대한 소개 (0) | 2011/12/15 |
AesImpl.zip
