저자: 앤토인 퀸트(Antoine Quint), 역 전순재
2001년 9월 4일,
W3C는 SVG(
Scalable Vector Graphics 1.0) 규격을 발표하였다. 초안 이후로 규격의 진화를 준수해온 초창기 SVG 이용자들을 비롯하여 몇몇 사람들에게 SVG 1.0은 오랫동안 기다려온 숙원이었다.
1999년 2월에 처음 공개적인 초안이 나온 이후로 2년 반이라는 세월이 흘렀기 때문이다. 특히 SVG는 웹 그래픽을 위해서 너무나 필요한 도약이었다. 규격을 살펴 보면 숨막히도록 (600+ 페이지 이상) 자세하고 복잡하다는 것을 알 수 있을 것이다(예를 들어 필터와 애니메이션 곳곳에서).
오랜 동안 숙성된 결과로 나온 SVG 규격은 배포된 순간부터 지금까지 견고하고 다양한 지원을 해왔다. 본 기사의 목적은 SVG 세계에서 조만간 선보일 새로운 것들을 비롯하여 현재 사용할 수 있는 SVG 도구들에 대한 간략한 설명을 제공하는데 있다. 따라서 가장 재미있고 진보적이며 검증된, 활동적인 프로젝트들에 초점을 맞출 것이다.
현재 SVG를 볼 수 있는 방법은?
SVG에 대하여 가장 궁금해 할 것은 아마도 SVG 컨텐츠를 볼 수 있는 방법일 것이다. 현재 중요한 SVG 보기 도구는 독자적인 SVG 뷰어와 SVG-가능한 브라우저가 2가지가 있다.
뷰어(Viewers)
오늘날 가장 진보적이면서 널리 퍼진 SVG 구현은
어도비(Adobe)사의 SVG 뷰어(Viewer)이다. 어도비는 SVG에 상당한 공을 들여 왔는데, 규격을 공동으로 작성하는 데서부터 SVG 도구들을 공동체에 초기부터 제공하는데 이르기까지 모든 범위를 아우른다. 현재 버전 3에서, 윈도우와 매킨토시 플랫폼에서 플러그인을 사용할 수 있으며 거의 모든 주요 브라우저에서도 잘 작동한다. 이 새로운 버전은 거의 모든 SVG 규격을 지원하며 진보된 SVG DOM 지원을 포함하고, ECMAScript 엔진을 장착한 스크립팅 능력을 훌륭하게 지원하며 애니메이션도 완벽하게 지원한다.
이 외에도
어도비는 리얼 플레이어(Real Player) 플러그-인도 포함하고 있는데, 이 플러그인을 사용하면 SVG 내용물을 멀티미디어 내용물과 함께 화면에 표시할 수 있다. 그리고 RealONE사의 SMIL 2.0 지원과 어도비의 SVG 뷰어 지원을 잘 활용하면 상당히 진보적인 작성이 가능하다는 것을 고려해 볼 가치가 있다(예를 들어, 비디오 클립 위에 걸친 반투명 SVG 모양). 또한 이 새 버전에 따라 오는 마이크로소프트 이진 행위는 Internet Explorer version 5 이상에서 SVG 인라인 컨텐츠를 가능하게 해준다. 성능상의 관점(Performance-wise)에서 보면 애니메이션과 상호작용성에 대하여 매크로미디어(Macromedia)사의 플래시 플레이어(Flash Player)에 견줄 만하다.
기타 독자적인 주요 SVG 뷰어로는 자바 기반이며 오픈 소스인 바틱(
Batik) 프로젝트가 있다. 아파치 XML 프로젝트의 일환으로 Batik 1.1은 SVG 1.0 규격의 정적인 모든 사양을 지원하며 가까운 시일 내에 SVG의 동적인 사양을 추가하려고 연구중이다. 바틱(Batik)은 실제로는 뷰어 그 이상이다. 실제로는 일종의 도구모음으로서 SVG를 화면에 뿌려주는 변환기를 제공하며, DOM과 API를 통한 서버측 생성, 폰트 변환기, 그리고 예쁘게 출력해 주는 인쇄자까지 제공한다. 바로 그러한 능력 덕분에 아주 편리하게 바틱(Batik)을 자바기반의 웹 출판 프레임워크로도 사용할 수 있다. 바틱(Batik)은 어느 자바 플랫폼에사도 사용할 수 있으며
Apache FOP와
ILOG JViews에 아주 훌륭하게 합병되었다.
브라우저(Browsers)
SVG는 XML이므로, SVG를 고유하게 지원하면서 네임스페이스(namespaces)을 가진 인라인 능력을 갖춘 브라우저를 찾아 보고 싶을 것이다. 이런 경우라면, 여러분은 운이 좋은 편이다. 왜냐하면 세 개의 오픈 소스 구현이 돌아 다니고 있기 때문이다. 무엇보다도 우선 알렉스 프릿쯔(Alex Fritze)가 모질라(Mozilla)에 SVG 지원을 추가하는 작업을 들 수 있다. 이 특별한 구축은 (아직 모질라 트리의 일부는 아니지만) 기존의 모질라 XML, CSS, DOM 위에 구축된다. 그리고 이 프로젝트는 상당히 빠른 속도로 진전을 보이고 있다. 현재
SVG-가능한 모질라는 이미 상당량의 SVG 규격을 지원하며 유용한 스크립팅 기능을 허용할 뿐만 아니라 윈도우, 매킨토시, 그리고 리눅스에서도 사용할 수 있다. 알렉스(Alex)는 규격을 더 많이 지원하기 위한 작업을 하고 있다(모쪼록 이렇게 작업한 SVG 지원이 버전 1.0까지는 모질라 코드베이스에 포함되기를 기대한다).
W3C의 아마야(
Amaya)는 SVG의 흥미로운 하부모둠 구현을 그의 XML 지원의 일부로 제공한다(XHTML, MathML, RDF, 그리고 등등). 아직까지는 SVG 지원이 약간 가볍기는 하지만 아마야(Amaya)는 그저 단순한 브라우저는 아니다. 아마야가 지향하고 있는 주요 디자인 목표에는 W3C 표준을 준수하고 그 표준에 대한 개념의 증명을 제공하는 저작 도구를 제공하는 것을 포함하고 있기 때문이다. 아마야를 사용하면 여러 XML 네임스페이스로 분산된 문서들을 WYSIWYG 방식으로 편집할 수 있다. 사실, 아마야가 WYSIWYG-스타일로 XML 문서의 일부로 SVG 컨텐츠(content) 생성을 허용해주는 도구로 오직 유일하게 출시되어 있다. 아마야는 조만간 규격을 완전하게 지원하도록 SVG 지원을 확장하여, 차세대 SVG 개선점들을 따를 것이라고 생각한다.
고유의 SVG 지원을 브라우저에 포함시키려는 또다른 시도로
X-Smiles 프로젝트가 있다. 자바 오픈 소스 프로젝트인 X-Smiles는 여러 XML 독립 애플리케이션(CSIRO SVG Viewer, Apache FOP, Xerces, Xalan)들 사이를 붙여주는 접착제로 시작하여 점차로 성장해서 XML 기능(XForms과 SMIL)의 구현을 추가로 포함시키기에 이르렀다.
지금 당장은 규격 준수와 사용자 보급면에 있어서 어도비의 SVG 뷰어처럼 독립 애플리케이션이 선두에 앞서가고 있지만, SVG가 진정으로 속해 있는 곳에 통합하려는 논리적인 조류가 있을 듯하다. SVG를 XML 브라우저 안에 깊숙히 구현하면 XML의 목표중의 하나에 한 걸음 더 성큼 다가서는 것이 된다. 문서 상호운용(document interoperability)이 바로 그 목표라고 할 수 있을 것이다.
현재 SVG를 만들 수 있는 방법은?
이제 SVG 문서를 보는 법을 개관하여 보았으므로 그런 문서를 약간 만들어 보고 싶은 생각이 들 수 있을 것이다. 그러기 위해서는 다음과 같은 2가지 방법이 있다. 손으로 코딩하기 또는 SVG가-가능한 그래픽 패키지를 이용하기. 두 방법 모두 나름대로의 장점과 단점이 있다.
SVG가 가능한 편집기
손으로 코딩하는 SVG는 생각보다 미친 짓은 아니다. SVG 규격을 읽어 볼 수 있기 때문에 특히나 XML을 잘 안다면 더욱 좋다. 확실히 필터에 관한 장은 약간 어렵지만 간단한 SVG 그래픽을 그래디언트(gradients), 불투명 효과(opacity effects) 등등으로 편집하는 것은 아주 쉽다. 손으로 코딩하는 SVG가 가지는 장점은 그래픽 구조를 대단히 깔끔하게 통제할 수 있다는 것이다. 텍스트 편집기에서는 SVG를 편집하는 여러 가지 잔재주를 부리겠지만, 인기 만점의
XML-Spy 4.1 패키지에서는 SVG에 대해 뛰어난 고유의 지원을 제공한다. 이 구문 강조는 대단히 깨끗하며, 요소와 속성 완성 또한 아주 간편하다. 그리고 XML-Spy는 또한 SVG DTD (또는 사용가능하다면, 스키마)에 대하여 SVG 내용의 유효성 평가기능을 제공한다. 또다른 깔끔한 기능은 XSLT 변환을 사용하여 어느 XML 파일로부터도 SVG를 만들 수 있으며 그 결과를 편집기 안에 있는 브라우저 뷰에 표시할 수 있다는 것이다.
TextPad와
vim과 같은 인기있는 편집기들은 SVG 구문 강조 기능을 제공한다. 어도비 역시 SVG의 지원을 자사의 골라이브(GoLive) 제품에 제공하는데, 이 도구를 이미 사용하고 있다면 쓸모가 많을 것이다.
SVG가-가능한 그래픽 패키지
마음 설레게 하는, SVG가 가진 한가지 특징은 그 덕분에 결국 디자인 아티스트들이 (프로그래머에게도 딱 맞는 언어로) 풍부한 그래픽 컨텐츠(content)를 웹에 넘겨줄 수 있다는 것이다. 그래픽 디자이너들이 SVG 규격을 독파할 것이라고 그리고 손으로 SVG를 해킹하기 시작하리라고 전혀 기대할 수 없기 때문에, 대부분의 유명한 그래픽 회사들은 SVG를 자사 제품에 지원하고 있다. 심지어 어떤 회사들은 SVG를 코어 바로 중심부에 배치하기도 한다.
역사적으로는 SVG를 지원하는 첫 번째 거대 벤더는 코렐(
Corel)사일 것이다. 코렐은 엑스포트(export) 플러그-인을 자사의 드로(Draw!) 프로그램에 제공하였으며 그 이후로도 이러한 노력을 계속하여 현재 버전 10에 이르고 있다. 또한 이 버전도 SVG 문서의 임포트를 부분적으로 지원하고 있다.
자스크(
Jasc)사도 SVG 개발에 근접하고 있다. (이전에는 트러젝토리 프로(Trajectory Pro)라고 하던) 자스크(Jasc)사의 웹드로(
WebDraw) 제품은 현재 미리보기판 5에 도달해 있으며 SVG를 중심으로 구축되었고 SVG 포맷을 유일한 고유 포맷으로 사용하고 있다. 웹드로(WebDraw)는 3개의 뷰 인터페이스를 제공한다는 점만 제외하면 고전적인 일러스트레이터류의 벡터 그래픽 패키지와 유사하다. 첫 번째는 위지위그(WYSIWYG)
[1] 뷰로서 여기에서는 그리기 툴바로 직접 그래픽 객체를 그릴 수 있으며, 그 객체들의 특성을 변경하고, 래스터
[2] 그래픽 등등을 임포트할 수 있다. 이 뷰는 아직 DOM 스크립팅 기능을 추가할 방법은 지원하지 않는다. 그리고 제한적으로 애니메이션을 지원하지만 SVG의 정적인 측면은 견고하게 지원한다. 두 번째 뷰는 산뜻한 구문 강조기능을 가지고 있는 텍스트 편집기 뷰인데, 여기에서 원한다면 손으로 변경사항들을 편집할 수 있다. 이 편집기는 애니메이션 요소들 뿐만 아니라 DOM 스크립팅을 SVG 그래픽에 추가할 때 아주 유용하다. 세 번째 뷰는 (보통 어도비의 SVG 뷰어를 사용하는) 브라우저 뷰로서 앞의 두 뷰에서 편집해온 내용들이 여기에서 최종 문서로 가공되며 스크립팅과 애니메이션이 적용된다. 웹드로(WebDraw)의 진정한 아름다움은 세 뷰 모두 언제나 조화를 이루어 손-코딩과 WYSIWYG 모드에서 투명한 편집과 보기를 허용해 주는 것이다. WebDraw 1.0 버전이 배포되면 필터와 애니메이션을 비롯하여 SVG 규격을 완전히 지원하리라 생각한다. 자스크(Jasc) 사이트에 가면 미리보기판을 공개 테스트용으로 맛볼 수 있다.
어도비는 자사 뷰어에서도 볼 수 있듯이 SVG를 자사의 그래픽 제품 라인 전체를 통해 일관되게 지원하고 있다. 이런 집념의 첫 성과는 일러스트레이터(Illustrator) 8의 SVG 엑스포트 플러그-인이었다. 지금까지 일러스트레이터는 항상 주요 SVG-가능 도구였으며, 이것은 SVG의 정적인 측면을 가장 잘 만족시켰기 때문에 당연한 일이라고 볼 수 있다. 일러스트레이터 10은 대단히 진보된 SVG 도구이다. 일러스트레이터는 SVG를 고유의 포맷으로 지원하기 때문에, 아무 문제없이 SVG와 SVGZ(gzipped SVG)를 읽고 쓸 수 있고, SVG
과