\"모바일 웹 개발의 필수품, jQuery Mobile\"
아이폰, 안드로이드폰, 이제는 윈도우폰 7까지 스마트폰의 종류가 다양화되면서 많은 전문가는 모바일 웹 앱(Mobile Web App)이 네이티브 앱(Native App)을 앞서리라 전망합니다. 플랫폼마다 따로 코드를 관리해야 하는 네이티브 앱과 달리 모바일 웹 앱은 광범위한 스마트폰과 태블릿에서 동작하니까요.
RIA와 AJAX 기술 등의 확산으로 자바스크립트(JavaScript)의 위상은 굉장히 높아졌습니다. jQuery는 이런 자바스크립트 라이브러리 중 가장 인기 있는 라이브러리이며 모바일에 최적화된 jQuery Mobile(제이쿼리 모바일)은 jQuery에 기반을 뒀습니다. 굉장히 든든한 우군을 둔 셈이죠.
jQuery Mobile은 아이폰이나 안드로이드 폰 등 다양한 장치에서 일광성 있게 동작하고 보이는 웹 앱을 만드는 터치 기반 인터페이스입니다. 이 책은 HTML5, CSS3, 자바스크립트(JavaScript) 코드 예제, 스크린샷, 완전한 애플리케이션을 만드는 단계별 가이드를 제공합니다.
jQuery에 이미 익숙하다면 지금 당장 크로스 플랫폼 모바일 앱을 만들 수 있습니다. 이 책을 다 읽고 나면 트위터(twitter) 웹 앱을 만들 수 있을 겁니다. 지금 당장 jQuery Mobile을 시작하세요.

[지은이 서문]
모바일 애플리케이션은 크게 두 가지 형태입니다. 하나는 장치에 고유하게 동작하는 컴파일된 프로그램인 고유 애플리케이션(네이티브 앱)이며, 다른 하나는 장치의 웹 브라우저 안에서 동작하는 모바일 웹 애플리케이션입니다.
아이튠즈 앱스토어와 안드로이드 마켓에서 경제적인 성공을 거둔 사례 덕분에 요즘 사람들의 관심은 네이티브 앱에 있습니다. 물론 빠르고, 기반 장치의 능력을 모두 활용할 수 있다는 긍정적인 이유도 있습니다. 하지만 네이티브 앱에는 한 가지 중요한 단점이 있습니다. 네이티브 앱은 이식성이 없습니다. 여러 가지 플랫폼에서 동작하는 앱을 만들고 싶다면 여러 언어로 작성하거나(기반 코드를 여러 개 관리해야 하겠죠), Titanium이나 PhoneGap 같은 플랫폼 추상화 프로그램을 써야 합니다. 반면 모바일 웹 애플리케이션은 HTML과 CSS, 자바스크립트로 작성되며 모바일 장치의 웹 브라우저 위에서 동작합니다. 따라서 기반 코드는 하나만 관리하면 됩니다. 단 모바일 웹 애플리케이션은 여러 플랫폼과 브라우저의 조합을 고려해야 합니다.
jQuery Mobile을 만나보세요. 유명한 자바스크립트 라이브러리 jQuery에 기반한 jQuery Mobile은 다양한 장치에서 동작하는 모바일 웹 애플리케이션을 제작할 수 있게 만들어졌습니다. jQuery Mobile을 사용하면 지원하는 모든 장치에서 일관되게 보이고 동작하며 사용자 인터페이스도 개선된 모바일 웹 애플리케이션을 빠르게 만들 수 있습니다. jQuery Mobile은 개발자에게 레이아웃과 사용자 인터페이스 위젯, 상호작용의 표준 집합과 함께 그를 적용하고 확장할 풍부한 API도 제공합니다.
jQuery Mobile은 아직 완성되지 않았습니다. 이 글을 쓰는 시점에서 jQuery Mobile은 알파 4 버전이며 곧 베타 버전이 나올 예정입니다(번역이 완료되는 시점에 베타 2로 바뀌었습니다).
그렇지만 jQuery Mobile은 이미 광범위한 기능을 제공하며 매우 안정적입니다. 사실 저자는 이미 실무 프로젝트에서 jQuery Mobile을 사용해서 크게 성공했으며, jQuery Mobile 포럼의 게시물을 살펴보면 이미 많은 이들이 jQuery Mobile을 실무에 쓰고 있음을 확인할 수 있습니다. jQuery Mobile이 발전함에 따라 새로운 기능을 소개하고 새로운 팁과 테크닉을 소개하는 개정판을 낼 수 있길 바랍니다.

