첫 번째 모바일 앱

이제 본격적으로 앱에 기능을 추가해 볼 차례입니다. 모바일 앱의 UI를 조금 더 편하게 꾸미기 위해 jQuery Mobile 라이브러리를 사용하기로 했습니다. jQuery Mobile과 비슷한 모바일 프레임워크로는 Sencha Touch가 있는데, HTML로 UI를 꾸미는 jQuery Mobile과는 달리 Sencha Touch는 자바스크립트로 UI를 만들어야 해서 후보에서 제외했습니다. 또한 jQuery Mobile에는 직접 시각적으로 자신의 테마를 꾸밀 수 있는 ThemeRoller가 제공되기 때문입니다.

jQuery Mobile 사용

jQuery 모바일을 사용하려면 먼저 jQuery 라이브러리 파일을 공식 홈페이지에서 다운로드 받아야 합니다.

이제 jQuery 모바일 라이브러리를 다운로드 받습니다. 자바스크립트, CSS, 몇 개의 이미지도 필요하므로 ZIP 압축 파일을 다운로드 받는게 편리합니다. 압축 파일 안에 있던 images 폴더와 자바스크립트와 CSS 파일을 index.html 파일이 있는 www로 복사한 후 index.html 파일을 수정해 필요한 파일을 다음과 같이 링크합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>PhoneGap</title>
  <link type="text/css" rel="stylesheet" href="jquery.mobile.structure-1.0.min.css" />
  <link type="text/css" rel="stylesheet" href="jquery.mobile-1.0.min.css" />
  <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
  <script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0.min.js"></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

h1 태그를 div로 둘러싸고 그 div에 data-role="header" 속성을 추가해 헤더처럼 만듭니다.

<div data-role="header"><h1>Hello World</h1></div>

이 아래에 콘텐츠 영역을 추가합니다. 콘텐츠 영역은 div 태그로 작성하고 data-role="content" 속성을 추가하면 됩니다. 여기에 약간의 콘텐츠를 추가하겠습니다. 마지막으로 완성된 HTML 문서는 다음과 같습니다. (body 영역만 표시했습니다)

<div data-role="header"><h1>Hello World</h1></div>
<div data-role="content">
  <p>Content Area</p>
  <p><a href="http://mygony.com" data-role="button">Go to mygony.com</a></p>
</div>

그리고 이 콘텐츠를 실행하면 다음과 같은 화면을 볼 수 있습니다.

여기서 버튼 모양의 링크를 클릭하면 웹 브라우저가 실행되면서 해당 링크로 이동하게 됩니다. 하지만 아이폰에서는 의도한 대로 동작하지 않습니다. 아이폰에서 같은 콘텐츠로 앱을 만들고 링크를 클릭하면 링크가 아무런 응답도 하지 않습니다. 아이폰 앱에는 허용할 외부 호스트를 입력하는 옵션이 있고, 이 옵션의 기본값이 "없음"이기 때문입니다. 아이폰 앱에서 외부 호스트를 허용하려면 PhoneGap.plist 파일을 열고 ExternalHosts 옵션에 허용할 외부 호스트를 입력하면 됩니다. 호스트 이름에는 http:// 또는 https:// 를 생략합니다.

<key>ExternalHosts</key>
<array>
  <string>mygony.com</string>
  <string>naver.com</string>
</array>

만약 모든 호스트를 허용하고 싶으면 * 를 다음과 같이 추가합니다.

<key>ExternalHosts</key>
<array>
  <string>*</string>
</array>

또 하나 주의할 점이 있습니다. 아이폰에서는 target을 따로 주지 않으면 사파리를 띄우지 않고 WebView에서 바로 링크된 콘텐츠를 표시합니다. 다시 말해 나중에 앱으로 돌아올 방법이 없어진다는 뜻입니다. ^^;; 외부 콘텐츠를 띄우는 링크라면 반드시 target="_blank" 속성을 추가해주셔야 합니다.
[adsense]

데이터 불러오기

이제는 데이터를 불러와서 리스트로 표현해보도록 하겠습니다. 먼저 페이지를 jQuery에 맞게 조금 더 다듬고 데이터를 불러올 때 사용할 버튼을 하나 더 추가하겠습니다.

<div data-role="page">
  <div data-role="header"><h1>Hello World</h1></div>
  <div data-role="content">
    <p>Content Area</p>
    <p><a href="http://mygony.com" target="_blank" data-role="button">Go to mygony.com</a></p>
    <p><a href="http://mygony.com/rss" id="loadData" data-role="button">Load from mygony.com</a></p>
  </div>
</div>

콘텐츠를 더 잘 표현하기 위해 <head> 태그 안에도 두 줄을 더 추가했습니다.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

새로 수정한 페이지를 다시 열어보면 다음과 같이 보입니다.

이제 여기에 다음과 같은 스크립트를 추가합니다.

jQuery(function($){
  $('#loadData').click(function(){
    var $this = $(this);

    $.ajax({
      url : $this.attr('href'),
      dataType : 'XML',
      success : function(data){
        // 항목 가져오기
        var $items = $(data).find('channel > item');
        var $ul = $('<ul>').data('role', 'listview');

        for(var i=0,len=$items.length; i < len; i++) {
          $('<li>').text($items.eq(i).find('> title').text()).appendTo($ul);
        }

        $ul.appendTo(':jqmData(role=content)').listview();
      }
    });

    return false;
  });
});

갑자기 코드가 툭 튀어나와서 당황스러울 수 있을 것 같습니다. ^^;; 대부분은 jQuery를 아시는 분이라면 알만한 코드라 따로 설명드리지는 않겠습니다. 일단 목록으로 사용할 <ul> 태그를 만들고 여기에 data-role="listview" 속성을 추가했습니다.

그 뒤에 Ajax를 통해 href 속성에 저장된 URL에 데이터를 요청합니다. 데이터를 정상적으로 가져오면 channel > item > title 태그의 텍스트 데이터를 추출해 <li> 태그로 만들어 아까 만든 <ul> 태그에 추가합니다. 이제 <ul> 태그를 콘텐츠 영역에 추가한 후 jQuery Mobile에서 이를 목록 형태로 만들 수 있도록 listview() 메소드를 실행하면 끝입니다.

이제 앱을 다시 실행한 후 Load 버튼을 클릭하면 다음과 같은 화면을 볼 수 있습니다. 아직은 예쁘지 않네요. ^^;;

to be continued...

코드쓰는사람