[책리뷰] HTML5 Canvas

HTML5 2012/05/03 09:32



HTML5 Canvas

저자
스티브 펄튼 지음
출판사
한빛미디어 | 2012-01-20 출간
카테고리
컴퓨터/IT
책소개
플래시 개발자, 웹 개발자, 입문자도 쉽게 익히는『HTML5 C...
가격비교 글쓴이 평점  


얼마전에 몇 몇 동료분들과 Canvas 스터디를 시작했었다.

Canvas는 HTML5 스펙 중 가장 현실세계에서 사용이 가능하고 뭔가 그럴싸해 보이는 UI를 만들 수 있는 기술이다. 이처럼 html5 기술 중 실제 사용할 수 있는 사례가 있나 싶다..아무튼 알아두면 써먹을 곳이 많은 기술이다.


다시 스터디 이야기로 돌아가서,,

예상대로(?) 난 많은 분들께 구박을 받으며 숙제를 잘 안하는 등 어렵게 따라가고 있다. 

사실 책을 잘 읽지도 많은 부분을 공부하지 못하고 있지만, 일단 책을 사고 뒤적거리고는 있긴하다.

그래서 간단한 리뷰를 작성해볼까 한다.

Canvas를 공부하고 싶으면 그냥 이 책이 제일 좋다고 할 수 있다. 물론 다른 책은 잘 모르겠지만 여튼 난 눈에 띄는 책은 못봤다.

이책은 Canvas에 대한 기본적인 API를 설명하고, 중간부터 바로 응용편이다.

응용편이라고 보이는 챕터에서는, 간단한 물리학을 이용한 애니메이션/Audio/Video/PhoneGap연동 등을 다룬다.  말하자면 Canvas를 활용해서 다른 HTML5기술이나 최신 기술로 할 수 있는게 뭘까? 실제 어떻게 하지? 에대한 실제 사례를 보여주고 싶었던 것 같다.


간단하게 Chart와 같은 것을 그리고, 이미지를 간단하게 편집하는 기능을 만들고 싶다면 앞부분에 설명되는 Canvas API만으로도 충분하다.

이런 부분은 W3C홈페이지를 참고해도 좋다. 

http://dev.w3.org/html5/2dcontext/

Canvas 를 가지고 가볍게 공부하고 싶은 분들, 자바스크립트로 신기한 애니메이션을 어떻게 만드는지 궁금했던 분들에게는 교과서와 같은 느낌으로 접근할 수 있다. 

이책은 좀 두껍다.(691페이지) 1~4챕터까지 보고 뒤에는 연관성이 없어보이니 원하는 응용편을 살펴보면 될 것 같다.


자 Canvas를 활용한 HTML5기술을 한 번 익혀보시길~!



Posted by 니가요
TAG canvas, html5, SVG

최근에 웹앱이라는 것을 배우려는 것치 트렌드처럼 느껴진다.

이것이 하나의 언어나 대표적인 웹 기술로 생각이 되는 것 같다. 실제 웹앱을 다루는 교육과정도 꽤 생기고 있다는 점이 그 증거이기도 하다.


도대체 웹앱은 무엇일까?  웹앱에 대한 정의도 중구난방이다. 

대체로 모바일앱처럼동작하는모바일웹기술로만든모바일웹이나모바일앱 을 일컫는다.

(@.@)

띄어쓰기를 해서 다시 쓰면,

"모바일앱처럼 동작하는 모바일웹 기술로 만든 모바일웹 이나 모바일앱"

아무튼 모바일용을 지칭하는 추세이고, 모바일 웹이나 앱인데 좀 인터랙티브한 요소가 있는 그런 거다.

물론 PC웹 개발에서도 이와 같이 웹앱이라는 용어를 쓰는 경우가 있지만 모바일 환경이 보통 우리가 말하는 웹앱의 환경이다.

한가지더 웹앱 ==하이브리드웹앱 이라고 생각되는 경우도 있다. (하이브리드웹앱을 포함한 용어정의는 다시 한 번 하자)


용어이야기가 길어졌는데, 웹앱을 위해서는 그럼 어떤 공부를 시작해야 하는가?

HTML5와 CSS3라는 걸로 만들면 된다는데, Jquery Mobile을 익히면 된다는데? 그거 말고 하이브리드웹앱도구도 있고, 아.. sencha도 있다. 과연 어떤 도구와 라이브러리를 활용해야 하는가? 더구나 어떤 것이 어떤 환경에 더 좋다고 누군가 잘 비교해둔게 없다는 점은 우리를 더욱 안타깝게 한다.


그런데 웹앱을 정말 잘하려고 할 때 이것부터 고민하는 것은 문제가 있다고 생각된다.

그러한 상위레벨의 기술은 누구나 비교적 쉽게 배우고 익힐 수 있다. 문제는 기본이 되는 언어를 잘 알고 있는 가 이다.

JavaScript라는 언어를 얼마큼 알고 있는가? 내가 HTML의 기본에 대해서는 잘 익히고 있는가? 

JavaScript의 복잡한 언어구조와 방법을 모두 알 필요는 없지만, 언어가 가지고 있는 특징과 객체지향스러운 개발방법을 익혀야 한다. 

그러기 위해서는 jQuery나 ExtJS와 같은 Core framework을 익히는 것도 먼저가 아니고, 그저 Javascript 전문 서적을 먼저 공부하는 것이 먼저이다.  여기에 많은 시간을 투자하고 그 동안은 jQuery Mobile이나 새로운 도구 등은 모두 잊어도 상관없다.(어짜피 새로운 도구는 홍수처럼 우리의 곁에 밀려들어 오고 있다..그리고 더 좋은게 계속 나온다..)


그렇게 언어를 익히고 나서 어떤 도구나 라이브러리를 사용하던지 개발 중간에 발생하는 코드의 수정이나 문제해결을 하는 경우 쉽게 접근 할 수 있을 것이다. 

그리고 그런 도구나 라이브러리를 선택할 수 있는 안목도 생길 것이다.

분명히 말하지만 다양한 API나 도구 라이브러리 등이 웹앱이라는 것을 자동으로 만들어 주는 건 절대 없다. 앞으로도 그럴 것이고 Generator하는 툴이 있다면 그건 감히 '거짓말도구'라고 생각해도 된다.


모두 기초를 충실히 할 수 있기를 바란다~!!



Posted by 니가요
6월 14일부터 16일까지 Velocity라고 하는 웹 최적화와 운영에 대한 컨퍼런스가 Santa Clara에서 열리고 있습니다. 아직 현지에서는 마지막 날 행사가 남아 있겠네요. 이 행사의 워크샵 중에 모바일 웹과 HTML5의 퍼포먼스 최적화에 대한 자료가 있어 공유해봅니다.

워크샵의 진행자는 Maximiliano Firtman 이며 이 사람은 Programming the Mobile Web(2010년 7월 출간)과 jQuery Mobile Up and Running(2011년 10월 출간 예정)의 저자이기도 합니다. 또한 http://www.mobilexweb.com/의 운영자이기도 합니다.

모바일 웹 개발에 있어서 당장이라도 적용해볼 수 있는 여러 내용들을 담고 있으니 모바일 웹에서의 성능 향상 방법을 궁금해하시는 분이라면 바로 확인해보기 바랍니다.


 
 
저작자 표시 비영리 변경 금지
Posted by 케이스