한빛출판네트워크

HTML 5는 웹 페이지를 표현하는데 있어서 HTML 4에 비해서 눈부신 발전을 한 마크 업 언어입니다. HTML 5에 앞서서는 웹의 미래는 Semantic 웹이란 개념이 대두되면서 XML로 기술된 XHTML 2가 있었습니다.

그러나 XHTML 2는 웹 브라우저 제작 회사들의 지지를 받지 못하게 되었고 HTML 5는 HTML 4에 비해 프로그래머에게 보다 친숙하게 설계되었습니다. 그러면서도 웹 페이지 사용자에게도 다양한 사용자 경험을 제공하게 되었습니다.

이러한 사용자 경험의 확대엔 HTML 5의 신기술 중 Canvas가 자리잡고 있습니다. Canvas는 웹 페이지에서 바로 그림을 그리고 표현할 수 있는 기술입니다.

는 HTML 5의 Canvas로 할 수 있는 모든 기술은 아닐지라도 이것이 캔버스다!를 외칠 수 있을 정도의 내용을 게임을 예로 들어 설명합니다.

캔버스의 테스트는 아직 모든 브라우저가 캔버스를 지원하는 것이 아닌 만큼 IE에서의 캔버스 테스트보다 구글 크롬에서의 테스트를 추천합니다.

캔버스에 그리기
HTML 5에서 Canvas 영역은 브라우저 전체가 아닙니다. 그래서 Canvas 태그가 위치한 영역과 넓이, 높이에 따라 캔버스 영역이 달라지지요.

Chapter 2에서는 캔버스에 그림을 그리는 기본 방법에 대해서 알아봅니다. 캔버스만 웹 페이지에 올려놓기만 하면 그림이 그려지면 좋겠지만 그렇지 못하니 캔버스 위에서 선을 그리고 원호와 캔버스 변환 등을 통해 원하는 그림을 어떻게 만들어 내는 기본 방법을 배우게 됩니다.

문자, 이미지, 애니메이션 그리기
Chapter 3 ~ Chapter 5까지는 캔버스에 문자와 이미지, 수학과 물리학을 적용한 애니메이션을 표현하는 방법을 배우게 됩니다. 문자 API와 이미지 API를 통해 문자를 표현하고 이미지를 불러들여 조작하는 것은 캔버스에서 중요한 요소로 분류될 수 있습니다.

특히 Chapter 5에서는 수학과 물리학을 적용해 캔버스에서 애니메이션을 구현해봅니다. 이 장을 통해서 독자는 애니메이션을 직접 표현하는 방법을 자세하게 배우게 됩니다.

캔버스와 비디오 그리고 오디오
HTML 5엔 다양한 비디오와 오디오 파일을 읽어들 일 수 있도록 되어 있습니다. 그런데 이런 비디오나 오디오 파일을 읽어들 일 수 있는 시중의 플레이어들은 겉모습도 화려하고 기능도 많습니다. 물론 HTML 5에 이르러서 모든 브라우저에서 플러그인 없이 비디오나 오디오가 재생된다는 점은 훌륭한 장점에 속합니다.

Chapter 6 ~ Chapter 7에서는 캔버스의 그리기와 Video, Audio 태그를 자바스크립트로 제어해서 브라우저에서 기본 제공하는 플레이어보다 겉모습도 예쁘고 잘 동작하는 멋진 플레이어를 만드는 방법을 배우게 됩니다.

이제 것 배운 기술을 발산하기 – 게임을 만들어 보자!
의 Chapter 1에서 Chapter 7까지는 Canvas 기본 사용 방법을 배웠다면 Chapter 8 ~ Chapter 9까지 “지오 블라스터”의 기본 구성 및 비트맵과 사운드를 구현합니다. Chapter 9까지 충실히 따라왔다면 브라우저에서 동작하는 게임이 독자를 기다리고 있을 것입니다.

