이 책에서는 다양한 모바일 플랫폼을 지원하는 편리한 애플리케이션 개발 방법을 제시한다. HTML5 기반의 프레임워크인 센차터치로 작성된 코드는 iOS와 안드로이드, 블랙베리에서 쉽고 빠르게 애플리케이션으로 배포될 수 있다. 기초 및 응용 서비스 개발에 필요한 애플리케이션의 개발, 배포 환경 설정방법과 단계별 다양한 예제를 담고 있어서, 개발자는 센차터치를 통해 네이티브 애플리케이션의 모양과 느낌을 갖는 애플리케이션을 개발할 수 있다.


[ 이 책에서 다루는 내용 ]

■ 개발 및 프로덕션 환경 설정
■ 애플리케이션에 애니메이션과 미디어 기능 구현
■ 오프라인에서 사용 가능한 애플리케이션 작성
■ 매력적인 사용자 뷰 작성
■ 구글 지도에서 위치 정보 제시
■ 효과적이고 효율적인 애플리케이션 데이터 저장과 처리
■ 다양한 터치 이벤트를 갖는 상호작용과 UI 반응 구축


[ 이 책의 대상 독자 ]

이 책은 HTML5 표준을 따르는 모바일 애플리케이션 개발에 사용되며 안드로이드, iOS, 블랙베리 같은 다양한 플랫폼에서 동작하는 프레임워크를 배우려는 독자를 위한 것이다. 개발자들이 센차터치 기능을 이해하고, 특히 실질적인 요구를 충족할 수 있도록 여러 가지 방법을 제공한다.


[ 이 책의 구성 ]

1장, ‘시작 준비’에서는 iOS, 안드로이드, 블랙베리에 적합한 개발 환경을 설정한다. 브라우저나 에뮬레이터 또는 실제 디바이스에서 애플리케이션을 구축하고 테스트 가능한 환경을 설정하기 위한 방법을 자세하게 다룬다. 이 장의 후반부에서는 애플리케이션이 실행되는 디바이스와 플랫폼을 인식하고 플랫폼에서 제공하는 기능과 방향 변경을 처리하는 방법을 알아보며, 또한 다양한 플랫폼과 디바이스에서 프로파일을 만드는 방법과 이 프로파일을 적용해 애플리케이션의 환경을 설정하는 방법을 알아본다. 또한 이를 위해 사용되는 센차터치 API에 대해 살펴본다.

2장, ‘폼 관련 요구 대응’에서는 센차터치가 제공하는 다양한 폼 필드를 비롯해, 사용자를 위해 폼에서 각 필드를 설정하고 일반적으로 폼을 검증할 수 있게 설정하는 방법 등 폼과 관련된 모든 내용을 알아본다. 검색, 이메일, 날짜피커, 셀렉트, 슬라이더, 체크박스, 텍스트 상자, 필드세트 같은 다양한 필드의 자세한 사용법을 이 장에서 다룬다.

3장, ‘컨테이너와 레이아웃’에서는 하나 이상의 하위 항목을 포함하는 컨테이너와, 화면에 콘텐츠를 적절하게 배치하도록 도와주는 레이아웃을 다룬다. 프레임워크가 사용할 수 있는 다양한 형태의 컨테이너와 레이아웃을 프레임워크와 동작과 함께 다룬다. 여기서 각 동작은 화면에 하위 항목들을 배치하기 위해 사용자의 레이아웃을 포함하고 각 컨테이너를 중첩하기 위한 애플리케이션 개발의 핵심이다.

4장, ‘사용자 정의 뷰 구축’에서는 센차터치가 제공하는 컴포넌트만으로는 레이아웃과 사용자가 원하는 모양과 느낌을 보여주기에 충분치 않기 때문에 사용자 정의 뷰를 사용하는 방법을 다룬다. 이 장에서는 사용자 정의 뷰를 구축하는 방법 및 사용자 정의 뷰와의 상호작용을 위한 이벤트 처리 방법을 살펴보고, 이를 위해 사용되는 Template, XTemplate, DataView 클래스에 대해서도 알아본다.

5장, ‘데이터와 데이터 소스’에서는 다양한 데이터 소스를 사용해 클라이언트 측에 데이터를 저장하고, 그 데이터를 가장 효율적인 방법으로 사용하는 방법을 다룬다. 로컬 데이터뿐만 아니라 원격 데이터를 사용하는 방법도 알아본다. 또한 폼을 비롯해 다양한 컴포넌트와 데이터를 연결하는 방법과 데이터 유효성 검사, 필터링, 데이터 그룹화와 정렬 등을 다룬다.

