시작하세요! 모바일 웹 개발

1부 모바일 웹 개발 프레임워크

Step 01. 모바일 웹앱(Web App)
_ 1. 모바일 애플리케이션의 종류
_ 2. 모바일 애플리케이션의 종류에 따른 특징
_ 3. 원 소스 멀티 플랫폼의 실현! Web App (+Hybrid)

Step 02. 모바일 웹 개발 프레임워크 소개
_ 1. 모바일 웹 개발 프레임워크란?
_ 2. 주요 모바일 웹 개발 프레임워크
_ 3. 세 가지 프레임워크 선정 기준 및 비교

Step 03. 차세대 웹 표준 HTML5
_ 1. HTML5란?
_ 2. 프레임워크에 접목된 HTML5
_ 3. Geolocation
_ 4. Web Storage
_ 5. Application Cache
_ 6. Video & Audio
_ 7. 향상된 웹 양식(Web Form)

Step 04. 학습 선행 가이드
_ 1. 원리보다는 현상 위주
_ 2. 버전 선 긋기
_ 3. 프레임워크? 라이브러리?
_ 4. 개발 도구 및 테스트 환경
_ 5. 웹 서버 준비
_ 6. 프레임워크의 한글 지원
_ 7. 대상 독자
_ 8. 최소화 버전 파일
_ 9. jQuery & ExtJS
_ 10. JSON
_ 11. 소스 코드에 관해


2부 jQTouch

Step 01. jQTouch 개요
_ 1. jQTouch 소개
_ 2. jQTouch 특징
_ 3. jQTouch 버전
_ 4. jQTouch & Sencha
_ 5. 라이선스
_ 6. 지원 기기

Step 02. jQTouch 시작하기
_ 1. 개발 환경 구성
_ 2. jQTouch의 구성
_ 3. Hello World로 시작하기

Step 03. jQTouch 테마
_ 1. apple 테마
_ 2. jqt 테마
_ 3. 테마 확장

Step 04. jQTouch 사용자 인터페이스
_ 1. 툴 바
_ 2. 리스트
_ 3. 버튼
_ 4. 폼
_ 5. jQTouch UI 컨트롤 모음

Step 05. jQTouch 페이지 이동과 효과
_ 1. 내부 링크 페이지 이동
_ 2. 외부 링크 페이지 이동
_ 3. 외부 사이트 이동 및 타깃 옵션
_ 4. Back 버튼
_ 5. 페이지 이벤트
_ 6. 페이지 이동 효과(애니메이션 효과)

Step 06. jQTouch Ajax 상호작용
_ 1. GET 요청
_ 2. POST 요청
_ 3. Ajax 콜백 이벤트

Step 07. jQTouch Extensions
_ 1. jQTouch 확장하기
_ 2. Auto Titles
_ 3. Floaty Bar
_ 4. Offline Utility
_ 5. Geo Location

Step 08. jQTouch Demos
_ 1. Clock app
_ 2. To-Do app

3부 jQuery Mobile

Step 01. jQuery Mobile 개요
_ 1. jQuery Mobile 소개
_ 2. jQuery Mobile 특징
_ 3. 지원 기기
_ 4. 라이선스
_ 5. 관련 URL

Step 02. jQuery Mobile 시작하기
_ 1. 개발 환경 구성
_ 2. jQuery Mobile 구성 살펴보기
_ 3. 데모 및 라이브러리 설명서
_ 4. jQuery Mobile 개발을 위한 기본 사항
_ 5. Hello World로 시작하기

Step 03. jQuery Mobile 테마
_ 1. jQuery Mobile 테마 특징
_ 2. jQuery Mobile 테마 적용
_ 3. 사용자 정의 테마
_ 4. 동적 테마 변경

Step 04. jQuery Mobile 사용자 인터페이스
_ 1. Page, Header, Content, Footer
_ 2. 툴 바
_ 3. 아이콘
_ 4. 버튼
_ 5. 리스트
_ 6. 그리드 레이아웃
_ 7. 폼
_ 8. Collapsible 블록
_ 9. data-* 속성

Step 05. jQuery Mobile 페이지 이동과 효과
_ 1. jQuery Mobile 기본 페이지 구조
_ 2. 내부 링크 페이지 이동
_ 3. 외부 링크 페이지 이동
_ 4. 외부 사이트 이동 및 링크 옵션
_ 5. 기능 링크
_ 6. Back 버튼과 대화창
_ 7. 페이지 이동 API
_ 8. 페이지 이동 애니메이션 효과

Step 06. jQuery Mobile Ajax 상호작용
_ 1. GET 요청
_ 2. POST 요청

Step 07. jQuery Mobile 이벤트
_ 1. mobileinit 이벤트와 기본 설정 변경
_ 2. 페이지 이벤트
_ 3. 터치 이벤트

Step 08. jQuery Mobile 데모
_ 1. YQL을 이용한 플리커 이미지 검색
_ 2. 실제 이미지 URL
_ 3. 검색 결과 정렬
_ 4. 이미지 검색 애플리케이션 개발

4부 Sencha Touch

Step 01. Sencha Touch 개요
_ 1. Sencha Touch 소개
_ 2. Sencha Touch 특징
_ 3. 라이선스
_ 4. 지원 기기

Step 02. Sencha Touch 시작하기
_ 1. 개발환경 구성
_ 2. Sencha Touch 구성
_ 3. Hello World로 시작하기
_ 4. Ext.setup VS Ext.Applicatoin
_
Step 03. Sencha Touch 테마
_ 1. Sass
_ 2. Compass
_ 3. Sass & Compass 설치
_ 4. Sencha Touch 테마 관련 파일
_ 5. Sencha Touch 테마 커스터마이징

