HTML5에서 Canvas만 집중적으로 다루고 있는 책입니다.
그렇기 때문에 Canvas에 대해서 자세하게 설명되어 있습니다.  

Canvas를 이용해서 폰트, 이미지, 동영상, 간단한 애니메이션, 오디오, 사운드 처리를
단계별로 예제만들면서 설명하고.  배우것을 기반으로 Cavnas게임도 만들고, 모바일에 대한 이야기도 합니다.

예제가 많아서 따라하다보면 Canvas를 익힐 수 있는게 이책의 큰 장점입니다.
각 장마다 단계별로 코드를 조금씩 보여주고 설명 한 후, 마지막에는 
그장에서 사용한 최종코드 전체를 볼수있게 구성되어있습니다.

그래서 뒷부분의 전체코드를 보면서 앞장에 설명한 내용을 다시 생각해볼 수 있었고,
특히 코드에 사용된 폰트가 마음에 듭니다 :-) (0(숫자0), O(영문자O)를 구분하기 쉬워서..)

하지만!!
javascript는 잘 모르고, HTML은 간단한 태그만 알고있는 상태에서 처음 책을 접했을때
javascript에 대해서 대략 감은 잡고 있어야 이해하기 수월하겠구나는 생각이 들었습니다.

만약 프로그래밍을 모르고 HTML5 Canvas를 공부할 목적으로 책을 구매하는 사람들에게 쉬운 책이 아닙니다.
javascript를 모른다면 책 뒷표지에 있는 로드맵에 표시된 책을 훑어본 이후 이책을 읽으시길 권합니다.

Canvas를 이용해서 게임을 만드는 부분은 상당히 흥미로운 부분이었습니다.
Canvas의 사용에만 집중한 것이 아니라 약간의 팁도 덤으로 알려줍니다.
하지만, 수학/물리를 설명하고 사용하는 부분에서는 기본지식이 없으면 이해하기 힘듭니다.
로직은 이해하지 못하고 게임만들면서 사용된 Canvas만 바라봐야 합니다.
뭐.. 수학/물리는 간단한 내용들이라 책 내용을 이해하면서 파악하셔도 됩니다.

개인적으로 책에서 가장 마음에 안들었던 부분은 Canvas API에 대한 설명/정리 부분입니다.
처음보는 API에 대해서 매개변수에 대한 설명은 없고 예제에서 사용합니다.
예제를 보며 API에 대해 정리를 했더니 뒷 부분에서 API에 대해 별도로 설명을 합니다. 
그런데 그게 어떤건 잘 설명해서 보여주고, 또 다른것은 그렇게 설명하는게 없기도 합니다.

책에서 사용한 API에 대해서만이라도 부록에서 찾아볼 수 있도록 준비되어 있다면 어땠을까 하는 생각을 했습니다.

HTML5의 Canvas에 대해서 배우고 싶은 사람들에게는 이책을 추천합니다.
Canvas를 통해서 게임을 만들어보고 싶은 사람들에게는 아주 강력하게 추천합니다!!

많은 웹 유저 분들이 최신 브라우저보다는 보통 기존에 사용하던 브라우저를 그대로 사용한다는 내용의 글을 종종 보곤 합니다. 이는 웹 개발자가 아니라면 최신 부라우저에 어떤 좋은 기능들이 있는지에 대한 관심도가 낮다는 것을 반영하는 것을 아닐까 생각이 됩니다.

저는  한빛미디어 도서 HTML5 Canvas 를 읽고 나서.. 많은 분들이 최신 브라우저로 많이 바꾸셨으면 정말 좋겠다 라는 생각을 처음으로 해보게 되었습니다.

웹(Web)을 통해 사용가능한 솔루션의 화면을 만들어 내는 일을 하는 사람으로써,

다양한 웹 브라우저가 있음을 불평했었고, 새로운 버전이 계속 개발됨을 불평 했었는데...

그런 불평들을 놀라움과 감탄으로 바꾸어 놓은 기능 중 하나가 HTML5 Canvas 라고 생각되네요.

'웹의 한계를 캔버스로 뛰어 넘는다' 라고 이 책의 표지 상측에도 써 있는 것 처럼 말이죠.

