웹페이지에서 그래픽을 표현하는 방법은 크게, 브라우저 자체의 그래픽 Rendering기능을 이용하는 SVG, VML 그리고 HTML5에서 지원하는 Canvas와 브라우저의 비브라우저 벤더들에 의해서 제공되는 Plug-in으로 구현되는 Flash, Java, Silverlight와 같은 기술이 있습니다. (SVG도 엄밀히 말하면 Plug-in이라고 할 수 있지만 브라우저가 자체적으로 지원한다는 점에서 Flash등과는 조금 다릅니다.)
Plug-in 방식의 경우 3D, 영상/음성 등 보다 풍부한 기능을 제공하긴 하지만 간단한 차트나, 이미지를 표현하기 위해 Actionscript나 Java, Xaml/C#등과 같은 서로 규격이 다르거나 다소 배우기 어려운 언어를 별도로 배워야 하고, 또 각각의 벤더에서 제공하는 Compiler로(유상이던 무상이던) 컴파일해서 웹페이지에 삽입해야 하는 불편이 따릅니다. 더욱이 브라우저의 다른 요소 예를 들면 Javascript와 같은 것과 통신하기 위한 매우 저수준의 API만을 제공하는 것도 약간은 불편한 요소이기도 합니다.
SVG나 VML은 Microsoft의 IE에서 주로 지원하던 것들로서 현재는 거의 쓰이지 않고 있고, 또 앞으로도 MSIE에서만 지원할 가능이 매우 높기 때문에 표준이라고 말하긴 어렵습니다. 남은 것은 Canvas 하나인데, 사실 이 Canvas태그를 맨 먼저 브라우저에 확장한 것은 Apple이였습니다. Apple은 Safari에서 특정 Plug-in에 의해 구동되지 않는 2D이미지 렌더링용 HTML태그가 필요했고, 그러한 태그로 Canvas를 Safari에서 거의 독단적으로(?) 확장해 버렸습니다.(유명한 MacBook을 구매하여 처음 전원을 넣었을때 환영메시지 영상이 바로 HTML5로 구동된 VIDEO태그인 것 처럼 말이죠)
대신 2D그래픽의 드로잉 메소드는 Javascript의 것을 이용할 수 있게 했는데, Canvas태그는 Javascript에서 그려진 이미지를 화면에 뿌려주는 역할을 하는 것입니다. 즉, Canvas태그자체로 Vactor이미지를 표현할 수 는 없는 것이죠.
하지만 이후 FireFox와 Opera가 이 Canvas태그지원에 동참하면서 이 태그를 자사의 브라우저에 확장해 주었고(순전히 Javascript를 이용한 렌더링이기 때문에 동참하지 않았나 생각합니다. 애플이 또다른 플러그인을 썼다면 동참하지 않았겠죠.), Google의 Chrome도 이를 지원해주고 있습니다. 남은 것은 MSIE입니다만, IE9에서 지원예정입니다만 자사 Silverlight때문에 어떻게 될지 아직 단언할 수 는 없습니다.(하지만 혼자 도태되지 않으려면 지원하겠죠.)
가령 간단한 곡선과 원을 그리려면 다음과 같이 HTML5문서를 코딩하면 FireFox, Safari, Opera, Chrome에서 렌더링된 이미지를 볼 수 있습니다.
Sample View : canvas.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<body>
<h3>Curve - 커브곡선</h3>
<canvas id="canvas1"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var cx = canvas.getContext("2d");
cx.beginPath();
cx.moveTo(0,0);
cx.quadraticCurveTo(100,200,200,0);
cx.stroke();
</script>
<h3>Circle - 원</h3>
<canvas id="canvas2"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas2");
var cx = canvas.getContext("2d");
cx.beginPath();
cx.arc(50,50,50,0,2*Math.PI,true);
cx.stroke();
</script>
</body>
</html>
위 코드는 HTML5&API入門 - キャンバス,VideoからWeb Socketｓまで 次世代Web標準の全容에서 인용한 코드입니다.
canvas.getContext("2d"); 는 2D그래픽을 쓴다고 명시적으로 선언하는 부분인데, 앞으로는 3D도 지원할 계획이라고 합니다. quadraticCurveTo()나 arc()함수를 이용하여 Javascript가 그린 그림을 Canvas에서 표현하는 것입니다. 사실 이런 그래픽이 일반적으로 많이 쓰인다고 볼 수 없지만 버튼이미지, 또는 Round로 각이진 사작형을 그린다고 했을때 외부 IDE(또는 이미지에디터)로 이미지나 플러그인 실행 파일을 만들어 웹 페이지에 삽입하는 것 보다는 직접 HTML코드내에 동적으로 기술하는 것이 더 효율적 일 것입니다. 간단한 이미지의 표현에서는 Canvas로 많은 이용을 하지 않을까 생각합니다.
다만, 아직까지는 "모든 브라우저에서 지원한다"고 장담할 수 없는 것이 좀 아쉽지만 IE9가 나오게 되면 Canvas태그는 모든 브라우저에서 지원 가능하리라 생각합니다. Daum의 Street View와 같은 지도서비스, 또는 지도 위에서 구동되는 AR(증강현실) 등의 서비스도 Canvas태그로 가능하기 때문에 좀 더 다양하고도 멋진 어플리케이션이 쏟아져 나올 것 입니다.
HTML5!!! Flash나 Silverlight보다 강력하다고 볼 수 없습니다. 하지만 적어도 그것 들이 하는 것은 HTML5로도 가능해 지리라 봅니다. 그 가까운 미래를 미리보기 위한 예제는 널려있습니다만, http://www.kesiev.com/akihabara/ 에서 처럼 HTML5코드로 작성된 아케이드 게임을 보신다면 그리 먼 미래는 아니리라 봅니다.(아이팟/아이폰에서 게임을 구동해 보시길 바랍니다. 이렇게 왼쪽엄지와 기능키로 좀 더 실감?나는 아케이드를 즐길 수 있습니다.)
그렇다면 저는 뭘 해야 할까요? HTML5 공부도 중요하지만 무엇보다 Javascript를 완벽히 공부해야 겠죠. 애플의 아이폰과 아이패드를 제외한다면야 딱히 할말은 없지만 이들 제품까지 커버하려면 역시나 HTML5+Javascript 의 조합이 더 우선시 되어야 하지 않을까 생각합니다. 더욱이 장애인에 대한 차별없는 웹과 누구나 개발툴을 사지 않아도 되는 돈 한푼 들이지 않고 개발과 배포할 수 있도록 말이죠.
|
previous entries
Category :
HTML5
Comments :
댓글쓰기
Posted by
장창학 at 1:42 PM
ColdFusion (74)