자바스크립트를 활용한 모바일 웹 구현

원문: http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=37462

안광운 www.kuahn.com, z@kuahn.com, twitter(@ZKUAHN) ｜현재 멜론에서 개발 업무를 하고 있는 프리랜서이다. HTML, CSS, 자바스크립트 등 프론트-엔드에 관심이 많은 자바 개발자이며 OKJsp Mobile Web, OKJsp iPhone App 개발에 참여하는 등 새로운 것을 즐긴다.

유준모 www.yooor.com, yanagij@gmail.com｜한글과컴퓨터에서 HTML/CSS/자바스크립트 UI 개발과 GUI 업무를 맡고 있다. 코드로 표현하는 디자인에 흥미가 있으며, 현재 모바일 웹앱 개발에 관심을 쏟고 있다.

먼저 기존에 알고 있던 웹 기술인 HMTL, CSS, 자바스크립트를 이용해 모바일 웹페이지를 작성하는 방법을 설명하고자 한다. 각종 머리 아픈 프로그래밍에 익숙한 개발자들은 이 글에서 다룰 CSS3 등의 디자인 관련 이슈들이 조금은 생소할 수도 있으나, 어쩌면 쉽고 재미있는 ‘쉬어가는 페이지(?)’ 역할을 할 수도 있을 것으로 생각된다.

모바일 웹페이지 제작 시작하기
참고로 이 글의 예제 코드들은 지면 관계상 일부 핵심적인 부분만 실었고 전체 소스 코드는 http://yooor.com/open/ms_may에서 확인할 수 있음을 밝힌다(스마트폰으로 접속 후 직접 테스트해 볼 수 있다).

뷰포트(viewport)모바일 전용 웹페이지는 일반 웹페이지와 달리 폰트 크기 등이 스마트폰 화면에 최적화된 화면으로 보이는데, 이는 뷰포트(viewport)의 설정을 통해 구현할 수 있다. 일반적으로 모바일 전용 웹페이지의 소스를 살펴보면, HTML의 head 부분에 <리스트 1>과 같은 코드가 삽입되어 있다.

<리스트 1> head에 삽입하는 viewport 메타태그 viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">

• in itial-scale : 기본적인 확대 배율을 결정한다. 0.5로 설정하면 원래 사이즈의 0.5배 크기로 보인다.
• maximum-scale : 최대 확대 배율을 결정한다.
• minimum-scale : 최소 확대 배율을 결정한다.
• user-scalable : 화면의 확대/축소 가능 여부를 결정한다. 0이 불가능, 1이 가능이다. 다만 initial-scale 값과 maximum-scale 값이 같다면, 최대 확대 배율이 100%이므로 1로 설정해도 확대가 동작하지 않는다. 예를 들어 initial-scale=1.0, maximum-scale=2.0으로 설정했다면 최대 2배까지 확대할 수 있다.

위의 뷰포트 메타태그를 삽입하고 모바일 브라우저로 확인해 보면 보기 좋게 모바일 전용 화면으로 표시되는 것을 확인할 수 있다.

모바일 웹페이지 레이아웃에 관한 팁
● 팁 하나, 유연한 레이아웃

모바일 웹페이지의 레이아웃은 세로 모드(Portrait Mode)와 가로 모드(Landscape Mode)에 모두 대응해야 하며, 스마트폰뿐만 아니라 해상도가 넓은 태블릿 기기에서도 이상 없이 보이도록 하는 데 초점을 맞출 필요가 있다. 여러 해상도에 유연하게 대응하기 위해서는 고정 픽셀 값 대신 % 값을 사용하는 것이 좋다. <화면 1>과 <리스트 2>의 예제는 크기 값을 %로 주어 작게 보이던 이미지를 터치(클릭)하면 자바스크립트로 .enlargement 클래스를 활성화시켜 디바이스의 폭에 맞게 이미지가 커지도록 만든 것이다. CSS3의 Transition을 이용해 애니메이션 효과를 주었다. CSS3 Transition은 이 글의 후반부에서 더 자세히 볼 수 있다.

<화면 1> 화면 사이즈에 맞게 이미지 확대하기

<리스트 2> 화면 사이즈에 맞게 이미지 확대 .......................................................... <style> img { float: left; width: 30%; -webkit-transition-property: width; -webkit-transition-duration: .3s; } img.enlargement { width: 100%; } </style> .......................................................... <p><img src="images/gook.jpg">  "모바일 웹페이지의 레이아웃은 세로보기(Portrait Mode)와 가로보기(Landscape Mode)에 모두 대응 … 에서도 이상 없이 보이도록 하는 데 … 디바이스의 폭에 맞게 커지도록 만든 것이다."</p> ..........................................................

