박종명의 아름다운 개발 since 2010.06

확실히 웹 기술을 둘러싼 주변 환경은 변화하고 발전하고 있음을 느낀다
훌륭한 오픈소스 라이브러리가 속속 등장하는 것만 봐도 실감할 수 있다

지금 소개할 Raphael 역시 MIT라이센스를 따르는 자바스크립트 벡터 라이브러리이다
http://raphaeljs.com/

SVG와 VML을 이용하여 웹에서 벡터그래픽을 표현한다
객체 및 함수로 추상화가 되어 있어 사용법을 익혀 쉽게 이용할 수 있다

Raphale 라이브러리는 문서화가 잘 되어 있어 사용법을 익히는데 큰 도움이 된다
사이트의 문서를 보면 각 그래픽 요소에 따른 설명과 사용법, 결과 화면등이 체계적으로 제공되어 학습 및 적용하기에 매우 편리하다

Raphale 사이트에서 모든 정보를 얻을 수 있다
중요한 것은 이제 웹에서 벡터 그래픽을 보다 쉽게 그리고 안정적으로 (그리고 무료로) 구현할 수 있게 되었다는 것이다

참고로 IE (6이상) 를 포함한 대부분의 브라우저를 지원한다는 것도 큰 장점이다

아이폰에서 플래시가 구동되지 않는 것은 꽤 오래된 이슈이다
지금 소개하는 Gardon이라는 라이브러리 역시 공개된지 꽤 되었다

Tobias Schneider 라는 외국의 한 개발자가 만든 이 라이브러리는
플래시런타임 없이 순수 자바스크립트(& SVG) 만으로 플래시를 구동시켜 주는 오픈소스 라이브러리이다

플래시런타임에 비해 기능이나 실행 속도면에서 부족한 면이 있지만,
아이폰과 같이 플래시를 지원하지 않는 환경에서 플래시를 구동시키기 위한 훌륭한 대안이 될 수 있다

다음의 github 사이트를 통해 라이브러리의 소스가 제공된다
http://github.com/tobeytailor/gordon

그리고 이 라이브러리를 이용해 플래시를 구동시키는 데모는 아래 사이트에서 확인할 수 있다
http://paulirish.com/work/gordon/demos/

벡터 그래픽 기반인 플래시의 표현을 위해 SVG가 이용되었으며 플래시파일인 swf 파일을 전달하면 Gordon 라이브러리를 통해 자동 분석, 변환된다. 이때 큰 swf 파일의 분석시 실행 성능과 멈춤현상을 없애기 위해 HTML5의 Web Worker 기술을 사용했다고 한다

소스만 봐도 대략 사용법을 쉽게 알 수 있는데,
더 자세한 사용법과 Gardon의 특징을 보려면 다음의 링크를 확인해 보기 바란다
http://wiki.github.com/tobeytailor/gordon/


브라우저 지원 현황과 플래시 지원 범위
Gardon을 실무에 적용하기 위해서 먼저 점검해 봐야 할 것이 이 두가지이다
어떤 브라우저에서 그리고 플래시의 어디까지를 지원하는지 체크하는 것이 중요하다

우선 Gardon 은 모든 플래시 기능을 다 지원하지는 않는다
swf 버전 1 기능 위주로 지원이 되며 swf 버전 2 ~ 10까지의 플래시 기능은 일부만 지원된다
아래의 링크에서 Gardon이 지원하는 swf 태그를 확인하도록 하자
http://github.com/tobeytailor/gordon/wiki/swf-tag-support-table

그리고 브라우저 지원현황은 아래 링크를 확인하자
http://wiki.github.com/tobeytailor/gordon/browser-support-table

대략 테스트를 해보니,IE(8)를 제외한 사파리,크롬,파이어폭스,오페라 최신 버전에서 정상 동작한다

참고로 이 라이브러리는 MIT 라이센스로, 사용상의 문제만 책임진다면 자유롭게 이용할 수 있다