반응형
안녕하세요 리칼입니다.^^ 많이 기다리셨죠? 네? 응? 아닌가..쿨럭;;
무튼 너무 늦게 올린것 같아 죄송합니다. 저도 현업과 같이 하려다 보니...시간이
많지 않은건 사실이네요 ㅎㅎ 그래도 조금씩 진행 해보일테니 많은 관심 부탁드립니다.
자! 시작 하겠습니다.
1-1. Sencha Touch 소개 Sencha Touch는 모바일 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크입니다. 기존 데스크톱 기반 자바스크립트 프레임워크인 ExtJS개발사에서 모바일 시대에 부응하고자 새롭게 내놓은 제품이며, 자바스크립트, CSS, HTML 등 순수 웹 기술만으로 네이티브 룩앤필을 실현 할수 있게 해줍답니다.^0^ Sencha Touch는 ExtJS를 기반으로 하고 있어서 ExtJS의 API구조와 문법 체계를 그대로 계승하며, 여기에 모바일에 최적화된 기능들이 추가되었습니다.
소개는 이정도입니다. 제가 웹앱을 만들기 위해 지금 나온 프레임웍을 써본결과 Sencha Touch가 웹앱에는 제일 적격이라는 판단이 되어 Sencha Touch로 결정하게 된것입니다. 하지만....ㅠㅠ 젤 어렵더군요... 익숙하지 않은 문법,,,손이 잘안가져요...하지만 방대한 API등 기술적인 면을 보았을때 Sencha Touch만한 것이 없어서 공부중이랍니다.
Sencha Touch 공십 웹사이트: http://www.sencha.com
저사이트에서 Sencha Touch에 관한걸 얻을 수 있습니다. 라이브러리 및 예제등을 볼수 있으므로 많이 참고를 하게 될것입니다.
Sencha Touch 기술을 이용한 모바일 웹으로는 멜론사이트가 있겠습니다. 현재는 테블릿기기에만 적용이 되어서 일반 스마트폰 및 PC브라우저에서는 볼수가 없고 갤럭시탭10.1 및 아이패드에서 볼수 있답니다.
Sencha Touch가 적용된 멜론 사이트: http://t.melon.com
 정말 깔끔하고 이쁘지 않나요? ㅎㅎ