[옮긴이 서문]
\"jQuery\" + \"Mobile\"
설명이 필요 없는 두 단어가 만났습니다. 번역 의뢰를 받을 때부터 무척 재미있을 것 같아 기대했는데, 예상이 틀리지 않았습니다. 책을 번역하는 내내 \"오?\", \"우와~\" 이런 감탄사를 입에 달고 살았습니다.

\"웹의 힘은 그 보편성에 있다\"
웹을 창시한 팀 버너스 리 경의 말입니다. 현재는 각 모바일 장치에 최적화된 네이티브 앱이 더 관심을 끌고 있지만, 지금 당장만 해도 아이폰과 안드로이드폰 두 가지용으로 개발해야 하고 멀지 않아 윈도우폰을 지원해야 합니다. 새로운 기기가 인기를 끌면 그 기기도 지원해야겠죠.
하지만 HTML로 만들면 거의 모든 장치에서 이용할 수 있습니다. 장치별로 서너 가지씩 소스코드를 관리하고 디버그하고 업그레이드할 필요가 없습니다. 게임 등 특정 분야에서는 여전히 앱이 필요하겠지만, 곧 판도가 바뀌어서 보편적인 분야는 HTML 페이지에 자리를 내 주게 될 겁니다.
물론 HTML로 만든다고 호환성 문제가 아예 사라져 버리는 건 아니지만, 다행히 인터넷 익스플로러 6를 지원할 필요는 없습니다. 현재 널리 쓰이는 장치는 대개 HTML5와 CSS3를 잘 지원합니다. 이 시장은 업그레이드 주기가 매우 빠르므로 호환성 문제는 데스크톱에 비해 빨리 해결될 겁니다. 게다가 크로스 브라우징 쪽에는 이미 정평이 난 강력한 우군, jQuery가 있으니까요.
jQuery Mobile은 모바일 페이지를 마치 앱처럼 만드는 jQuery 기반 프로그램입니다. 커스텀 데이터 속성(data- 속성)으로 페이지 요소의 역할을 명시하기만 하면 나머지는
jQuery Mobile이 알아서 처리합니다. jQuery의 슬로건인 \"Write less, Do more\"와 잘 어울리기도 하고, 미래의 브라우저가 나아갈 방향이 이런게 아닐까 하는 생각도 듭니다. 브라우저가 요소의 역할을 이해하면 복잡하게 스크립트를 짜고 눈이 빠져라 CSS를 들여다보면서 여러 브라우저를 맞출 필요도 없어지겠죠. 시맨틱하게 마크업하면, 나머지는 브라우저(또는 라이브러리)가 알아서 하고, 사용자는 자기 취향대로 서비스를 이용할 수 있는 세상을 기대합니다.
이 책은 jQuery Mobile을 가볍게 소개하는 입문서입니다. 짧고 간단하지만 jQuery Mobile을 다룬 책이 거의 없는 상황에서 jQuery Mobile이 어떤 라이브러리인지, 어떤 일을 할 수 있는지 쉽게 아실 수 있습니다. 설령 jQuery Mobile로 페이지를 개발할 생각이 없다 하더라도 가볍게 한 번 읽어보시기에 적당합니다.

옮긴이의 글
번역서를 읽는 독자에게
서문

CHAPTER 1 jQuery Mobile을 만나보세요
1 jQuery Mobile 라이브러리 개요
2 jQuery Mobile이 동작하는 방법
3 jQuery Mobile 애플리케이션을 만들어 봅시다
3-1 이면에서: 커스텀 선택자 jqmData()

CHAPTER 2 애플리케이션 구조와 내비게이션
1 페이지
1-1 내부 페이지
1-2 외부 페이지
1-3 이면에서: jQuery Mobile의 페이지 초기화
1-4 페이지 숨기기, 보이기 이벤트
2 대화상자
3 내비게이션과 히스토리
4 전환
4-1 이면에서: jQuery Mobile 애플리케이션의 애니메이션