Chapter 10에선 BS Bingo 게임을 폰갭 프레임워크로 모바일 기기로 포팅하게 됩니다. 모바일 브라우저도 HTML 5 Canvas를 부분 지원한다는 것을 본다면 HTML 5 Canvas의 활용은 모바일에서도 유용하지 않을까요?

Canvas 저 편 너머로 할 수 있는 것! – 3D, 다중 사용자 애플리케이션
아직 캔버스는 2D 그래픽만 표현할 수 있지만 일부 브라우저에선 실험적으로 3D 객체를 그리거나 표현해낼 수 있습니다. 이 장의 내용은 구글 크롬을 통해서만 테스트할 수 있습니다.

그리고 ElectroServer 를 통해서 다중 사용자간에 캔버스에 그릴 객체(말은 이렇게 해도 캔버스는 즉시성을 가지고 있기 때문에 객체 단위로 그림을 관리할 수 없습니다)를 사용자간에 보내 채팅 애플리케이션을 만들거나 화이트 보드 애플리케이션을 만들어 볼 수도 있겠습니다.

는 HTML 5의 Canvas를 지금 알려진 것보다 더 깊이 더 많이 알게 도와줍니다. 무엇보다 저자와 번역자들이 이 책을 통해 쏟아낸 지식들은 국내 웹에서도 쉽게 찾아보기 어려운 것이 많으므로 캔버스에 대해 깊게 공부해보고 싶은 분들에게 추천합니다.

제게도 본 도서는 HTML 5의 캔버스가 단순히 물감만 표현할 수 있었던 캔버스가 아님을 알게 되기도 했습니다. Canvas의 알파부터 오메가까지! 알고 싶은 모든 분들 어서 오세요~!

최근 HTML5가 웹 개발에서 중요하게 떠오르자 굉장히 많은 HTML5 서적들이 출간되었습니다. 대부분 500페이지 정도의 분량으로 HTML5 태그 기본부터 CSS3를 포함해 HTML5 API까지 설명하는 책들이 출간되었습니다. 하지만 500페이지 정도로는 HTML5를 겉핥기 밖에 할 수 없는 것에 불만이 많았습니다. HTML5 Canvas 서적은 이러한 시점에 출간된 서적이며 약 800페이지를 소모해 캔버스와 관련된 내용을 설명합니다. 처음에는 "도대체 캔버스로 800페이지를 소모하다니 어떤 잡다한 내용을 쓴 것일까?"하고 책을 읽기 시작했지만 이내 책 안의 모든 내용이 캔버스 애플리케이션을 개발할 때에 꼭 필요한 내용이란 것을 알게 되었습니다. 책은 캔버스의 기본적인 도형 그리기와 글자 그리기를 시작으로 마지막에 간단한 게임 여러 개를 만듭니다.

이 책의 장점이라면 캔버스와 관련된 모든 기본적인 내용을 서술하며 그를 어떻게 활용할 수 있을까 까지 설명합니다. 재미있는 예제가 많으므로 예제를 진행하면서 푹 빠질 만한 책입니다. 하지만 예제가 뒤로 갈수록 분량이 너무 커지고 변경된 부분 표시가 원래 부분과 차이가 없어서 약간 집중력을 떨어집니다.....

책을 구매하려는 분에게 당부하고 싶은 점은 이 책은 HTML5 Canvas를 사용해 프로그래밍의 꽃이라고 불리는 게임을 만드는 방법을 다루는 책입니다. 캔버스의 경우 게임이나 사용자와 반응하는 요소에 사용되므로 "웹 페이지 전체를 Canvas로 구현한다." 또는 "간단한 애니메이션 요소를 Canvas로 구현한다."라는 생각을 가지고 있다면 이 책은 적합하지 않습니다. (그런거 안나옴)(저는 플래시의 기능이 HTML5에서 세분화되어 CSS3 Animation, SVG, Canvas가 모두 조금씩 다른 영역을 차지할 것이라고 생각합니다.) 또한 자바스크립트를 모르면 한 글자도 읽기 힘듭니다. "ㅅ"

이해가정말잘갑니다!