부끄럽게도 Canvas 라는 기능을 이책을 통해서 처음 알게 되었네요.

그러기에 이 책을 읽기 참 잘했다는 흐뭇함은 누구보다도 더 많이 느낄 수 있었지 않았나 생각 됩니다.

저처럼 Canvas 를 기존에 전혀 몰랐던 사람이라도  쉽게 이해할 수 있고 사용할 수 있도록,

Canvas의 사용방법과 기능에대한 상세한 설명을 아주 친절하게 하고 있는 책이라고 간략하게  이 책에 대해 요약할 수 있을 것 같습니다.

저는 전문서 책들에 한해서 목차가 아주 잘 구성 되어 있는 책을 정말 좋아합니다. 이 책도 목차부터가 꽤 마음에 듭니다. 12페이지나 차지하고 있는 이 책의 목차는 간략하지만 은근 세심함이 느껴집니다.

책을 정독하였다면, 어느책 어디쯤에 어떤 내용들이 있더라 정도는 기억하기 나름입니다만, 책들은 많고 기억력에는 한계가 있기에 한번 읽고나서 필요한 것을 그때 그때 한번에 딱 찾아내기란 쉽지 않을 때가 있습니다. 그래서 책장을 슬슬 넘겨가며 여기쯤 있었던 것 같은데 라는 행동을  자주 하게 되는데, 그런 행동과 시간을 줄여주는 그런 목차인것 같습니다.

짧으면서도 핵심적인 소스를 통해 이해하기 쉽게 구성되어 있는 예제소스를 담고 있는 책을 정말 좋아합니다.  이 책의 대부분이 이해하기 쉬운 소스로 내용을 잘 설명하고 있어 좋습니다. 그러나 후반부로 갈 수록 소스의 내용이 길어서 하나의 예제가 몇페이지를 차지하고 있는데 이점은 상황에 따라 장점도 될 수 있고 단점도 될 수 있는 것 같습니다.

그리고 이 책에서의 아쉬운 점을 탄성을 지를 만한 단계의 예제 혹은 결과물을 (책에 그런 결과물을 볼수 있는 링크 같은 정보)더 제공해 주었다면 정말 더 좋았을 것 같다라는 정도로 남기며 리뷰를 마무리 하고자 합니다.

[HTML5] 웹의 한계 캔버스로 뛰어넘는다! HTML5 Canvas

2011년 웹 시장에서 가장 큰 이슈 중하나는 HTML5의 등장이 아니었나 생각됩니다. 그동안 HTML은 인터넷 익스플로러, 크롬, 파이어폭스, 사파리 종류마다, 그리고 인터넷 익스플로러6, 7, 8 등 버전별로 각각 다른 모습으로 출력해 각 버전별로 화면이 깨지지 않도록 프로그래밍 하는데 힘들고, 화면을 이쁘게 만드려고 하면 플래시나 액티브엑스를 따로 설치해 불편함이 많았다고 생각합니다. 이와 같은 문제를 해결해 주기 위해 HTML5가 나왔다고 볼 수 있는데요.

HTML5는 크로스 플랫폼을 지원해 액티브엑스나 플래시 없이도 웹페이지를 통해 게임이나 동영상과 같은 멀티미디어 기능을 즐길 수 있다는 특징이 있는 차세대 웹언어입니다.

저는 특히 HTML5의 기능 중 멀티미디어 부분의 기능에 관심이 많이 있었습니다. 플래시를 대체하거나 브라우저 상에서 게임을 즐기려면 캔버스로 그림을 그리는 수학/물리의 수많은 법칙과 이론이 필요해 작년부터 컨버스 기능을 중점으로 소개해주는 책을 찾고 있었는데, 이번에 한빛미디어 O'oreilly에서 컨버스 기능위주로 기초부터 고급형까지 이론과 실습이 적절하게 소개된 도서를 출시해 책을 구해봤습니다.

한빛미디어 O'oreilly의 도서는 기초적인 것과 전문적인 것이 적절하게 구성되어 있습니다. 무엇보다 예제가 많아 코딩하면서 공부하면 학습효과가 클 것 같았습니다.

