플리커(Flickr)의 수석 엔지니어로 1990년대 말부터 지금까지 웹 사용자 인터페이스를 개발하고 있으며 2006년부터 야후에서 근무하고 있다. 플리커에서 일하기 전에는 야후 홈페이지를 지원하는 자바스크립트 플랫폼을 개발했고 야후의 Personals UI 팀에서 근무했다. 모든 웹 영역에 대해 전문가이지만 가장 관심 있는 분야는 웹 기술들에 기반한 반응형 사용자 인터페이스를 만드는 것이다. 터치 인터페이스에 대한 주제로 SXSW와 HTML4DevConf에서 발표했으며 .net 매거진에도 게재했다.
역 자 소 개
옮긴이 | 이호웅 2000년 PC 보안 솔루션 개발자로 안랩에 입사했다. 2013년까지 악성코드, 해킹 분석 대응을 총괄하였으며 현재는 대한민국의 대표적인 백신인 V3 제품군을 비롯하여 매니지먼트 솔루션인 APC와 웹 개발 등 소프트웨어 개발을 총괄하고 있다.
옮긴이 | 하정대 리눅스 시스템 프로그래머로 시작했지만 지금은 웹 서비스 개발에 더 많은 관심을 가지고 있다. 2006년부터 안랩에 재직하면서 네트워크 보안 장비 및 서비스 플랫폼 개발 업무를 수행하였다.
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에서 멀티터치를 다루는 기본적인 방법에 대해 학습하며 멀티터치 제스처 중 가장 많이 사용하는 핀치 제스처를 직접 구현합니다.
부록 디버깅 도구 및 모바일에 초점을 맞춘 일반적인 프레임워크를 만드는 몇 가지 방법을 설명합니다.