Chapter 1 코드 재사용 및 최적화<br/>속도 개선<br/>최적화 대상과 시기<br/>직접 만드는 코드 프로파일링<br/>자바스크립트 최적화<br/>룩업 테이블<br/>비트 연산자, 정수, 이진수<br/>jQuery와 DOM 반복 최적화<br/>CSS 스타일 변경 최적화<br/>DOM 삽입 최적화<br/>기타 자료<br/><br/>Chapter 2 DHTML 기초<br/>DHTML 스프라이트 만들기<br/>이미지 애니메이션<br/>캡슐화와 그리기 추상화(또는 은닉)<br/>DOM 삽입/삭제 최소화<br/>스프라이트 코드<br/>간단한 스프라이트 프로그램<br/>더 동적인 스프라이트 애니메이션<br/>jQuery 플러그인으로 바꾸기<br/>타이머, 속도, 프레임 레이트<br/>setInterval과 setTimeout 사용<br/>시간 정밀도<br/>일정한 속도 유지<br/>인터넷 익스플로러 6 배경 이미지 캐싱<br/><br/>Chapter 3 스크롤링<br/>CSS만 사용한 스크롤링 효과<br/>자바스크립트를 사용한 스크롤링<br/>배경 이미지 스크롤링<br/>타일 기반 이미지 스크롤링<br/><br/>Chapter 4 고급 UI<br/>HTML5 폼<br/>자바스크립트 UI 라이브러리 사용<br/>jQuery UI를 사용한 웹 인터페이스 개선<br/>Ext JS를 사용한 견고한 UI<br/>UI 요소 직접 만들기<br/>3D 회전목마 만들기<br/><br/>Chapter 5 자바스크립트 게임 입문<br/>게임 객체<br/>게임 코드<br/>게임 전역 변수<br/>키 읽기<br/>객체 움직이기<br/>간단한 애니메이터<br/>충돌 감지<br/>외계인<br/>플레이어<br/>방패<br/>의문의 비행접시<br/>게임<br/>모두 하나로 합치기<br/><br/>Chapter 6 HTML5 캔버스<br/>캔버스 지원<br/>비트맵, 벡터 또는 둘 다?<br/>캔버스의 제약 사항<br/>캔버스 vs SVG<br/>캔버스 vs 어도비 플래시<br/>캔버스 저작도구<br/>캔버스 기초<br/>캔버스 요소<br/>드로잉 컨텍스트<br/>사각형 그리기<br/>직선과 곡선을 사용해 패스 그리기<br/>비트맵 이미지 그리기<br/>색상, 외곽선, 채우기<br/>캔버스 애니메이션<br/>캔버스와 재귀 드로잉<br/>캔버스 나무 페이지<br/>DHTML 스프라이트를 캔버스 스프라이트로 대체하기<br/>새로 작성한 CanvasSprite 객체<br/>코드에서 바뀐 부분<br/>캔버스와 웹 소켓을 사용한 그래픽 채팅 프로그램<br/>웹 소켓의 장점<br/>웹 소켓 지원과 보안<br/>채팅 프로그램<br/><br/>Chapter 7 게임과 시뮬레이션을 위한 벡터<br/>벡터 연산<br/>덧셈과 뺄셈<br/>크기 조절<br/>정규화<br/>회전<br/>스칼라곱<br/>자바스크립트 벡터 객체 만들기<br/>벡터를 사용한 대포 시뮬레이션<br/>시뮬레이션 전역 변수<br/>대포알<br/>대포<br/>배경<br/>메인 루프<br/>페이지 구조<br/>로켓 시뮬레이션<br/>게임 객체<br/>장애물 객체<br/>로켓 객체<br/>배경<br/>충돌 감지와 반응<br/>페이지 구조<br/>개선 및 수정 사항<br/><br/>Chapter 8 구글 시각화 도구<br/>제약 사항<br/>차트 용어<br/>이미지 차트<br/>데이터 형식과 차트 해상도<br/>동적인 데이터 사용<br/>요약<br/>인터랙티브 차트<br/>인터랙티브 차트 이벤트<br/><br/>Chapter 9 jQuery Mobile을 이용한 모바일 프로그램<br/>jQuery Mobile<br/>모바일 웹 프로그램 TilePic<br/>TilePic 게임 설명<br/>TilePic 게임 코드<br/>폰갭<br/><br/>Chapter 10 폰갭을 사용한 안드로이드 앱 제작<br/>폰갭 설치<br/>자바 JDK 설치<br/>안드로이드 SDK 설치<br/>이클립스 설치<br/>안드로이드 개발 도구 설치<br/>폰갭 설치<br/>이클립스에서 폰갭 프로젝트 생성<br/>App.java 파일 수정<br/>AndroidManifest.xml 파일 수정<br/>간단한 웹 프로그램 작성 및 테스트<br/>TilePic 앱 테스트

