모든 모바일 기기에서 동작하는 애플리케이션을 만들고 싶은가? 그렇다면 웹앱이 답이다. 그 웹앱을 아주 빠르고 가볍게 만들 수 있는 프레임워크가 바로 제이쿼리 모바일(jQuery Mobile)이다. 태어난 지 불과 일 년밖에 되지 않은 제이쿼리 모바일은 다른 프레임워크와 비교해 훨씬 가볍고, 사용하기 쉬우며, 호환성도 좋다. 마치 제이쿼리 모바일을 닮은 이 책은 제이쿼리 모바일로 웹페이지, 웹앱을 만드는 방법과 제이쿼리 모바일의 각 기능을 예제와 함께 빠르고 쉽게, 그러면서도 아주 효율적으로 설명한다.


[ 소개 ]

제이쿼리 모바일 프레임워크는 제이쿼리의 가장 최신 솔루션이다. 제이쿼리 모바일 프레임워크는 오프소스이며, iOS, 안드로이드, 바다(Bada), 블랙베리, 노키아, 어도비 등 대규모 사업자들의 지원을 받고 있다. 진정한 크로스 플랫폼(cross-platform)이며, 이 새로운 제이쿼리 모바일로 애플리케이션을 만드는 것은 아주 쉽다. 이 책을 통해 최고 수준의 모바일 웹앱을 개발하는 방법을 이해할 수 있다.

이 책에서는 제이쿼리 모바일 프레임워크로 무엇을 할 수 있으며, 어떻게 사용할 수 있는지 알아본다. 모든 종류의 머신에 설치하는 방법을 철저하게 다룬다. 설치에서 설명, 그리고 디자인에서 배포까지 모바일 웹앱 개발을 시작할 때 알아야 할 모든 내용을 다룬다.


[ 이 책에서 다루는 내용 ]

■ iOS 기기만을 대상으로 하는 대부분의 라이브러리나 프레임워크와 비교해 제이쿼리 모바일이 훨씬 뛰어난 이유
■ 제이쿼리 모바일의 이벤트를 처리하고, 옵션을 변경하고, 룩앤필을 커스터마이즈하는 방법
■ 페이지와 대화상자를 만들고 꾸미는 방법, 제이쿼리 모바일 프레임워크가 링크를 처리하는 원리
■ 리스트 뷰의 기본 원리와 제이쿼리 모바일이 정보를 표현하는 방법 중 리스트 뷰가 중요한 이유
■ 원하는 대로 콘텐츠를 나타내고 (모바일 환경에서도) 모든 것을 RIA처럼 보이게 만드는 방법
■ 사용자에게 추가적인 옵션과 제어를 제공하는 툴바, 위치, 테마 사용법
■ 버튼과 모바일 환경에서 버튼의 핵심 역할, 버튼을 그룹으로 묶는 방법과 더 나은 사용자 경험을 위해 커스터마이즈하는 방법


[ 이 책의 대상 독자 ]

이 책은 기존 제이쿼리 사용자가 제이쿼리 모바일의 특징을 살펴볼 수 있게 도와주는 책이다. 모바일 웹 개발의 세계에 뛰어들고자 하는 제이쿼리 사용자를 대상으로 한다. 필요한 것은 제이쿼리에 대한 기본 지식과 모바일 개발에 대한 관심뿐이다. 이 책을 향후 제이쿼리 모바일 프레임워크를 사용해 모바일 웹을 개발하는 벤처 회사의 시작점으로도 삼을 수 있다.


[ 이 책의 구성 ]

1장, 제이쿼리 모바일 소개에서는 제이쿼리 모바일 프레임워크의 배경 정보를 소개한다. 그리고 널리 사용 중인 여러 모바일 프레임워크와 비교해 차이점과 제이쿼리 모바일의 장점도 설명한다. 설치와 기타 정보도 다룬다.

2장, 페이지와 대화상자: 콘텐츠 구성에서는 페이지를 구축하는 방법과 페이지끼리 연결하거나 멀티페이지(multi-page) 템플릿을 만드는 방법을 살펴본다. 대화상자(dialog)도 비슷한 방법으로 소개한다.

3장, 제이쿼리 모바일 설정과 확장에서는 기본 설정을 수정하고 이벤트(탭, 쓸어내리기, 애니메이션 등)를 처리하는 방법을 배우고, 향후 웹페이지의 엘리먼트와 상호작용하기 위해 제이쿼리 모바일에 내장된 메소드와 유틸리티를 이용하는 방법을 배운다.

4장, 콘텐츠: 읽고 쓰고 소통하기에서는 콘텐츠를 다루고, 기본적으로 콘텐츠가 어떻게 표현되고 모양이 어떻게 바뀔 수 있는지 설명한다. (정보를 구성하는) 그리드와 (단락을 숨기거나 보여줄 때 사용하는) 접을 수 있는 블록 같은 엘리먼트를 어떻게 사용하는지 알아본다.

