저는 한손을 못쓰는 대신 머리에서 연산을 합니다. 머리가 잘 돌아가서가 아닌 그렇게 해야만 다른 사람을 따라갈 수 있는 겁니다. 아무튼 그렇게 생각하니 5분안에 완성이 되더군요. 코드가 간단해서 그냥 쓰실 분은 가져다 쓰세요.

관련 포스트:

• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 경로 찾기
• 센차 터치 2, 맵 좌표 구하기
• 센차 터치 2, 정보문화사 모바일 웹

우리는 무선 통신의 시대에 살고 있다. 그리고 내가 알기로 인공위성으로 전기에너지를 받을 수 있다고 했다. 디스커버리 채널에 나온다. 여기서 내가 말하는 위성을 태양의 궤도에 올리는거다. 여기서 위성은 영화 코어의 방식이고, 또 하나의 위성은 중간에 있는 행성, 그리고 결국 하나는 지구에 뛰운다. 그리고 그게 여럿이라는 가정이라면 지금은 비쌀지언정 태양이 끝나는 때까지 태양열을 축척하는 것이다.

이 지구의 여러 위성은 이제 돌면서 무선 에너지를 전 세계에 뿌린다. 지구가 밤인 곳도 위성으로 태양열은 계속 받기 때문에 문제가 없다. 또한 전 세계에 뿌린 에너지는 컨센트나 선이 필요없이 이제 무선으로 흐르는 태양열 에너지를 지구에서 다 쓰는거다.

우리가 굳이 무한 동력을 연구하고 UFO 같은 비행선을 연구하지만, 이제 가능하면, 그냥 하늘에 뜨고만 있어도 무선으로 태양열이 계속 돌고 있기 때문에 무한 동력이 되는게 아닐까?

관련 포스트:

• 테슬라의 EMP 무기, 만화에서만 존재하는 원형 방어막

포럼은 http://www.sencha.com/forum/showthread.php?198753-Deletable-List
마켓은 http://market.sencha.com/addon/deletable-list
Github 는 https://github.com/jsveron23/Ext.jsv.DeletableList

사용법은 소스에 예시로 나와있습니다. 혹시라도 궁금하시면 말씀하세요. 아직은 Ajax 나 Jsonp 로 외부에서 가져온건 변수가 많아 화면에서만 지우게 했고, 브라우저의 스토리지 공간을 활용할 경우에는 실제로 지워집니다. 코드가 길어지지 않은 이유는 이 부분 입니다.

아직은 저도 자바스크립트 쪽이 능숙하게 올라오짆 았았다는 판단이며 더 배우는 중입니다. 마지막으로 공개한 사람(본인)의 성의를 생각해서 GPL 라이센스에 따라주세요. 라이센스의 의미는 검색으로 잘 아실 수 있습니다. 단순히 출처만 밝히는게 아니니 자세히 읽어보세요.

관련 포스트:

• 센차 터치 2, 툴바 로더
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 경로 찾기
• 센차 터치 2, 맵 좌표 구하기
• 센차 터치 2, 정보문화사 모바일 웹

센차 터치 부분은 맵 플러그인을 제외하고 본인이 100% 순수 손코딩을 했습니다. 자동완성은 99% 없었습니다. 자랑입니다. Node.js 의 server.js 부분도 본인이 99% 만들었습니다. 1% 는 제가 수정을 다른분이 했는지 아닌지를 몰라 1% 로 했습니다. MongoDB 쿼리 부분은 양용성 이사님이 만드셨습니다. 그래서 MongoDB 에서 작성하신 것을 비동기, 동기에 맞게 Node.js 에서 제가 변경했습니다.

큰 마음 먹고 공개합니다. 국내에서는 소스 공개가 거의 이루어지지 않고 있습니다. 이번을 시작으로 국내에 변화가 이루어졌으면 합니다. 외국이 기술이 발달된건 공개에서 부터 공유할 수 있는 마인드가 있었기 때문이라고 봅니다. 세계 IT 강국 1위라고 뉴스에서 떠벌리는데, 오픈 소스도 발달되지 않은 곳에서 무슨 1위가 되나요.

