본문 바로가기

인사이드RIA

모던 웹을 위한 SVG 라이브러리 Snap.svg

반응형

오늘 아침 트위터에 오픈소스 자바스크립트 SVG 라이브러리가 등장했다는 소식을 보았습니다. 주로 어도비쪽 관련된 분들이라.. 아마 그쪽과 관련된 일이라 싶었습니다.


https://twitter.com/kajorn/status/393073625307156480


일단 소개된 라이브러리는 Snap.svg 라는 라이브러리입니다. Snap 이라고 하면 화면 캡쳐를 위한 도구로만 알고 있어서. 왜 그런 이름을... 이라고 생각했는데 S 가 앞에 들어가있으니 SVG*** 뭐 그런 의미가 아닐까 싶습니다. 사이트는 아래와 같습니다.

http://snapsvg.io/



SVG 라이브러리로 잘 알려진 것이 라파엘이라는 프로젝트입니다. 'raphaeljs'라고 검색하면 많은 자료를 찾아볼 수 있습니다 .특히 IE6 까지 지원을 해주고 있어 상당히 폭넓게 사용되고 있습니다. 라파엘은 Sencha Touch 프로젝트를 구성하는 중심축 중에 하나라고 합니다. 2010년 개발자인 Dmitry Baranovskiy가 합류하면서 Sencha Touch 가 만들어졌다고 하네요.

http://raphaeljs.com/

http://en.wikipedia.org/wiki/Sencha_Touch#Version_history_and_support


그럼 어도비가 오픈소스라는 이름으로 라파엘 프로젝트를 복제한 것이 아닌가 싶었는데 일단 조금 다른 개념으로 접근을 했더군요. 라파엘 프로젝트는 오래된 웹브라우저까지 지원해야 하기 때문에 활용할 수 있는 기능이나 성능을 어느 정도 포기한 부분이 있습니다. 하지만 Snap.svg 는 IE9 부터 지원을 합니다. 타이틀 그대로 모던 웹만 지원하겠다는 겁니다. 그래서 라파엘에서 하지 못했던 다양한 기능을 활용할 수 있게 됐다고 합니다.


http://www.senchalabs.org/


참고로 라파엘 프로젝트 개발자였던 Dmitry Baranovskiy 는 2012년 어도비에 합류를 했습니다. 주로 웹표준 관련된 프로젝트를 진행하고 있다고 하네요.

http://dmitry.baranovskiy.com/post/new-gig


* PBS 키드 사이트에 이 라이브러리를 적용한 모양인데 처음 로딩은 그렇게 빨라 보이지 않습니다. 물론 완벽한 개편이 아니고 아직 플래시 기반의 콘텐츠가 많아서 딱 부러지게 이렇게 좋아졌다라고 하기는 어려울 듯 합니다.


Dmitry Baranovskiy 의 발표 중에 '자바스크립트 식스팩'이라는 것이 있다고 합니다. 제대로 된 자바스크립트 개발자가 되려면 기초체력부터 다지자는 이론이라고 하네요.

http://senxation.me/post/34554306291/raphaeljs-dmitry-baranovskiy-web-directions


* 어도비에서는 또 하나 흥미로운 데모를 공개했습니다. CSS Shapes 를 사용하는 데모라서 웹브라우저에서 약간의 설정이 필요합니다.

http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/

728x90