IT/Web Dev | Posted by 철규님(최규철) 2011. 5. 10. 19:57

[jQuery Mobile] 2. Getting started - Hello world

이 글은 jQuery Mobile 공식 홈페이지(http://jquerymobile.com/)의 Docs and Demos를 기반으로 작성되었습니다.
작성일(2011/05/10) 기준 jQuery Mobile의 최종 버전은 jQuery Mobile 1.0 Alpha 4.1입니다.

2. Getting started - Hello world
< jQuery Mobile로 Web application 만들기 >
Written by Gyucheol Choi on 10 MAY 2011
모든 언어를 처음 접할때 작성하는 프로그램은 아마 "Hello world!"를 출력하는 프로그램일 것입니다. 물론 안드로이드 개발에 있어서는 프로젝트 생성 윈도우에서 next 버튼만 클릭하면 hello world를 출력하는 프로젝트를 생성해줘서, 새로운 언어로 새로운 환경에서 hello world를 띄워보는 흥미를 없애버리긴 했지만요. 이번 글에서는 jQuery Mobile을 설치(?)하고 Hello world를 출력하는 어플리케이션을 만들어볼려고 합니다.
jQuery Mobile 사용 하기
jQuery Mobile을 사용하는 방법은 두 가지가 있습니다. CDN(Content Delivery Network)에서 제공하는 자바스크립트(.js) 파일과 CSS(.css) 파일을 사용하는 방법이 있고, 소스 및 이미지를 다운로드 받아서 자신의 호스트 서버에 업로드 한 후 이 버전을 참고하는 방법이 있습니다. 각자의 호불호에 따라서 사용을 하시면 될 듯합니다. 제공되는 버전을 보면 Uncompressed 버전과 Minified 버전이 있는데, Minified 버전은 불필요한 개행이나 공백, 주석 등을 완전히 제거한 버전이고, Uncompressed 버전은 개행, 공백, 주석 등을 온전히 유지하여 디버깅을 가능하게 한 버전입니다. 때문에 실제 파일 크기를 보면 자바스크립트의 경우 130KB/19KB, CSS 파일의 경우 53KB/7KB 등으로 많은 차이가 나는 것을 알 수 있습니다. 실제적인 jQuery Mobile의 내부 구조를 살펴보시고 싶은 분은 Uncompressed 버전을 사용하시면 많은 도움이 될 것 같습니다.
이 글에서는 CDN에서 제공하는 Minified 버전의 자바스크립트 파일과 CSS 파일을 사용하는 방법을 알아보겠습니다.

jQuery Mobile을 사용하기 위해서는 CSS 파일과 jQuery Core 자바스크립트 파일, jQuery Mobile 자바스크립트 파일이 필요합니다. jQuery Mobiel 다운로드 사이트(http://jquerymobile.com/download/)를 참고해서, 'Copy-and-Paste Snippet'의 태그를 웹 페이지에 추가합니다.

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>헤더 타이틀</title> 5 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 6 <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 7 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 8 </head> 9 <body> 10 11 </body>

해당 HTML 파일이 HTML5를 기반으로 한 문서라는 것을 1번 라인에 명시하였습니다. 그리고 5, 6, 7번 라인에서 jQuery Mobile을 위한 CSS 파일, 자바스크립트 파일을 포함시킵니다. 이로써 jQuery Mobile에서 제공하는 모든 기능을 사용할 준비가 완료되었습니다. 이제 Hello world를 띄워보는 어플리케이션(이라고 하기도 뭐한 어떤 것)을 만들어 보겠습니다.
Hello world
jQuery Mobile에서는 화면의 구성 요소들을 div 태그로 구분을 하고 div 태그의 data-role 속성(attribute)을 명시함으로써 화면에서 어떤 역할을 할지 지정합니다. 이후는 jQuery Mobile 프레임워크가 모든 걸 알아서 합니다. 자세한 페이지 구조는 다음 글에서 설명을 하기로 하고 우선은 간단한 구조만 정의하고 예제를 볼까 합니다.

jQuery Mobile 프레임워크는 1개 이상의 page를 가지고, 하나의 page는 header, content, footer를 각각 가집니다. 예제로 작성할 Hello world 어플리케이션에서는 Header 부분에 "First App", Content 부분에 "Hello world!", footer 부분에 "jQuery Mobile"을 각각 나타내보겠습니다. 위의 설명대로 구성한 소스코드는 아래와 같습니다.

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jQuery Mobile Test</title> 5 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 6 <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 7 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 8 </head> 9 <body> 10 <div data-role="page"> 11 <div data-role="header"> 12 <h1>First App</h1> 13 </div> 14 15 <div data-role="content"> 16 <p>Hello World!</p> 17 </div> 18 <div data-role="footer"> 19 <h2>jQuery Mobile</h2> 20 </div> 21 </div> 22 </body>

위의 파일을 저장하고 원하는 브라우저에서 열어보면 아래와 같은 화면을 볼 수 있습니다.


Hello world - Theme
jQuery Mobile은 기본적으로 5가지 형태의 테마를 제공합니다. div 태그에 data-theme 속성에 값을 부여함으로써 각각의 테마를 적용할 수 있습니다. 테마는 특별한 id 없이 a, b, c, d, e의 값을 가집니다. 명시하지 않을 경우 a의 테마가 적용됩니다.
01234

테마 page 단위로 일괄적으로 적용할 수도 있으며, 필요에 따라 화면의 각 구성 요소에 서로 다른 테마를 적용할 수도 있습니다.




이로써 jQuery Mobile을 내 웹 어플리케이션에 적용하고, 이를 이용해서 Hello World를 출력하는 프로그램, 그리고 그 프로그램에 테마를 적용하는 것까지 해보았습니다. 간단한 예제지만 분석해볼만한 내용은 더 많은 것이라 생각됩니다. 지금은 잘 이해되지 않는 부분도 나중에 다시 한번 보신다면 더 잘 이해하고 더 많은 의미를 찾아낼 수 있지 않을까 생각합니다.

댓글을 달아 주세요

IT/Web Dev | Posted by 철규님(최규철) 2011. 5. 10. 12:18

[jQuery Mobile] 1. Overview of jQuery Mobile

이 글은 jQuery Mobile 공식 홈페이지(http://jquerymobile.com/)의 Docs and Demos를 기반으로 작성되었습니다.
작성일(2011/05/10) 기준 jQuery Mobile의 최종 버전은 jQuery Mobile 1.0 Alpha 4.1입니다.


1. Overview of jQuery Mobile
< jQuery Mobile로 Web application 만들기 >
Written by Gyucheol Choi on 10 MAY 2011
jQuery는 네이티브 어플리케이션과 유사하게 동작하는 웹 어플리케이션을 쉽게 작성할 수 있도록 도와주는 프레임워크입니다. jQuery에서 제공되는 자바 스크립트 라이브러리를 이용해 HTML 문서 생성, 이벤트 처리, 애니메이션 처리, AJAX 인터액션 등을 손쉽게 활용해 웹 어플리케이션을 작성할 수 있습니다.

jQuery Mobile은 모바일 환경에서 동작하는 웹 어플리케이션 개발에 최적화된 모바일 웹 개발 프레임워크 라고 볼 수 있습니다. jQuery를 이용해서 작성한 웹 어플리케이션도 모바일 환경에서 실행이 가능하지만, 모바일 기기의 특성에서 오는 제약사항을 고려하고자 한다면, jQuery Mobile의 선택이 더 올바를 것입니다.

이 글에서는 jQuery Mobile 공식 홈페이지(http://jquerymobile.com/)의 Docs and Demos를 참고로 해서 jQuery Mobile의 특징에 대해서 알아보려 합니다.
Intro to jQuery Mobile
jQuery Mobile은 하나의 어플리케이션이 어떤 스마트폰이나 태블릿PC의 모바일 웹 브라우저에서도 일관성 있는 UI를 가지도록 하는 자바스크립트 라이브러리입니다. 때문에 마이너한 일부 브라우저를 제외하면 jQuery Mobile로 작성된 어플리케이션은 동일한 화면 구성, 또는 사용자의 편의성을 크게 해치지 않는 한도 내에서 적절히 최적화된 화면 구성을 가지게 됩니다. 웹 '어플리케이션'을 목표로 삼은만큼 jQuery Mobile로 작성된 '웹' 어플리케이션은 일반 'PC용' 어플리케이션과 꽤나 비슷한 수준의 사용환경 또한 제공합니다.


다양한 사용 환경에 적절하게 대응하기 위해서 jQurey Mobile은 깔끔하게 정리된 시맨틱 HTML(clean, sementic HTML)을 사용합니다. 장치에서는 이 HTML 파일을 읽어 CSS와 jQuery Mobile 적용 과정을 거쳐서 풍부한(rich and interactive) 사용자 경험을 가진 어플리케이션을 생성합니다.
Key Features
  • jQuery 개발과의 일관성 유지 및 jQuery 개발 유경험자의 쉽고 빠른 적응을 위해 jQuery core를 기반으로 함
  • HTML을 지원하는 대부분의 주요 모바일 플랫폼에서 호환 가능
    - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo 등
  • 성능(속도)를 위해 코드 사이즈를 최소화하고 이미지 사용을 줄임
  • 빠른 개발과 스크립트 사용 최소화를 위해 HTML5 마크업 중심으로 각 페이지와 동작에 대한 설정을 함
  • 가능한한 모든 환경에서 핵심 내용과 기능을 정확하게 전달하고, 최신 플랫폼에서는 일반 어플리케이션과 동일한 사용 환경 제공을 위해 점진적 개선(Progressive enhancement) 방법을 사용
  • 페이지 내의 모든 jQuery Mobile 위젯을 자동으로 초기화하기 위해 HTML5의 data-role 속성을 이용함
  • 다른 보조적인 기능 지원을 위해 다양한 부가 요소가 포함되어 있음
  • 터치, 마우스, 커서를 사용하는 입력 등을 단순한 API로 간단하게 지원하기 위해 새로운 이벤트 사용
  • 터치에 최적화되거나 테마 변경이 가능한 컨트롤 등을 위해 새로운 플러그인 지원
  • 사용 환경을 손쉽게 변경할 수 있도록 테마 기능 지원

Supported platforms


Supported platforms in Alpha 4
Alpha 4가 릴리즈되면서, Windows Phone 7의 지원이 추가되었습니다. 다음의 플랫폼에서는 jQuery Mobile의 기능이 완벽하게 지원되고, 처음 의도한 화면의 구성이 흐트러짐 없이 표현됩니다.

  • Apple iOS 3.1-4.2
  • Android 1.6-2.3
  • Blackberry 6
  • Windows Phone 7
  • Palm WebOS 1.4
  • Opera Mobile 10.1 (Android)
  • Opera Mini 5.02 (Android)
  • Firefox Mobile beta (Android)
Target platform additions for beta
다음 릴리즈에서는 Blackberry 5, Nokia/Symbian을 지원할 계획이라고 합니다. 삼성의 Bada와 MeeGo는 지원하는 폰을 확보하는 대로 테스트 후 공식 지원 리스트에 업데이트 할 예정이라고 합니다. 또한 jQuery Mobile은 jQuery core를 기반으로 하고 있기 때문에 Firefox, Chrome, Safari, Internet Explorer, Opera 등과 같은 PC용 웹 브라우저의 최신 버전에서도 정상적으로 동작합니다.

댓글을 달아 주세요

IT/Web Dev | Posted by 철규님(최규철) 2011. 2. 10. 00:55

웹 어플리케이션 프레임워크 - Sencha Touch


요즘은 OS/플랫폼의 춘추전국시대라 해도 과언이 아닐 정도다. 모바일 플랫폼만 해도 안드로이드, iOS, Windows Mobile, Bada, SLP(LiMo)등이 사용되고 있고, 윈도의 영향력이 막강한 PC OS에도 Chrome OS가 도전장을 내밀고 있는 형국이다.

사용 환경이 늘어나고 경쟁을 통해 많은 발전을 이뤄내고 있어 사용자들에게는 좋은 소식일지는 모르나, 어플리케이션 제작자 입장에서는 모든 OS/플랫폼을 지원해야되는 또는 일부만 지원하고 나머지는 포기해야하는 부담이 생기게 마련이다. 당연히 한번의 개발로 모든 플랫폼/OS에서 사용할 수 있는 어플리케이션 제작에 대한 욕구가 나타나는데 웹 어플리케이션이 한 가지의 답이 될 수 있을 것 같다.

하지만 아직 웹 어플리케이션 프레임워크 시장은 활성화되지 않아 주도권을 잡은 프레임워크는 없는 상태이고 몇개의 프레임워크가 주도권 다툼을 하고 있는 상태이다. 하지만 기본적으로 대부분 HTML5, Javascript 등을 기반으로 하고 있기 때문에 어플리케이션이 기존처럼 특정 환경에서만 동작하는 문제는 없을 것 같다.

대표적인 웹 어플리케이션 프레임워크인 Sencha Touch에 대해서 간략히 정리해볼까 한다.


Sencha Touch

일본산 녹차의 이름인 Sencha는 ExtJS를 기반으로 jQTouch, Raphael이 결합된 프레임워크이다. 아직 모든 플랫폼을 지원하지는 않고 iOS와 안드로이드만을 지원하는데, 플랫폼 간의 이식이 어렵지 않으므로 관련 시장만 활성화된다면 다른 플랫폼들도 지원할 것으로 예상된다.

Sencha Touch 프레임워크에 포함된 요소들을 간단하게 알아보면 다음과 같다.

  • ExtJS는 대화명 웹 어플리케이션 제작을 위한 자바스크립트 라이브러리로 AJAX, DHTML, DOM 등을 사용한다. 
  • jQTouch는 오픈 소스 jQuery 플러그인의 하나로 HTML, CSS, Javascript 등을 사용하여 Touch UI를 강화하는 기능을 한다.
  • Raphael은 SVG(Scalable Vector Graphic, 2D 벡터 그래픽 지원을 위한 XML 기반의 파일 형식)를 지원한다.


자료를 주고 받는 방식으로는 key와 Value 구조를 가진 JSON(JavaScript Object Notation)을 사용하는데 다음 예제를 보면 쉽게 이해할 수 있다.


var person = { name : 홍길동, tel : { office : 02-123-4567, mobile : 010-1234-5678 } }
alert( person .name ); // 홍길동 출력
alert( person .tel.mobile ); // 010-1234-5678 출력

Sencha Touch를 사용하기 위해서는 아래 URL에서 관련 파일을 다운로드 받는다.
http://www.sencha.com/products/touch/download/
다운로드 받은 파일의 압축을 풀고 HTML 파일을 만들어 sencha-touch-debug.js 파일과 sencha-touch-debug.css 파일을 포함 시키는 것으로 개발준비는 끝난다.

'Hello world!'를 출력시키는 예제는 다음과 같다.

helloworld.html

<!DOCUMENT TYPE=html>
<HTML>
<TITLE>Sencha Touch - Hello World!</TITLE>
<META CHARSET='utf-8'>
<META NAME='viewport' CONTENT='width=device-width, initial-scale=1.0'>
<LINK REL='stylesheet' HREF='/sencha-touch-1.0.1a/sencha-touch-debug.css' TYPE='text/css'>
<SCRIPT SRC='/sencha-touch-1.0.1a/sencha-touch-debug.js' TYPE="text/javascript"></SCRIPT>
<SCRIPT TYPE='text/javascript'>
Ext.setup({
   onReady: function() {
      new Ext.Panel({
         fullscreen: true,
         layout: 'fit',
         items: [
            { html: "Hello world!"}
         ]
      });
   }
});
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

결과 보러 가기 <IE8에서는 정상적으로 보이지 않음.>

결과 화면




 

관련 페이지

Sencha Touch - http://www.sencha.com
jQTouch - http://www.jqtouch.com
Raphael - http://www.raphaeljs.com



 

댓글을 달아 주세요

  1.  댓글주소  수정/삭제  댓글쓰기 Cynthia. 2011.05.12 15:53 신고

    정말 감사합니다.
    한번 궁금해서 시도해보고 있었는데 저같은 아무것도 모르는 사람한태 꼭 필요한 글인거 같네요.