사족이 조금 있었습니다. 소스의 위치는 https://github.com/jsveron23/ 에서 new-infopub 에 있습니다. 센차 SDK 소스는 제 것이 아니니 가려뒀습니다. 아직 저도 GIT 사용법이 미숙하니 필요한 부분은 가르쳐주세요.

UPDATE:
위 소스 쳐다보고 있다가 버그가 하나 보였네요. 수정해서 github 에 올릴게요.

관련 포스트:

• 센차 터치 2, 정보문화사 모바일 웹
• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 경로 찾기
• 센차 터치 2, 맵 좌표 구하기

사용법은 간단합니다. 툴바가 나타나면 첫 번째에서는 시작 위치, 두 번째는 끝 위치 입니다. 옆의 좌표 버튼은 맵의 중간에서 누르면 자동으로 포인트가 됩니다. 두개 모두 설정하셨다면, 자동으로 경로 계산을 합니다. 또한 다 설정 하신 후 다시 하나 세팅하시면 추가 경로가 설정됩니다. 이 부분은 예상치 못한 결과 였네요. 구글 맵, 사랑합니다.

만약 요청 사항이 있으시면 댓글 주시면 확인 후 반영해드리겠습니다.

아쉽게도 한국 같은 지역은 경로 설정이 되지 않습니다. 따라서 유럽 여행이나 해외 여행 하시다가 지도를 볼일이 있을 때, 사용하세요. 두 번째 탭은 그냥 보너스 입니다.

관련 포스트:

• 센차 터치 2, 맵 좌표 구하기
• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 정보문화사 모바일 웹

우선 사용법은 맵을 드래그 하다가 원하는 곳을 중앙에 위치하고 위의 버튼을 탭하면 마커가 표시 되면서 좌표가 같이 표시 됩니다. 이미지를 보시면 이해가 쉬울겁니다. 구글 맵의 v3 의 API 를 사용했습니다. 주소는 http://app.senchastudy.kr/map 입니다. 모바일이던 데스크탑이던 아무곳에서 실행하세요. 아시듯이 데스크탑은 사파리와 크롬 브라우저만 가능합니다.

관련 포스트:

• 센차 터치 2, 경로 찾기
• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 정보문화사 모바일 웹

비 공식적으로는 앱통 회사의 세미나 앱이겠지만, 그건 어디까지나 일회용이었으니 무시하겠습니다. 좀더 예쁘게 보시려면 폰이나, 시물레이터로 보시길 권장합니다.

아직 수정사항은 반영되지 않았습니다. 18일 오늘이 오픈 날 입니다. 개발기간은 일주일 정도라 보시면 됩니다. 원래 전에 만들기 시작했던 것이 있으나 회사 세미나 이후 일주일 동안 처음부터 완전 바꾸기 시작했습니다. 저는 오로지 센차 터치 2에만 열중했고, DB 관련은 양용성 이사님이 해주셨습니다. 이사님이 만들어주신 DB 쿼리를 사용하여 노드에 맞게 코드를 약간 바꿔어 제가 손을 좀 봤습니다.

제가 볼 때, 어느 모바입 웹에 뒤지지 않는 속도나 퀄리티가 나올겁니다. JQuery 모바일 쪽은 원래 센차 쪽에 많이 뒤지는 프레임워크였고요. 센차 터치 2가 현재 모바일 웝 1위라고 보시면 됩니다.

마지막으로 저는 이번 정보문화사 모바일 웹을 끝으로 회사와 결별합니다. 저는 창업을 준비하고 있습니다. 혹시라도 센차 터치 2에 관한 의뢰를 원하신다면 웻 탭의 SNS 연결을 이용하시거나, 제 어바웃 페이지의 이메일로 연락 주세요.

관련 포스트:

• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 경로 찾기
• 센차 터치 2, 맵 좌표 구하기

yum -y install httpd php mysql mysql-server php-mysql

yum 이 설치 되어 있어서 위와 같이 설치했습니다. 명령어 참고는 이 곳 입니다.

우선 MySQL 을 설정했기에 첫번째로 적습니다. 또한 PHP 나 아파치는 별다른 설정이 없어서 다른건 적지 않겠습니다. 필요하면 추가로 글 올릴게요. 참고로 현재 사용자의 리스트를 보기 위해서 아래의 명령어를 사용했습니다.

cat /etc/passwd | cut -d":" -f1