평소 저는 한빛미디어 O'oreilly 시리즈의 팬인데요. 사무실에만 관련책이 4~5권이 있는데, 이제는 한권이 또 늘어나네요.

한빛미디어 O'oreilly HTML5 Canvas 책은 플래시 개발자나 웹개발자 그리고 처음 HTML5를 배우는 분들도 쉽게 익힐 수 있는 책입니다. 그림과 문자를 출력하고, 이미지나 비디오 그리고 간단한 애니메이션까지 하나의 캔버스로 정의하는 방법만 익히면 쉽게 다룰 수 있겠죠

한빛미디어에서는 간단한 로드맵을 제공합니다. HTML5 Canvas를 공부하기 전에 HTML의 기본 문법과 자바스크립트, 웹표준 문법을 익히고 보시면 조금은 더 쉽게 책을 이해할 수 있을 것 같네요. 처음부터 이책을 보면 굉장히 어려울 것 같은 생각이듭니다.

책의 구성을 간단하게 소개하면, HTML5 Canvas는 옮긴이의 글, 지은이의 글, 감사의 글을 시작으로 HTML5 캔버스 소개, 그리기, 문자API, 이미지, 애니메이션, 비디오, 오디오, 게임, 비트맵과 사운드등 다양한 이론과 활용법, 예제소스를 제공합니다. 

총 1~11까지의 캡터로 구성되어 있고 하위 카테고리까지 모두 읽어보고 예제를 풀어본다면, 이 한권만 보면 Canvas의 기초적인 부분부터 고급기술까지 익힐 수 있을 것 같네요.

이 책은 HTML5 중 캔버스 기능에 중점을 두고 있는 책입니다. 특히 게임에 대한 예가 많아 HTML5로 게임을 구현하고자 하는 개발자분들은 꼭 읽어봐야 할 책이 아닌가 생각됩니다. 소스를 하나씩 입력하고 결과를 보면서 구현되는 모습을 보니 뿌듯해지는 기분이네요.

지금도 HTML5를 비롯해 다양한 기술들은 지금도 발전되고 있습니다. 프로그래머를 비롯해 IT 분야에 종사하는 분들은 급변하는 기술과 트랜드를 빨리 캐치하고 대응해야 하는데요. 저도 시대에 뒤쳐지기 싫어 HTML5 공부를 시작했습니다.

이책을 입문자가 보기엔 굉장히 어려울 수 있습니다. 개인적으로는 자바스크립트 정도는 할줄 알아야 어느정도 쉽게 책을 보고 독학을 할 수 있을 것 같습니다.

윈도우나 리눅스, PC나 스마트폰이나 사파리나 인터넷익스플로러, 크롬등 어느 OS, 브라우저 등 환경에서 액티브엑스나 플래시를  설치하지 않고 웹에서 게임이나 멀티미디어 컨텐츠를 재생할 수 있는 HTML5 매력있지 않나요? 한빛미디어 HTML5 Canvas 책을 통해 HTML5의 무궁무진한 기능을 공부해보세요.

우연한 기회로 이책을 보게 되어 리뷰를 쓰게 되었습니다. 일단 사진 기술과 글 솜씨 부재로 인한 어설픔이 있더라고 좋게 봐주시길 바랍니다^^; 제 객관적인 느낌을 적어 부디 이 책에 관심이 있으셨던 분에게 도움이 되셨으면 합니다.

이 책의 경우 위의 이미지와 같이 선수 과목이 있습니다. 대부분 독자 분들이 아 html5에 관심 있으니 이거 사서 보면 다 알 수 있을거다 라고 생각하시고 사시는 분이 있을거라 생각되는데 그러시면 안될거 같고 책에 친절하게 선수과목에 대해 로드맵을 만들어 뒤에 명시해 두었습니다. 참고하시고 위의 책을 보시거나 기본 html5 입문서를 보시고 이 책을 보시면 이해하시는데 많은 도움이 될거라 생각됩니다.

위에 언급했다 시피 이책은 html5의 입문서와는 달리 주로 Canvas의 기능에 대해 자세히 설명하고 다양한 예제를 들어 독자들에게 html5의 전체적인 기능을 알려주느 목적보다 원하는 부분을 중점적으로 들어

