Flash없이 HTML에 그림을 그리자! <canvas>

요즘 인터넷을 달구는 IT관련 기사들은 대부분 iPhone을 만든 스티븐 잡스로 부터 시작되는것 같아요.
그중 하나가 Adobe Flash 지원 여부를 두고 이런 저런 말들이 많습니다.

Flash는 잡스 말고도 HTML5 라는 키워드로도 계속 주목 받아 왔는데요.
관련 기사들 내용으로는 HTML5가 나오면 Flash가 설 곳이 좁아 진다는 이야기들 입니다.

사실 이런 이야기들은 부모 잘만나서 좋은 직장, 좋은 보직으로 시간이 남아 도는 사람들이나,
육아와 가족 부양이라는 현실적 문제가 덜한 그래서 상대적으로 시간이 넉넉한 분들이나 다룰 주제이지,
나오지도 않은 HTML 5에는 뭐가 되더라 애플이 Flash를 지원하지 않는 이유는 뭐 때문이다 하는 기사 거리는
저 처럼 먹고 살기 힘든 현장 개발자에게는 아무런 도움이 되지 않는 사치 처럼 보이죠.
왜냐하면 현장에서 쓸 수 있는 기술이 아니기 때문입니다.
물론 동향을 파악하는 의미에서 귀기울여야 하기 하지만, 현실은 그렇게 많은 시간을 주지 않습니다.

HTML 5와 CSS3 와 관련해서 이런것도 된다는 식의 기사는 많이 있지만,
정작 "IE6" 에서 실현할 수 없는 기술은 판타지 일 따름이죠.

하지만, canvas 요소는 다릅니다.

우선 하나의 예를 보시죠.
그래프 위에 마우스를 흔들면 그래프가 흔드는 만큼 표시를 해 줄겁니다.



보통 이런류의 동적인 그림을 그리기 위해서는 Flash를 사용하던것이 전통적인 우리의 개발상식이었습니다.
물론 ActiveX나 Java Applet을 이용해서 하는 경우도 많았구요.

하지만, Canvas라는 HTML 요소를 이용하면 그냥 이런것이 가능합니다.
그리고 위의 그래프 예는 IE6를 포함한 현존하는 모든 메이져 브라우져에서 동일한 모양과 기능으로 나타납니다.

Canvas는 HTML 5에 추가될것으로 기대되는 요소 중에 하나입니다.
다시 말하면 HTML 4.01 표준에도 포함 되어 있지 않다는 뜻입니다.

어어~~ 잠깐만요. 그렇다구 현장에서 사용할 수 없다는 뜻은 아니니 오해는 하지 마세요.
위에 되는거 보셨자나요.

자 그럼 Canvas 요소를 사용 하려면 어떻게 해야 하는지 알아 볼까요?

<canvas id="canavas" width="150" height="150"></canvas>

그냥 이렇게 HTML Tag를 사용하면 됩니다.

Canvas 요소는 IE를 제외한 "FireFox, Chrome, Opera, Safari"에서 인식이 되어 왔구요.
IE는 6,7,8,9 모두 인식을 하지 못합니다.
그래서 IE를 위해서는 Google Inc에서 만든 excanvas.js라는 IE에서 canvas를 인식하고 동작하게 하는 기능이 있는 script를 추가로 넣어줘야 합니다.

excanvas.js 는 http://code.google.com/p/explorercanvas/ 에서 받을 수 있고 사용하려는 HTML Page에 이렇게 넣어 주면 되겠죠.

<!--[if IE]>
  <script type="text/javascript" src="/somepath/excanvas.js">
<![endif]-->

그럼 Canvas에 어떻게 그림을 그리느냐!

Canvas에 그림을 그리기 위해서는 javascript를 사용해야 합니다.

간단한 예를 들면 이렇게 합니다.

 function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }

이걸 실행하면 이렇게 나오구요.



그럼  저 코드에서 나타난 처음보는 getContext, fillStyle, fillRect 같은  API의 정체를 알아야 겠죠?
그걸 가장 잘 설명하고 있는 곳은 제가 아는한 Mozilla Developer 사이트 입니다.


   https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
   https://developer.mozilla.org/en/Canvas_tutorial



금방 소개한 사각형 2개 짜리 예제 코드도 이곳의 첫번째 예제 코드를 가져 온것입니다.
이 사이트를 통해 API의 종류와 쓰임새를 익히면 이제 HTML에 Flash 없이 마음껏 그림을 그릴 수 있는 것입니다.

HTML Canvas로 무얼 할 수 있는지 더 알고 싶으시면, 아래의 사이트를 방문해 보세요.
재미있는 경험을 할 수 있을 겁니다.


   http://www.canvasdemos.com/





알아 두어야 할 몇가지.

앞서 설명한 excanvas.js는 Text 관련 API가 빠져 있습니다.
다시 말해 글씨를 그릴 수 있는 API가 구현되어 있지 않습니다.

Text 관련 API는 http://code.google.com/p/canvas-text/ 를 사용해야 합니다.

비슷한 기술로 SVG 라는 기술이 있습니다.
동적인 그림을 그려야 하는 경우는 Canvas가 더 적절해 보이고
정적인 그림을 그려야 하는 경우는 SVG가 더 적절해 보입니다만,
SVG에 대해서는 제가 잘 모릅니다.

그냥 Flash로 그리면 될것을 왜 복잡한 script를 써가며,
잘 알아 보지도 못하는 코드 범벅으로 그림을 그리냐고 묻는다면
뭐가 더 생산적이고 효율적인지 스스로 각자 판단해서 행동해야 한다고 말하고 싶습니다.
저는 그냥 웹은 웹이어야 한다고 생각합니다.