네이버는 이렇게 한다! 쉽고 빠른 모바일 웹 UI 개발

[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