[책리뷰] HTML5 Canvas

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기술을 한 번 익혀보시길~!



니가요 HTML5_JS_CSS canvas, html5, SVG

웹앱이라는 것의 배움을 시작하는 분들께

2012.05.03 09:16

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

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


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

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

(@.@)

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

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

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

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

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


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

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


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

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

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

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

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


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

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

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


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



니가요 HTML5_JS_CSS 웹앱 하이브리드웹 HTML5 Sencha jQuery Mobile JQM

Mobile Web & HTML5 performance optimization

2011.06.16 11:25
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/의 운영자이기도 합니다.

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


 
 

nundefined HTML5_JS_CSS html5, jquery mobile up and running, maximiliano firtman, Mobile Web, mobilexweb.com, optimization, performacne, programming the mobile web, Velocity, 모바일웹, 성능, 최적화

Mobile Web에 대한 자료 몇 가지

2011.06.15 00:34
근래 모바일 웹에 대한 강의를 진행한 일이 있습니다. 강의 준비를 하면서 발견한 눈에 띄는 자료 몇 가지를 공유해봅니다.

 
공개된지 1년이 넘기는 했습니다만 모바일 웹 개발을 처음 시작하면서 살펴보면 도움이 될만한 내용입니다. context, performance, security, design, portability의 다섯 가지 주제로 잘 설명이 되어 있습니다.


웹 기술을 이용하여 점점 다양해지는 모바일 환경에서 어떻게 대처해나갈 것인지 엿볼 수 있습니다. 프레젠테이션을 만든 곳이 sencha라는 모바일 웹 프레임워크를 만든 곳이다보니 결론은 쉽게 예상할 수 있습니다. 그렇지만 그 결론이 틀린 것은 아닙니다. 어디까지나 웹이냐 앱이냐는 도구일 뿐 목적은 아니니까요.


뒤쪽은 볼 필요 없고 앞쪽의 네이티브 앱, 모바일 웹, 하이브리드 앱에 대한 비교까지만 보기 바랍니다. 약간 국내 실정과 다른 부분이 있는 것은 아닌가? 라는 생각이 조금 들긴 합니다만 그렇다고 해서 완전히 무시할만한 내용은 아닙니다. 모바일 환경에서의 세 가지 구현 방법에 대한 이해를 높인다고 생각하시면 적당할 것 같습니다.


이 자료는 좀 색다른 자료입니다. 모바일이 우리의 라이프스타일을 어떻게 변화시키고 있는지에 대한 것입니다. 여러 모로 자료를 살펴봤을 때 전문가가 만들었다기 보다는 학생 발표 자료 같은 느낌이 납니다. 하지만 꽤나 잘 만든 프레젠테이션이고 내용도 곰곰히 생각해볼만 합니다.   

http://www.quirksmode.org/mobile/
여러 모바일 브라우저의 특징에 대해 잘 정리해둔 페이지입니다. 개발을 진행하다 보면 이 페이지에서 발견할 수 없는 여러 난관에 부딪히겠지만 그래도 이런 가이드가 있어 조금은 편리하게 개발할 수 있을 것으로 생각합니다.

http://www.lukew.com/ff/entry.asp?1073 - Touch Gesture Diagram
제목 그대로 터치 제스처에 대한 여러 다이어그램을 모아둔 페이지입니다. 여러 직군의 사람들 사이에서 일관된 용어를 사용하고자 할 때 기준으로 삼으면 안성맞춤입니다.


오페라 개발자 도구라는 제목이 붙어 있긴 합니다만 일반적으로 모바일 웹을 개발할 때 고려해야 할 내용들이 잘 정리되어 있습니다. 

Rethinking the Mobile Web by Yiibu
View more presentations from Bryan Rieger

무엇보다도 눈에 쏙쏙 들어오는 매우 잘 만든 프레젠테이션입니다. 볼만한 내용이 별로 없더라도 잘 만든 프레젠테이션이 어떤 것인지 잘 보여주는 예입니다. 하!지!만! 내용도 매우 훌륭합니다. 이 프레젠테이션은 꼭 보시기 바랍니다. 여러 모로 강추! 하기에 아깝지 않습니다. 시간이 있다면 다른 프레젠테이션도 꼭 살펴보기 바랍니다.


