jQuery Mobile(모바일 웹과 웹앱을 위한)

하나의 소스로 데스크톱, 안드로이드, 아이폰, 윈도우폰 스마트 디자인을 한다!



본서는 다음과 같은 독자를 대상으로 합니다.



ㆍ모바일 웹 사이트를 개발하실 분

ㆍ모바일 웹앱을 개발하실 분

ㆍ차세대 웹 개발 방법론인 스마트 디자인을 학습하실 분



본서는 초보 프로그래머는 물론 웹 디자이너들도 모바일 관련 스마트 디자인을 할 수 있도록 아주 쉽게 가이드하고 있습니다. jQuery Mobile의 지향점은 "누구나 쉽게 사용하게 한다"는데 있습니다. 복잡하고 어려운 언어를 배워서 프로그래밍을 해야 한다면 jQuery Mobile은 성공하지 못했을 것입니다. 본서는 jQuery Mobile의 목표에 맞춰 프로그래밍을 모르는 웹 디자이너들도 쉽게 jQuery Mobile을 사용할 수 있도록 배려하고 있습니다.



본서는 다음과 같은 특징 있습니다.



ㆍ데스크탑, 스마트폰, 웹, 웹앱 등 모든 분야를 대상으로 디자인 기법을 설명하고 있습니다.

ㆍHTML 태그를 기반으로 하기 때문에 프로그래밍 경험이 없어도 쉽게 배울 수 있습니다.

ㆍ자바스크립트 조차 잘 몰라도 이해할 수 있도록 자세하게 설명하고 있습니다.

ㆍjQuery Mobile의 모든 기능을 브라우저와 실물 스마트폰에서 모두 테스트하고 있습니다.

ㆍ하이브리드 브릿지 솔루션을 사용하여 웹앱을 만드는 분들을 위해 폰갭도 설명합니다.

ㆍ나만의 테마 라이브러리를 만드는 CSS GUI 개발도구 "테마롤러"의 사용법을 설명합니다.

ㆍ자동으로 화면 디자인을 해주는 GUI 화면 빌더 "codiqa"의 사용법을 설명합니다.



이 책의 개략적인 구성은 다음과 같습니다.



1장 - 3장 : 웹과 웹앱의 개념, 앱 개발 환경을 구축하는 방법을 요약하고, 폰갭으로 안드로이드, 아이폰, 윈도우폰에서 웹앱을 만드는 방법을 소개합니다. 이 장들은 웹앱에 관심 있는 독자들을 위해 제공됩니다.



4장 - 16장 : jQuery Mobile을 이용한 스마트 디자인을 하는 방법을 소개하고 있습니다. HTML 코더, 전문 프로그래머, 웹 디자이너, 웹 기획자까지 모두 쉽게 이해할 수 있도록 가이드하고 있습니다. 브라우저는 물론이고 웹앱에서 실험한 화면도 보여주고 있어 초보자도 웹앱 화면에서 고려해야할 사항을 점검할 수 있도록 했습니다.



17장 - 웹디자이너를 위해 GUI 환경에서 CSS 스타일 테마를 자동으로 만들어주는 "Theme Roller"와 스마트 디자인을 코딩하지 않고 디자인할 수 있는 "codiqa"를 소개하고 있습니다. 초보자의 경우 이 두 개의 개발도구로 먼저 jQuery Mobile를 경험하는 것도 좋습니다.



18장 - 20장 : 자바스크립트로 jQuery Mobile을 제어하는 방법을 소개합니다. 이 장을 잘 몰라도 스마트 디자인을 하는 데는 문제가 없지만, 프로그래머 입장에서 스마트 디자인 화면을 제어하여 심도 있는 jQuery Mobile을 알고자 하는 개발자를 위해 참고서 역할을 할 수 있도록 최대한 검증된 샘플들로 설명하고 있습니다.

1장 스마트 디자인을 위한 jQuery Mobile



1.1 하이브리드를 완벽하게 실현한 jQuery Mobile

1.2 하이브리드의 정의

1.3 웹앱의 정의

1.4 미완성작 웹앱 솔루션

1.5 완성된 웹앱 솔루션 조합



2장 네이티브 앱 개발환경 구축



2.1 안드로이드용 개발환경 요약

