구글, IE에서 SVG 구현하기

Firefox, Canvas의 위력이라는 글을 통해 SVG와 Canvas 태그에 대한 강력한 예제를 보여 드린적이 있었죠. 이것은 Firefox가 1.5 버전 부터 브라우저 자체적으로 W3C 벡터 그래픽 표준인 SVG를 지원하기 시작했기 때문에 가능한 것이었습니다. 그런데, Ajaxian.com 최근 기사에 따르면 Emil EklundCanvas를 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를 배워 보세요!

여러분의 생각

  1. htc 파일을 이용한 일종의 ie hack이군요. css :hover hack을 위한 htc 파일과 비슷할 것 같습니다. ie에서 :hover 가상 속성을 사용할 수 있는 기쁨 그 이상을 느낄 수 있겠네요.

    구글 코드 사이트에 있는 몇몇 svg는 사파리(구버전이던가)에서 안돼던데.. 어쨓든 웹디자인에 새로운 지평이 열리는 건 확실하겠네요.

  2. 뽀공이 2006 3월 28 10:15

    좋은 정보 감사합니다.. ㅎㅎㅎ
    svg 다시 손을 대어 봐야겠네요..

  3. 제목은 ‘IE에서 SVG구현하기’ 인데 글 내용은 ‘IE에서 Canvas 구현하기’인것으로 이해했습니다. SVG와 Canvas의 관계가 어떻게 되는건가요? 구글이 그 프로젝트를 공개하면 I.E에서도 Script import정도만 하면 SVG를 쓸수 있게 되는건가요?

  4. 유겸애비/ 네.. 약간 혼란이 있겠네요. Canvas는 SVG를 파이어폭스 웹브라우저에 표현하기 위한 (비표준) 확장 HTML Tag입니다. 이 태그 안에 SVG를 구현합니다. SVG를 그대로 다 구현 해주지는 못하고 몇 가지 중요한 기능만 제공합니다.

    즉, Script Import정도만으로도 IE와 Firefox 양쪽에 똑같은 코드로 SVG 기능 호환성을 제공할 수 있습니다. (Hooney님 말씀 대로 일종의 IE hack입니다.) 사파리에도 Canvas Tag가 있구요. 곧 오페라도 구현할 예정입니다. (따라서 기능상 제약이 조금 있겠지만 Canvas Tag를 통해 SVG를 구현하는 것이 업계 표준 처럼 될 가능성이 있지요.)

  5. 멋진데요. 말씀하신 것 처럼 Canvas가 이제 업계표준 처럼 되겠군요.

  6. ‘구글이 하니까 되는 군요.’
    이 말이 참…쿨럭;;;

  7. 예전에 Adobe의 SVG샘플코드를 기반으로 웹로그 분석툴을 개발한 적이 있었는데 그 때 IE에서 사용하기 위해서 플러그인을 설치해야만 해서 의아해 했던 적이 있었죠.. 개인적으로 웹상에서 백터 그래픽을 XML로 표현할 수 있는 방식으로 SVG가 표준이 되기를 바랬는데 Canvas Tag가 그 길을 열어줄 것으로 보이는군요.. 오래간만에 SVG를 다시 살펴봐야 겠네요 ^^

  8. 벡터그래픽은 엔진이 있어야하는데 자바스크립트로 구현하기는 힘들듯 합니다. 위의 예제도 제 노트북(1.4G)으로 조금만 움직이면 CPU점유율이 80%에 육박해버립니다. 보시다시피 아주 기본적인 랜더링만 구현한 것인데도…
    어짜피 구현해야 될 일이라면 저라면 플래시쪽에 손을 들어주고 싶네요. 자바스크립트와 플래시 연동 라이브러리도 제법 괜찮게 나와있으니까 섞어서 쓰면 될 듯 합니다.(구글 파이넨스가 그렇죠) 브라우져가 OpenGL이라도 바이너리차원에서 지원해주면 얘기가 틀려질 수도 있겠네요. 가능해보이진 않지만…

  9. 저도 이것 관련하여 2주쯤 전에 사용을 해보았습니다만 재미있더군요. 저희 회사 서비스에 해당 기능을 추가 하기 위해서 VML, SVG, Canvas을 공부해서 적용했는데 문제는 크로스 브라우징이었습니다. 그래서 찾아 해메이다가 IE Hack하는 방법을 찾았었는데 결국 사용을 하지는 않았습니다. 왜냐하면 이미 다 구현한 터라서 ㅠ.ㅠ 어쨋든 당장은 좋아보입니다 ^^

의견 쓰기

이름* 이메일* 홈페이지(선택)