CHAPTER 3 페이지 요소
1 이면에서: jQuery 플러그인과 위젯
2 목록 뷰
2-1 기본적인 목록 뷰
2-2 발전된 목록 뷰
2-3 이면에서: 목록 뷰 갱신
3 툴바
3-1 내비게이션 바
3-2 헤더와 푸터 위치 조절
4 버튼
4-1 버튼 컨트롤 그룹
4-2 버튼 아이콘
5 폼 요소
5-1 자바스크립트로 폼 요소에 접근하기
5-2 체크박스와 라디오 버튼
5-3 플립 토글
5-4 입력 필드와 문자 입력 영역
5-5 검색 필드
5-6 select 메뉴
5-7 슬라이더
6 레이아웃 그리드

CHAPTER 4 테마 지정
1 테마와 견본
1-1 이면에서: 견본 설정하기
1-2 목록 뷰 요소에 테마 적용

CHAPTER 5 jQuery Mobile API
1 jQuery Mobile 메서드
1-1 changePage
1-2 pageLoading
1-3 silentScroll
1-4 addResolutionBreakpoints
2 이벤트
2-1 터치 이벤트
2-2 초기화 이벤트
2-3 페이지 숨기기와 보이기 이벤트
2-4 스크롤 이벤트
2-5 방향 전환 이벤트
3 반응형 레이아웃 API
3-1 CSS 선택자
4 jQuery Mobile 설정
4-1 사용할 수 있는 옵션
4-2 mobileinit를 이용해서 옵션 바꾸기
4-3 이면에서: 데이터 속성을 네임스페이스에 담기

CHAPTER 6 도전! 트위터 웹 앱 개발
1 애플리케이션 페이지
2 애플리케이션 초기화
2-1 initMainPage 메서드
2-2 initSettings 메서드
2-3 initDetailPage 메서드
2-4 에러 대화상자
3 jqmTweet을 한 번 돌려보죠
4 인터페이스 개선하기
4-1 CSS 미세조정
4-2 상호작용 미세조정
5 전반적인 접근법

Appendix A 알파 버전에서 베타 버전으로의 변화
변화 1 뒤로가기 버튼
변화 2 data-prefetch
변화 3 $.mobile.loadingMessage
변화 4 $.mobile.changePage()
변화 5 $.mobile.defaultTransition
변화 6 라디오 버튼과 체크 박스 모양 변화
변화 7 & 변화 8 data-role 속성 생략과 create 이벤트

Appendix B URL 정리
INDEX

 [지은이 서문]

모바일 애플리케이션은 크게 두 가지 형태입니다. 하나는 장치에 고유하게 동작하는 컴파일된 프로그램인 고유 애플리케이션(네이티브 앱)이며, 다른 하나는 장치의 웹 브라우저 안에서 동작하는 모바일 웹 애플리케이션입니다.
아이튠즈 앱스토어와 안드로이드 마켓에서 경제적인 성공을 거둔 사례 덕분에 요즘 사람들의 관심은 네이티브 앱에 있습니다. 물론 빠르고, 기반 장치의 능력을 모두 활용할 수 있다는 긍정적인 이유도 있습니다. 하지만 네이티브 앱에는 한 가지 중요한 단점이 있습니다. 네이티브 앱은 이식성이 없습니다. 여러 가지 플랫폼에서 동작하는 앱을 만들고 싶다면 여러 언어로 작성하거나(기반 코드를 여러 개 관리해야 하겠죠), Titanium이나 PhoneGap 같은 플랫폼 추상화 프로그램을 써야 합니다. 반면 모바일 웹 애플리케이션은 HTML과 CSS, 자바스크립트로 작성되며 모바일 장치의 웹 브라우저 위에서 동작합니다. 따라서 기반 코드는 하나만 관리하면 됩니다. 단 모바일 웹 애플리케이션은 여러 플랫폼과 브라우저의 조합을 고려해야 합니다.
jQuery Mobile을 만나보세요. 유명한 자바스크립트 라이브러리 jQuery에 기반한 jQuery Mobile은 다양한 장치에서 동작하는 모바일 웹 애플리케이션을 제작할 수 있게 만들어졌습니다. jQuery Mobile을 사용하면 지원하는 모든 장치에서 일관되게 보이고 동작하며 사용자 인터페이스도 개선된 모바일 웹 애플리케이션을 빠르게 만들 수 있습니다. jQuery Mobile은 개발자에게 레이아웃과 사용자 인터페이스 위젯, 상호작용의 표준 집합과 함께 그를 적용하고 확장할 풍부한 API도 제공합니다.
jQuery Mobile은 아직 완성되지 않았습니다. 이 글을 쓰는 시점에서 jQuery Mobile은 알파 4 버전이며 곧 베타 버전이 나올 예정입니다(번역이 완료되는 시점에 베타 2로 바뀌었습니다).
그렇지만 jQuery Mobile은 이미 광범위한 기능을 제공하며 매우 안정적입니다. 사실 저자는 이미 실무 프로젝트에서 jQuery Mobile을 사용해서 크게 성공했으며, jQuery Mobile 포럼의 게시물을 살펴보면 이미 많은 이들이 jQuery Mobile을 실무에 쓰고 있음을 확인할 수 있습니다. jQuery Mobile이 발전함에 따라 새로운 기능을 소개하고 새로운 팁과 테크닉을 소개하는 개정판을 낼 수 있길 바랍니다.

 