2.2 아이폰용 개발환경 요약

2.3 원도우폰 개발환경 요약

2.2 네이티브 브릿지 폰갭(PhoneGap) 다운로드

2.3 스마트 디자인 jQuery Mobile 다운로드



3장 웹앱과 jQuery Mobile의 연동



3.1 안드로이드용 웹앱 프로젝트

이클립스 폰갭 플러그인 설치

폰갭 프로젝트 생성

jQuery Mobile 라이브러리 포함 옵션

안드로이드 프로젝트 이름 정의

안드로이드 프로젝트 SDK 버전 정의

안드로이드 프로젝트 패키지 이름 정의

안드로이드 jQuery 폰갭 프로젝트 생성 완료

이클립스 설정 : workspace 기본 인코딩 설정

이클립스 설정 : 웹 개발 플러그인 "앱타나(Aptana)" 설치

이클립스 설정 : 웹 표준 코딩을 위한 Validation 설정

이클립스 설정 : 웹 편집기 테마 설정

jQuery Mobile 라이브러리 호출 사례

HTML 구성을 한눈에 보는 이클립스 "Outline" 창

가상기기 준비하기 : SDK 4.0.X 아이스크림 샌드위치 버전

안드로이드 프로젝트 실행 환경 설정

가상기기 실행하기 : SDK 4.0.X 아이스크림 샌드위치 버전

가상기기에서 jQuery Mobile 폰갭 데모 앱 실험하기

안드로이드 실물 단말기에서 실험하기

안드로이드 SDK 버전 변경 : 구 버전으로 다운그레이드

실물 단말기에서 jQuery Mobile 폰갭 데모 앱 실험하기

DDMS의 실물 단말기 화면 캡처

실물 단말기 폰갭 데모 : 로컬 데이터베이스(Storage)

실물 단말기 폰갭 데모 : 연락처(Contacts)

실물 단말기 폰갭 데모 : GPS 위치 감지 센서(Geolocation)

실물 단말기 폰갭 데모 : 대화상자(Notification)

실물 단말기 폰갭 데모 : 방위 센서(Compass)



3.2 아이폰용 웹앱 프로젝트

Xcode 폰갭 플러그인 설치

폰갭 프로젝트 생성

프로젝트에 www 폴더 추가

웹 통신을 위한 화이트리스트 등록 : PhoneGap.plist

웹앱 소스 등록 : jQuery Mobile 폰갭 데모 소스

가상기기에서 실험하기



3.3 윈도우폰용 웹앱 프로젝트

Visual Studio 폰갭 템플릿 설치

폰갭 프로젝트 생성

가상기기에서 실험하기

웹앱 소스 등록 : jQuery Mobile 폰갭 데모 소스

신규 소스의 Content 설정

Viewport 교정



4장 jQuery Mobile의 기초



4.1 jQuery Mobile의 기본 구조

프레임웍의 주요 파일들

아이콘 라이브러리의 작동 원리



4.2 jQuery Mobile의 디자인 솔루션 둘러보기

jQuery Mobile을 지원하는 플랫폼

개발용 HTML5 웹브라우저

jQuery Mobile 공식 매뉴얼 및 데모 보기



4.3 jQuery Mobile의 특징



5장 스마트 페이지의 기본 구성



5.1 스마트 페이지의 기본 형식

5.2 뷰포트 설정

5.3 jQuery Mobile 프레임웍 호출



6장 상단 툴바 : 머리말 영역



6.1 기본형 머리말 영역

6.2 머리말 영역의 버튼 주무르기

머리말 영역 버튼 1개일 때와 꼬리말 영역의 하단 고정

머리말 버튼 아이콘

머리말 영역과 버튼에 별도 테마 설정

1개의 머리말 버튼 오른쪽 배치

2개의 머리말 버튼 양쪽 끝 배치와 버튼 아이콘만 출력

백 버튼 링크 처리

머리말 영역의 내비게이션 바



7장 하단 툴바 : 꼬리말 영역



7.1 꼬리말 영역 기본형

7.2 꼬리말 영역의 버튼들

꼬리말 일반 버튼

꼬리말 그룹 버튼

7.3 꼬리말 영역의 내비게이션 바

