jQuery Mobile 스마트폰 사이트 디자인

＜jQuery Mobile 스마트폰 사이트 디자인＞



초보 개발자와 디자이너를 위한 아주 쉬운 제이쿼리 모바일(jQuery Mobile) 입문서



스마트폰의 보급으로 인해 사용자들은 PC 앞뿐만 아니라 태블릿 PC 등 다양한 디바이스 환경에서 웹 사이트를 이용하고 있습니다. 스마트폰을 지원하는 웹 사이트 또한 PC용 웹 사이트 이상으로 interactive한 요소가 요구되고 있는데, 이러한 대안책으로 최근 가장 주목받고 있는 것이 바로 'jQuery Mobile'입니다.

jQuery Mobile은 jQuery 프로젝트의 일환으로 iOS, 안드로이드, 블래베리 등 다양한 스마트폰 OS에 적합한 UI 및 동작을 제공하는 스마트폰용 프레임워크입니다. 그러나 jQuery Mobile이 만능은 아닙니다. 웹 사이트에 따라 jQuery Mobile 이용이 적당한 사이트와 그렇지 않은 사이트가 있습니다. 웹 사이트를 만들기 전에 그 사이트가 jQuery Mobile에 적합한지 아닌지를 판단할 필요가 있고 이를 위해 jQuery Mobile로 무엇이 가능한지를 사전에 알아 두어야 합니다.

이 책은 'jQuery Mobile'을 사용한 스마트폰 사이트의 제작방법을 설명한 입문서입니다. 초보 프로그래머는 물론 웹 디자이너들도 모바일 관련 스마트 디자인을 할 수 있도록 기초부터 아주 쉽게 가이드하고 있으며, 1장부터 순서대로 진행하면 jQuery Mobile의 기본적인 사용법부터 고급 수준인 사용자정의 방법까지 습득할 수 있도록 구성되어 있습니다.

1장 [도입편]에서는 스마트폰을 위한 프레임워크가 필요하게 된 배경부터 jQuery Mobile의 특징과 개요를 설명하고, 2장 [기초편]부터 본격적인 jQuery Mobile을 사용한 스마트폰 사이트 제작방법을 설명합니다. 간단한 회사 안내 사이트를 사례로 라이브러리 로딩부터 페이지 작성, 헤더와 푸터 정의, 메뉴 작성 등 기본적인 마크 업 방법을 배웁니다. 3장 [레퍼런스편]에서는 jQuery Mobile의 주요 기능을 다양한 예제 코드와 실행결과의 화면을 통해 보여줍니다. 4장 [사용자정의편]에서는 jQuery Mobile을 사용자정의해서 오리지널 디자인의 스마트폰 사이트를 만드는 고급 기법을 설명합니다.

본문 내용 중간마다 칼럼과 팁 등 다양한 읽을거리를 싣고 있으며, 책 뒤에는 부록으로 가위로 잘라서 제이쿼리 모바일의 실제 UI 장면을 시연을 해볼 수 있도록 휴대폰 모양의 종이 시뮬레이터를 수록하고 있습니다.



주요 내용



1장 [도입편] jQuery Mobile 기초 지식

jQuery Mobile 개요에 대하여 설명합니다. 스마트폰을 위한 프레임워크가 필요하게 된 배경부터 jQuery Mobile의 특징, 이용시 장점을 배웁니다.



2장 [기초편] 예제로 배우는 jQuery Mobile 기본

jQuery Mobile을 사용한 스마트폰 사이트 제작방법을 설명합니다. 간단한 회사 안내 사이트를 예로 라이브러리 로딩부터 페이지 작성, 헤더와 푸터 정의, 메뉴 작성 등 기본적인 마크 업 방법을 배웁니다.



3장 [레퍼런스편] jQuery Mobile 응용

jQuery Mobile의 주요 기능을 설명합니다. 스마트폰 제작에 필요한 기능을 중심으로 바로 시험해 볼 수 있는 간단한 예제 코드와 실행결과의 화면을 보면서 학습합니다.



4장 [사용자정의편] jQuery Mobile 오리지널 디자인

jQuery Mobile을 사용자정의해서 오리지널 디자인의 스마트폰 사이트를 만드는 방법을 설명합니다.배색을 변경하는 간단한 사용자정의부터 디자인 시안을 기초로 한 본격적인 사용자정의 방법까지 배웁니다.

CHAPTER 1. [도입편] jQuery Mobile 기초지식

[1-1] jQuery Mobile이란?

스마트폰 시대의 웹 제작

스마트폰용 프레임워크의 등장

iOS 휴먼 인터페이스 가이드라인

'jQuery Mobile'

예제 코드로 보는 jQuery Mobile의 간단함

[COLUMN①] 스마트폰 사이트의 제작 및 검증 환경



CHAPTER 2. [기초편] 예제로 배우는 jQuery Mobile 기본

