Google , Ajax , IE7 , SVG , Canvas 3월 28th, 2006 Firefox, Canvas의 위력이라는 글을 통해 SVG와 Canvas 태그에 대한 강력한 예제를 보여 드린적이 있었죠. 이것은 Firefox가 1.5 버전 부터 브라우저 자체적으로 W3C 벡터 그래픽 표준인 SVG를 지원하기 시작했기 때문에 가능한 것이었습니다. 그런데, Ajaxian.com 최근 기사에 따르면 Emil Eklund가 Canvas를 IE에 구현한 것과 비슷한 방식으로 구글이 IE용 Canvas 구현 코드를 만들었고 이를 곧 구글 코드(http://code.google.com)에 발표할 예정이라는 것입니다. (Yahoo! Canvas 개발자 모임 참고)

이를 이용하여 Canvas기반 3D Walker를 IE에서도 돌아가도록 만들었습니다. (IE 사용자도 직접 해보실 수 있습니다.)

도대체 이것이 어떻게 가능한 걸까요? 이것이 의미하는 바가 무엇일까요?

우선 내막을 자세히 알기 위해 웹 표준인 SVG가 만들어질 1997년 당시로 돌아갈 필요가 있습니다. 당시 그래픽 SW업체들은 쏟아져 나오는 다양한 그래픽 포맷을 지원하기 위한 비용이 상호간 엄청나게 들어가고 있었습니다. SWF, PDF, AI, PSD, PPT, DXF… 당시 Adobe, Microsoft, Autodesk, Xerox 등의 W3C 가입 업체들이 XML 기반의 벡터 그래픽 표준을 제정해서 이를 통해 데이터간 호환성 유지를 목표로 표준화 작업을 시작했습니다. 당시 Microsoft는 VML이라는 표준을 Adobe는 PGML이라는 표준을 이미 자체적으로 만들어서 제품에 구현하고 있었습니다. 표준화 과정에서 MS의 입김이 어느 정도 배제되었고 MS는 VML이라는 독자 표준을 IE에 집어 놓고 손을 떼게 된 것입니다. 파워포인트나 워드 파일을 XML로 변환하면 vml 코드를 여전히 볼 수 있습니다. 그 후 웹 브라우저들이 SVG를 지원하지 않았기 때문에 SVG는 플러그인으로 사용되는 정도로 전락되게 되었습니다. 작년 Firefox가 1.5버전에 SVG를 브라우저 자체에 지원하면서 이에 대한 관심이 늘어났습니다만 MS는 IE7에서도 여전히 SVG에 관심을 기울이지 않고 있습니다.

Canva in IE 기능의 핵심은 바로 VML에 있는 벡터 그래픽 기능과 SVG 표준 스펙을 맞추는 것입니다. 그런 후 IE의 HTC 기능을 이용하여 브라우저 스니핑과 코드 렌더링을 수행하는 것입니다. (일종의 IE Hack입니다.) 이를 통해 브라우저에 맞는 간단한 벡터 그래픽 표현이 가능한 것입니다. 말은 어려운데 HTC와 JS 파일 하나씩만 include 하면 끝납니다.

문제는 이러한 코드를 구글도 만들었다는 것입니다. 구글은 Gmail, Google Maps 등을 통해 UI 방식의 혁신을 만들었고 Ajax라는 신조어 까지 만들도록한 원동력이 되었습니다. 구글의 개발자들이 Canvas in IE 코드를 가지고 전혀 예기치 못한 멋있는 UI를 가진 서비스를 만들어 낼 것이라는 전망을 조심 스럽게 해 봅니다. 구글이 하니까 되는 군요.

10년전 고생하고 만들었던 웹 표준이 쓸모없이 버려졌다가 다시 찾은 감회가 남다릅니다. 이제 Canvas를 통해 SVG를 배워 보세요!