소장자료검색

『jQuery Mobile』는 HTML5, CSS3, 자바스크립트 코드 예제, 스크린샷을 통해 완전한 애플리케이션을 만드는 단계별 가이드를 제공한다. jQuery Mobile의 동작 원리와 활용 방법을 살펴보고, 페이징, 내비게이션, 대화상자, Ajax 처리, 히스토리 등을 배운다.

jQuery Mobile(제이쿼리 모바일)로 스마트폰에서도 볼 수 있는 모바일 웹과 크로스 플랫폼 웹 앱 개발을 한 번에 하자.

“모바일 웹 개발의 필수품, jQuery Mobile 1.0”

빠르게 변화하던 jQuery Mobile이 드디어 정식 버전 1.0으로 업데이트됐습니다. 빠르게 핵심만 볼 수 있었던 기존 『jQuery Mobile』의 장점을 그대로 두고 정식 버전에서 업데이트된 내용만을 모아서 이 책에 담았습니다. 가상 마우스 이벤트, Theme Ruller, 외부 페이지 미리 불러오기 등 곳곳에 깨알같이 정식 버전 내용을 추가했습니다.
아이폰, 안드로이드폰, 윈도우폰 등의 스마트폰과 아이패드, 갤럭시 노트를 비롯한 태블릿 등 모바일 기기의 종류가 다양화되면서 전문가들은 모바일 웹 앱(Mobile Web App)이 네이티브 앱(Native App)을 앞서리라 전망합니다. 플랫폼마다 따로 코드를 관리해야 하는 네이티브 앱과 달리 모바일 웹 앱은 광범위한 스마트폰과 태블릿에서 동작하니까요. RIA와 AJAX 기술 등의 확산으로 자바스크립트(JavaScript)의 위상은 굉장히 높아졌습니다. jQuery는 이런 자바스크립트 라이브러리 중 가장 인기 있는 라이브러리이며 모바일에 최적화된 jQuery Mobile(제이쿼리 모바일)은 jQuery에 기반을 뒀습니다. 굉장히 든든한 우군을 둔 셈이죠.
jQuery Mobile은 아이폰이나 안드로이드 폰 등 다양한 장치에서 일광성 있게 동작하고 보이는 웹 앱을 만드는 터치 기반 인터페이스입니다. 이 책은 HTML5, CSS3, 자바스크립트(JavaScript) 코드 예제, 스크린샷, 완전한 애플리케이션을 만드는 단계별 가이드를 제공합니다. jQuery에 이미 익숙하다면 지금 당장 크로스 플랫폼 모바일 앱을 만들 수 있습니다. 이 책을 다 읽고 몇몇 코드를 따라하면 기본적인 트위터(twitter) 웹 앱을 만들 수 있을 겁니다. 놀랍죠? 지금 당장 jQuery Mobile을 시작하세요.

어떤 독자를 위한 책인가?