|
1-2. Sencha Touch 특징
방대하고 체계적인 API, 스크립트 기반, HTML5 & CSS 지원, 향상된 터치 이벤트, 폰과 태블릿 기기를 위한 프레임 워크, 높은 자유도, 모바일에 최적화된 기능 정도가 되겠습니다. 웹앱을 만들기 위해 적격인듯 하네요 ㅎㅎ |
1-3. 라이선스
최초 Sencha Touch는 유료 라이선스로 출발하였으나 2010년 11월경 무료로 라이선스 정책이 바뀌었습니다.
Sencha Touch 라이선스는 기본적으로 무료로 보면되지만 자세히 따져보면 다음과 같이 세가지 형태로 구분이 되어있네요
Commercial Software License: 애플리케이션 개발자를 위한 정책으로 소유권을 가진 독자적인 애플리케이션을 만들 때 적용 할 수 있다. 소스코드의 공유와 배포를 하지 않아도 되며 개발자에게 무료로 제공되는 라이선스다.
Open Source License: 역시 애플리케이션 개발자를 위한 정책으로 GNU GPL 라이선스 v3와 호환되는 오픈소스 애플리케이션을 개발 할 경우 무료로 사용할 수 있는 라이선스다. GPLv3의 복잡한 정책 중 가장 중요한 것은 다른 사람들이 필요에 의해 수정할 수 있게 애플리케이션 소스를 공유해야 한다는 것이다.
Commercial OEM License: OEM 사용자를 위한 정책으로 Sencha Touch를 이용해 자신만의 상업적인 SDK를 개발하거나 모바일 애플리케이션 저작 도구를 만드는 경우 적용되는 라이선스다. 유료 라이선스 정책이며 이런 유형의 사용 형태가 다양하므로 각 사례에 맞게 정책이 조정될수 있다.
이렇게 세가지가 있으니 잘 선택해서 쓰셔야겠쬬? 모두 무료는 아니란점 감안하셔야 할것 같네요.
|
1-4. 지원기기
Sencha Touch는 터치 기반의 최신 모바일 기기에서 동작 되며 애플IOS와 구글 안드로이드 기반의 모바일 기기에서도 안정적인 동작을 보장합니다.^^ 블랙베리터치도 지원을 한다네요 와우~^^ 대충 센차터치에 대해서는 이정도만 알아보고 이제 시작해볼까요?ㅎㅎ
|
2-1 개발환경 구성
Sencha Touch를 처음 시작하기 위해서는 라이브러리를 다운로드 해야 합니다. Sencha Touch는 다른 프레임워크와 마찬가지로 별도의 프로그램 설치과정이 필요하지가 않고 웹 리소스(자바스크립트, CSS, HTML등)만으로 구성되어 있어 라이브러리 파일을 내려 받기만 하면 됩니다.
Sencha Touch 다운로드 : http://www.sencha.com/products/touch/download
저 주소에서 다운을 라이브러리를 다운을 받으면 됩니다. 개발도구로는 자신에게 가장 익숙한 편집기를 사용하면 됩니다. 현재 저같은 경우는 웹앱을 만드는것이 목적이기 때문에 Appspresso라는 프레임 워크를 사용합니다. 앱스프레소는 웹 기술로 개발한 소스를 각 모바일 플랫폼별 런타임으로 감싸 네이티브 앱으로 빌드하는 하이브리드 방식의 크로스 플랫폼 모바일 프레임워크입니다. 앱스프레소는 이클립스에 플러그인이 적용되어 나오기 때문에 전 이클립스를 통해서 개발을 하고 있습니다. ^^ 앱스프레스 외에도 폰갭이나 티타늄같은 크로스 플랫폼이 있기에 입맛에 따라 사용하시면 될듯합니다.
앱스프레소 URL: http://appspresso.com
|
2-2 Sench Touch구성
자 그럼 다운을 받으셨으면
 [그림 1.1] 이런 형태로 파일이 존재할 것입니다. 헐.. 뭔파일이 이렇게 많지? 하지만 저기에서 모든걸 사용하는게 아니랍니다ㅎㅎ 저희가 쓸 파일은 sencha-touch.js, sencha-touch.css 이 두가지 파일이니까요 ㅎㅎ 간단하게 폴더및 파일에 대해 알아볼까요? sencha-touch.js
