제목이 거 참 구수하군요.
(이 숨길 수 없는 사투리 본능이란... 훗. -_ㅠ)
 
Internet Explorer 에서는 절대로 가능하지 않거나,
혹은 일부만 지원 되는 것. 그리고 IE 를 제외한 나머지
최신의 브라우저에서는 대게의 경우 잘 지원하는 것.
이렇게 말씀드리면 열 손가락이 부족할 정도로 많다고
하실지 모르겠습니다. ^^;;; 오늘은 그 중 하나인
Canvas 에 대해서 한 번 같이 알아보고자 합니다.
 
canvas 태그는 Javascript 를 통해서 브라우저에
그림을 그릴 수 있도록 하는 태그 입니다.
사실 태그 그 자체로는 HTML 문서 상에서 위치를
지정해주는 역할 그 이상도, 그 이하도 없습니다.
중요한 포인트는 Javascript 와 CSS 입니다.
(특히, Javascript 가 중요합니다.)
 
이 신기한 녀석의 태생에 대해서는 이 글 아래에
참고문서로 링크된 MDC(Mozilla Developer Center)에서
자세히 언급되어 있습니다. 간략히 알아보자면, 최초 시작은
Apple 의 Dashboard 와 Safari 였고, 이 것이 발전하여
IE를 제외한 대부분의 최신 브라우저에서 지원하게 되었습니다.
현재는 HTML5 규격으로 작업중(Working Draft)입니다.
 

 
(문서위치: http://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic)
 
IE에서 제대로 지원하지 않는데도 불구하고
우리가 canvas 태그를 주목해야 하는 이유가 있습니다.
물론 벌써 눈치채셨겠지만, 서버가 해야할 일정 비율의 UI 작업을
완전히 클라이언트쪽으로 넘길 수 있기 때문입니다.
 
카운터 프로그램이 적절한 예가 될 수 있겠습니다.
통계자료를 챠트로 구성해서 보여줄 때, 그림 파일을 GD를 통해 생성하고
보여줄 경우 UI작업 때문에 서버가 추가적으로 일을 해야 합니다.
canvas 의 경우 그림 그리는 작업은 브라우저가 알아서 하게 되지요.
 
 

 
(canvas 를 이용해서 Javascript 만으로 위와 같은 그림을 그릴 수 있습니다.)
 
GD를 이용해서 그림을 그리는 작업은
서버에 적지 않은 부담을 주게 됩니다.
만약 해당 작업이 하루에 몇 번 일어나지 않는다면 그나마
다행이겠지만, 그게 아니라면 문제는 더 심각해지지요.
더군다나 단순한 그래프를 그리는 작업임에도 매번 GD를 통해서
그림을 그려야 한다면 불필요하게 서버를 혹사시키게 됩니다.
 
canvas 는 (의도했든, 하지 않았든) 이와 같은 상황에서
최적의 대안을 제시하고 있습니다.
즉 웹에서 자주 보게 되는 통계 그래프등의 작업을 canvas 태그로
해결할 수 있게 길을 열어준 것입니다.
 
아...
이렇게 좋은 녀석을 IE가 지원하지 않기 때문에 그저 포기해야만 하는 걸까요?
정녕 Microsoft IE 개발팀원들을 압박하는 수 밖에는 없는 걸까요?
 
아닙니다!
길이 있습니다.
IE에서도 canvas 태그를 지원할 수 있도록 하는 프로젝트가 있습니다.
세상에 죽으란 법은 없는 것이죠. ^^;;;
 
위의 ExplorerCanvas 프로젝트는 아직 100% 완벽한 canvas 지원은
되지 않고 있습니다. 그렇지만 대부분의 경우, 꽤 만족스럽게 그림을
그려줍니다. 아까 위에서 보셨던 원형 챠트를 생성하는 Plotr 의 경우도
IE 6 이상이면 문제 없이 그림을 그려냈습니다. 단순 도형의 경우는
문제가 없는 셈이죠.
 

 
(MDC 에서 예제로 그려진 도형들. 보다 복잡한 그림도 시간과 인내심만 있다면 OK!)
 
저의 경우 GR Counter 의 챠트를 보여줄 때 GD와 Canvas 태그를 통한
Plotr 를 사용하고 있는데요, 둘 다 환경에 따라 지원범위가 조금씩 달라서
사실 범용화 하는데 애를 먹고 있지만 솔직히 손을 들어주자면
Canvas 태그를 활용하는 것에 들어 주고 싶습니다.
(백지장도 서로 맞들면 낫다는 데, 브라우저도 같이 좀 돕고 살아야지요. ^^;;)
 
자, 여기까지 읽으셨다면 이미 스크롤 압박을 이겨낸
강인한 정신력이 있다고 보고 제가 바카쑤 한 병씩 대접하도록 하겠습니다. (...)
사실 소개 정도만 했는데 이미 꽤 잘 작성된 (한글!)문서가 존재합니다.
위에서 말씀드렸던 것처럼 참조링크 하나를 안내하겠습니다.
 
※ Canvas 로 그림그리기: http://developer.mozilla.org/ko/docs/Drawing_Graphics_with_Canvas
 
실제로 GD와 비교해보면
그림 영역을 지정하고, 기준 좌표가 기본적으로 둘 다 좌측상단인 점.
그리고 선 그리기, 사각형 그리기, 색상 채우기 등의 메소드가
비슷한 점. 단순 명쾌한 인자들로 간단히 그림을 그릴 수 있고 투명도를
둘 다 기본으로 지원한다는 점 등을 확인하실 수 있습니다.
 
GD로 생성한 그림은 파일로 저장이 가능한데 반해,
canvas 로 생성한 그림은 파일 형태로 저장이 되지 않...을 수도 있지만
이미 이 한계도 극복되었군요. 참 새삼스럽지만 세상에 고수들은 정말 많습니다. -_ㅠ;
 
웹에 그래프등의 그리기 작업을 해야 하고,
기존 GD만으로는 어느 정도 한계가 있다고 판단 될 때
오늘 소개해 드린 이 canvas 태그를 한 번 떠올려 보시기 바랍니다. ^^;
MDC에 보면 유용한 개발문서들이 참 많이 있는데
분명 도움이 되실 겁니다.
 
(한글 번역이 일정 정도만 되어 있는데 후에 기회가 된다면
번역기를 돌려서라도(!) 꼭 유익한 정보 안내하도록 하겠습니다. ^^)
 
canvas, 어떤 녀석인지 이제는 감이 좀 오시죠! ^^;;;;;;
 
 


ps. 본래 오늘은 GR Note v0.93 공개와 관련된 글을 쓰려고 했는데...
미안하게도 뭍혀 버렸습니다. |||ozn 아쉽지만 링크로 대체 합니다. (__);;;
 
ps2. Microsoft Internet Explorer 에서는 canvas 와 유사한
VML 인터페이스를 제공합니다. 그렇습니다. 예상하신 바와 같이 10년 전에
써 먹었던 수법 그대로 쓰는 겁니다. 독점 태그를 통한 canvas 말살정책이죠.
그렇지만... 지금은 10년 전 웹이 아니라는 사실! ...고로, 과감히 설명 생략입니다. ^^;