HTML5로 터치 인터페이스 만들기

과거에는 데스크톱이 웹 환경을 지배했다면 미래는 모바일 디바이스의 세상이 될 것입니다. 모바일 디바이스는 제한된 메모리와 느린 CPU를 가지고 있기 때문에 네트워크 속도 또한 느립니다. 하지만 가장 중요한 것은 모든 모바일 디바이스가 터치 인터페이스를 가지고 있다는 점입니다. 모바일 환경에 맞게 개발한다는 것은 터치 인터페이스를 개발하는 것이라고 할 수 있습니다. 데스크톱 환경에서 사용되었던 기술들이 모바일 웹에서도 대부분 사용되지만 일부는 완전히 새로운 부분입니다. 그리고 그런 부분들에 대한 올바른 정보를 얻기가 쉽지 않습니다. 이 책은 사용자가 빠르다고 인식할 수 있는 터치 인터페이스를 만드는 데 초점을 두고 있습니다. 웹사이트의 최적화 접근법에 방향을 두고 구성되어 있으며 전반부는 모바일 사이트를 기준으로 웹사이트의 속도를 더욱 높이는 데 필요한 기본적인 내용을 중심으로 설명하며. 책 후반부는 터치 인터페이스에 관련된 내용을 다루며, 사용자가 최대한 빠르고 유연하게 느낄 수 있도록 개발하는 데 중점을 두고 설명하고 있습니다.



<<타겟 독자>>

■ 모바일이나 터치 인터페이스 개발 경험이 전혀 없는데 이런 것들을 배우고 싶은 사용자

■ 모바일 환경에서 작업하고 있으나 더 좋은 모바일 웹사이트를 만들기 위해 고민하는 개발자



● 쉽고 체계적인 구성

터치 인터페이스에 최적화된 깔끔한 예제와 풍부한 그림을 통해 쉽고 체계적으로 명령어를 이해할 수 있으며 실제 환경에서 테스트하는 방법 및 최고의 사용자 인터페이스 개발자의 모범 사례를 통한 인사이트와 HTML5로 인터페이스를 개발하는 데 강조되는 기술을 이해할 수 있습니다.



● 모든 소스 코드 제공

이 책의 모든 소스 코드 샘플과 새로 변경된 내용들을 저자가 운영하는 사이트에서 직접 확인할 수 있습니다. 또한 샘플 코드의 문제 및 관련 내용을 사이트에서 직접 문의하거나 도움을 요청할 수 있습니다.



● 부록 제공

부록에서는 디버깅 도구 및 모바일에 초점을 맞춘 일반적인 프레임워크를 만드는 방법을 설명합니다.



Part 01 모바일 환경

오늘날 수백 가지의 모바일 제품들이 쏟아져 나오고 있습니다. 제품의 종류는 다양 하지만 더욱 진화된 웹브라우저와 터치 인터페이스는 동일합니다. 이곳에서는 터치 디바이스와 데스크톱의 차이점 등 모바일 환경에 대한 내용을 이해합니다.



Part 02 간단한 콘텐츠 사이트 작성

모바일과 데스크톱을 모두 지원하는 것을 목적으로 한 '희귀조류협회'라는 가상의 고객을 위해 캘리포니아 지역에 서식 하는 새들에 대한 정보로 구성된 웹사이트를 개발합니다.



Part 03 최초 로딩 속도 향상

모바일과 같은 특별한 환경에서 사이트가 처음 로딩될 때 느리다고 느끼게 되면 사용자 들은 점점 떠나갈 것입니다. 첫 로딩 속도가 빨라야 한다는 것은 사이트의 반응성(responsive)을 높이는 데 있어서 가장 기본적이며 필수적인 항목입니다. 사이트의 첫 로딩 속도를 해결하기 위한 PageSpeed, YSlow, 그리고 많은 툴과 서비스들에 대해 학습합니다.



Part 04 두 번째 방문 시 속도 향상

웹에서 우리는 사용자가 자주 방문하는 사이트에 대한 속도를 최대한 향상하기 위해 캐싱을 이용합니다. 이곳에서는 장소에 상관없이 캐싱을 가장 효과적으로 사용할 수 일반적인 브라우저 캐시를 살펴봅니다.



Part 05 PJAX를 이용한 터치 효과 향상

Part 05에서는 드라마틱하게 속도를 향상하기 위해 페이지가 모두 로드되는 것을 피할 수 있는 방법에 대해 설명합니다.



Part 06 탭 vs 클릭： 기본적인 이벤트 다루기

마우스 기반 인터페이스의 근본적인 대화 수단이 클릭이라면 터치 인터페이스의 근본적인 대화 수단은 탭(tap)입니다. 탭은 클릭과 거의 비슷한 것 같지만 실제로 탭과 클릭은 많은 차이점이 있습니다. 이곳에서는 탭에 대한 기본적인 이벤트에 대해 학습합니다.



Part 07 CSS 트랜지션, 애니메이션, 그리고 트랜스폼