Step 04. Sencha Touch 사용자 인터페이스
_ 1. UI 컴포넌트
_ 2. 패널(Ext.Panel)
_ 3. 탭 패널(Ext.TabPanel)
_ 4. 회전목마(Ext.Carousel)
_ 5. 툴 바(Ext.Toolbar)
_ 6. 버튼(Ext.Button)
_ 7. 아이콘(iconCls)
_ 8. 오버레이
_ 9. 리스트(Ext.List)
_ 10. 메시지 박스(Ext.MessageBox)
_ 11. 장치 구분(Ext.is)
_ 12. HTML을 이용한 레이아웃 구성(contentEl 속성)
_ 13. UI 조합해보기

Step 05. Sencha Touch Ajax 상호작용
_ 1. 템플릿(Ext.Template)
_ 2. 확장 템플릿(EXT.XTemplate)
_ 3. Ajax 호출
_ 4. JSONP 호출

Step 06. Sencha Touch Data 패키지
_ 1. 데이터 처리 흐름
_ 2. 데이터 패키지를 활용한 원격 리소스 호출
_ 3. 데이터 패키지를 활용한 로컬 리소스 호출
_ 4. 데이터 패키지와 중첩리스트(Ext.NestedList)

Step 07. Sencha Touch 이벤트
_ 1. 내장 속성을 이용한 이벤트 처리
_ 2. 표준 이벤트 처리
_ 3. 터치 이벤트
_ 4. 터치 이벤트를 활용한 모바일 그림판

Step 08. Sencha Touch 미디어 지원
_ 1. Media(Ext.Media)
_ 2. Video(Ext.Video)
_ 3. Audio (Ext.Audio)
_ 4. 비디오, 오디오 코덱

Step 09. Sencha Touch 데모
_ 1. YQL을 이용한 RSS 검색
_ 2. RSS 리더 개발

현재 스마트폰에서 사용할 수 있는 대부분의 유용한 앱은 네이티브(Native) 형태로 구현돼 있다. 네이티브 앱은 기기와 밀접하게 상호작용할 수 있어 고수준 애플리케이션을 만들 수 있다는 장점이 있지만 개발 환경과 배포 환경이 플랫폼에 종속적이어서 생산성과 유지보수 비용이 부담으로 작용한다. 반면 웹은 (표준만 준수한다면) 브라우저를 탑재한 모든 모바일 기기에서 동작 가능하며, 한 버전으로 여러 플랫폼을 지원할 수 있어 개발, 유지보수 비용을 획기적으로 줄일 수 있다. 또한 기존의 익숙한 웹 기술을 사용하므로 생산성이 향상되고 실시간 업데이트가 가능해 사용자의 요구에 빠르게 피드백할 수 있다. 특히 순수 웹 기술만으로 네이티브 앱의 사용자 경험을 실현할 수 있는 모바일 웹앱은 웹과 네이티브 앱의 경계마저 서서히 무너뜨리고 있어 향후 많은 많은 애플리케이션이 모바일 웹앱 형태로 구현될 것으로 전망된다.

앞서 일상의 단면에서 나열한 앱 가운데 대다수는 모바일 웹앱으로도 구현 가능한 것들이며 현재 앱 스토어에 올라와 있는 앱의 상당수도 모바일 웹앱으로 바로 만들 수 있는 것들이다. 실제로 자료에 의하면 현재 사용 중인 (게임을 제외한) 네이티브 앱의 70% 가량은 기능상의 손실이 거의 없이 모바일 웹앱으로 구현할 수 있다고 한다. 참고로 웹과 네이티브 앱의 장점을 모두 취할 수 있는 하이브리드 앱 역시 내부 구현 모델은 모바일 웹앱의 형태를 띤다. 더욱더 고무적인 사실은 현재 진화하고 있는 웹 기술, 즉 HTML5, CSS3, SVG와 같은 차세대 웹 표준 기술은 웹을 더욱 지능적이고 세련되게 만들어 주기 때문에 모바일 웹앱의 기술 성숙도를 크게 높일 수 있다는 것이다.

이런 와중에 고맙게도 모바일 웹앱을 더욱 쉽고 생산적으로 개발할 수 있게 도와주는 훌륭한 프레임워크가 속속 등장하고 있다. 이 책은 이러한 프레임워크 가운데 세간의 관심을 가장 많이 받는 jQTouch와 jQuery Mobile, 그리고 Sencha Touch 프레임워크의 활용법을 다룬다. 책의 주된 내용은 1부에서 모바일 웹 애플리케이션의 종류와 특징을 먼저 살펴보고 차세대 웹 표준 기술이면서 각 프레임워크에서 접목하고 있는 HTML5의 주요 기능을 설명하는 것으로 시작한다. 그리고 2부부터 본격적으로 세 가지 프레임워크의 사용법을 다루는데, 차례대로 jQTouch, jQuery Mobile, Sencha Touch의 특징과 활용법을 상세히 다룬다. 마지막으로 각 기술을 활용해 간단한 데모를 직접 만들어 보면서 실무에 적용하기 위한 기초 체력을 배양한다.

필자는 여러분이 이러한 프레임워크의 사용법을 빠르게 익혀 모바일 웹앱을 개발하는 데 쉽게 활용할 수 있게끔 책을 집필했다. 부족한 점이 많은 필자가 책을 내놓으려니 부끄럽기 그지없지만 지금까지 습득한 지식을 공유하고 기술적인 교류를 한다는 생각으로 준비했으니 부디 조금이나마 도움이 됐으면 하는 바람이다.