useradd 에 대한 참고는 이 곳입니다. 또한 UTF8 인코딩을 사용하기 위해,

# vi /etc/my.cnf
[client]
default-character-set = utf8

[mysqld]
init_connect = SET collation_connection = utf8_general_ci
init_connect = SET NAMES utf8
default-character-set = utf8
character-set-server = utf8
collation-server = utf8_general_ci

[mysqldump]
default-character-set=utf8

[mysql]
default-character-set=utf8

그리고 데이타베이스 파일의 위치와 그룹을 위해,

mysql_install_db && chown -R mysql:mysql /var/lib/mysql/

실행했으며, 참고는 이 곳에 했습니다.

UPDATE: PHP UADATE

저장소 변경,

wget -q -O - http://www.atomicorp.com/installers/atomic |sh

PHP 업데이트

yum update php

관련 포스트:

• 워드프레스 MySQL 데이타베이스 최적화 하기

저는 개발 경력이 적습니다. 다쳐서 2007년 부터 2010년 까지 쉬었으니 3년 정도네요. 그래서 경력은 2006년 ~ 2007년으로 1년 + 2010년 중순 ~ 2012년 현재로 하니 약 2년 좀 넘습니다. 지금까지 저는 생각하고 그 것을 개발할 수 있다라는 생각을 가지고 있었습니다. 그러나 기술력이 부족한 아직 초짜 개발자였지요. 따라서 프레임워크는 저에게 새로운 길 같았습니다. 모든게 갖춰졌으니까요.

제가 센차 터치를 좋아하는 이유가 그 것입니다. 바로 생각한 것을 구현할 수 있다는 점입니다. 개발자라면 동의하실겁니다. 생각한게 그냥 구현이 된다면 정말 행복할겁니다. 또한 센차 터치를 접하기 전에는 자바스크립트는 jQuery 정도만 아는 정도였습니다. 지금은 센차 터치를 접하면서 자바스크립트 기본 원리도 계속 공부하고, 또한 쏟아져 나오는 신기술이 자바스크립트를 이용한다는 점에서 저에겐 사랑하지 않을 수 없게 만들었습니다.

현재 생각한게 구현된다를 계속 실천하기 위해 Node.js, MongoDB 같이 여러가지를 보고 있습니다. 또한 저에게는 대학교 때부터 관심을 가졌었던 CSS 를 마음껏 쓴다는 것도 행복한 이유입니다. 게다가 SASS 를 쓰니 더욱 행복해 지지 않을까요.

이번 3월 30일 4시에 센차 터치 포럼이 있고 첫번째 발표자로 서게 됩니다. 아직은 개발 초짜지만 이번 포럼에서 제가 공들여 개발한 센타 터치 2 로 만든 앱을 보여드리겠습니다. 생각하는 것을 만든다를 위해 달려가는 과정에서로 보면 저의 첫 작품입니다.

관련 포스트:

• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 경로 찾기
• 센차 터치 2, 맵 좌표 구하기

클래스를 이런식으로 만들고 하나하나 봅시다. 클래스를 정의 할 때 config 안에 프로퍼티들을 넣는 것은 프리뷰 때 바뀐 방식입니다.

config 요소 안의 navigationBar 는 흔히 툴바를 말합니다. 툴바의 이름은 이 곳에서 정하기 보다 아래 items 에서 정의 합니다. Back 버튼은 기본으로 정의가 됩니다. navigationBar 안의 button 은 툴바에 들어가는 버튼입니다. 오른쪽으로 정렬하고 example 글자로 버튼을 하나 생성했죠?

그 아래 navigationBar 와 동일한 위치에 들어가는 items 은 처음에 표시될 화면 입니다. 툴바 아래가 되겠죠? 이 안에 items 요소를 더 넣을 수 있겠지만, 부질 없는 짓입니다. 예전에는 그런 방식이었지만, 프리뷰 인가? 언제 부턴가 가장 마지막에 추가할 수록 가장 레이아웃 위에 나오는 결과를 보입니다. 이 부분은 이미 개발자가 포럼에서 언급한 내용이라 버그는 아닙니다.

이제 아이템을 어떻게 추가 할까요?