7.4 페이지 풀 스크린과 꼬리말 숨김

7.5 꼬리말 영역의 선택 메뉴와 화면 전환 효과



8장 스마트 페이지 레이아웃



8.1 싱글형 페이지

8.2 멀티형 페이지

8.3 자동 분할형 페이지 : splitview 플러그인

웹브라우저 실험

아이폰 실험

아이패드 실험

안드로이드폰 실험

jQuery Mobile Splitview 플러그인 다운로드

소스 분석



9장 스마트 페이지 링크 처리법



9.1 Ajax 링크 방식

앵커(Anchor) 링크 방식

로컬 HTML 파일 링크

대화상자 앵커 링크 방식

대화상자 파일 링크 방식



9.2 풀 페이지(Full-Page) 링크 방식 : Ajax 사용하지 않음

외부 도메인 링크

외부 HTML 파일 링크

target 링크

return false 링크



9.3 외부 프로그램 링크

이메일 링크

전화번호 링크

SMS 문자 링크

지도 링크



9.4 백(Back) 버튼 링크

9.5 샘플 소스 분석



10장 data-url의 기능과 특성의 이해



10.1 페이지 아이디가 있는 경우

10.2 페이지 아이디가 없는 경우

10.3 data-url 속성을 폴더로 정의하는 경우

10.4 data-url 속성을 페이지로 정의하는 경우

10.5 웹앱에서의 실험

안드로이드 실험

아이폰 실험



11장 화면 전환 애니메이션



11.1 기본 화면 전환 효과

화면 전환 효과 사용안함 : none

슬라이드 : slide

슬라이드업 : slideup

슬라이드다운 : slidedown

팝 : pop

페이드 : fade

플립 : flip 250

턴 : turn 251

플로우 : flow 253



11.2 화면 전환 효과 역순

11.3 개발자 정의 화면 전환 효과

기본 화면 전환 효과

기본 대화상자 전환 효과

CSS형 화면 전환 효과



11.4 전체 소스 살펴보기

11.5 웹앱에서의 특성

아이폰 실험

안드로이드 실험



12장 스마트 대화상자



12.1 기본 대화상자

12.2 대화상자 전환 효과

12.3 대화상자 테마 적용

12.4 대화상자 오버레이 테마



12.5 마법사형 대화상자

마법사 작성 원리

마법사 실행 실험



12.6 선택형 대화상자

12.7 전체 소스 살펴보기

12.8 웹앱에서의 특성

안드로이드 실험

아이폰 실험



13장 스마트 버튼



13.1 버튼 속성

13.2 버튼 기본 아이콘

13.3 버튼 아이콘의 위치

13.4 기본 버튼 아이콘 : 아이콘만 출력과 그룹 버튼

13.5 나만의 버튼 아이콘

13.6 버튼 모양 비교

13.7 목록 버튼과 기본 활성 설정

13.8 폼 버튼

13.9 버튼과 자바스크립트

13.10 전체 소스 살펴보기

13.11 웹앱에서의 특성

안드로이드 실험

아이패드 실험



14장 스마트 콘텐트 레이아웃



14.1 HTML 기본 마크업 스타일

헤드 태그 스타일 : 〈h〉

〈a〉, 〈p〉, 〈pre〉, 〈span〉, 〈div〉 태그 스타일

목록형 태그 스타일

테이블형 태그 스타일

샘플 소스 살펴보기



14.2 그리드 레이아웃

〈div〉 그리드

〈fieldset〉 그리드

다행 그리드 + height

다양한 그리드 조합 + ui-bar 스타일

그리드 안의 그리드 상속

꼬리말에 그리드 활용

샘플 소스 살펴보기



14.3 접펼식 레이아웃 : Collapsible

접펼식 기본형

기본 펼침 설정

아이콘 위치 설정

테마 설정 : 머리만

테마 설정 : 머리와 내용 모두

테마 설정 : 머리와 내용을 달리 설정

계층형 접펼식

아코디언 레이아웃

샘플 소스 살펴보기



14.4 바디 테마

바디 테마 설정

바디 테마 설정 사례

샘플 소스 살펴보기



15장 스마트 폼



15.1 스마트 폼의 기본 형식

기본형, 미니형, 네이티브형 폼의 기본 형식

