고성능 자바스크립트 그래픽스: HTML5 + jQuery

 

 

 

 

 

고성능 자바스크립트 그래픽스

 

: HTML5 캔버스 + jQuery

 

저자: 라파엘레 체코

역자: 김태곤

출판사: 비제이퍼블릭

출간일: 2012년 8월 16일(목)

정가: 25,000원

페이지: 354p

판형: 175 x 230

ISBN: 978-89-94774-18-3 (93560)

원서정보: Supercharged JavaScript Graphics

 

 

 

책 소개

 

고성능 자바스크립트 그래픽스

 

: HTML5 캔버스 + jQuery

 

“나는 이 책을 읽으며 라파엘레 체코가 본인이 구사하는 기술에 대해 속속들이 잘 알고 있다는 것을 알 수 있었다. 그의 책을 통해 최근 인기 있는 웹 기반 게임들과 UI가 풍부한 애플리케이션들이 어떻게 만들어졌는지 잘 배울 수 있었다.”

 

- 셸리 파워즈

《자바스크립트 쿡북》과 《Painting the Web》의 저자

 

HTML5와 웹 브라우저의 성능이 향상된 덕분에 자바스크립트로 고성능 웹 그래픽스도 작성할 수 있게 되었다. 이 책은 여러분에게 자바스크립트, jQuery, DHTML 그리고 HTML5 캔버스를 사용하여 데스크톱과 모바일 기기에서 사용할 수 있는 리치 웹 애플리케이션을 작성하는 방법을 보여줄 것이다.

 

여러분은 실제 현장에서 사용되는 예제를 통해 아케이드 게임, DHTML 효과, 비즈니스 대시보드 등의 애플리케이션에 접근하는 재미있고 유용한 방식을 배울 것이다. 이 책은 복잡한 주제를 쉽게 배울 수 있도록 작은 부분으로 나누어 조목조목 설명했으며, 각 주제가 다음 단계를 배울 수 있는 발판이 되도록 단계적으로 구성되었다.

 

- 자바스크립트 최적화에 대한 이해를 돕고 최적화가 성능에 미치는 영향을 분석한다.

- 전통적인 DHTML과 jQuery를 병용한 고성능 그래픽스를 제작한다.

- jQuery UI와 Ext JS 라이브러리를 활용한 고급 UI 기술을 학습한다.

- 충돌 감지, 객체 핸들링, 자바스크립트 스크롤링 기법 등을 활용한 게임을 제작한다.

- 그리기, 색상 채우기, 비트맵, 애니메이션 등 HTML5 캔버스의 기초를 마스터한다.

- 구글 정보 시각화 도구를 사용한 인터랙티브 대시보드를 작성한다.

 

독자대상

중급

 

 

 

저자소개

 

라파엘레 체코 (Raffaele Cecco)

 

유럽 비디오 게임 업계의 베테랑 소프트웨어 개발자다. 런던에 있는 소프트웨어 스튜디오인 ‘킹 오브 더 정글(King of the Jungle)’ 사에서 기술 이사를 맡고 있다. 그는 이 회사에서 ‘해즈브로(Hasbro)’ 사와 ‘버진(Virgin)’ 사 같은 고객을 위한 소프트웨어를 작성해왔다. 현재 라파엘레는 웹 개발자로 지내며 그의 웹 사이트인 www.professorcloud.com에 실험해보는 것을 즐기고 있다.

 

 

 

역자소개

 

김태곤

 

웹 개발자로 지내다가 자바스크립트의 매력에 빠진 후 2006년 NHN에 자바스크립트 개발자로 입사하여 네이버 블로그, 스마트 에디터, 진도 자바스크립트 프레임웍, 네이버 지도 등의 프로젝트에 참여하였고, 오픈소스 프로젝트인 XpressEngine에서 선임 개발자로 Ajax UI를 전담하기도 했다. 현재는 미국의 유망 스타트업 기업인 Thing Daemon에서 Fancy라는 서비스를 만들고 있다. 최근에는 웹 브라우저의 한계를 벗어난 HTML5, 자바스크립트 기술에 주목하고 있다.

 

 

 