example 아이템이 리스트라 가정할 경우 저런 형태로 뷰를 추가하면, 리스트에서 뷰로 슬라이드를 통해 이동합니다. 리스너로 부터 itemtap 이벤트를 캐치하면, list, idx, node, record 인자가 따라옵니다. 이름은 바꾸실 수 있습니다. 순서만 아시면 됩니다. 이렇게만 하면 메모리 문제는 어떨가요? 전 버전에서는 뷰를 새롭게 생성할 때 마다 해제하는 이벤트를 심었었습니다. 그러나 네비게이션 뷰에서는 굳이 걱정하지 않으셔도 됩니다.

autoDestroy: true 라는 config 요소 아시죠? 기본으로 pop() 이벤트가 되면 메모리서 해제가 되고 false 를 수동으로 줄 경우 남아있게 됩니다. Back 버튼을 클릭하면 pop() 이벤트가 일어납니다.

마지막으로 툴바의 이름은 example 리스트나 example.view.View 에 title 로 config 요소에 주면 간단하게 해결됩니다.

이런 방식이 기본적인 네비게이션 뷰의 역할입니다. 패널 이동에 고생하려 하지 마세요.

센차 터치에 관심 있으신 분은 제가 활동하는 페이스북 그룹에 질문하시면 성심 것 답변해 드리겠습니다.

관련 포스트:

• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 경로 찾기
• 센차 터치 2, 맵 좌표 구하기

API 문서에는 이렇게 사용하라고 합니다. container.getScrollable.getScroller(); 이 방법인데, 괄호를 빼먹은 듯 합니다. container.getScrollable().getScroller(); 이 방법을 써서 간단한 예제를 만들면 아래와 같이 쓰면 됩니다.

this 는 컨테이너를 가르키고, scroll 이벤트를 사용하여 받는 scroll 변수는 자신을 의미하고 x, y 같을 실시간으로 가져옵니다. 구현에 도움이 되었으면 합니다.

센차 터치에 관심 있으신 분은 제가 활동하는 페이스북 그룹에 질문하시면 성심 것 답변해 드리겠습니다.

관련 포스트:

• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 경로 찾기
• 센차 터치 2, 맵 좌표 구하기

센차 터치가 국내에 상륙하고 스터디 모임도 만들어지고 조금씩 활기를 띄고 있는데요. 개발은 글쌔? 하시는 분들을 위한 짤막한 글입니다. 개발을 시작하기 전에서의 가장 큰 질문일지도 모릅니다. 결론부터 말씀드리면 예스! 입니다.

센차 터치(이하 센차) 1.x 는 안드로이드에서 많은 약점을 드러냈습니다. 특히 애니메이션은 최악이었습니다. 그러니 2 가 완전 왕의 귀환입니다. 안드로이드 기본 브라우저는 우선 애니메이션을 빼면 거의 iOS 와 속도는 거의 동일합니다. (안드로이드 폰의 종류가 많아 전체는 테스트 하지 못했습니다.) 그러나 이번에 모바일용 크롬 브라우저 베타가 나온 상황에서는 말이 달라집니다. 약간의 화면 최적화를 제외하면 iOS 의 사파리 브라우저의 속도보다 좋습니다. 제가 이미 테스트를 해 봤기 때문에 자신합니다. 테스트 환경은 센차 터치 베타 1 으로 제가 직접 MVC 개발을 하고 있는 어플을 돌렸었습니다. 또한 오늘 베타 2를 발표하면서 속도가 또 향상됐습니다. 체감적으로 느끼는 향상이 보였습니다. 안드로이드의 크롬이 정식으로 제공되는 시점에서는 기대할 수 있다는 겁니다. 이렇게 되면 센차 진영에서는 환상적인 한 해가 되는 겁니다.

릴리즈 노트에서 Known Issue 에 보면 아래와 같은 문구가 있습니다.

The Chrome Mobile beta was just released this week. We expect to have proper detection and implementation beginning with the next release.

이 문구에서 보면 이제는 개발을 모든 회사에서 한다고 해도 리스크는 곧 아무것도 아니게 된다는 겁니다. 짤막한 글이 도움이 되셨으면 합니다.

센차 터치에 관심 있으신 분은 제가 활동하는 페이스북 그룹에 질문하시면 성심 것 답변해 드리겠습니다.

관련 포스트:

• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 경로 찾기
• 센차 터치 2, 맵 좌표 구하기