파일은 저기 위 [그림 1.1]에서 보이듯이 루트 디렉토리 안에 있습니다. sencha-touch.js은 Sencha Touch 코어가 구현된 자바스크립트 파일입니다. 이 파일은 핵심 라이브러리로서 모든 애플리케이션에서 반드시 참조해야 합니다. 이 파일은 용량을 최소화 한 파일이며 개발 시점에는 원활한 디버깅을 위해 sencha-touch-debug.js파일을 참조하는것이 좋을 것인데..저도 아직은 이파일로 해보진 않았습니다.
sencha-touch.css
파일은 애플리케이션의 외형을 정의하는 CSs파일입니다 이 파일은 resources/css폴더에 존재합니다.
doc폴더
Sencha Touch API Documentation 즉 API 설명서를 그대로 옮겨 놓은 것입니다. 다음의 Sencha사이트에서도 동일한 내용이 제공됩니다.
Sencha Touch API Documentation: http://dev.sencha.com/deploy/touch/docs/
앞으로 자주 보게 될 url이니 알아두시기 바랍니다. ㅠㅠ 저도 자료가 없어서 매일 보고 있습니다.. 원래 api를 제대로 알아야 모든 프로그램을 잘 할 수있는거 아시죠?ㅎㅎ
examples 폴더
Sencha Touch의 기본적인 예제를 모아둔 폴더입니다. 저도 정말 많은 도움을 얻었습니다. index.html을 실행하면 전체 예제를 볼수 있습니다.
이 예제또한 Sencha사이트에서 제공됩니다.
Sencha Touch Examples: http://dev.sencha.com/deploy/touch/examples/
자 대충 기본적인건 알아봤으니 우리 얼른 Hellow World를 찍어보자구욧!!
|
2-2 Hello World로 시작하기
누구나 프로그램 시작을 하면 헬로우 월드로 시작하시죠? Sencha Touch도 예외는 아닙니다. ㅎㅎ
Sencha Touch 애플리케이션은 기본적으로 다음과 같은 3가지 요소로 구성됩니다.
Sencha Touch필수 라이브러리 : sencha-touch.css와 sencha-toucj.js
HTML 문서 : 실제 웹페이지를 정의 하는 HTML문서입니다.
애플리케이션 스크립트: 기본적으로 Sencha Touch는 웹문서에 표현되는 거의 모든 콘텐츠를 마크업이 아닌 스크립트로 작성을 해야합니다. 마크업을 전혀 사용안하는건 아니지만 Sencha Touch의 기본 구조는 애플리케이션 스크립트를 이용해 대부분의 기능을 구현하게 되있습니다. 즉 자바스크립트로 사용자 인터페이스를 만들고 각종 이벤트를 처리해야 하는데 이러한 스크립트가 구현된 것을 애플리케이션 스크립트라고 합니다.
자 그럼 본격적으로 Hello World예제를 작성해 보시죠.
 (아놔 -_- 저장한거 날라갔음 아놔 ㅆㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂ 여기서부터 다시쓰는중 ㅠㅠ 아오 빡침)
[그림1.2]처럼 기본 구조는 이렇습니다. 저는 앱스프레소를 쓰기에 저런구조로 되어있는것입니다. sencha-touch.css파일이나 sencha-touch.js위치는 어느곳에다 둬도 상관은 없습니다. 그리고 index.html이 있는데 저 파일로 실행을 할것입니다. 그리고 HelloWorld.js이 js폴더안에 보이시죠? 저부분이 웹부분을 그려주는 스크립트 파일이라 생각하시면 됩니다. 센차터치는 html은 거의 작성을 안하는게 특징이죠 물론 스크립트 안에서 html을 작성하기도 하고 html파일내에 작성을 하기도 하지만 대부부느 스크립트로 되어 있습니다. 그래서 스크립트를 모르시는 분들은 골치가 아프실 겁니다 .ㅡ,.ㅡ 그러면 index.html을 살펴볼까요?
 [그림 1.3]
[그림1.3]을 보시면 sencha-touch.css및 sencha-touch.js을 적용을 시켜서 센차터치를 사용하겠다고 정의해 둔것을 보실 수 있을겁니다. 저것이 센차터치의 기본적인 틀입니다. 그리고 밑에서부터 스크립트로 그려나가는것이죠. 그밑에 HelloWorld.js에서 부터 시작을 하게 되는겁니다. 그럼 HelloWorld.js파일을 살펴보겠습니다.
 [그림1.4]