[2-1] 스마트폰 사이트 메인 페이지 만들기

jQuery Mobile과 HTML5

jQuery Mobile과 jQuery의 로딩

스마트폰용 Viewport의 설정

jQuery Mobile에서 '페이지' 개념

페이지 전환

header/footer의 배치와 레이아웃 정의

디자인 테마의 변경

스마트폰다운 리스트 표시

[2-2] 개별 페이지 작성과 구글맵의 표시

'about' 페이지의 작성

[One Point Advice] h2 요소에 class 이름 'h1'을 붙이는 이유

header 링크의 설계

'세미나 정보' 페이지의 작성

구글맵의 설치

[2-3] 문의 폼의 작성과 사이트 완성

'폼(Form)' 과제와 jQuery Mobile을 이용한 해결

폼 UI의 기본

여러 줄을 입력하는 박스의 최적화

[실무에서 빠지기 쉬운 함정] 동일 사이트 안에서 id 이름 중복에 주의

플립 스위치 표시하기

사용하기 쉬운 체크 박스 추가

전송/취소 버튼 장식



CHAPTER 3. [레퍼런스편] 좀더 알고 싶은 jQuery Mobile 사용법

[3-1] 페이지 작성과 페이지 전환

페이지 작성

테마의 변경 [data-theme="테마 이름"]

페이지 전환 애니메이션의 설정 [data-transition="효과 이름"]

[실무에서 빠지기 쉬운 함정] 안드로이드 단말기에서 플립 애니메이션이 동작하지 않는다!

[3-2] 리스트 표시 UI의 기본과 변형

일반적인 리스트 표시 [data-role="listview"]

분할 리스트

둥근 모서리 리스트 [data-inset="true"]

설명문이 있는 리스트

리스트에 제목 설정 [data-role="list-divider"]

카운트 버블 표시 [class="ui-li-count"]

섬네일 / 아이콘이 있는 리스트

검색 필터의 이용 [data-filter="true"]

리스트 테마의 변경 [data-theme="테마 이름"]

[3-3] header/footer의 사용자정의

Back 버튼 표시 [data-add-back-btn="true"]

[One Point Advice] header가 아닌 다른 곳에서 'Back' 버튼을 사용하고 싶은 경우

header/footer에 임의의 버튼 표시

네비게이션 바의 추가 [data-role="navbar"]

header/footer의 고정배치 [data-position="fixed"]

[One Point Advice] position:fixed을 이용한 고정배치

[3-4] 콘텐츠 영역의 레이아웃

그리드 레이아웃(Grid Layout)

접이식 패널 [data-role="collapsible"]

[3-5] 폼 UI의 최적화

폼 UI의 적용 [data-role="fieldcontain"]

선택형 UI의 이용

브라우저의 기본 폼 이용

버튼의 최적화

[COLUMN②] jQuery Mobile의 초기 설정

[COLUMN③] jQuery Mobile의 용도



CHAPTER 4. [사용자정의편] jQuery Mobile 오리지널 디자인

[4-1] 사용자정의로 테마 만들기

jQuery Mobile의 CSS 해부하기

오리지널 색상의 테마 작성하기

[COLUMN④] CSS3 그라데이션의 사용

[COLUMN⑤] Theme Roller를 이용한 사용자정의

[4-2] 세미 커스터마이즈로 뉴스 사이트 디자인하기

메인 페이지의 HTML 준비하기

스타일시트의 설정

[One Point Advice] linear-gradient의 사양 변경

탭 메뉴의 작성

[One Point Advice] jQuery 1.7부터 이용할 수 있는 on 메소드

여러 HTML을 이용한 목록 / 기사 페이지의 작성

[COLUMN⑥] '웹 속성 보기'(Web inspector)

[4-3] 풀 커스터마이즈로 상품 사이트 디자인하기

HTML의 작성

[One Point Advice] Ajax 페이지 전환과 rel="external"

CSS의 작성

[실무에서 빠지기 쉬운 함정] 아이폰에서 가로 방향으로 돌리면 확대됩니다.

[COLUMN⑦] jQuery Mobile에서 Google Analytics의 적용

[COLUMN⑧] CSS3 참고 사이트

Nishihata Kazuma 저자 Nishihata Kazuma는

ㆍ to-r 대표/주식회사 마보로시 선임 엔지니어.

ㆍ JavaScript/Ajax를 이용한 Web 애플리케이션 제작 및 CSS3/HTML5를 이용한 사이트 작성.

ㆍ 서적 및 잡지의 집필과 Web 크리에이터를 위한 강좌 및 세미나 활동.

ㆍ 블로그 'to-R에서 Web 제작과 관련된 여러 가지 정보를 게재.

ㆍ 저서 'Web 제작 현장에서 사용하는 jQuery 디자인 입문'(Ascii Media Works 간행).