메모리의 관리 능력은 여러가지가 있습니다. 그 중에서 패널 관리를 알려드리겠습니다. 모바일 기기는 많이 발전했지만, 사실 아직 하드웨어는 데스크탑보다 떨어지는 것은 사실입니다. 그래서 메모리의 최적화가 필요합니다. 오늘은 패널의 메모리 해제의 과정을 보여드립니다.

사실 Sencha 개발팀의 내용을 잘 이해했는지 몰라도, 태그 엘리먼트의 생성은 메모리 문제와 직결된다고 합니다. 그래서 항상 필요하지 않은 경우 다시 해제하는 습관이 필요합니다. 방법은 간단합니다. 객체를 생성하면서 특정 이벤트가 실행되면 메모리는 해제되게 만드는 것이죠. 방법을 알아봅시다.

간단하죠? deactivate 이벤트는 대부분 패널을 이동하는 이벤트를 사용할 때, 실행됩니다. 따라서 다른 화면으로 전환을 할 경우에는 자동으로 해제하는 방법이 되는 겁니다.

관련 포스트:

• 관련된 포스트가 없습니다.

나머지는 일반 스토어 사용과 거의 같습니다. var check = store.first() 를 사용하면 가장 처음에 생성된 값을 불러와서 check 변수에 저장합니다. 값은 Object 로 들어갑니다. 그리고 값이 없을 경우, if 구문에서 구현한 값을 넣으면 되는데, id 는 자동으로 수치가 1, 2, 3 … 으로 증가합니다. SQL 데이타베이스 같이요. 배열의 인덱스라고 생각하시면 됩니다. 삭제는 remove() 메서드로 간단히 됩니다.(store.remove(check)) 그리고 sync() 를 꼭 시키세요. store 는 getCount() 메서드로 갯수를 얻은 후 getAt() 으로 인덱스의 값을 가져오면 되겠죠?

초반에 약관을 불러오고 체크로 구분해서 다시 불러오느냐 아니면 확인 했으니 안보이게 하는게 가능하겠죠? 로컬 저장소는 한번 저장하면 삭제하지 않는 이상 유지되므로 신경쓰시지 않아도 됩니다. 다만, 브라우저 캐시를 지우면 아마 같이 날라갈겁니다.

관련 포스트:

• Store 를 읽을 때 딜레이가 있는 경우

저는 resources/php/ 에 getFavorite.php 이란 파일을 만들고 다음과 같이 작성했습니다. Grooveshark 의 제 좋아하는 목록을 가져오겠습니다. 제 API 인데 그냥 쓰세요.

제가 PHP 는 좀 약하니 더 좋은 방법이 있으면 주저 말고 밑에 달아주세요. 이제 Sencha Touch(이하 센차) 의 스토어에 담는 작업을 해야합니다. Ext.List 를 생성하여, store 와 itemTpl 을 만들어줍니다.

툴바는 만드실 줄 아신다는 전제 하입니다. 그렇게 간단하게 만든 예제를 이 곳에서 보실 수 있습니다. CSS 부분을 약간 추가했는데, resources/css/style.css 에 있습니다.

관련 포스트:

• Store 를 읽을 때 딜레이가 있는 경우

위 load 이벤트를 쓰면 됩니다. this.onLoadStore 는 메서드의 이름입니다.

관련 포스트:

• 로컬 저장소(Local Storage)를 이용한 내용 저장
• JSON 목록을 통한 간단한 리더 만들기
• CSS 클래스 이름으로 탭(클릭) 했을 때 메서드로 넘기기
• Sencha Touch 를 이용한 웹 사이트가 쏟아진다.
• 맥 스팀 릴리즈와 24일까지 포탈 게임 무료

탭 이벤트 발생시의 처리입니다. div.ontap 아래에 img 태그를 선택시 onTap 메서드로 이동하라는 뜻입니다. 주의 할 점은 initComponent 함수에 넣으면 에러가 날겁니다. 이유는 initComponont 는 이 컴포넌트가 초기화를 하지만, 렌더링은 완료되지 않은 상태라 .ontap img 는 존재하지 않은 상태에서 사용할 수 없습니다. 렌더링 후 사용해야기 때문에 afterRender 이 후의 메서드에 사용가능합니다.