● 팁 둘, 통째로 움직이는 문서 고정시키기 

iOS의 모바일 사파리를 비롯한 일부 모바일 브라우저들은 손가락으로 화면을 상하로 잡아당기면 문서가 통째로 움직이게 된다. 브라우저의 이러한 동작은 쓸어 넘기거나 무언가를 집어 이동시키는 동작이 필요한 페이지에서 조작을 어렵게 만든다.

이 현상은 디바이스 화면에 손가락을 댄 채로 이동하면 발생하는 “touchmove” 이벤트의 기본 동작을 막아주는 방법으로 없앨 수 있다.

<리스트 3> 문서 고정시키기 document.addEventListener("touchmove", function(e){ e.preventDefault(); });

<화면 2> 이렇게 되는 현실을 방지하는 방법에 대한 내용

● 팁 셋, 가로모드에서 텍스트 확대 방지하기

뷰포트의 설정이나 여러 상황에 따라 가로모드에서 텍스트가 확대되는 경우가 있다. 이와 같은 동작을 없애고 가로, 세로 모두 동일한 크기로 텍스트를 표시하고 싶다면 <리스트 4>의 CSS 코드를 추가하면 된다.

<리스트 4> 가로모드에서 텍스트 확대 방지하기 * { -webkit-text-size-adjust: none; }

아이폰4 모바일 사파리에서 고해상도 이미지 표현하기
아이폰4의 레티나 디스플레이는 육안으로 분간할 수 없는 작은 크기의 픽셀로 엄청난 고해상도 이미지와 텍스트 표현을 자랑한다. 하지만 일반적인 경우, 모바일 웹사이트에 삽입되어 있는 이미지는 아이폰4에서도 아이폰 3GS와 마찬가지로 흐릿하게 보인다. 이 문제는 해상도의 차이에 맞춰 이미지를 4배 크기로 만드는 방법으로 해결할 수 있다. 예를 들어 표시되어야 할 이미지의 크기가 200×100 사이즈라면, 400×200 사이즈로 제작한 후 width: 200px, height: 100px을 넣어주어 원래 의도했던 크기로 표시한다. 사진보다는 로고 등의 일러스트나 이미지텍스트에서 더 확연한 차이를 느낄 수 있을 것이다.

참고로, 이 방법을 통해 아이폰4의 고해상도 화면에 맞는 고해상도 이미지를 웹페이지에서 표현하는 것이 가능하지만, 이미지의 원본 사이즈 자체가 커지다 보니 용량의 제한을 받는 웹 이미지의 특성상 다소 부담스러울 수 있다. 따라서 모든 이미지를 이런 방식으로 제작하는 것보다는 대표적인 로고나 중요한 일부 이미지만 이런 방식으로 제작하는 것도 바람직하다.

<리스트 5> 고해상도 이미지 표현하기 <!-- 이미지 gook.png의 원래 크기는 width 400px, height 200px이다. --> <img src="images/gook.png" style="width: 200px; height: 100px;">

CSS3와 자바스크립트로 만들어 보는 iOS 토글버튼
일반 데스크톱 컴퓨터용 브라우저에서는 지원하지 않는 경우가 너무 많아 섣불리 사용이 어려웠던 CSS3도 모바일로 오면 이야기가 달라진다(웹브라우저가 지원하지 않는다고 하기보다는 사용자들이 CSS3를 지원하는 최신 브라우저를 이용하는 경우가 적다고 하는 편이 맞을 것이다). 차세대 웹 기술을 이끌어 가는 모바일 브라우저들답게, 대부분의 모바일 브라우저들이 CSS3를 지원하기 때문에 모바일 웹페이지를 제작함에 있어 거리낌 없이 사용해도 좋다.

