HTML5 Rocks

HTML5 Rocks

HTML5 특징

그래픽스

웹은 항상 시각적인 요소를 가지고 있습니다. 하지만 수준은 뻔했습니다. 최근까지 HTML 개발자는 웹사이트에 애니메이션이나 시각효과를 만드는 수단이 CSS와 Javascript로 제한되었습니다. 아니면 Flash같은 플러그인에 의지해야 했습니다.

하지만 Canvas, WebGL, SVG 이미지 같은 새로운 기술이 추가되면서 이전과는 달라졌습니다. 실제로 웹에서 그래픽을 다루는 새로운 기능들입니다. 2D Canvas, WebGL, SVG, 3D CSS transforms, SMIL이 있습니다.

새로 나온 문서

The Future is Now!

이러한 모든 새로운 기술들이 빠르게 돌아가지 않는 경우에도 유용하지 않은 것은 아닙니다. 게다가 다행스럽게도 자바스크립트 엔진들은 3D 게임을 실행하거나 실시간으로 비디오를 조작할 수 있을만큼 빨라졌습니다. 또한 많은 브라우저에서 CSS 전환과 변환들조차도 매우 부드럽게 실행할 정도로 하드웨어 가속을 적용하고 있습니다.

개발자들은 이러한 기능들을 이미 활용하고 있는 상황입니다. (웹 상에서 기존 2D 그래픽스 알고리즘의 구현부터 모던 웹의 완전 새로운 기법까지 쏟아져 나오는 HTML5 그래픽스 데모를 볼 수 있습니다.)

지원 브라우저

“그래픽스”는 여러 가지 동작 규격들을 포함하는 폭넓은 주제입니다. 다음 항목들은 그래픽스에 관한 포괄적인 예시로 들 수 있습니다.

Click each specification to see its support status on caniuse.com. Chrome-specific details can be found on the Chrome Platform Status.

데모

적용 사례

An interactive film by Chris Black
3 Dreams of Black
Online music video from the Arcade Fire
The Wilderness Downtown
Online drawing application
deviantART muro
SVG support via svgweb
Wikipedia

참고자료

  • svgweb 모든 브라우저에서 SVG를 지원합니다
  • Adobe Illustrator HTML5 pack 일러스트레이터를 위한 SVG, CSS, 캔버스의 지원
  • Raphaël SVG를 이용한 애니메이션 라이브러리
  • cakejs 캔버스 엘리먼트를 위한 자바스크립트 신그래프 라이브러리
  • Processing.js 캔버스를 이용하여 애니메이션 스크립팅 언어를 자바스크립트로 포팅하기
  • three.js 캔버스, SVG, WebGL을 이용한 경량화된 3D 엔진
  • GPU Accelerated Compositing in Chrome 크롬에서 하드웨어 가속을 이용한 compositing의 구현에 대한 배경지식과 상세한 사항들