관련 포스트:

• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 경로 찾기
• 센차 터치 2, 맵 좌표 구하기

별 것 없습니다. 저는 애플 개발자 페이지를 연상했지만, 사실은 개발자를 구하는 페이지인 듯 합니다. 가입은 회사 쪽에서 하고 가입한 정보로 인해서 개발자들이 원하는 회사에 지원하는 식입니다. 조금 발전되면 회사 등록도 돈 받고 하겠죠? Senchadevs 링크입니다. Java, CSS3 같은 Sencha 이외의 기술도 있네요.

관련 포스트:

• 센차 터치 2, 정보문화사 모바일 웹 코드 공개

요즘 Sencha Touch 를 접하고 매력에 빠져 직장에서 두세번의 개발을 해보고, 포럼을 만들었습니다. 오늘 피드를 보는데 소개를 엄청 하네요. 얼마전의 리뉴얼도 색달랐는데, 홍보에 박차를 가하나 봅니다. 잠깐 소개를 하자면, jQuery 는 개발을 빠르게 해주는 라이브러리라 한다면 이 것은 모바일 사이트의 개발을 예쁘게 구현해주게 합니다. 프레임워크이며 폰갭을 씌우면 앱으로도 가능합니다.

쇼핑몰과 CCM

쇼핑몰 사이트가 새로 나올까 했더니 나왔네요. 아이팟 터치나 아이폰으로 보세요. 아직 아이패드로는 안되네요. 예전에 이 쇼핑몰을 보면서 연습했다죠? 기본으로 소개하는 데모입니다. 기본 데모는 Infinite Ajax Carousel 로 멋진 UI 를 만들어냈것이 특징입니다. 많은 악세사리 류가 끝도 없이 Carousel 에 표현됩니다. 이번 쇼핑몰은 저도 구현할 수 있는 정도인 듯 합니다.

그리고 Echo Conference 에 대한 정보라는 모바일 웹도 있습니다. 사이트를 가보니 CCM 인거 같기도 하고 아무튼 장르는 음악이네요. 가보니 스케줄 리스트가 있고 한데, 알아보질 못하겠습니다.

이번에는 중고차 시장 웹도 있습니다. 중고가 아닌가? 아무튼, 사이트를 아이폰으로 방문하거나 사파리의 에이전트를 바꿔서 해보세요. 위 사이트들도 에이전트만 바꿔도 됩니다. 검색을 시작으로 기본적인 Sencha Touch 의 폼을 잘 활용했네요. 상당히 심플하면서 갖출건 다 있네요. 이런 모바일 웹을 보면 기존의 한국 모바일 웹은 전부 거품 같아 보입니다. 멜론의 모바일 웹을 보셨나요? 아이패드로 보세요. 보면 Sencha Touch 인데, 너무 느리고 모바일 웹까지 덕지덕지 쓸대어베는 UI 를 많이 쓰고 있습니다. 이런거 보면 외국 모바일 웹이 더 심플하고 빨라 보입니다.

Sencha Touch 의 간단한 장점

Sencha Touch 는 안드로이드까지 가능해서 아이폰용으로 끝내도 안드로이드에서 바로 볼 수 있는 장점도 있습니다. 장점이 많죠. 웹킷을 쓰기 때문에 HTML5, CSS3 를 지원합니다. 사파리나 크롬만 있어도 개발이 쉽습니다.

new Ext.data.Store({
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: 'json'
    },
    autoLoad: true
});

Sencha Touch 의 경우 HTML5 의 로컬 스토리지를 API 를 통해 간단히 사용가능합니다. Store 를 사용하는데 여러가지가 있고 모든 Store 는 그저 간단합니다. AJAX 통신도 간단하고 ScriptTag 를 이용해 다른 도메인도 AJAX 통신을 사용할 수 있습니다. 많습니다. DOM 도 만질 수 있으며, 폼의 UI 가 모바일에 맞게 자동 생성이 가능하고, 아이폰의 액션이트나 픽커뷰도 쉽게 생성이 가능합니다. 테마역시 변경이 가능합니다. SASS & Compass 를 사용해서 간단히 변경 가능합니다. 비디오를 봤더니 변경이 쉽더군요.

포럼 홍보