-. 자바스크립트 개발을 전문으로 하는 개발자
-. 크로스 플랫폼을 위한 모바일 웹 앱을 개발하려는 개발자
-. jQuery 라이브러리 활용이 가능하며 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로 페이지를 개발할 생각이 없다 하더라도 가볍게 한 번 읽어보시기에 적당합니다.
누구보다도 이 책을 살펴보고 계신 당신에게 감사드립니다. 알아주는 사람 없어도 늘 노력하는 당신과 같은 사람 덕택에 세상이 발전할 수 있습니다. 당장 이해하기 어려운 점이 있더라도 꾸준히 노력하신다면 분명 그 열매를 얻을 것입니다. 좋은 책을 맡겨주신 한빛미디어, 독자의 편의를 고려해 많은 아이디어를 내고 수고하신 조희진 편집자님께도 감사드립니다. 웹 앱으로 만든 트위터 예제에 도움을 준 윤좌진 씨에게도 감사드립니다. Peter Paul Koch가 오페라 웹 표준 강좌에 기고한 를 번역한지 만 3년째입니다. 난삽한 번역이나마 사랑해주신 웹 프론트엔드 개발자분들과, 그런 글을 꾸준히 공개해준 클리어보스(http://www.clearboth.org)에도 감사합니다. 그동안 받았던 응원에 책으로 보답하게 되어 무척 기쁩니다.
_한선용

감수자 서문

jQuery Mobile은 모바일 웹 프레임워크 중에 가장 빨리 발전하고 있는 프레임워크입니다. 이 책의 원서가 알파 버전에 맞추어 출간된 것이 2011년 7월이었는데 2011년 11월까지 수많은 판 올림을 거치며 정식 버전이 출시되었습니다. 정식 버전이 나오면서 모든 효과가 굉장히 빨라졌고 테마를 쉽게 지정할 수 있는 Theme Roller가 추가되었습니다. 이 책은 정식 버전에 맞게 출시한 개정판입니다.
jQuery Mobile이 무엇인지 설명한 내용은 서문에 써있으므로 “jQuery Mobile이 어렵지 않으니 시작해보세요.”라는 언급만 하겠습니다. 제가 jQuery Mobile을 처음 접했을 때의 첫 느낌은 굉장함이라기보다 허무함이었습니다. 첫 예제를 작성해보고 입에서 나온 한 마디, “뭐 이렇게 쉬워”
아이폰 애플리케이션이나 안드로이드 애플리케이션을 개발해보던 사람이라면 누구나 jQuery Mobile을 접했을 때에 이러한 느낌을 받을 것입니다. 데이터 역할 속성(data-role)만 입력하면 모든 것이 자동으로 완성됩니다. jQuery Mobile을 사용하면 HTML을 처음 공부하고 있는 독자라도 쉽게 모바일 웹을 만들 수 있습니다.

“Write Less Do More”

“적게 쓰고 더 많은 일을 수행하라.” 이는 jQuery의 표어이며 jQuery Mobile도 이를 물려받았습니다. jQuery 뒤에 Mobile이라는 글자가 붙어도 전혀 어렵지 않습니다. 부담 갖지 말고 jQuery Mobile을 시작해보세요. 잊을 뻔 했는데 스크린샷 작성에 도움을 준 강혜영, 신동현, 이상기 님 고맙습니다.
_윤인성

번역서를 읽는 독자에게

원서는 아이폰 스크린샷만 담겨 있었습니다. 번역하면서 아이폰 4(iOS 버전 5.0.1), 갤럭시 넥서스(안드로이드 버전 4.0 아이스크림 샌드위치)에서 코드를 확인했으며, 안드로이드 스크린샷을 추가했습니다. 나란히 있는 스크린샷에서 왼쪽이 아이폰이며 오른쪽이 안드로이드입니다. 본문에서 다시 언급하지는 않겠습니다. 본문 곳곳에 독자의 편의를 위해 단축 URL을 함께 표기했습니다. 단축 URL은 대소문자를 반드시 구분해야 하므로 이 점을 유의해서 입력하길 바랍니다. 또 QR 코드를 삽입해서 동적인 움직임을 바로 확인할 수 있습니다. QR 코드 정보가 동작하지 않는다면 다음 URL을 참고하면 바로 확인할 수 있습니다.

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

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 loadPage
__1-3 showPageLoadingMsg & hide PageLoadingMsg
__1-4 silentScroll
__1-5 addResolutionBreakpoints
_2 이벤트
__2-1 터치 이벤트
__2-2 초기화 이벤트
__2-3 페이지 숨기기와 보이기 이벤트
__2-4 스크롤 이벤트
__2-5 방향 전환 이벤트
__2-6 가상 마우스 이벤트
_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 data-prefetch
__팁 2 $.mobile.loadingMessage
__팁 3 & 팁 4 data-role 속성 생략과 create 이벤트
__Appendix B URL 정리
__INDEX