라벨 숨기기

그리드 버튼 그룹

컨트롤 그룹

폼 객체 비활성화

샘플 소스 살펴보기



15.2 스마트 폼 객체들

스마트 입력상자

스마트 체크박스

스마트 라디오 버튼

특수 입력상자 : 검색어(search), 레인지(range)



15.3 스마트 선택상자

기본형 선택 옵션

스마트형 선택 옵션

플레이스홀더(placeholder) 선택 옵션

그룹형 선택 옵션

선택상자 그룹 컨트롤과 테마 적용

특수 선택상자 : 슬라이더(slider)

샘플 소스 살펴보기



16장 스마트 리스트



16.1 기본형 목록

16.2 번호 목록

16.3 계층형 목록과 읽기전용 아이템

16.4 구분자 목록

16.5 건수 표시



16.6 목록 테마와 아이템 아이콘

목록 구분자, 목록 아이템, 목록 건수 테마

목록 아이템 테마

링크 아이템과 읽기전용 아이템의 스타일 비교

목록 아이템의 링크 아이콘 변경

목록 아이템 아이콘 링크 분리



16.7 섬네일과 아이콘 이미지

16.8 다양한 목록 아이템 포맷

16.9 검색 필터바

16.10 샘플 소스 살펴보기



17장 테마롤러와 디자인 빌더



17.1 테마롤러(ThemeRoller)

jQuery Mobile 테마롤러



17.2 나만의 테마 만들기

기존 테마 가져오기

기본 테마 미리보기

신규 테마 추가하기

나만의 테마 다운받기

나만의 테마 샘플 소스 실험하기



17.3 스마트 디자인 빌더 codiqa

jQuery Mobile을 위한 UI 빌더 codiqa

17.4 codiqa로 디자인하기

머리말 영역과 꼬리말 영역 추가하기

꼬리말 영역에 내비게이션 바 추가하기

머리말 영역에 백 버튼 추가하기

내용 영역에 문자열 추가하기

내용 영역에 이미지 추가하기

내용 영역에 접펼식 목록 추가하기

내용 영역에 그리드 추가하기

내용 영역에 리스트뷰 추가하기

내용 영역에 폼 객체 추가하기

HTML 소스 다운받고 실험하기



18장 jQuery Mobile의 기본 환경 설정



18.1 mobileinit 이벤트

18.2 기본 환경 설정 옵션들



19장 jQuery Mobile 이벤트 작성법



19.1 bind() 메소드

19.2 live() 메소드

19.3 bind()와 live(), delegate(), on() 메소드의 통합성

19.4 on()과 off() 메소드

19.5 페이지 이벤트들



19.6 페이지 로드 이벤트

pagebeforeload 이벤트

pageload 이벤트

pageloadfailed 이벤트



19.7 페이지 변경 이벤트

pagebeforechange 이벤트

pagechange 이벤트

pagechangefailed 이벤트



19.8 페이지 전환 이벤트

pagebeforehide 이벤트

pagehide 이벤트

pagebeforeshow 이벤트

pageshow 이벤트



19.9 페이지 초기화 이벤트

pagebeforecreate 이벤트

pagecreate 이벤트

pageinit 이벤트



19.10 페이지 비활성 이벤트

pageremove 이벤트



20장 $.mobile 객체



20.1 페이지 관련 메소드와 속성

$.mobile.changePage() 메소드

$.mobile.loadPage() 메소드

$.mobile.showPageLoadingMsg() 메소드

$.mobile.hidePageLoadingMsg() 메소드

$.mobile.activePage 속성



20.2 고정 툴바 관련 메소드

$.mobile.fixedToolbars.show() 메소드

$.mobile.fixedToolbars.hide() 메소드



20.3 경로 관련 메소드

$.mobile.path.parseUrl() 메소드

$.mobile.path.makePathAbsolute() 메소드

$.mobile.path.makeUrlAbsolute() 메소드

$.mobile.path.isSameDomain() 메소드

$.mobile.path.isRelativeUrl() 메소드

$.mobile.path.isAbsoluteUrl() 메소드

$.mobile.base 속성



20.4 스크롤 관련 메소드

$.mobile.silentScroll() 메소드

이두진