이 글에서는 애플 아이폰의 iOS 곳곳에 사용되는 토글버튼을 CSS3를 이용해 제작함으로써 GUI를 만드는 데 필요한 기본적인 CSS3의 속성들을 익혀보고자 한다. 물론 CSS3에는 GUI 디자인을 위한 스펙들이 상당히 많이 준비되어 있지만, 지면 관계상 토글버튼을 만드는 데 쓰인 것들 위주로 살펴볼 것이며, 스펙에 대한 자세한 설명은 생략하고 ‘이런 것들이 가능하다’는 것을 소개하고 간단히 테스트해 보는 데 중점을 뒀다. CSS3를 사용하면 그라데이션, 그림자 등의 기본적인 디자인 요소들을 이미지 없이 CSS만으로 표현할 수 있다(이 예제에는 이미지가 전혀 사용되지 않았다). 가로로 슬라이드되는 애니메이션은 CSS3의 Transition을 사용했다. 그럼 토글버튼에서 이용할 CSS3 속성들을 각각 미리 둘러보도록 하자. 터치 동작이 필요한 예제들은 touch 이벤트를 사용했으므로 일반 데스크톱 웹브라우저에서는 동작하지 않는다.

● 그라데이션

<화면 3> CSS 그라데이션

<리스트 6> CSS 그라데이션 background: -webkit-gradient(linear, left top, left bottom,   from(#FF0000),   color-stop(0.5, #00FF00),   to(#0000FF) );

linear는 선형 그라데이션임을 나타내며 left top과 left bottom은 방향을 나타낸다. from 색상 값인 #FF0000(빨강)에서부터 #00FF00(녹색)을 거쳐 to 색상 값인 #0000FF까지 그라데이션으로 표현된다. 중간의 color-stop은 0.5, 즉 50%가 되는 위치에 #00FF00 색상이 들어간다는 의미이며 여러 위치에 값을 넣을 수 있다. CSS를 이용함으로써 유동적인 크기를 가지는 엘리먼트에도 그라데이션 효과를 적용하는 것이 가능하다. 한 가지 팁을 이야기하면, 포토샵에서 디자인할 때 사용한 PSD 파일을 열어 해당 부분의 그라데이션 속성 윈도우에 표시되는 색상 값, 위치 정보 등을 그대로 이용하면 한결 수월하다.

● 텍스트 그림자

<화면 4> 텍스트 그림자

<리스트 7> 텍스트 그림자 /* Text Shadow 1 */ text-shadow: rgba(0, 0, 0, 0.7) 1px 2px 3px; /* Text Shadow 2 */ padding: 10px; color: #39434f; text-align: center; border-top: 1px solid #39434f; border-bottom: 1px solid #39434f; text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; background: -webkit-gradient(linear, left top, left bottom, from(#d9e0e9), color-stop(0.02, #d9e0e9), color-stop(0.02, #a5b3c6), color-stop(0.15, #a5b3c6), color-stop(0.49, #889bb3), color-stop(0.5, #8195af), to(#6d84a2));

text-shadow 속성을 설정해 주는 것으로 텍스트 그림자 표현이 가능하다. text-shadow: rgba(0, 0, 0, 0.7) 1px 2px 3px;에서 rgba(0, 0, 0, 0.7)은 순서대로 색상 RGB 값 및 투명도(0.7은 70%)를 나타낸다. 색상 값 뒤의 세 가지 값은 순서대로 그림자의 Left 위치, Top 위치, 그림자의 부드러움 정도를 나타낸다. 앞의 그라데이션과 적절히 함께 사용하면 <화면 4>의 아래와 같은 타이틀 바도 손쉽게 만들 수 있다.

● 꼭지점이 둥근 사각형

<화면 5> 꼭지점이 둥근 사각형

<리스트 8> 꼭지점이 둥근 사각형 border-radius: 20px;

border-radius로 꼭지점 부분의 반지름을 설정해 주는 것으로 둥근 박스를 표현하는 것이 가능하다. 이제 더 이상 둥근 박스를 만들기 위해 커다란 배경이미지를 사용할 필요도 없으며, 추가적인 마크업을 넣을 필요도 없어졌다. text-shadow 예제에서 만들어 본 타이틀 바에 border-radius를 적용하면 <화면 5>와 같은 모양을 만들 수도 있다.

● 애니메이션

<화면 6> Transaction 애니메이션

<리스트 9> Transition 애니메이션 .......................................................... <style> div { height: 50px; border: 1px solid #000;   -webkit-transition-property: height, font-size, border-width;   -webkit-transition-duration: 2s, 5s, 1s;   -webkit-transition-timing-function: ease-in; } div.active { height: 200px; font-size: 3em; border-width: 20px; } </style> .......................................................... <div></div> ..........................................................

CSS3의 애니메이션은 Transition을 이용한 방법과 Animation을 이용한 방법이 있는데, 사용자의 이벤트에 반응하며 반복적으로 사용할 애니메이션은 Transition을 이용해 class로 조정하는 것이 편리하며, 키프레임 개념을 이용해 시간 흐름에 따라 애니메이션을 만들 경우는 Animation을 이용하는 것이 좋다. 이 예제는 터치하면 자바스크립트로 .active 클래스를 활성화시켜 Transition 효과를 보여준다.

transition-property의 값은 애니메이션을 걸어 줄 속성이며, 복수 지정이 가능하다. transition-duration은 애니메이션이 진행되는 시간을 나타내며 복수의 속성에 Transition을 적용한다면 진행시간 역시 복수로 지정할 수 있다. transition-timing-function은 애니메이션의 진행에 따른 속도 변화를 결정하는 것으로 ease-in, ease-out, ease-in-out, linear 등의 값을 사용할 수 있다.

● iOS 토글버튼 만들기

<화면 7> iOS 토글버튼 만들기

<리스트 10> iOS 토글버튼 만들기 .......................................................... <style> .toggleBtn { margin: 10px; width: 94px; } /*--------------------.toggleBtn > div--------------------*/ .toggleBtn > div { position: relative; overflow: hidden; width: 92px; height: 25px; border-style: solid; border-width: 1px; border-radius: 4px; } /* OFF 상태 */ .toggleBtn > div.off { border-color: #7d7d7d #9f9f9f #bebebe #9f9f9f; background: -webkit-gradient(linear, left top, left bottom, from(#b6b6b6), color-stop(0.09, #e5e5e5), color-stop(0.49, #efefef), color-stop(0.53, #f8f8f8), to(#fefefe)); } /* ON 상태 */ .toggleBtn > div.on { border-color: #00368c #0054ba #4b87da #0054ba; background: -webkit-gradient(linear, left top, left bottom, from(#205ab6), color-stop(0.09, #2a70e0), color-stop(0.49, #3383f1), color-stop(0.53, #4890f5), to(#6facff)); } /*--------------------.toggleBtn > div span--------------------*/ .toggleBtn > div span { position: absolute; top: -1px; display: block; width: 40px; height: 25px; border-style: solid; border-width: 1px; border-radius: 4px; background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), color-stop(0.02, #f0f0f0), color-stop(0.02, #cdcdcd), color-stop(0.47, #e4e4e4), to(#fafafa)); -webkit-transition-property: left; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; } /* OFF 상태 */ .toggleBtn > div.off span { left: -1px; border-color: #919191 #ababab #979797 #ababab; -webkit-box-shadow: rgba(0, 0, 0, 0.25) 1px 0px 2px; } /* ON 상태 */ .toggleBtn > div.on span { left: 51px; border-color: #919191 #ababab #979797 #2c5da2; -webkit-box-shadow: rgba(0, 37, 97, 0.5) -1px 0px 3px; } /*--------------------.toggleBtn > div span label--------------------*/ .toggleBtn > div span label { position: absolute; top: 3px; display: inline-block; width: 50px; text-align: center; font-size: 16px; font-family: Helvetica; font-weight: bold; } /* OFF 상태 */ .toggleBtn > div.off span label { left: 41px; color: #7f7f7f; text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; } /* ON 상태 */ .toggleBtn > div.on span label { left: -52px; color: #fff; text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0; } </style> .......................................................... <script> .......................................................... function toggleHandler(e) {   var ct = e.currentTarget;   var currentDiv = ct.getElementsByTagName("div")[0];   // className을 변경시켜 주는 것만으로 Transition에 의한 애니메이션이 실행된다.   if(!ct.swc) {     currentDiv.className = "on";     ct.label = "ON";   } else {     currentDiv.className = "off";     ct.label = "OFF";   }   getLabelElement(ct).firstChild.nodeValue = ct.label;   ct.swc = !ct.swc; } .......................................................... </script> .......................................................... <div class="toggleBtn">   <div class="off"><span><label></label></span></div> </div> ..........................................................

div에 class=“on”이 걸리면 켜지고 class=“off”가 걸리면 꺼지는 구조다. <리스트 10>의 예제에는 이미지가 전혀 사용되지 않았으며 border-radius를 사용해 둥근 모양의 사각버튼을 표현하고, css gradient를 이용해 iOS의 토글버튼과 비슷한 모양을 만들었다. 버튼에 표시되는 ON, OFF는 텍스트이며 text-shadow를 이용해 iOS 버튼의 텍스트와 비슷한 모양을 만들었다. 버튼이 가로방향으로 이동하는 애니메이션은 Transition에서 left 값을 바꿔주는 방법으로 재현했다. HTML 마크업에서 div에 걸려있는 class=“on”, class=“off” 값을 변경하면 초기 상태를 지정해 줄 수 있다. 역시 http://yooor.com/open/ms_may에서 스마트폰으로 테스트해 볼 수 있으며 전체 코드를 볼 수 있다.

이처럼 CSS3를 이용하면 이미지를 사용하지 않고도 미려하고 수정이 용이하며 유연한 GUI 요소들을 만들어 낼 수 있다. 최신 모바일 브라우저들은 경쟁하듯 앞 다퉈 CSS3를 적용하고 있으며 대다수의 사람들은 이미 CSS3를 멋지게 지원하는 스마트폰을 사용하고 있다. 망설이지 말고 우리의 모바일 웹사이트에 CSS3를 적용해 보자!

jQueryMobile로 시작하기
마소 지면을 통해 이미 jQueryMobile에 대한 소개는 충분히 이뤄졌다. 지금도 관련 연재가 진행되고 있으니 jQueryMobile로 개발할 때 쓸 만한 몇 가지를 살펴본다.

jQueryMobile로 다뤄 볼 예제는 개발자들의 오랜 친구이자 쉼터인 OKJsp의 jQuery Mobile 버전 모바일 웹이다(OKJsp 운영자가 OKJsp API 사용을 흔쾌히 허락했다). 전체 코드가 보고 싶다면 실제로 okjsp.pe.kr/jqm에서 운영 중이니 살펴볼 수 있다.

OKJsp는 게시판 위주의 개발자 커뮤니티다. OKJsp에서 모바일 웹의 역할은 게시판과 게시물, 게시 내용들을 보여주는 것이다. 우선 서버에 있는 내용들을 가지고 와서 UI를 그려 보았다.

<화면 8> OKJsp 게시판

<화면 9> 게시물

jQueryMobile <a> tag의 역할
JQueryMobile에서 <a> tag의 역할은 중요하다. <a> tag는 jQueryMobile이 매번 가로채고 판단한다.

- tag에  target 속성이 존재하는가?
- tag의 href 속성 값에 외부 링크 문자열(http 등)이 포함되어 있는가?
- tag에 [rel=’external’] 속성이 있는가?

우리는 jQueryMobile의 <a> tag가 어떻게 작동하는지를 알아 둘 필요가 있다. 일단 사용자가 링크를 클릭하면 jQueryMobile은 먼저 <a> tag의 href 속성을 가져오고 몇 가지 속성이 더 존재하는지 판단한다. target이 존재한다면 외부 링크로 판단하고 target의 속성대로 새 창을 띄운다. 외부 링크 문자열(http) 등이 존재하면 이것도 외부 링크로 판단하고 이동한다. 만약 target도 없고 관련 속성과 외부 링크 문자열이 존재하지 않는다면 비로소 내부 링크로 판단하고 Ajax를 통해 해당 페이지를 호출하고 추가한다.

OKJsp API로 개발할 때 약간의 문제가 있었다. 여러 가지 이유로 jQueryMobile이 내부 링크를 판단하는 기준이 하나 더 필요했고 실제 DB에서 가져오는 사용자 게시 내용 중에 <a> tag가 존재하고 현재 페이지에서 외부 링크로 이동하는 문제도 있었다. 간단히 게시 내용 중에 <a> tag를 찾아서 target 속성을 부여하면 해결되지만 좀 더 명확한 판단이 필요했다.

이런 문제가 발생할 일은 적으니 이러한 이슈가 있다는 정도만 알아두자.

따라서 target 속성에 추가적으로 JQM 속성 값을 추가했다. target=“JQM” 속성 값이 존재하면 jQueryMobile은 무조건 내부 링크로 판단하게 된다. 이 부분을 위해 우린 전혀 해가 되지 않게 작은 코드를 추가했다.

<리스트 11> 특수한 이슈 해결을 위해 명확한 JQM 링크 사용하기 $( "a" ).live( "click", function(event) {  var $this = $(this),  href = $this.attr( "href" ) || "#",  url = path.clean( href ),  isRelExternal = $this.is( "[rel='external']" ),  isEmbeddedPage = path.isEmbeddedPage( url ),  isExternal = path.isExternal( url ) || isRelExternal && !isEmbeddedPage,  target = $this.attr( "target" ),  hasTarget,  hasAjaxDisabled = $this.is( "[data-ajax='false']" );  if( target ) {   if( target == "JQM" ) {    hasTarget = false;   } else {    hasTarget = true;   }  } else {   hasTarget = true;  } …………………………………….

 

jQueryMobile에서 페이징
모바일 웹에서 페이징은 번호로 이동하는 일반적인 페이징보다 트위터와 같은 게시물 추가 삽입 방식이 모바일 웹에 더 적합하고 어울린다.

<리스트 12> 페이징 페이지 <li data-theme="c"> <a href="url.."> 제목.. <span class="ui-li-count">댓글개수.. </span></a> </li> <li data-theme="c"> <a href="url.."> 제목.. <span class="ui-li-count">댓글개수.. </span></a> </li> <li data-theme="c"> <a href="url.." id="btn_hasmore">Load More.</a> </li> ………………………………………………………………… 생략

<리스트 12>와 같은 listView에 링크 또는 버튼을 추가한다. 추가한 버튼은 <화면 10>과 같다.

<화면 10> 페이징 버튼

<화면 11> 버튼 미삭제 시

  
이제 페이징 버튼에 클릭 이벤트 시 Ajax로 다음 페이지를 가져와 추가하는 코드를 만들어 보자.

<리스트 13> 페이징 함수 $("#btn_hasmore").live("click", function (event) {     $.mobile.pageLoading(); // 페이지 로딩         var href = $(this).attr('href'); // 호출 url     var bbs = $(this).parents('[id*=listview_]'); // 추가할 리스트 id 값             $.get(href, function(data) {      $('.li_btn_hasmore').remove(); // 버튼 삭제  $(bbs).append(data); // 게시물 데이터 추가  $(bbs).listview('refresh'); // 게시물 새로 고침  $.mobile.pageLoading(true); // 페이지 로딩 제거     }); });

<리스트 13>을 살펴보자. 해당 선택자의 이벤트가 계속 살아있도록 live() 메소드를 사용한다. 이제 선택자에 클릭 이벤트가 발생하면 $.mobile.pageLoading(); 이벤트가 발생한다. 이 이벤트는 페이지가 로딩 중이라는 메시지를 띄워준다. 그리고 해당 링크의 href 속성 값을 가지고 와서 변수에 담는다. href의 속성 값이 우리가 호출할 다음 페이지의 주소가 되는 것이다.

여기서 주의할 점은 jQueryMobile은 호출한 많은 페이지를 계속 담아두고 있다는 것이다. 그래서 각각 고유의 id 값이 부여되어야 하기 때문에 여러 개의 게시판을 쓴다면 우린 어떤 id 값이 부여된 <ul> listview에 페이지를 추가할지 알아야 한다. 그래서 우리는 버튼을 감싸고 있는 부모 요소 중에 우리가 원하는 list view의 id 값을 찾아와야 한다. <리스트 13>에서 그 역할을 하는 것이 다섯 번째 라인이다. 버튼의 부모 요소 중 해당 id 값을 포함하고 있는 가장 근접한 <ul> listview에 접근했다.

호출할 주소 값과 추가할 id 값을 제대로 확인했다면 $.get() 메소드를 통해 해당 페이지를 가져온다. 일단 가져오기 전에 해당 버튼을 삭제하자. 삭제하지 않으면 <화면 11>과 같이 게시물 중간에 버튼이 존재하는 우스운 모습이 된다. 버튼을 제거했으면 가져온 게시물들을 append() 메소드로 추가하고 listview (‘refresh’) 해준 후에 모든 페이지가 완료되었으니 $.mobile. pageLoading(true);를 통해 페이지 로딩 메시지를 제거하면 페이징이 처리된다.

결국은 자바스크립트
자바스크립트 라이브러리를 이용한 개발은 쉽고 재미있지만 기초가 부족하면 어느 순간 한계에 부딪친다. jQuery가 아무리 쉽다고 해도 잘하기 위해선 결국 자바스크립트인 셈이고, 오히려 개발자들이 좌절하는 대부분의 이유는 자바스크립트가 아니라 CSS이다. 서버사이드 개발자라 해도 대다수 자바스크립트를 피할 수 없다. 평소에 기초적인 HTML과 CSS에 관심을 갖는 것이 자바스크립트를 잘 다룰 수 있는 좋은 방법이다.