정보공간_1

[2기 부산 노형식] JQM를 이용한 Mobile PR Web App 제작 본문

IT 놀이터/Elite Member Tech & Talk

[2기 부산 노형식] JQM를 이용한 Mobile PR Web App 제작

알 수 없는 사용자 2012. 8. 10. 18:00

1. jQuery Mobile가 뭔가요? 

  그 동안 기존의 PC 브라우져 위주인 HTML 구조 언어 아래 모바일 페이지를 구현하기 위해서는 여러가지 신경 쓸 부분이 많았습니다. 특정 기기의 크기, 해상도 등 직접 기기를 통해 테스트 작업을 많이 거치곤 했었죠. 더욱이 요즘에는 스마트폰, 태블릿PC등 다양한 모바일 기기들이 등장하고  Mobile OS 별 파편화가 진행 되면서 이제는 사실상 이런 테스트가 무의미 해졌습니다. 그래서 등장한 것이 jQuery Mobile Framework!! jQuery의 공식 홈페이지에 있는 "Do less, Do More" 이라는 키워드 처럼 모바일페이지, 웹앱을 손쉽게 만들어 주는 프레임워크 입니다. 게다가 특별히 CSS 작업을 하지 않아도 예쁘게 나오는 UI와 엘리멘트들, 그리고 다양한 모바일 OS에서 잘 작동하는 스마트함 까지 갖추었기에 큰 인기를 끌고 있습니다.

< 예야~ 심비안은 왜 놔두고 가니? > 



2. jQuery Mobile 설치 하기

   그럼 이제 직접 jQuery Mobile Framework를 쓰기 위해서 설치 해보도록 하겠습니다. JQM(jQuery moblie)은 javascript JS 파일로 구성되어 있기 때문에 별도의 설치를 거치지 않고 <HTML>의 <head> 태그 부분에 link를 하는 방식으로 사용 할 수 있습니다. 


가. jQuery Moblie 사이트 접속 후 Download 메뉴 클릭


※ 접속 URL: http://jquerymobile.com



나. js 파일 및 css파일들의 링크를 복사 합니다.

   위의 방식은 jQuery mobile 사이트에서 직접 JS파일을 링크하는 방식으로 추천하고 있는 방식이지만 자신의 서버에 직접 js파일과 css를 포함하고 싶으시다면 아래의 zip file를 다운로드하셔서 자신의 웹서버의 url로 수정해 주시면 됩니다.


다. HTML 태그 중 Head 부분에 붙여 넣기


코드가 잘 보이나요?

   이로써 여러분의 HTML 파일은 JQM 를 쓸 준비를 모두 마쳤습니다 간단하죠? :D


3. jQuery Mobile 사용하기

   그럼 이제 본격적으로 웹앱 페이지를 한번 웹서버에 올려 구동 시켜 보도록 하겠습니다. 기본 템플릿은 다음 소스와 같습니다. 

<!DOCTYPE html>
<html>
 <head>
<meta charset="UTF-8">
<title>My PR</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
 <body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>내 소개입니다</h1>
</div>
<div data-role="content">
<p>Hello world</p>
</div>
<div data-role="footer">
<h1>By BSSM</h1>
</div>
</div>
 </body>
</html>



이 소스 코드로 실행시키면 다음과 같이 나오게 됩니다. 



  아직은 아주 밋밋하게 볼품 없네요. 그럼 복잡하게 CSS를 쓰지 않고 JQM의 Theme 기능을 한번 이용해 보도록 하겠습니다. 위의 소스코드에서 header, content, footer 의 div 에 date-theme="b" 라고 추가로 옵션을 지정해 줍시다.



<각 섹션 별 DIV에 data-theme 옵션을 지정한 모습>


Surprise! 

  시커먼 기본 UI가 깔끔한 스타일의 테마로 적용 되었습니다. "b" 대신에 a~e 까지의 문자를 입력하면 개인 기호에 따라 다른 테마 이용이 가능합니다.



