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 신고

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