[옮긴이 서문]

“jQuery” + “Mobile”
설명이 필요 없는 두 단어가 만났습니다. 번역 의뢰를 받을 때부터 무척 재미있을 것 같아 기대했는데, 예상이 틀리지 않았습니다. 책을 번역하는 내내 “오?”, “우와~” 이런 감탄사를 입에 달고 살았습니다.

 

“웹의 힘은 그 보편성에 있다”
웹을 창시한 팀 버너스 리 경의 말입니다. 현재는 각 모바일 장치에 최적화된 네이티브 앱이 더 관심을 끌고 있지만, 지금 당장만 해도 아이폰과 안드로이드폰 두 가지용으로 개발해야 하고 멀지 않아 윈도우폰을 지원해야 합니다. 새로운 기기가 인기를 끌면 그 기기도 지원해야겠죠.
하지만 HTML로 만들면 거의 모든 장치에서 이용할 수 있습니다. 장치별로 서너 가지씩 소스코드를 관리하고 디버그하고 업그레이드할 필요가 없습니다. 게임 등 특정 분야에서는 여전히 앱이 필요하겠지만, 곧 판도가 바뀌어서 보편적인 분야는 HTML 페이지에 자리를 내 주게 될 겁니다.
물론 HTML로 만든다고 호환성 문제가 아예 사라져 버리는 건 아니지만, 다행히 인터넷 익스플로러 6를 지원할 필요는 없습니다. 현재 널리 쓰이는 장치는 대개 HTML5와 CSS3를 잘 지원합니다. 이 시장은 업그레이드 주기가 매우 빠르므로 호환성 문제는 데스크톱에 비해 빨리 해결될 겁니다. 게다가 크로스 브라우징 쪽에는 이미 정평이 난 강력한 우군, jQuery가 있으니까요.
jQuery Mobile은 모바일 페이지를 마치 앱처럼 만드는 jQuery 기반 프로그램입니다. 커스텀 데이터 속성(data- 속성)으로 페이지 요소의 역할을 명시하기만 하면 나머지는
jQuery Mobile이 알아서 처리합니다. jQuery의 슬로건인 "Write less, Do more"와 잘 어울리기도 하고, 미래의 브라우저가 나아갈 방향이 이런게 아닐까 하는 생각도 듭니다. 브라우저가 요소의 역할을 이해하면 복잡하게 스크립트를 짜고 눈이 빠져라 CSS를 들여다보면서 여러 브라우저를 맞출 필요도 없어지겠죠. 시맨틱하게 마크업하면, 나머지는 브라우저(또는 라이브러리)가 알아서 하고, 사용자는 자기 취향대로 서비스를 이용할 수 있는 세상을 기대합니다.
이 책은 jQuery Mobile을 가볍게 소개하는 입문서입니다. 짧고 간단하지만 jQuery Mobile을 다룬 책이 거의 없는 상황에서 jQuery Mobile이 어떤 라이브러리인지, 어떤 일을 할 수 있는지 쉽게 아실 수 있습니다. 설령 jQuery Mobile로 페이지를 개발할 생각이 없다 하더라도 가볍게 한 번 읽어보시기에 적당합니다.