책소개

다양한 버그가 있는 브라우저와 열악한 디버깅 도구만 있는 모바일 환경에서의 개발은 사막에서 물을 찾는 것과 같이 힘들고 막연한 작업이다. 이 책은 국내 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