6장, ‘컴포넌트 구성’에서는 버튼, 액션시트, 리스트, 인덱스바, 중첩리스트, 피커, 툴바 같은 센차터치의 다양한 컴포넌트를 다루는데, 이러한 컴포넌트를 구성하는 방법을 보여준다.

7장, ‘시청각 효과’에서는 오디오와 비디오 같은 미디어와 그래픽으로 데이터를 표현하기 위해 다양한 그래프와 차트를 사용하는 방법을 다룬다. 차트는 센차터치에서 제공되지 않으므로, 이 장에서는 센차터치에 차트 프레임워크를 설정하고 상호작용하는 차트를 구축하는 방법을 설명한다.

8장, ‘오프라인에서의 애플리케이션 사용’에서는 디바이스나 플랫폼에서 오프라인 모드를 인식하는 방법과, 오프라인 모드에서도 동작하도록 애플리케이션을 모델링하는 방법을 살펴본다.

9장, ‘이벤트에 반응해 사용자 참여시키기’에서는 브라우저에서의 마우스 이벤트처럼 터치 디바이스에서의 탭, 더블탭, 드래그, 스와이프 같은 터치 동작에 대한 이벤트를 발생시키기 위해 프레임워크가 제공하는 터치 이벤트와 해당 이벤트에 대한 반응을 처리하는 방법을 살펴본다.

10장, ‘위치 정보를 활용한 검색 기능 향상’에서는 디바이스나 플랫폼에서 위치 정보를 추출하고 이를 활용하는 방법을 보여준다. 디바이스의 이동 속도와 방향을 찾아내는 방법과, 사용자가 관심 있어 하는 정보를 보여주기 위해 구글 지도와 위치 정보를 통합하는 방법 등 다양한 사용 방법을 살펴본다.

[ 저자 서문 ]

센차터치(Sencha Touch)는 터치 기반의 애플리케이션을 개발하기 위해 HTML5 표준을 따르는 프레임워크다. 이 프레임워크를 사용해 작성된 애플리케이션은 수정 없이도 iOS, 안드로이드, 블랙베리 기반의 터치 디바이스에서 실행될 수 있다. 모바일 플랫폼은 다양한 클라이언트 측과 서버 측 데이터 소스를 사용해 효율적으로 데이터 패키지를 설계한다. 프레임워크는 모바일 플랫폼과 유사한 형태로 여러 가지 내장된 UI 컴포넌트를 사용한다. 이 외에도 프레임워크는 DOM을 사용하는 API를 제공하며, 모든 엔터프라이즈가 원하는 프레임워크와 그 기대치가 서로 잘 조화되어 있고 이에 대한 확장성을 제공한다.


[ 저자 소개 ]

아지트 쿠마르(Ajit Kumar)
인도 방갈로르의 하니웰(HoneyWell)에서 임베디드 시스템 분야의 IT 경력을 쌓기 시작해, 11년 후에는 기업 비즈니스 애플리케이션으로 옮겨왔다. 처음부터 그는 오픈소스의 든든한 후원자이자 발기인이었고, 오픈소스는 인도처럼 자유롭고 다양하면서도 평등한 형태라는 강력한 믿음을 지니고 있다.
아키텍처, 프레임워크, 도구를 통해 생각의 속도로 소프트웨어를 개발할 수 있는 날을 꿈꾸며 끊임없이 노력한다.
아지트는 비하르 공과대학에서 컴퓨터공학 학사학위를 취득했으며, 인도의 하이데라바드에 기반을 둔 워킹 트리(Walking Tree)를 공동으로 설립했다. 이곳에서 CTO 역할을 수행하며 자신의 목표를 달성하고자 연구 중이다.


[ 옮긴이의 말 ]

우리는 매일 스마트폰을 사용하고 있다. 또한 시간이 지날수록 더 많은 스마트폰 사용자가 생겨날 것이다. 이렇게 많은 사람이 스마트폰을 품 안에 지니고 다니면서 사용하는 까닭은 우리의 생활을 좀 더 스마트하게 도와주는 다양한 모바일 애플리케이션(이하 앱) 때문일 것이다.

