[서평] HTML5 캔버스 완벽 가이드

HTML5 캔버스 완벽 가이드 - 그래픽, 애니메이션, 게임 개발을 위한 캔버스 API의 모든 것 ㅣ 위키북스 오픈소스 & 웹 시리즈 45
데이비드 기어리 지음, 김민섭 옮김 / 위키북스 / 2012년 12월

기존 HTML버전이 HTML5로 넘어오면서 많은 기능을 접목시킬 수 있게 되었고, HTML5를 활용해서 기존의 웹 페이지뿐만 아니라 모바일 앱으로 구현할 수 있는 부분도 다양해지고 수준도 높아졌다. 특히 HTML5를 이용하여 웹과 모바일 양쪽에서 파워풀한 멀티미디어 기능을 구현할 수 있다는 점도 돋보인다. 개인적으로도 기존버전에서는 어려웠던 그래픽과 멀티미디어 관련 강력한 기능들을 HTML5를 통해 보다 손쉽게 사용하면서도 다양하게 구현할 수 있다는 것에 매력을 느꼈기에 이 책에서 다루는 HTML5의 캔버스 기능을 활용하기 위한 다양한 예제와 테크닉에 기대와 관심이 컸다.

HTML5의 캔버스 기능은 워드프로세스부터 비디오 게임에 이르기까지 모든 애플리케이션을 구현할 때 필요한 모든 그래픽 능력을 제공한다. 이러한 흥미로운 캔버스 기능을 데스크톱 브라우저와 모바일 장치에서 모두 실행할 수 있는 실제 애플리케이션을 구현할 수 있도록 HTML5의 관련 기능을 이 책에 상세하게 수록했다.

각 장의 구성이 간결한 개요를 시작으로 컬러 스크린샷, 예제코드, 참고 및 주의사항, 팁, 도표와 그림 등으로 체계적으로 구성되어 있다. 텍스트 설명에 지칠만한 600페이지가 넘는 방대한 양이지만, 책을 읽지 않고 그림, 표, 코드 등만으로도 책의 내용을 이해할 수 있도록 집필했다니 학습자의 직관적인 학습이 가능하도록 신경을 쓴 점이 돋보이는 책이다.

이 책은 캔버스 개발에 입문한 초보자나 실무 개발자 모두에게 도움이 되겠지만, 이 책을 정확히 이해하려면 학습자가 자바스크립트, HTML, CSS 등에 대해 기본 이상의 수준을 갖추고 있다는 전제가 되어야 무리가 없다.

< 이 책에서 다루는 내용 >

● [canvas] 요소 - 다른 HTML 요소와 함께 [canvas] 요소를 사용하는 방법 및 이벤트를 처리하고, 캔버스를 출력하고, 오프스크린 캔버스를 사용하는 방법.
● 도형 - 라인, 호, 원, 곡선, 다각형을 편집하고, 지우고, 드래그하고, 그리는 방법 및 그림자, 그라디언트, 패턴을 사용하는 방법.
● 텍스트 - font 속성을 설정하고, 배치하고, 그리는 방법 및 텍스트 컨트롤을 생성하는 방법.
● 이미지 - 이미지를 움직이고, 처리하고, 클리핑하고, 확대하고, 그리는 방법.
● 애니메이션 - 자연스럽게 재생될 뿐만 아니라 효율적이고 간편한 애니메이션을 생성하는 방법.
● 스프라이드 - 페인터와 동작을 가지고 있는 움직이는 오브젝트를 구현하는 방법.
● 물리학 - 물적 시스템(낙하하는 물체, 추, 발사체 등)을 구축하는 방법 및 비선형 움직임과 애니메이션을 위한 트위닝을 구현하는 방법.
● 충돌 감지 - 충돌 감지와 관련된 고급 기술을 사용하는 방법.
● 게임 개발 - 시간 기반 모션 및 하이 스코어 지원 등과 같이 게임 엔진에서 구현하고 있는 게임 개발에 대한 모든 기능을 구현하는 방법.
● 사용자 컨트롤 - 사용자 정의 컨트롤을 구현하는 데 필요한 모든 인프라 및 프로그레스 바, 슬라이드, 이미지 패너 등을 구현하는 방법.
● 모바일 애플리케이션 - 모바일 화면에 캔버스 애플리케이션을 맞추고, 미디어 쿼리를 사용하고, 터치 이벤트를 처리하고, iOS5의 애플리케이션 아이콘과 비슷한 아이콘을 생성하는 방법.

이 책은 크게 두 부분으로 구분되는데, 책의 전반부에서는 도형 및 텍스트를 캔버스에 그리는 방법과 이미지를 조작하고 그리는 방법을 소개하는 캔버스 API를 다루고, 후반부에서는 API를 사용해 애니메이션과 움직이는 스프라이트를 구현하고 시뮬레이션을 생성, 충돌감지, 비디오 게임을 개발하는 방법을 다룬다. 마지막 장에서는 다양한 사용자 정의 컨트롤 구현 방법과 캔버스를 기반으로 한 모바일 애플리케이션을 생성하는 방법도 소개하고 있다.

이 책에서 소개하는 모든 예제코드는 색으로 구분했고, 코드를 쉽게 분석할 수 있도록 메서드를 평균 5줄 정도의 코드로 작성했다. 분석이 용이하도록 자바스크립트의 동사라고 할 수 있는 함수 호출은 파란색으로 표시하여 다른 코드와 구별되도록 했다.

http://corehtml5canvas.com 웹사이트를 통해서 이 책의 예제코드뿐만 아니라 다른 HTML5와 캔버스 소스를 찾아볼 수 있다.

그리고 책 홈페이지(http://wikibook.co.kr/html5canvas/index.html)에서 이 책에 실린 소스코드를 내려받을 수 있고 예제를 직접 실습해 볼 수 있다고 한다. 방문해보니 아직 준비가 완벽하지 않은 상태라 소스코드 내려받기는 어렵다. 조만간 보완이 되리라 본다.

이 책은 출판시점의 불일치상 어쩔 수 없이 최근에 업데이트된 새로운 기능 몇 가지는 빠졌지만, 현재 HTML5의 캔버스 기능을 활용하여 구현할 수 있는 파워풀한 기능의 대부분을 제공하므로 캔버스 기능을 통해 그래픽, 애니메이션, 게임 개발에 활용하기 위한 완벽 가이드로써 충분하리라 본다. 학습자가 텍스트에 구애받지 않고 최대한 직관적으로 학습할 수 있도록 신경을 썼기 때문에 예제코드를 직접 타이핑하며 결과를 확인하면서 학습해간다면 수월하게 습득해갈 수 있을 것이다.