한글로 된 웹과 모바일의 전반적인 트렌드에 대한 자료입니다. KTH에 재직 중이신 권정혁님께서 만드신 자료입니다. 기술 트렌드 및 하이브리드 앱에 대한 내용을 얻을 수 있습니다.


마지막으로 CSS3의 media query에 대한 프레젠테이션입니다. 이 자료 하나만으로도 media query에 대해 많은 것을 알 수 있을 것입니다. 이 자료만 가지고 media query에 대한 강의를 해도 충분할 것 같습니다.


강의를 준비하면서 찾아본 자료는 이보다 훨씬 많지만 쉽게 볼 수 있으면서도 강의 준비에 많은 도움이 된 자료를 위주로 정리해봤습니다. 모바일 웹을 이해하는데 많은 도움이 되기를 바랍니다.


nundefined HTML5_JS_CSS context, CSS3, design, hybrid app, Lifestyle, media query, mobile browser, Mobile Web, native app, Performance, portability, Security, sencha, slideshare, 네이티브 앱, 라이프스타일, 모바일 브라우저, 모바일웹, 하이브리드 앱

jsconf 2011

2011.05.11 01:00

5월 2일 ~ 3일에 걸쳐 열린 jsconf 2011가 열렸습니다. 자바스크립트 관련 행사로는 꽤 큰 행사인데요. 여기서 발표된 뉴스 중에 jQuery 제작자인 John Resig이 모질라를 떠나 칸 아카데미로 이직한다는 이야기가 있었죠. 칸 아카데미가 어떤 곳인지는 TED를 참고하시기 바랍니다. (라고 Resig이 이야기 했습니다. ^_^)

여기에서는 발표된 자료를 모아봤습니다. 아직 내용을 다 살펴보지는 못했습니다. 휴일에 잠깐 시간을 내서 보기에는 양이 많네요. 그리고 아직 컨퍼런스를 녹화한 비디오가 올라오지 않았습니다. 트위터를 살펴보니 컨퍼런스 비디오는 한 달 후 쯤 올라온다고 합니다. 살짝 묵혀뒀다가 비디오가 올라오면 같이 보는 것도 좋은 방법이 될 듯 합니다.

5월 2일
Bytes and Blobs슬라이드
Conference WIFI Redux - 슬라이드
Run your JS everywhere, with Jellyfish슬라이드
Fighting Crime and Kicking Apps with Batman.js - batmanjs.org
Hello, Jo! - 슬라이드
Bespin, Skywriter, Ace - The Past, Present and Future of online Code Editing - 슬라이드
JavaScript Powered TVs?! - 슬라이드
How quick can we be? Current data visualization techniques for front-end engineers - 슬라이드
JS for Mobile: The Enyo Framework - 슬라이드
Everything is Permitted: Extending Built-ins - 슬라이드
Artificial Intelligence, collision detection and falling in love in Pistol Slut, a 2D platform shooter. - 슬라이드

5월 3일
App vs Web - Lessons from Zappos.com
Simple, Powerful Modules for JS.Next
Telephony and Communication Apps with Node.js - 슬라이드
Pimp Your JS Library - 슬라이드
Heaven and Hell: JavaScript Everywhere - 슬라이드 (키노트)
Introducing Waterbear
Nano? Pico? Femto? Atto? Zepto! - 슬라이드
Notes on a High-performance JSON Protocol
How 2011-era JS engines compile your scripts (and why it matters) - 슬라이드
CoffeeScript as a JS/Next
Performance of feature detection

트랙 A에 대한 목록만 정리해 봤습니다. 트랙 B에 대한 정보는 다음의 링크에서 확인해보기 바랍니다. 
(트랙 A에 대한 추가 정보도 있습니다.)
https://gist.github.com/957600

그리고 5월 5일에는 node.js의 컨퍼런스가 열렸습니다. (http://nodeconf.com/) 아직 국내에서는 잘 모르겠는데 해외에서는 node.js에 대한 관심이 커보입니다.


nundefined HTML5_JS_CSS conference, javascript, jsconf, 자바스크립트, 컨퍼런스