4. 내 PR 페이지 꾸미기 

  JQM은 다음 그림과 같은 구조로 멀티 페이지가 구성되어 있습니다. 기존의 HTML이 <A> 태그를 이용해서 HTML 문서간 연결로 이루어 졌다면 JQM은 <A> 태그가 아닌 기존의 책갈피로 쓰였던 #링크를 통해 각 DIV로 나누어진 Page 간의 연결로 주로 구성됩니다. 즉 1개의 HTML 파일 안에서 Page 로 나뉜 <DIV>를 마치 페이지가 연결 된 것 처럼 보이게 됩니다. 



  그럼 JQM을 이용해서 멀티 페이지를 구현한 소스를 한번 살펴 볼까요? 

<!DOCTYPE html>
<html>
 <head>
<meta charset="UTF-8">
<title>My PR</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
 </head>

 <body>
<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
<h1>My PR Page</h1>
</div>
<div data-role="content" data-theme="c">
                </div>
<div data-role="footer" data-theme="b">
<h1>By BSSM</h1>
</div>
</div>

 <div data-role="page" id="page2">

<div data-role="header" data-theme="b">
<h1>My PR Page</h1>
</div>
<div data-role="content" data-theme="c">
                </div>
<div data-role="footer" data-theme="b">
<h1>By BSSM</h1>
</div>
</div>

 </body>

</html>


  위 소스를 보시면 빨간 색으로 표시된 부분과 파란색으로 표시된 부분으로 DIV가 나누어 진것을 보실 수 있습니다. 이렇듯 data-role 타입이 page인 div에 id값을 부여하면 가장 첫 page가 홈이 되고 나머지는 보이지 않게 됩니다. 이 나누어진 DIV들은 A태그를 통해서 이동이 가능하게 됩니다.

각 DIV를 이동시키는 기본적인 방법은 다음과 같습니다.

<a href="#[page의ID값]">링크에 들어갈 내용</a>


그 밖에도 페이지 이동을 위해서 다음과 같은 엘리먼트를 사용 가능합니다.


위에서 부터 기본 A태그, Button 옵션, Listview 입니다. 소스는 아래와 같습니다.


<a href="#page2">이동 시키는 링크[data-role 기본값]</a>
<a href="#page2" data-role="button">이동 시키는 링크[data-role 버튼]</a>
<ul data-role="listview" data-inset="true">
       <li><a href="#page2" >이동 시키는 링크[data-role listview]</a></li>
</ul>

