• 컴퓨터/IT > 모바일프로그래밍 > 모바일프로그래밍 일반

출판사 리뷰

초보 개발자와 디자이너를 위한 아주 쉬운 제이쿼리 모바일(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 장면을 시연을 해볼 수 있도록 휴대폰 모양의 종이 시뮬레이터를 수록하고 있습니다.

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

1-1. jQuery Mobile이란?
스마트폰 시대의 웹 제작
스마트폰용 프레임워크의 등장
iOS 휴먼 인터페이스 가이드라인
‘jQuery Mobile’
예제 코드로 보는 jQuery Mobile의 간단함
스마트폰 사이트의 제작 및 검증 환경

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

2-1. 스마트폰 사이트 메인 페이지 만들기
jQuery Mobile과 HTML5
jQuery Mobile과 jQuery의 로딩
스마트폰용 Viewport의 설정
jQuery Mobile에서 ‘페이지’ 개념
페이지 전환
header/footer의 배치와 레이아웃 정의
디자인 테마의 변경
스마트폰다운 리스트 표시

2-2. 개별 페이지 작성과 구글맵의 표시
‘about’ 페이지의 작성
header 링크의 설계
‘세미나 정보’ 페이지의 작성
구글맵의 설치

2-3. 문의 폼의 작성과 사이트 완성
‘폼(Form)’ 과제와 jQuery Mobile을 이용한 해결
폼 UI의 기본
여러 줄을 입력하는 박스의 최적화
플립 스위치 표시하기
사용하기 쉬운 체크 박스 추가
전송/취소 버튼 장식

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

3-1. 페이지 작성과 페이지 전환
페이지 작성
테마의 변경 [data-theme\u003d“테마 이름”]
페이지 전환 애니메이션의 설정 [data-transition\u003d“효과 이름”]
[실무에서 빠지기 쉬운 함정] 안드로이드 단말기에서 플립 애니메이션이 동작하지 않는다!

3-2. 리스트 표시 UI의 기본과 변형
일반적인 리스트 표시 [data-role\u003d“listview”]
분할 리스트
둥근 모서리 리스트 [data-inset\u003d“true”]
설명문이 있는 리스트
리스트에 제목 설정 [data-role\u003d“list-divider”]
카운트 버블 표시 [class\u003d“ui-li-count”]
섬네일 / 아이콘이 있는 리스트
검색 필터의 이용 [data-filter\u003d“true”]
리스트 테마의 변경 [data-theme\u003d“테마 이름”]

3-3. header/footer의 사용자정의
Back 버튼 표시 [data-add-back-btn\u003d“true”]
[One Point Advice] header가 아닌 다른 곳에서 ‘Back’ 버튼을 사용하고 싶은 경우
header/footer에 임의의 버튼 표시
네비게이션 바의 추가 [data-role\u003d“navbar”]
header/footer의 고정배치 [data-position\u003d“fixed”]
[One Point Advice] position:fixed을 이용한 고정배치

3-4. 콘텐츠 영역의 레이아웃
그리드 레이아웃(Grid Layout)
접이식 패널 [data-role\u003d“collapsible”]

3-5. 폼 UI의 최적화
폼 UI의 적용 [data-role\u003d“fieldcontain”]
선택형 UI의 이용
브라우저의 기본 폼 이용
버튼의 최적화


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

4-1. 사용자정의로 테마 만들기
jQuery Mobile의 CSS 해부하기
오리지널 색상의 테마 작성하기

4-2. 세미 커스터마이즈로 뉴스 사이트 디자인하기
메인 페이지의 HTML 준비하기
스타일시트의 설정
탭 메뉴의 작성
여러 HTML을 이용한 목록 / 기사 페이지의 작성

4-3. 풀 커스터마이즈로 상품 사이트 디자인하기
HTML의 작성
CSS의 작성