이 책은 자바스크립트에 대해 어느 정도 이해하고 있으며 단순한 호버(hover) 효과나 jQuery 같은 라이브러리에서 제공하는 애니메이션 기능 이상의 그래픽 프로그래밍을 경험하고 싶은 사람들에게 적합하다. 이 책을 통해 다룰 그래픽 관련 주제는 다음과 같다:

- 코드 재사용과 최적화. 상속 기법과 성능 향상 팁 포함
- 일반적인 DOM의 깜짝놀랄만한 그래픽 활용 (DHTML)
- 더 나은 그래픽을 위한 캔버스 요소 사용
- 비디오 게임 제작
- 수학을 사용한 창의적인 그래픽과 애니메이션
- 구글 시각화 API(Google Visualizations API)와 구글 차트 도구(Google Chart Tools)를 사용한 데이터 표현
- 효율적인 jQuery 사용과 그래픽 지향 jQuery 플러그인 개발
- jQuery Mobile(모바일)을 사용한 모바일 기기용 그래픽 웹 응용프로그램 작성
- PhoneGap(폰갭)을 사용해 웹 응용프로그램을 네이티브 안드로이드 응용프로그램으로 만들기

독자 대상
이 책의 독자는 웹 사이트와 웹 응용프로그램 제작에 대해 실무적인 지식을 가지고 있어야 한다. 특히 자바스크립트를 잘 사용할 수 있다고 가정한다.

jQuery를 사용하면 개발을 더 빨리 할 수 있어서 필자는 jQuery를 즐겨 사용한다. 이 책에 수록된 대부분의 예제 코드는 jQuery를 기본으로 포함한다. 일반적으로 외부 라이브러리 등을 사용할 때는 구글과 같은 믿을만한 콘텐츠 전송 네트워크(Content Delivery Network, CDN)에 있는 파일을 참조했으므로 별도의 웹 서버에 파일을 복사하지 않아도 된다.

수학은 최소한만 사용하려고 했으나 일부 예제에서는 기본적인 벡터와 삼각법을 사용했다.

책의 구성
이 책은 여러 분야에 대해 빠르게 살펴볼 수 있도록 구성되어 첫 번째 그래픽 프로그래밍 예제가 1장에 나타난다.

그 뒤의 장에서는 다양한 그래픽 관련 주제들을 다루고, 특히 웹 응용프로그램의 시각적인 부분과 인터랙티브함을 향상시킬 수 있는 주제를 주로 다룰 것이다.

인터랙티브 그래픽을 다루는 책들은 모두 비디오 게임에 대해 다루는데, 이 책 역시 완전한 비디오 게임을 하나 만들면서 스프라이트, 스크롤링 등과 같이 게임 프로젝트에 유용한 기능을 살펴본다.

각 장에서 다루는 주제는 다음과 같이 요약할 수 있다:

1장. 코드 재사용과 최적화
성능이 중요한 그래픽 기반 응용프로그램에 유용한 코드 최적화(jQuery 최적화 포함)와 자바스크립트 객체 지향 프로그래밍 기법에 대해 다룬다. 또한 자바스크립트 바이너리 연산자와 이를 사용한 최적화 방법에 대해서도 다룰 것이다.