[그림1.4]를 보시면 Ext.setup란게 있습니다. 흠 저게 뭘까요? 설명을 드리자면 Ext의 setup()함수를 이용해 페이지 설정을 하는곳입니다. 그냥 간단하게 센차터치를 시작하려면 무조건 저 setup부분을 통해 시작을 한다고 보시면 되겠습니다. 다른것 안됩니다 무조건 저거에요~ 저거~ setup~~(애정남 드립..ㅡ.ㅡ) 무튼 그밑에 옵션같은것들이 있네요. 페이지 설정이니까 뭔가 설정을 하겠죠?
tabletStartupScreen부분은 말그래도 테블릿에서 어플리케이션이 실행될때 적용될 이미지입니다. 768*1004해상도 이어야 합니다. ㅎㅎ
phoneStartupScreen부분도 보시면 알다시피 폰에서 어플리케이션이 실행될때 적용될 이미지겠죠? 320*460의 이미지를 사용합니다.
icon은 다 아실꺼라 믿어요 ㅎㅎ 모바일 기기의 홈화면에 깔릴 이미지, 즉 웹클립 아이콘입니다.72*72크기의 이미지를 사용합니다.
glossOnIcon은 아이콘에 반사광의 광택효과를 줄지 여부를 결정한다는데 저는 이걸 해도 안해도 모르겠음둥 ㅡ,.ㅡ
statusBarStyle은 폰에서 상단의 20px영역을 차지하는 상태바의 스타일을 지정합니다.^^
이외에도 수많은 페이지 설정 옵션들이 있습니다. api를 통해서 알아보시면 될것같아요ㅠㅠ 매일 api보시게 될거라고 그랬죠? ㅎㅎ
onReady()함수는 중요한 부분!! 이 함수를 통해 실제 UI구성을 위한 코드를 작성하는 곳입니다. 이 함수가 없다면 시작이 되질 않아요 중요합니다. 그냥 중요하다고 생각하시면 되요 ㅎㅎㅎ 이 함수안에다가 처음에 정의를 해놔야지 시작이 된다는 점을 명심하세요^^ 지금 onReady()함수안에 보면 Ext.Panel이 보입니다. 이 패널은 또다른 패널 혹은 버튼과 같은 다른 UI컨트롤을 포함할 수 있는 컨테이너 객체로서 화면의 레이아웃과 컴포넌트를 배치하는데 자주 사용될것입니다. 패널이라...어디선가 많이 봤죠? 자반의 awt에서 보셨을겁니다 ㅎㅎ 비슷합니다. 저도 awt는 가물가물 하지만 그런 패널이라고 생각하시면 될듯..안드로이드의 xml레이아웃 같은것이라 보시면 되겠네요 ㅎㅎ
패널안에 뭔가 옵션을 주었네요 패널만 선언하고 아무것도 주지 않으면 암것도 안나오겠쬬? ㅎㅎ
fullscreen은 말그대로 전체화면으로 주겠냐 아니냐 겠쬬? ㅎㅎ
html이 나왔습니다. 여기서도 html을 사용을 할수가 있다는거죠. 지금은 "Hello Sencha Touch" 란 텍스트밖에 주진 않았지만 <br> <font color=red>와 같은 것도 줄수가 있답니다. 말그래도 html을 사용할 수 가 있는것입니다. fullscreen, html외에도 수많은(?) 정말 수많은 옵션들이 있습니다....api보시면 절망하실듯...하지만 차근차근 알아가시면 머리에 박히게 될것입니다 ㅡ,.ㅡ 지금은 이정도만 보시면 될것입니다.
자 이제 실행을 해볼까요?  저의 폴더 경로는 저렇습니다. 저기에서 index.html을 실행을 해보겠습니다.
 그림[1.6]
오옷!! 쨔잔~~ 반갑다 센차터치가 뜨네용 ㅎㅎ 정말 간단하죠? 하지만...이건 정말 말그대로 헬로우일뿐이죠 아하하하하 그래도 센차의 활용을 위한 첫단계이므로 기본 프로그램 구성과 동작 방식을 이해하는것으로 이번시간에 만족을 하시면 될것 같습니다.^^ 어떻게 도움이 되셨는지 모르겠네요 ㅎㅎ 참고로 익스플로러에서는 실행이 안됩니다. 크롬이나, 사파리, 파이어폭스에서 실행을 하셔야 할것입니다.
저도 잘모르면서 누굴 가르친다는것이 정말 힘드네요.. 이런걸 해본적이 처음이라 잘했는지도 모르겠지만 센차에 대해 조금이나마 관심이 있으신 분들에게 도움이 되길 바라며 저는 이만 글을 마치려 합니다.
다음 시간에는 센차터치 테마와 인터페이스에 대해서 알아보겠습니다.^^ 그럼 뱌뱌~슝
|