5장, 툴바: 쉬운 내비게이션에서는 툴바의 중요성을 언급한다. 그리고 툴바를 사용해 추가 옵션을 제공하고 사용자를 제어하는 방법, 툴바를 배치하고 꾸미는 방법을 알아본다.

6장, 버튼: 모바일 클릭에서는 모바일 개발 시 버튼과 버튼의 핵심 역할을 알아본다. 버튼을 어떻게 그룹으로 묶고, 더 나은 모바일 환경 사용자 경험을 위해 어떻게 수정할 수 있는지도 알아본다.

7장, 폼: 정보 전달에서는 폼(form)을 만들고 에이잭스(Ajax)를 통해 데이터를 전송하는 방법을 다룬다. 또한 슬라이더(slider), 토글 스위치, 검색 창을 어떻게 구현하는지 살펴본다.

8장, 리스트 뷰: 정보 구성에서 다루는 리스트 뷰(list view)는 콘텐츠를 구성하고 배치하는 아주 큰 역할을 담당한다. 8장에서는 리스트 엘리먼트의 기본을 소개하고 뮤직 플레이어 인터페이스 예제를 구현한다.

부록 A, API 호출과 속성에서는 제이쿼리 모바일 내부와 상호작용할 수 있는 API 호출 목록과 속성을 소개한다.

부록 B, 리소스와 문제 해결에서는 제이쿼리(모바일)과 자바스크립트를 더 잘 이해할 수 있게 도와주는 유용한 리소스, 개발 도구, 문제 해결 방법 등을 소개한다.

[ 저자 서문 ]

제이쿼리 모바일 프레임워크는 제이쿼리의 가장 최신 솔루션이다. 제이쿼리 모바일 프레임워크는 오프소스이며, iOS, 안드로이드, 바다(Bada), 블랙베리, 노키아, 어도비 같은 대규모 사업자들의 지원을 받고 있다. 진정한 크로스 플랫폼(cross-platform)이며, 이 새로운 제이쿼리 모바일로 애플리케이션을 만드는 것은 아주 쉽다. 이 책을 통해 최고 수준의 모바일 웹앱을 개발하는 방법을 이해할 수 있을 것이다.

이 책에서는 제이쿼리 모바일 프레임워크로 무엇을 할 수 있으며, 어떻게 사용할 수 있는지 알아본다. 모든 종류의 디바이스에 설치하는 방법을 철저히 다룬다. 보통 새로운 기술을 접할 때 가장 어려운 부분 중 하나가 제품을 올바르게 설치하는 것이기 때문이다.

설치에서 설명, 그리고 디자인에서 배포까지 모바일 웹앱 개발을 시작할 때 알아야 할 모든 내용을 다룬다. 제이쿼리 모바일의 소개로 시작해 프레임워크의 핵심적인 특징을 전반적으로 살펴보며, 모바일 웹앱을 구현하기 위해 프레임워크를 사용하는 방법도 소개한다. 페이지마다 개발 팁과 문제 해결도 찾아볼 수 있다. 다시 말해 모바일 기기를 위한 웹앱을 만들기 위해 제이쿼리 모바일 개발자가 알아야 하는 모든 주제를 다룬다. 제이쿼리 모바일과 유명 프레임워크와의 비교, 다양한 운영 체제에 설치하는 방법, 페이지 꾸미기, 웹사이트 레이아웃, 콘텐츠 포맷을 설명한다. 버튼, 툴바, 대화상자, 폼(form), 리스트 뷰에 대한 정보를 소개하고, 나아가 가장 좋은 방법과 제2의 대안도 제안한다.

이 책은 최근 가장 유명한 자바스크립트 모바일 프레임워크를 배우는 데 도움이 될 것이다. 위젯과 엘리먼트가 동작하는 방법과, 동작을 수정하거나 향상시키는 방법도 배울 수 있다.

예제를 통해 제이쿼리 모바일의 모든 기능을 살펴볼 수 있고, 모바일 웹 개발의 다양한 경우에 대비할 수 있다.


[ 저자 소개 ]

줄리오 바이(Giulio Bai)
이탈리아에 사는 법학도로, 여가 시간 대부분을 법과 관련되지 않은 것을 갖고 놀며 보낸다. 줄리오가 이룬 업적 리스트를 아무리 짧게 만들어 보려 해도, 참여했던 프로젝트(언제나 결국에는 망했지만)의 숫자를 줄이기는 힘들다. 그 불행한 벤처들에 대한 어떤 책임도 있어서는 안 된다. 그 벤처들은 성공할 만한 가능성이 없었다.


[ 옮긴이의 말 ]