목차

 

Chapter 1 코드 재사용 및 최적화

속도 개선

최적화 대상과 시기

직접 만드는 코드 프로파일링

자바스크립트 최적화

룩업 테이블

비트 연산자, 정수, 이진수

jQuery와 DOM 반복 최적화

CSS 스타일 변경 최적화

DOM 삽입 최적화

기타 자료

 

Chapter 2 DHTML 기초

DHTML 스프라이트 만들기

이미지 애니메이션

캡슐화와 그리기 추상화(또는 은닉)

DOM 삽입/삭제 최소화

스프라이트 코드

간단한 스프라이트 프로그램

더 동적인 스프라이트 애니메이션

jQuery 플러그인으로 바꾸기

타이머, 속도, 프레임 레이트

setInterval과 setTimeout 사용

시간 정밀도

일정한 속도 유지

인터넷 익스플로러 6 배경 이미지 캐싱

 

Chapter 3 스크롤링

CSS만 사용한 스크롤링 효과

자바스크립트를 사용한 스크롤링

배경 이미지 스크롤링

타일 기반 이미지 스크롤링

 

Chapter 4 고급 UI

HTML5 폼

자바스크립트 UI 라이브러리 사용

jQuery UI를 사용한 웹 인터페이스 개선

Ext JS를 사용한 견고한 UI

UI 요소 직접 만들기

3D 회전목마 만들기

 

Chapter 5 자바스크립트 게임 입문

게임 객체

게임 코드

게임 전역 변수

키 읽기

객체 움직이기

간단한 애니메이터

충돌 감지

외계인

플레이어

방패

의문의 비행접시

게임

모두 하나로 합치기

 

Chapter 6 HTML5 캔버스

캔버스 지원

비트맵, 벡터 또는 둘 다?

캔버스의 제약 사항

캔버스 vs SVG

캔버스 vs 어도비 플래시

캔버스 저작도구

캔버스 기초

캔버스 요소

드로잉 컨텍스트

사각형 그리기

직선과 곡선을 사용해 패스 그리기

비트맵 이미지 그리기

색상, 외곽선, 채우기

캔버스 애니메이션

캔버스와 재귀 드로잉

캔버스 나무 페이지

DHTML 스프라이트를 캔버스 스프라이트로 대체하기

새로 작성한 CanvasSprite 객체

코드에서 바뀐 부분

캔버스와 웹 소켓을 사용한 그래픽 채팅 프로그램

웹 소켓의 장점

웹 소켓 지원과 보안

채팅 프로그램

 

Chapter 7 게임과 시뮬레이션을 위한 벡터

벡터 연산

덧셈과 뺄셈

크기 조절

정규화

회전

스칼라곱

자바스크립트 벡터 객체 만들기

벡터를 사용한 대포 시뮬레이션

시뮬레이션 전역 변수

대포알

대포

배경

메인 루프

페이지 구조

로켓 시뮬레이션

게임 객체

장애물 객체

로켓 객체

배경

충돌 감지와 반응

페이지 구조

개선 및 수정 사항

 

Chapter 8 구글 시각화 도구

제약 사항

차트 용어

이미지 차트

데이터 형식과 차트 해상도

동적인 데이터 사용

요약

인터랙티브 차트

인터랙티브 차트 이벤트

 

Chapter 9 jQuery Mobile을 이용한 모바일 프로그램

jQuery Mobile

모바일 웹 프로그램 TilePic

TilePic 게임 설명

TilePic 게임 코드

폰갭

 

Chapter 10 폰갭을 사용한 안드로이드 앱 제작

폰갭 설치

자바 JDK 설치

안드로이드 SDK 설치

이클립스 설치

안드로이드 개발 도구 설치

폰갭 설치

이클립스에서 폰갭 프로젝트 생성

App.java 파일 수정

AndroidManifest.xml 파일 수정

간단한 웹 프로그램 작성 및 테스트

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장에서 작성한 슬라이딩 퍼즐 게임을 모바일 기기에 배포할 수 있는 네이티브 앱으로 바꿀 것이다.