이렇게 JQM은 간단한 코드만 가지고도 다양한 엘리먼트들을 쉽게 이용 할 수 있습니다. 더욱 많은 엘리먼트를 이용하고 싶으시면 jQueryMobile.com 의 DEMOS(http://jquerymobile.com/demos) 사이트를 이용 하시면 됩니다. 퍼오는 방법도 원하는 DEMO를 찾으신 후 소스 보기를 하여 가져오시면 곧 바로 적용 할 수 있습니다.



5. JQM으로 꾸며본 PR 페이지

JQM을 이용하여 한번 PR 페이지를 꾸며 보았습니다. JQM은 HTML5 기반으로 구현되어 있으므로 개발 하실 때 참고하셔서 꾸며주시면 됩니다. 


다음은 JQM를 이용해서 단 100줄로 구현된 PR 페이지입니다.


1. 메인 페이지 (각 페이지로 이동가능한 listview 제공)


2. 프로필 페이지


3. 포트폴리오 페이지


4. 연락처 페이지


위의 PR페이지 소스는 다음과 같습니다. 

<!DOCTYPE html>
<html>
 <head>
<meta charset="UTF-8">
<title>My PR</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
 </head>
 <body>
<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
<h1>My PR Page</h1>
</div>
<div data-role="content" data-theme="c">
<h5 style="color:#aaaaaa">저의 PR페이지에 오신것을 환영합니다. 이 웹앱은 저의 소개 모바일 페이지 형태로 이용중입니다. 많은 관심 부탁드립니다.</h5>
<ul data-role="listview" data-inset="true">
<li><a href="#page2" data-transition="slide" data-icon="check"><h3>My profile</h3><p>저의 간단한 소개와 프로필을 모아 봤습니다.</p></a>
<li><a href="#page3" data-transition="slide" data-icon="check"><h3>Portfolio</h3><p>개인 포트 폴리오 소개입니다.</p></a>
<li><a href="#page4" data-transition="slide" data-icon="check"><h3>Contract</h3><p>연락처 및 이메일입니다.</p></a>
</ul>

</div>
<div data-role="footer" data-theme="b">
<h1>By BSSM</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<a href="#page1" data-icon="back" data-rel="back">뒤로</a>
<h1>나의 소개</h1>
</div>
<div data-role="content" data-theme="c">
<h1>Nice to meet you.</h1>
<img align="left" src="http://upload.wikimedia.org/wikipedia/en/thumb/e/ed/Bart_Simpson.svg/200px-Bart_Simpson.svg.png">
<h4>My profile</h4>
<h3>Name : Busan, Noh</h3>
<h3>Country : Korea</h3>
<h3>Height : 180cm</h3>
<h3>Weight : 70kg</h3>
<h3>Like : Programing</h3>
<h3>Hate : Fish, Candy</h3>
</div>
<div data-role="footer" data-theme="b">
<h1>By BSSM</h1>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header" data-theme="b">
<a href="#page1" data-icon="back" data-rel="back">뒤로</a>
<h1>나의 소개</h1>
</div>
<div data-role="content" data-theme="c">
<h1>My Portfolio</h1>
<ul data-role="listview">
<li>
<img src="http://jquerymobile.com/demos/1.2.0-pre/docs/lists/images/album-bb.jpg" />
<h3>페이스북 API를 이용한 채팅 프로그램</h3>
<p>facebook 에서 제공하는 api를 통해 채팅 프로그램을 구현</p>
</li>
<li>
<img src="http://jquerymobile.com/demos/1.2.0-pre/docs/lists/images/album-hc.jpg" />

<h3>Twitter 계정 크롤러</h3>
<p>특정인들의 트윗을 자동으로 가져오는 프로그램입니다.</p>
</li>
<li>
<img src="http://jquerymobile.com/demos/1.2.0-pre/docs/lists/images/album-p.jpg" />
<h3>jQuery Framework를 이용한 PR페이지</h3>
<p>jQuery를 이용해서 간단히 구현한 웹앱</p>
</li>
<li>

<img src="http://jquerymobile.com/demos/1.2.0-pre/docs/lists/images/album-ok.jpg" />

<h3>관심사 기반의 새로운 SNS</h3>
<p>관심 키워드 매칭 알고리즘 기반으로 구현</p>
</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h1>By BSSM</h1>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header" data-theme="b">
<a href="#page1" data-icon="back" data-rel="back">뒤로</a>
<h1>나의 소개</h1>
</div>
<div data-role="content" data-theme="c">
<h1>My contract</h1>
<p>Email : bsnoh@gmail.com</p>
<p>Phone : 010-0000-0000</p>
<p>Address : Busan,Korea</p>
</div>
<div data-role="footer" data-theme="b">
<h1>By BSSM</h1>
</div>
</div>
 </body>
</html>


제 갤럭시노트에서도 정상적으로 보여지네요~^^


  이제 지금 포스팅을 보고 계시는 여러분들도 손쉽게 JQM를 이용해서 모바일 페이지를 제작 하실 수 있으실 것이라 생각이 듭니다. 저는 누구나 손쉽게 웹앱을 제작 할 수 있게 도와주는 jQuery Mobile의 매력을 이 글을 통해 조금이나마 느끼셨으면 좋겠습니다. 다음 달에도 좀 더 흥미롭게 재미 있는 주제로 포스팅 하도록 하겠습니다. 감사합니다.






'IT 놀이터 > Elite Member Tech & Talk' 카테고리의 다른 글

[2기 강북 강정인] 스마트폰 환경에서의 SSL Strip 공격  (0) 2012.08.18
[2기 대전 김호원]Concerto MCU 1. 개발환경 구축  (0) 2012.08.17
[2기 강남 이인표]증강현실의 이해 I  (0) 2012.08.14
[2기 광주 박정태]C language - type cast  (0) 2012.08.14
[2기 부산 이환승]Google App Engine 시작하기  (2) 2012.08.12
'IT 놀이터/Elite Member Tech & Talk' Related Articles more