혹시 아이폰 애플리케이션을 만들어 본 경험이 있는가? 아니면 안드로이드 애플리케이션은 어떤가? 혹은 둘 다? 본격적인 스마트폰 시대가 도래하면서 스마트폰 애플리케이션을 개발하는 개발자들이 급격히 늘어났다. 그런데 개발자들의 고충을 들어보면, 동일한 기능을 각 플랫폼 별로 따로 개발해야 한다는 공통된 어려움을 호소한다. 개발 자체도 힘들 뿐더러 소스코드 관리 등 유지 보수도 쉽지 않다.

이런 환경에서 요즘 떠오르는 화두는 바로 ‘웹앱(Web App)’이다. 많은 전문가는 조만간 모바일 웹앱이 네이티브 앱의 점유율을 뛰어넘을 것이라고 전망한다. 웹앱의 힘은 바로 크로스 플랫폼(cross-platform)이다. 네이티브 앱은 각 플랫폼에서만 동작하지만, 웹앱은 브라우저, 엄밀히 말하면 해당 웹 프레임워크를 지원하는 브라우저, 하지만 근래 사용되는 웬만한 모바일 브라우저만 있으면 모든 기기에서 동일하게 보이고 똑같은 기능을 제공한다.
최근 자바스크립트의 위상이 다시 한 번 높아졌다. 자바스크립트는 밋밋한 웹 페이지를 화려하고 아름답게 꾸며준다. 다양한 자바스크립트 라이브러리들이 있지만, 그 중 “Writing less, do more”라는 모토를 내세운 제이쿼리가 단연 돋보인다. 제이쿼리는 가볍고 코드가 간결하며, 모든 브라우저에서 사용할 수 있다. 제이쿼리를 모바일 환경에 맞게 간소화 시킨 것이 바로 제이쿼리 모바일이다. 제이쿼리 모바일을 사용하면 모든 모바일 기기에서 사용할 수 있는 웹 페이지, 웹앱을 쉽고 간단하게 개발할 수 있다.

본문에서도 다루는 내용이지만, 제이쿼리 모바일은 다른 모바일 자바스크립트 프레임워크와 비교해 뛰어난 점이 많다. 제이큐터치(jQTouch)와 비교해 아주 가볍고, 센차터치(Sencha Touch), 아이웹킷(iWebKit) 등과 비교하면 호환성 측면에서 우수하다. 여러분이 웹앱을 처음 제작하고자 하는 개발자라면, 이 제이쿼리 모바일은 탁월한 선택이다. 이 책은 제이쿼리 모바일을 처음으로 접하는 모바일 개발자를 대상으로 한다. 제이쿼리를 어느 정도 알고 있으면 많은 도움이 될 것이다. 제이쿼리를 모른다고 겁낼 필요는 없다. 이 책에서도 제이쿼리에 대해 어느 정도 다루고 있으며, 에이콘출판사에서 출간한 『jQuery Novice to Ninja 한국어판』(2011)을 함께 공부하는 것도 좋은 방법이다.

제이쿼리 모바일은 태어난 지 얼마 되지 않는 성장하고 있는 프레임워크다. 2010년 8월에 시작된 프로젝트이며 끊임없이 발전 중이다. 이 번역을 진행하는 동안 베타 버전을 유지하다가, 2011년 11월에 1.0 버전이 정식 릴리스됐다. 1.0 버전은 그 동안의 불안정한 요소를 대부분 수정했고, 성능도 30~50% 가량 높아졌으며, 지원하는 브라우저 수도 늘었다. 제이쿼리 모바일은 앞으로의 발전이 더욱 기대되는 프레임워크다. 일 년 정도 밖에 안 된 프로젝트이다 보니 국내에서 참고할 서적이 상대적으로 부족했다. 이 책이 제이쿼리 모바일을 배우고자 하는 사람들의 갈증을 해소해주기를 기대한다.


[ 옮긴이 소개 ]

장재현
KAIST 전산학과를 졸업하고 서울대학교에서 석사 과정을 마쳤다. 모바일 소프트웨어를 전공했으며, 게임 업계에 종사한 적도 있다. 지금은 삼성전자에서 안드로이드 소프트웨어를 개발 중이다. 옮긴 책으로 에이콘출판사에서 펴낸 『(개정판) 해킹: 공격의 예술』(2010), 『The Android Developer’s Cookbook 한국어판』(2011), 『Android User Interface Development 한국어판』(2011)이 있다.

목차

