다양한 버그가 있는 브라우저와 열악한 디버깅 도구만 있는 모바일 환경에서의 개발은 사막에서 물을 찾는 것과 같이 힘들고 막연한 작업이다. 이 책은 국내 1위 포털 서비스인 네이버에서 사용하는 모바일 프레임워크인 JMC(Jindo Mobile Component)를 만들면서 겪은, 오아시스 같은 경험을 공유한다.

모바일 웹에서 자주 사용하는 기능의 기본 원리와 구현 방법을 설명하고, 동작을 직접 확인해 볼 수 있는 샘플 페이지도 제공한다. 자바스크립트와 마크업(HTML, CSS)에 관한 기초 지식이 있다면 초보 개발자도 쉽게 모바일 웹 서비스를 만들어 볼 수 있을 것이다. 모바일 기술은 계속 변화하고 새로운 플랫폼과 새로운 개발 도구, 새로운 기기들이 쏟아져 나오지만, 이 책에서 설명하고 있는 원리를 익힌다면 변화하는 모바일 기술도 쉽게 따라갈 수 있으리라 기대한다.

[1부] 모바일 웹과 모바일 웹 개발

01: 모바일 웹
모바일 웹과 모바일 앱
모바일 웹과 모바일 앱의 특징
모바일 웹의 한계 극복

02: 모바일 웹의 특징
많은 브라우저 환경
기기별 다양한 해상도
최신 웹 기술
그 밖의 특징

03: 모바일 자바스크립트 프레임워크
자바스크립트 프레임워크
모바일 자바스크립트 프레임워크
모바일 앱과 같은 UI와 사용자 경험을 제공하는 프레임워크
그 밖의 라이브러리

[2부] 모바일 웹 개발과 이벤트

04: 모바일 웹 UI 개발
웹 페이지 구성 요소
이벤트 처리

05: 모바일 브라우저와 이벤트
모바일 브라우저 이벤트
이벤트 발생 순서

06: 모바일 브라우저 전용 이벤트
터치 이벤트
제스처 이벤트
orientationchange 이벤트
devicemotion 이벤트

07: 데스크톱과 다르게 동작하는 이벤트
scroll 이벤트
마우스 이벤트와 키보드 이벤트
pageshow 이벤트, pagehide 이벤트

[3부] 모바일 웹에서 자주 사용하는 UI

08: 모바일 기기 확인하기
UserAgent 속성
모바일 기기 정보 확인하기
모바일 기기 확인 모듈

09: 모바일 기기의 위치 확인하기
geolocation API
geolocation API로 확인할 수 있는 정보
geolocation API의 오류 정보
geolocation 사용 예제

10: 모바일 기기 회전 확인하기
orientationchange 이벤트의 문제와 해결 방법
범용적으로 동작하도록 구현하는 방법
모바일 기기 회전 확인 모듈
모바일 기기 회전 확인 모듈 사용하기

11: 위치가 고정된 배너 만들기
배너 UI의 기본 원리
배너 UI에서 고려해야 할 것
다양한 환경에서 동작하는 배너 UI 구현
위치가 고정된 배너 사용하기

12: 스크롤되는 콘텐츠 만들기
position:fixed 속성의 문제
스크롤 영역의 기본 원리
스크롤 영역 구현하기
mScroll 컴포넌트 적용

13: 사용자 터치 움직임 분석하기
터치 이벤트 분석 컴포넌트
터치 이벤트를 이용한 제스처 분석 방법
mTouch 컴포넌트를 이용한 사용자 움직임 분석 결과 보기

14: 플리킹되는 콘텐츠 만들기
플리킹 UI의 기본 구조
플리킹 UI 구현하기
iOS에서의 링크 이동 문제
플리킹되는 컴포넌트 모듈
mFlicking 컴포넌트 적용

[4부] 컴포넌트를 활용한 UI 제작

15: JMC로 모바일 웹 메인 페이지 만들기
JMC
샘플 페이지
샘플 페이지 준비

16: 미디어 쿼리 적용
미디어 쿼리
샘플 페이지에 미디어 쿼리 적용
미디어 쿼리 적용 결과

17: 플리킹 사용하기
슬라이드 플리킹 컴포넌트
슬라이드 플리킹 컴포넌트 적용
슬라이드 플리킹 적용 결과

18: 숨어 있는 메뉴 사용하기
SlideReveal 컴포넌트
SlideReveal 컴포넌트를 사용하기 위한 마크업 구성
SlideReveal 컴포넌트 적용
SlideReveal 컴포넌트를 적용한 결과

19: 스크롤 사용하기
Scroll 컴포넌트
Scroll 컴포넌트 적용
Scroll 컴포넌트를 적용한 결과

[부록]

부록A: 효과적인 애니메이션 구현하기
자바스크립트 기반의 애니메이션
CSS3기반의 애니메이션
자바스크립트 기반 애니메이션과 CSS3기반 애니메이션의 혼합
브라우저 렌더링 과정

부록B: 애니메이션 성능을 높이는 방법
애니메이션 성능을 높이는 방법
애니메이션 성능 개선 연습

부록C: 모바일 웹 디버깅
모바일 웹 개발자 도구
브라우저의 개발자 도구 사용하기
원격 디버깅 도구
weinre