Part 7에서 CSS를 이용해 애니메이션 속도를 올리는 방법과 2D 애니메이션과 3D 애니메이션의 몇 가지 차이점에 대해 학습합니다. 또한 자바스크립트 애니메이션만 사용할 경우를 위해 requestAnimationFrame을 사용하는 방법에 대해 학습합니다.



Part 08 자바스크립트 성능 최대화하기

아무리 신중하게 클라이언트 코드를 만들더라도 조금만 지나면 그 코드가 심하게 느려지는 것을 종종 발견합니다. 이곳에서는 이런 문제를 해결하는 방법과 터치에 최적화된 코드를 만드는 몇 가지 원칙을 학습합니다.



Part 09 기본적인 제스처

스와이프(swipe)와 같은 가장 기본적이고 중요한 제스처들에 대해 학습합니다.



Part 10 스크롤링과 스와이프

스크롤링(scrolling)과 스와이핑(swiping) 동작, 윈도우 8의 IE 10.0에서 터치 이벤트를 사용하는 방법에 대해 배워봅니다.



Part 11 핀칭(Pinching)과 다른 복잡한 제스처

Part 11에서는 웹킷, 파이어폭스 그리고 IE10.0에서 멀티터치를 다루는 기본적인 방법에 대해 학습하며 멀티터치 제스처 중 가장 많이 사용하는 핀치 제스처를 직접 구현합니다.



부록

디버깅 도구 및 모바일에 초점을 맞춘 일반적인 프레임워크를 만드는 몇 가지 방법을 설명합니다.

Part 01 모바일 환경

SECTION 01 터치 디바이스와 데스크톱의 차이점

SECTION 02 널리 사용되는 디바이스

SECTION 03 HTML5

SECTION 04 언캐니 밸리(Uncanny Valley) : 무엇이 터치 인터페이스의 반응성을 증가시키는가?



Part 02 간단한 콘텐츠 사이트 작성

SECTION 01 철학을 결정하자： 모바일 먼저 혹은 나중에?

SECTION 02 마크업 생성

SECTION 03 기초 작업：

SECTION 04 viewport에 대한 이해

SECTION 05 반응형(RESPONSIVE) CSS



Part 03 최초 로딩 속도 향상

SECTION 01 브라우저가 페이지를 로딩하는 방법

SECTION 02 페이지가 느린 이유

SECTION 03 YSLOW와 PAGESPEED를 이용한 속도 향상

SECTION 04 일반적인 문제 해결

SECTION 05 진행 결과 확인



Part 04 두 번째 방문 시 속도 향상

SECTION 01 HTTP 내에서의 캐싱

SECTION 02 모바일에서의 최적화

SECTION 03 웹 저장소 사용

SECTION 04 애플리케이션 캐시



Part 05 PJAX를 이용한 터치 효과 향상

SECTION 01 페이지 로드 비용

SECTION 02 브라우저 히스토리 API

SECTION 03 PJAX 추가



Part 06 탭 vs 클릭： 기본적인 이벤트 다루기

SECTION 01 무엇이 탭을 다르게 만드는가?

SECTION 02 터치 이벤트 소개

SECTION 03 탭 조작하기



Part 07 CSS 트랜지션, 애니메이션, 그리고 트랜스폼

SECTION 01 애니메이션 엘리먼트

SECTION 02 CSS 트랜스폼



Part 08 자바스크립트 성능 최대화하기

SECTION 01 성능 테스트와 디버깅

SECTION 02 쓰기 전용 DOM

SECTION 03 사용자 피드백 우선순위 정하기

SECTION 04 지금까지 언급된 방법을 모두 활용 : 무한 스크롤(Infinite scroll)



Part 09 기본적인 제스처

SECTION 01 왜 제스처인가?

SECTION 02 점진적으로 강화되는 터치 컨트롤러 만들기

SECTION 03 터치 라이트박스 만들기



Part 10 스크롤링과 스와이프

SECTION 01 스크롤링

SECTION 02 레이아웃 틀어짐

SECTION 03 새 브라우저에 스와이핑(swiping) 기능 추가하기



Part 11 핀칭(Pinching)과 다른 복잡한 제스처

SECTION 01 멀티터치 지원에 대해 이해하기

SECTION 02 멀티터치 다루기

SECTION 03 핀치 다루기



부록

A 디버깅 도구들

B 모바일 프레임워크

C 모바일 웹 애플리케이션 개발

스티븐 우즈 저자 스티븐 우즈(Stephen Woods)는 플리커(Flickr)의 수석 엔지니어로 1990년대 말부터 지금까지 웹 사용자 인터페이스를 개발하고 있으며 2006년부터 야후에서 근무하고 있다. 플리커에서 일하기 전에는 야후 홈페이지를 지원하는 자바스크립트 플랫폼을 개발했고 야후의 Personals UI 팀에서 근무했다. 모든 웹 영역에 대해 전문가이지만 가장 관심 있는 분야는 웹 기술들에 기반한 반응형 사용자 인터페이스를 만드는 것이다. 터치 인터페이스에 대한 주제로 SXSW와 HTML4DevConf에서 발표했으며 .net 매거진에도 게재했다.