인터넷

HTML5로 구현한 웹기반 포토샵 sketchpad

뽕다르 2010. 2. 20. 03:53

HTML5로 구현된 sketchpad


구글이 유튜브에 HTML5를 지원하면서 HTML5에 대한 관심이 커지고 있습니다. HTML5는 간단히 말하면 외부 플러그인 없이 웹페이지에서 동영상을 재생할 수 있도록 해주는 HTML 차기 제안 버전이죠. 다른 개선 사항도 많이 있지만 이점이 가장 큰 변화하고 보면 될것 같습니다.

HTML 주요 기능에 대해서는 hyunyu's blog의 HTML 5란 무엇이며 왜 중요한지에 대한 이야기에 잘 정리 되어 있네요.

- Canvas element를 통해서 dynamic한 그래픽을 Javascript만을 이용해서 web page에서 보여줌
- Video element를 통해서 간단하게 web에서 비디오를 play하고 제어함 (유튜브의 HTML5 지원)
- Geolocation API로 web browser에서도 내 현재 위치를 알 수 있음
- Local storage가 가능해서 web application에서 offline 지원
- Background processing이 가능해서 무거운 작업이 가능
- Drag & Drop API로 web application에서도 drag & drop이 가능

이중 첫번째 특징을 잘 이용한 웹사이트가 바로 Sketchpad입니다. HTML5의 Canvas 기능을 잘 이용해서 웹 기반 포토샵을 구현했더군요. 사실 플래시를 이용한 웹 기반 포토샵(sumopaintpixlr)은 많이 있습니다. 하지만 무겁기도하고 외부 플러그인을 필요로 한다는 점에서 다소 아쉬운 면이 있죠. 이에 반해 Sketchpad는 웹브라우저 만으로 구현되어서인지 정말 가볍게 동작합니다.

다만 HTML5가 아직 표준으로 정해진 것이 아니기 때문에 모든 웹브라우저에서 완벽히 지원되는건 아닙니다. 대표적으로 MS익스플로러에서는 아직 지원 하지 않고 있죠. 대신 파이어폭스, 크롬, 오페라, 사파리 최신버전에서는 잘 동작하네요. 그리고 아직 초기 단계라 기능이 많이 부족하긴 하지만 표준으로 제정되고 개발이 많이 이루어 진다면 훨신 유용해질거라 생각합니다.

아직 HTML5가 뭔지 잘 모르겠다면 꼭 한번 방문해 보세요. HTML5의 장점을 잘 느낄 수 있을겁니다. 앞으로의 웹의 모습을 잘 보여주는 서비스가 아닌가 생각되네요.