• 시작하세요! 모바일 웹 개발
  • jQTouch, jQuery Mobile, Sencha Touch 프레임워크 활용하기

  • 박종명 지음

  • 임베디드 & 모바일 시리즈 _ 016
  • ISBN: 9788992939843
  • 25,000원 | 2011년 06월 30일 발행 | 416쪽



아이폰과 같은 최신 스마트폰이 보급되면서 애플리케이션 장터인 앱 스토어가 등장하고 일반 사용자는 마치 생필품(?)을 소비하듯이 앱(App, 애플리케이션의 줄임말)을 사용하기 시작했다. 최신 스마트폰에서 사용하는 애플리케이션의 종류는 크게 네이티브(Native) 앱과 모바일 웹으로 구분된다. 특히 순수 웹 기술만으로 네이티브 앱과 유사한 UI와 사용성을 제공하는 애플리케이션을 모바일 웹앱(Web App)이라고 하는데, 모바일 웹앱은 플랫폼에 종속적이지 않고 기존의 익숙한 웹 기술만 사용하므로 개발 비용과 유지비가 절감되고 실시간 업데이트가 가능해 사용자의 요구에 빠르게 피드백할 수 있어 향후 많은 애플리케이션이 모바일 웹앱으로 구현될 전망이다. 실제로 어느 조사에 의하면 현재 사용 중인 (게임을 제외한) 네이티브 앱의 70퍼센트 가량은 기능상의 손실이 거의 없이 모바일 웹앱으로 구현 가능하다고 한다. 또한 웹과 네이티브 앱의 장점을 모두 취할 수 있는 하이브리드 앱 역시 내부적인 구현 모델은 모바일 웹앱의 형태를 띤다.

이 책은 최신 스마트폰을 대상으로 한 최적화된 모바일 웹앱을 개발하는 데 사용하는 세 가지 프레임워크의 특징과 활용법을 쉽고 빠르게 전해준다. jQTouch, jQuery Mobile, Sencha Touch의 세 프레임워크는 순수 웹 기술만으로 구현된 모바일 친화적인 각종 UI 컨트롤을 제공하고 애니메이션 효과와 자동 내비게이션, 터치 이벤트 반응, 비동기 통신 등 모바일에 최적화된 기능을 프레임워크 차원에서 제공해 모바일 웹앱 개발의 생산성과 안정성을 획기적으로 끌어올린다.

이 책에서는 먼저 모바일 애플리케이션의 종류와 특징을 소개하고 모바일 웹앱이 지닌 상대적인 장점을 설명한다. 그리고 세 프레임워크에 접목된 차세대 웹 표준 기술인 HTML5의 주요 기능을 살펴보고 이어서 본격적으로 jQTouch, jQuery Mobile, Sencha Touch의 특징과 활용법을 자세히 설명한다. 독자는 이 책을 토대로 모바일 웹앱 개발을 쉽게 시작할 수 있을 것이다.

원 소스 멀티 플랫폼의 실현! 모바일 웹!

현존하는 네이티브 앱의 70퍼센트(게임앱 제외) 가량은 기능 손실 없이 모바일 웹앱으로 구현 가능!

모바일 웹앱 개발을 위한 jQTouch, jQuery Mobile, Sencha Touch 프레임워크의 쉽고 빠른 활용서!

모바일 웹은 멀티 플랫폼 지원과 익숙한 개발환경, 실시간 업데이트가 가능해 기업의 모바일 대응에 매우 효과적인 형태의 애플리케이션입니다. 이 책은 최신 스마트폰을 대상으로 한 최적화된 모바일 웹앱을 개발하는 데 사용하는 세 가지 프레임워크의 특징과 활용법을 쉽고 빠르게 알려줍니다.

★ 이 책에서 다루는 내용

  • 모바일 애플리케이션 종류와 특징(모바일 웹앱의 상대적인 장점)
  • 차세대 웹 표준 HTML5의 주요 기능
  • 모바일 웹 개발 프레임워크 3종 소개 및 비교
  • jQTouch 소개 및 활용법
  • jQuery Mobile 소개 및 활용법
  • Sencha Touch 소개 및 활용법

박종명

게임 서비스 모니터링, 게임 빌링 시스템, 게임 관리 통합 솔루션 등 주로 게임 서비스 플랫폼 영역의 프로젝트를 수행해 왔으며 다수의 웹 사이트 개발 경험이 있다. Microsoft MVP(Visual C# 부문, 2008년)를 수여했으며 월간 마이크로소프트웨어에 닷넷 관련 기술 칼럼을 다수 기고하는 등 닷넷 기술에 관심이 많다. 최근에는 진화하는 모바일과 웹 기술에 매료되어 관련 기술을 탐독하고 있으며 차세대 웹과 진보적인 게임 플랫폼에 흥미를 가지고 있다. 현재 ㈜스마일게이트에서 게임 퍼블리싱과 게임 포털 서비스를 위한 플랫폼 구축에 참여하고 있으며 닷넷 블로그(http//mkexdev.net)와 모바일 블로그(http://m.mkexdev.net)를 운영하고 있다.

  • 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. 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. Collapsible 블록
      8. 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 리더 개발

예제코드 관련 GitHub 페이지

관련 글