수많은 사람이 앱을 사용하고, 또 기업이나 개인이 그만큼의 앱을 개발하고 있다. 대학에 있으면서 스마트폰 관련 강의를 하고, 정부지원 과제를 수행하면서 앱 개발 전체 과정을 지도하는 나 역시 많은 앱을 다운로드해 사용하고 있으며, 또한 여러 앱을 개발했다. iOS, 안드로이드, 블랙베리 등의 앱을 만들기 위해서는 각 OS의 특징을 습득하고 그에 따른 특정 언어로 프로그래밍을 해야 하는 어려움이 있다. 다양한 스마트 기기를 효과적으로 지원하려면 웹 앱 개발도 필요하다. 센차터치는 iOS, 안드로이드, 블랙베리 등 다양한 스마트 기기에서 게임까지 구현할 수 있는 강력한 자바스크립트 프레임워크다. 그러나 지나치게 많은 기능을 제공하기 때문에 진입장벽이 높다는 단점이 있다. 센차터치를 이용해 쉽게 웹 앱을 개발할 수 있으면서도 강력한 기능을 갖는 방법을 살펴보던 중 이 책의 원서인 『Sencha Touch Cookbook』을 알게 되었다. 책의 내용도 체계적으로 기술되어 있어 많은 웹 앱 개발자가 손쉽게 접근할 수 있으리라 판단해 번역을 시작했다.

이 책은 터치 스크린 기기에서 네이티브 모양과 느낌을 갖는 웹 앱을 개발할 수 있게 도와줄 것이며, 한 번의 코드 작성으로 iOS, 안드로이드, 블랙베리에 시간과 비용을 절약하면서 앱을 바로 배포할 수 있다. 센차터치로 웹 앱을 개발하고자 하는 개발자들에게 훌륭한 길잡이가 돼줄 책이다.

- 대표역자 조한진


[ 옮긴이 소개 ]

조한진
한남대학교 컴퓨터공학과 학부와 대학원을 졸업했다. 2002년부터 극동대학교 교수로 부임해 정보보호 분야와 모바일 융합 분야를 연구 중이다. 2012년부터 스마트모바일학과에서 학생들을 지도하며, 현재 스마트모바일학과 학과장과 스마트 앱 창작터 센터장을 맡고 있다. 학회 활동으로는 한국콘텐츠학회에서 홍보위원장을 맡고 있다. 번역서로는『와이어샤크 네트워크 완전 분석』(에이콘출판, 2011년), 『iPhone JavaScript Cookbook 한국어판』(에이콘출판, 2012년)과 『(개정판) 와이어샤크를 활용한 실전 패킷 분석』(에이콘출판, 2012년)이 있다.

이준환
단국대학교 전자공학과에서 학부와 대학원을 졸업하였다. 2001년부터 극동대학교 교수로 부임하여, 신호처리 및 머신비젼, 생체인식 분야를 연구하고 있다. 2012년부터 스마트모바일학과에서 학생들을 지도하고 있으며, 현재 극동대학교 기획처장을 맡고 있다. 학회활동으로는 한국디지털정보미디어학회에서 총무이사를 맡고 있다. 번역서로는『와이어샤크 네트워크 완전 분석』(에이콘출판, 2011년),『iPhone JavaScript Cookbook 한국어판』(에이콘출판, 2012년)이 있다.

안효창
상지대학교 전자계산공학과을 졸업하고 단국대학교 전자컴퓨터공학과에서 대학원을 졸업하였다. 2011년부터 극동대학교 겸임교수로 재직하여 영상처리 및 패턴인식, 컴퓨터비젼 분야를 연구하고 있다. 2011년부터 극동대 앱창작터의 안드로이드 앱 개발 교육과정에서 강의하고 있다. 2012년부터는 (주)에이다시스템의 대표이사로 재직하여 물체인식 및 추적 시스템을 연구 및 개발하고 있다.

목차

• 1장 시작 준비
  • 개요
  • 안드로이드 기반 개발 환경 설정
  • iOS 기반 개발 환경 설정
  • 블랙베리 기반 개발 환경 설정
  • 브라우저 기반 개발 환경 설정
  • 프로덕션 환경 설정
  • 디바이스 감지
  • 현재 환경에서 지원되는 기능에 대한 정보 찾기
  • 애플리케이션 초기화
  • 프로파일을 사용한 애플리케이션 환경 설정
  • 방향 변경에 대한 반응
    
• 2장 폼 관련 요구 대응
  • 개요
  • FormPanel로 폼 준비하기
  • 검색 사용하기
  • 이메일 필드에 사용자 정의 유효성 검사 만들기
  • DatePicker를 이용해 날짜 사용하기
  • 숨겨진 필드 만들기
  • 셀렉트 필드 사용하기
  • 슬라이더를 사용해 값 변경하기
  • 스피너를 사용해 숫자 핸들 회전시키기
  • 두 가지 선택 토글하기
  • 체크박스와 체크박스 그룹
  • 텍스트와 텍스트 상자
  • FieldSet로 필드 그룹화하기
  • 폼 유효성 검사하기
    