도움을 주려고 했던 부분이 좋았던거 같습니다.

그 예로 플래쉬를 대체하는 영상처리 부분이라던가 이미지 처리, 에니메이션 기능, 오디오 애플리케이션 같은 다양한 캔버스 관련 기능의 예제가 많이 있어 좋았습니다. (위의 제일 왼쪽 이미지 참고해주세요)

또한 예상치도 못한 게임 그래픽 변환 같은 주제를 담고 있어 게임에 관심있던 분들도 상당히 재미 있게 보실수 있는 부분이라고 생각됩니다. (위의 가운데 이미지를 참고하시면 될거 같습니다.)

실제로 게임 만드는 부분에 있어서 나름 본인은 재미있게 보았던거 같습니다.

그리고 제일 마지막 부분의 폰캡을 사용하는 핸드폰 어플리케이션 만들기도 있습니다. (위 이미지의 제일

마지막 부분을 참고해주세요) 저의 경우 일반적으로 알려진 안드로이드 sdk를 이용한 어플 제작법만 알고있던 저에게 있어서 이 폰캡이란건 신선하게 다가오는 기술 이었습니다. 요즘 기술 트랜드를 맞추려고 노력한 책이란걸 개인적으로 느낄수 있던 책이었던거 같습니다.

나름 두서 없이 적긴 했는데 어느정도 이 책에 대해 구입하시려는 분에게 도움이 되었는지 잘 모르겠네요

하지만 확실한 것은 Canvas의 기능을 자세히 알고 싶은 분들에게 이 책은 일반 전체적으로 설명한 입문서 형식의 html5 서적보다는 나을거라는 생각합니다.(저같은 경우도 특정 부분을 중점으로 알려주는 책이 없어서 참 안타까워 했는데 이런 특화된 부분을 중점을 알려주는 책이 있는것을 참 좋게 생각합니다.) 

관심 있으신분 들은 서점에서 한번 보고 판단하시는게 어떨까 하고 조심시럽게 이책을 권해봅니다.

이만 리뷰를 마칩니다.

이 책은 나에게 아직 경험해보지 못한 신세계를 경험한 느낌이다. html태그만

이용해서 플래시와 같은 효과를 낼 뿐만아니라 태그만으로 게임제작도

가능하게 되었다. 이 책을 보기전까지 canvas에 대한 지식이 없었다.

html5 캔버스는 자바스크립트로 처리할 수 있는 비트맵 영역이다.

프로그래머가 자바스크립트의 캔버스 API로 코드를 만들면 HTML5 캔버스가

비트맵 화면을 다시 그리는 구조로 되어있다.

HTML5 캔버스의 기본 API인 2D 컨텍스트는 프로그래머가 브라우저의 원하는

영역에 이미지를 출력하거나 다양한 모양이나 문자를 그리도록 해준다.

뿐만 아니라 캔버스에 그린 모양, 문자, 이미지에 대해 색상, 회전, 투명도,

필셀조정, 직선, 곡선등을 적용할 수 있다.

HTML5 캔버스는 익스플로러 9 웹브라우저와 크롬, 사파리등에서 지원가능하다.

HTML5는 곧 표준이 재정되 예정이다. 하지만 표준이 나오지도 않았는데

이렇게 많은 책들이 나오고 이에 대한 정보도 인터넷을 찾아보면 무수히

많은 정보가 나온다.

비디오와 오디오도 플러그인 없이 바로 제어가 가능해진다. 재생, 일시정지,

정지 등 다양한 기능을 제공하고 있다. 정말 신기했던 점은 HTML5와

자바스크립트, CSS만 가지고 갤러그와 같은 게임도 만들 수 있다는

사실에 놀라웠다. 그리고 라이브러리를 이용하면 3D 이미지도 구현이

가능한다는것에 또 놀라웠다.

앞을 내가 보기엔 3년 안에 반이상 웹사이트들이 HTML5로 바뀔것같다.

웹프로그래머에게 희소식이 아닐수 없다. 그렇기 때문에 웹프로그래머와

개발자가 되고 싶은 대학생들에게 꼭 알아야되는 기술이 되었다.

