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

  • 손찬욱, 김성철 지음

  • TECH@NHN _ 008
  • ISBN: 9788998139438
  • 22,000원 | 2014년 02월 25일 발행 | 352쪽



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

모바일 웹에서 자주 사용하는 기능의 기본 원리와 구현 방법을 설명하고, 동작을 직접 확인해 볼 수 있는 샘플 페이지도 제공한다. 자바스크립트와 마크업(HTML, CSS)에 관한 기초 지식이 있다면 초보 개발자도 쉽게 모바일 웹 서비스를 만들어 볼 수 있을 것이다.

모바일 기술은 계속 변화하고 새로운 플랫폼과 새로운 개발 도구, 새로운 기기들이 쏟아져 나오지만, 이 책에서 설명하고 있는 원리를 익힌다면 변화하는 모바일 기술도 쉽게 따라갈 수 있으리라 기대한다.

★ 이 책에서 다루는 내용 ★

  • 모바일 웹에서 발생하는 이벤트의 특징
  • 모바일 웹에서 자주 사용하는 UI의 기본 원리와 구현 방법
  • JMC를 활용한 웹 페이지 개발
  • 다양한 애니메이션 구현 방법과 성능 향상 방법
  • 모바일 환경에서 사용할 수 있는 디버깅 도구

손찬욱

LG CNS에서 소프트웨어 아키텍트와 백엔드 개발자로 일하다 모바일에 끌려 프런트엔드 개발자로 급선회했다. 아내와 아들밖에 모르는 철부지 남편으로서, 육아, 경제 그리고 맥주에 관심이 많은 평범한 직장인 개발자다. 현재는 네이버에서 JMC 개발 및 모바일 기술 지원을 담당하고 있다.

김성철

3년간 웹 개발 일을 하다 AJAX 통신을 통한 동적인 웹 페이지 개발이 가능해지면서 UI 개발에 흥미를 느껴 네이버로 이직했다. 네이버에서는 통합검색 페이지의 각종 UI를 개발했고, 스마트파인더, 캘린더, 네이버me 등 다양한 프로젝트를 진행했다. 현재는 자바스크립트 기술 지원과 JMC(Jindo Mobile Component) 개발 및 운영을 담당하고 있다. JMC가 널리 사용되길 기대한다.

  • [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
  • p.280, 그림 18-5

    left:320px --> left:-260px

    left:60px --> left:0px

    left:-260px(우측 상단) --> left:260px

    left:-260px(우측 하단) -> left:260px

  • p.281, 그림 18-8

    top:-260px --> top:0px

    top:-150px --> top:0px

    top:0px --> top:150px

    top:-260px --> top:150px

예제코드 관련 GitHub 페이지

예제 사이트

  • p.17, 그림 1-2 콘텐츠별 모바일 웹과 모바일 앱의 사용률

figure

 

  • p.19, 그림 1-3 크롬 17과 크롬 19의 DOM 성능 비교 figure

 

  • p.20, 그림 1-4 크롬의 버전별 자바스크립트 실행 성능 figure

 

  • p.21, 그림 1-5 하드웨어 가속화 영역 figure

 

  • p.21, 그림 1-6 아이폰 하드웨어 향상에 따른 자바스크립트 실행 성능 차이 figure