• 3장 컨테이너와 레이아웃
  • 개요
  • 컨테이너 가볍게 유지하기
  • 패널 사용하기
  • 실행 중에 컨테이너에 항목 추가하기
  • CardLayout을 사용해 마법사 구축하기
  • DockLayout을 사용해 패널 도킹하기
  • HBoxLayout을 사용헤 항목 수평 배열하기
  • VBoxLayout을 사용해 항목을 수직 배열하기
  • 레이아웃 혼합하기
    
• 4장 사용자 정의 뷰 구축
  • 개요
  • Template을 사용해 기본 HTML 템플릿하기
  • 고급 템플릿 지정을 위한 XTemplate 사용하기
  • XTemplate을 사용해 조건부 뷰 렌더링하기
  • DataView를 사용해 사용자 정의 뷰 설계하기
  • 필터링된 데이터 표시하기
  • 사용자 동작에 반응하기
    
• 5장 데이터와 데이터 소스
  • 개요
  • 모델 생성하기
  • 데이터 모델을 사용해 폼 로드하기
  • 스토어 사용하기
  • JsonReader를 사용해 들어오는 JSON 데이터를 모델로 변환하기
  • XmlReader를 사용해, 들어오는 XML 데이터를 모델로 변환하기
  • 모델 유효성 검사
  • 사용자 정의 유효성 검사 정의하기
  • 연관성을 이용해 모델과 연결하기
  • SessionStorageProxy를 사용해 세션 특정 데이터 유지하기
  • LocalStorageProxy를 사용해 데이터 유지하기
  • MemoryProxy를 이용해 인메모리 데이터 사용하기
  • AjaxProxy로 AJAX를 통해 데이터 로드하기
  • 데이터 정렬
  • 데이터 그룹화
  • 데이터 필터링
  • 애플리케이션에서 도메인 간 URL 사용하기
    
• 6장 컴포넌트 구성
  • 개요
  • 버튼 사용하기
  • 액션시트를 가진 버튼 시트 생성하기
  • 캐러셀
  • 리스트를 사용해 데이터 목록 관리하기
  • 리스트에서 항목들 그룹화하기
  • 인덱스바를 사용해 데이터 목록 찾기
  • NestedList를 이용해 중첩된 데이터 목록 작업하기
  • 피커를 사용해 선택하기
  • SegmentedButton을 사용해 다수의 뷰 전환하기
  • 탭 패널 사용하기
  • 툴바를 사용해 애플리케이션 기능을 빠르게 실행하기
  • 새 컴포넌트 생성하기
  • 기존 컴포넌트 기능 확장하기
  • 컴포넌트 동작 오버라이딩하기
  • 플러그인을 사용해 기존 컴포넌트에 동작 추가하기
    
• 7장 시청각 효과
  • 개요
  • 애니메이션
  • 통지음 사용하기
  • 비디오 사용하기
  • 앱에 차트 추가하기
  • 영역형 차트 작업하기
  • 세로형 막대 차트 생성하기
  • 가로 및 세로 막대형 그룹 표시하기
  • 누적 및 그룹 방향 전환하기
  • 항목 세부 내용 강조 및 표시하기
  • 게이지 차트 생성하기
  • 꺾은선 차트 생성하기
  • 원형 차트 생성하기
  • 원 회전하기
  • 원 그룹화하기
  • 원 강조하기
  • 방사형 차트 사용하기
    
• 8장 오프라인에서의 애플리케이션 사용
  • 개요
  • 오프라인 모드 감지하기
  • 오프라인에서 데이터 저장하기
  • 오프라인에서 이미지 저장하기
  • 애플리케이션 캐싱
    
• 9장 이벤트에 반응해 사용자 참여시키기
  • 개요
  • 터치 이벤트
  • 스크롤 이벤트
  • 탭 이벤트
  • 더블탭 이벤트
  • 탭 홀드 이벤트
  • 스와이프 이벤트
  • 핀치 이벤트
  • 드래그 이벤트
    
• 10장 위치 정보를 활용한 검색 기능 향상
  • 개요
  • 위치 찾기
  • 위치 자동 업데이트
  • 방향과 속도 추적하기
  • 애플리케이션에 구글 지도 연결하기
  • 구글 지도 옵션 사용하기