• 1장 제이쿼리 모바일 개요
  • 제이쿼리 모바일의 탄생 배경
  • 제이쿼리 모바일과 여타 라이브러리
    • 제이큐터치
      • 사용 대상
      • 모양
      • 기억해야 할 점
    • 센차터치
      • 사용 대상
      • 모양
      • 기억해야 할 점
    • iUI
      • 사용 대상
      • 모양
      • 기억해야 할 점
    • iWebKit
      • 사용 대상
      • 모양
      • 기억해야 할 점
    • 비교
      • 패키지 비교
      • 제이쿼리 모바일을 선택해야 하는 이유
  • 제이쿼리 모바일을 얻는 방법
  • 제이쿼리 모바일 따라 하기
  • 기여하기
  • 정리
    
• 2장 페이지와 대화상자: 콘텐츠 구성
  • 페이지 구조의 이해
  • 멀티페이지 템플릿의 동작 방식
  • 내부 페이지와 외부 페이지의 연결
  • AJAX에서의 탐색과 페이지 전환
  • 대화상자: 생성, 삭제, 동작
  • 페이지와 대화상자 테마
  • 정리
    
• 3장 제이쿼리 모바일 설정과 확장
  • 기본 설정 수정
  • 이벤트 처리
    • 터치 이벤트
    • 스크롤 이벤트
    • 페이지 관련 이벤트
  • 메소드와 유틸리티 이용
  • 테마 프레임워크 사용
  • 정리
    
• 4장 콘텐츠: 읽고, 쓰고, 소통
  • 콘텐츠의 표시되는 모양
    • 기본 HTML 마크업 스타일
  • 열과 격자 사용
    • 버튼이 있는 간단한 격자를 만드는 방법
    • 열이 두 개 이상 있는 격자를 만드는 방법
  • 접을 수 있는 블록
    • 중첩된 접을 수 있는 블록
    • 접을 수 있는 세트
  • 콘텐츠 테마
  • 정리
    
• 5장 툴바: 쉬운 내비게이션
  • 툴바의 작동 방식
  • 여러 종류의 바
    • 헤더 바
      • 헤더 만들기
      • 커스텀 버튼
    • 푸터 바
      • 푸터 만들기
      • 버튼과 기타 엘리먼트 추가
    • 내비게이션 바
      • navbar 만들기
      • 커스텀 navbar
  • 배치 방법
    • 고정 배치
    • 전체 화면 배치
    • 변하지 않는 푸터
  • 툴바 테마
  • 정리
    
• 6장 버튼: 모바일 클릭
  • 제이쿼리 모바일 버튼의 룩앤필
  • 버튼 마크업과 아이콘
    • 링크 버튼 만들기
    • 폼 버튼 만들기
    • 아이콘 추가
  • 버튼 표시
    • 인라인 버튼
    • 그룹 버튼
  • 버튼 테마
  • 정리
    
• 7장 폼: 정보 전달
  • 기본 폼
    • 폼 구조와 초기화
  • 입력 엘리먼트
    • 텍스트 입력
      • 텍스트 창
      • 비밀번호 창
      • 텍스트 영역
    • 검색 입력
  • 플립 스위치, 라디오 버튼, 체크박스
    • 플립 토글 스위치
    • 라디오 버튼
    • 체크박스
  • 슬라이더와 선택 메뉴
    • 슬라이더
    • 선택 메뉴
  • 폼 테마
  • 정리
    
• 8장 리스트 뷰: 정보 구성
  • 리스트 뷰의 기본과 관례
  • 요구 사항에 따른 리스트 타입 선택
    • 중첩 리스트
    • 숫자 리스트
    • 읽기전용 리스트
    • 분할 버튼 리스트
  • 리스트 꾸미기
    • 카운트 버블
    • 리스트 디바이더
    • 이미지
    • 콘텐츠 포맷
    • 검색 필터 바 구현
  • 정리
    
• 부록 A API 호출과 설정
  • 속성과 메소드 목록
    • $.mobile 옵션
    • $.mobile 메소드
    • $.mobile.path 메소드
    • $.mobile.path 속성
    • $.mobile.urlHistory 메소드
    • $.mobile.urlHistory 속성
    • $.support 테스트
    • 버튼 플러그인
    • 체크박스와 라디오 버튼 플러그인
    • 접을 수 있는 플러그인
    • 대화상자 플러그인
    • 리스트 뷰 플러그인
    • navbar 플러그인
    • 페이지 플러그인
    • 선택 메뉴 플러그인
    • 슬라이더 플러그인
    • 텍스트 입력 플러그인
      
• 부록 B 리소스와 문제 해결
  • 온라인/오프라인 리소스
    • 제이쿼리/제이쿼리 모바일 공식 문서
    • 제이쿼리 1.4 레퍼런스 가이드
    • 제이쿼리 모바일 갤러리
  • 개발 도구
    • 파이어버그(파이어폭스용)
    • 인터넷 익스플로러 8 개발 도구
    • 사파리 웹 인스펙터
    • 드래곤플라이(오페라용)
    • 크롬 웹 인스펙터
  • 문제 해결
    • $(document).ready
    • 타겟 객체