2장. DHTML 기초
일반적인 DOM 관리(DHTML)를 사용해 빠르게 움직이는 그래픽을 구현하는 방법을 보여준다. (게임과 여러 효과에 유용한) 스프라이트 시스템을 개발하고 이 시스템을 jQuery 플러그인으로 만들어본다.

3장. 스크롤링
시차(視差) 효과 등 기본적인 CSS 스크롤링 기법을 다룬다. 그 후 자바스크립트로 다루는 스크롤링 기법부터 타일 기반의 빠른 시차 스크롤링 시스템을 살펴본다. 강력한 타일맵 편집기를 소개하고, 타일 기반 맵 작성법을 보여준다.

4장. 고급 UI
jQuery UI와 Ext JS 같은 사용자 인터페이스 라이브러리를 살펴본다. 두 라이브러리의 차이점 및 어떤 종류의 응용프로그램에 적합한지 알아보는 한편, 기존의 UI 라이브러리를 사용해 3D 이미지 회전 컴포넌트를 작성한다.

5장. 자바스크립트 게임 입문
플래시와 같은 외부 플러그인에 의존하지 않는 게임 제작 방법을 보여준다. 충돌 감지와 객체 조작 등의 기법에 대해서도 다룰 것이다. 여기서 배운 실무 기법들을 활용해 레트로 스타일(retro-style) 아케이드 게임을 만든다.

6장. HTML5 캔버스
캔버스(Canvas) 요소에 대해 다양한 예제와 더불어 심도있게 다룬다. 예제로는 캔버스와 웹소켓(WebSocket)을 사용한 그래픽 채팅 프로그램 개발 방법 등이 있다. 기본적인 그리기, 선, 채우기, 그래디언트, 재귀적인 그리기, 비트맵, 애니메이션 등 다양한 주제에 통해 캔버스를 배워볼 것이다.

7장. 게임과 시뮬레이션을 위한 벡터
그래픽 어플리케이션과 게임에서 사용되는 2D 벡터에 대해 다룬다. 약간의 수학으로도 많은 일이 가능하다는 것을 알게 될 것이다. 실제와 같은 움직임을 구현한 대포, 로켓 시뮬레이션을 예제로 만날 수 있다.

8장. 구글 시각화 도구
이 장에서는 구글 차트 도구에 대해 알아본다. 구글 차트 도구는 거의 모든 종류의 데이터에 역동적인 효과를 추가할 수 있는 데이터 시각화 도구이다. 막대 차트부터 구글-오-미터(Google-O-Meter) 차트까지, 이 장에서는 정적이거나 인터랙티브한 차트를 포함해 여러 그래픽 시각화 도구를 다룰 것이다. 또한 차트 도구를 사용해서 올바른 방법으로 데이터를 정형화하는 방법도 다룬다.

9장. jQuery Mobile을 사용한 모바일 개발
jQuery Mobile은 jQuery를 기반으로 작성된 프레임웍으로서, 통일된 사용자 인터페이스를 모바일 웹 응용프로그램에 제공한다. 평범한 HTML 페이지를 인터랙티브하고 활력넘치는 모바일 경험으로 바꾸어 놓기도 한다. 이 장에서는 jQuery UI와 모바일 기기에 최적화된 그래픽 슬라이딩 퍼즐 게임을 개발하는 과정에 대해 다룰 것이다.

10장. PhoneGap을 사용한 안드로이드 앱 제작
웹 개발 기술만 가지고 네이티브 모바일 응용프로그램을 만들고 싶다면? PhoneGap(폰갭)이 도움이 될 것이다. 이 장은 네이티브 안드로이드 응용프로그램을 만들기 위해 PhoneGap을 설치하고 설정하는 방법에 대해 설명하고, 앞서 9장에서 작성한 슬라이딩 퍼즐 게임을 모바일 기기에 배포할 수 있는 네이티브 앱으로 바꿀 것이다.