만약 개발시나 공부시 포럼에 질문하시면 아는 한도에서 대답해 드리겠습니다. 잠깐 포럼 홍보를 하자면 아직 만든지 별로 되지 않아 영문으로 되있거나 허접합니다. 계속 변경 중입니다. OpenID 나 구글 아이디로 접속이 가능합니다. 페이스북이나 트위터도 곧 가능합니다. 개발 사이트에 앱 등록하기 귀찮아서 나두고 있긴 합니다. 양해해 주세요.

ExtJS

아직 소개가 더 있습니다. 이 것은 ExtJS 로 만들어 졌지만, 같은 Sencha 입니다. ExtJS 와 같은 회사이며 이미 ExtJS 를 할 줄 아신다면 익히기 간단합니다. CodeSmith Insight 는 소프트웨어 헬프 데스크 입니다. 하나 가입해서 써봤는데, 써본 경험이 없어 삽질 중입니다.

마치며

사실 더 소개해 드리고 싶지만, 한손으로는 힘드네요. 이 것으로 게임 개발도 가능합니다. 물론 자바스크립트를 아주 잘 하신다면야… 앱은 제가 굳이 소개를 하지 않아도 사이트에 널려있습니다. 데모를 보셔도 되고 Sencha Touch 의 컨테스트를 보셔도 됩니다. 컨테스트가 페이지가 별도였는데, 데모 하단에 있네요. 리뉴얼 되니 많이 변경됐네요. 포럼에 오시면 답변 잘 해드리겠습니다. 그리고 이 중에 바닐라 포럼을 많이 써보신분이 계시면 댓글 부탁 드려요.

관련 포스트:

• Infinite Ajax Carousel
• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 경로 찾기

Creating An Infinite Carousel

The infinite carousel (이하: 무한 회전 목마) 은 많은 아이템을 제어 할 수 있습니다. 이 것은 메모리에 저장된 객체를 통해 슬라이드 윈도우를 만들어냅니다. 현재 보여지는 카드, 바로 전 그리고 따라오는 카드 또한 만들어냅니다. 사용자의 스크롤을 통해, 아이템은 동시에 만들어지거나 소멸되고 필요에 따라 항상 최신의 윈도우를 보관합니다. 이 방법으로, 우리는 사실 얼마나 많은 아이템이 회전 목마에서에서 특정한 수에 관계없이 만들어졌는지 알 수 있습니다.

아래 다이어그램에는, 3개의 아이템을 가진 슬라이딩 윈도우가있습니다. 처음에 3번 아이템이 중앙에 위치하고 2번과 4번 아이템이 실제로 만들어져 있습니다. 사용자가 아이템 4번으로 변경할 때, 오른쪽으로 윈도우는 슬라이드 됩니다. 아이템 2는 지워지고 아이템 5가 생성됩니다.

회전 목마의 API 는 상당히 간단합니다. 아이템 설정 프로퍼티(items config property)를 사용하는 대신, createItem 설정 프로퍼티(createItem config property)를 허용합니다. 언제나 필요한 아이템은 생성되고, 인덱스와 함께 함수는 호출하게됩니다. 함수는 그 때 아이템을 반환하고 생성합니다. 같은 결과이지만, 2가지 방법을 선보이려합니다: 일반 화전목마와 우리가 말하는 무한 회전목마를 설명합니다.

슬라이딩 윈도우의 개념은 간단합니다. 초기에 로드되고 아이템이 변경되면, 창이 업데이트 됩니다. So the meat of the implementation is in the window update code. 중앙에 위치한 윈도우의 아이템의 인덱스는 호출됩니다. 풀 코드가 있습니다:

Custom Carousel Indicator

무한 회전목마의 위치 표시기(indicator)는 일반 회전 목마에서는 동작하지 않습니다. 일반 터치 스크롤바 보다 비슷한 위치 표시기 구성요소를 생성하여 해결합니다 . 일반 표시기를 사용한 템플릿이며, 꽤 간단한 코드입니다:

관련 포스트:

• Sencha Touch 를 이용한 웹 사이트가 쏟아진다.
• 센차 터치 2, 툴바 로더
• 센차 터치 2 플러그인, Deletable List
• 센차 터치 2, 정보문화사 모바일 웹 코드 공개
• 센차 터치 2, 경로 찾기