내가 보기엔 HTML과 자바스크립트 기초없이 이 책을 바로 보기엔 무리가

있을 것 같다. 이 책은 HTML5를 해봤거나 자바스크립트에 대한 지식이

있는 분들에게 추천하고 싶다.

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

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

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

＜HTML 5 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 태그를 자바스크립트로 제어해서 브라우저에서 기본 제공하는 플레이어보다 겉모습도 예쁘고 잘 동작하는 멋진 플레이어를 만드는 방법을 배우게 됩니다.

이제 것 배운 기술을 발산하기 – 게임을 만들어 보자!
＜HTML 5 Canvas＞의 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를 지금 알려진 것보다 더 깊이 더 많이 알게 도와줍니다. 무엇보다 저자와 번역자들이 이 책을 통해 쏟아낸 지식들은 국내 웹에서도 쉽게 찾아보기 어려운 것이 많으므로 캔버스에 대해 깊게 공부해보고 싶은 분들에게 추천합니다.

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

이 책의 매력은 웹상에서 구현할 수 있는 모든 시각적, 청각적 기능들을 구현할 수 있는 방법을 알려준다는 것이다. HTML5의 막강한 멀티미디어 구현 능력을 쉽고 흥미롭게 구현한 것이 이 책의 가장 큰 장점이 되지 않을까 생각한다. 예전 인터넷 부흥기가 시작될 무렵이 1900년대 말에 HTML을 처음 접했는데, 그 시절에는 그다지 큰 매력을 느끼지 못했다. 2D 구현을 위해서는 플래시나 포토샵 등의 외부 프로그램에 많이 의존해야 했다. 단지 매력이라면 프로그래밍 언어치고는 구조가 간단하여 배우기 쉽다는 정도이다. 물론 배우기 쉽다는 것은 무시할 수 없는 장점이지만, 그만큼 순수 HTML만으로는 구현하려는 기능의 한계가 있어서 부수적인 많은 과목을 추가로 배워야 했다. 하지만 HTML5 등장으로 여기서 지원하는 막강한 기능에 입이 쩍 벌어진다.

HTML5의 기능을 대략적으로 살펴보면 그림그리기, 문자출력, 이미지 처리 등과 함께 비디오, 오디오, 애니메이션 등 지원한다. 이보다 더 매력적인 기능은 게임을 만들 수 있다는 것이다. HTML5에서 지원하는 게임은 어떤 것일까, 컴퓨터를 사용할 때 가장 먼저 접하는 것이 게임일 것이다. 나 역시 컴퓨터를 처음 접했을 때, 게임의 매력에 푹 빠졌던 기억이 난다. 그 때는 컬러모니터가 아닌 흑백 모니터에서 아주 단순한 그래픽의 게임들이 많았는데, 이 책을 읽으면서 게임에 푹 빠져 어린 시절의 향수가 살포시 스쳐갔다. 이 책에서는 후반부에 게임 만들기를 다루고 있다. 아마 HTML5의 모든 기능을 총 동원했다고 볼 수 있다. 예전에는 상상도 할 수 없었던 HTML 태그가 이제는 막강한 멀티미디어 기능을 지원하며 그 영역을 확장하고 있다.

앞으로 미래에는 마트 폰의 지속적인 보급으로 웹프로그래밍의 관심과 기술발전이 더욱 가속화 될 것이다. 지금보다 더 많은 기능들을 필요로 할 것이고, 이에 부합하기 위해 혁신적인 기술들이 도입될 것이다. 웹의 중심에 있는 HTML5는 앞으로 활용도가 더욱 높아질 것이다. 이런 시점에서 HTML5의 다양한 기능들을 소개하는 책을 만난다는 것은 기분좋은 경험이다. HTLM5의 전반적인 기능을 보편적으로 소개하기에 웹프로그래밍에 관심이 있는 사람이라면 한번 접해볼만하다. 물론 웹의 발전 방향을 가늠하기에도 이 책은 많은 도움이 된다. 이 책을 살펴보면서 웹의 무궁한 가능성을 엿보았으며, 내가 생각했던 것보다 더 많은 기능을 수행할 수 있다는 알게 되었다.