온라인 콘텐츠 애니메이션의 세계는 지난 몇 년간 크게 변화했습니다. 플래시(Flash)와 매크로마인드 디렉터(Macromind Director) 같은 기술은 현대 웹의 초석을 다졌지만, 플래시 지원이 중단되면서 SWF 파일 형식도 역사 속으로 사라졌습니다. 그리고 오늘날, SVGator가 그 빈자리를 채우고 있습니다. SVG가 현대 웹의 표준 벡터 포맷으로 자리 잡은 가운데, SVGator는 이 형식을 가장 쉽고 효과적으로 애니메이션할 수 있는 도구 중 하나를 제공합니다. 이번 리뷰에서 자세히 살펴보겠습니다.
본 글은 SVGator의 후원을 받아 작성된 스폰서 기사입니다. 실제 내용과 의견은 후원 여부와 관계없이 편집 독립성을 유지하는 저자 본인의 것입니다.
온라인 애니메이션의 강력한 도구
SVGator는 VueJS로 개발된 온라인 SVG 애니메이션 편집기로, 확장 가능한 벡터 그래픽(SVG) 애니메이션 작업을 최대한 간편하게 만드는 데 초점을 맞추고 있습니다. 샌프란시스코에 본사를 둔 이 회사의 목표는 ‘비전공자도 SVG 애니메이션을 쉽게 만들 수 있도록 하여 웹 전반에서 SVG 애니메이션 활용을 확산시키는 것’입니다.
일반적으로 SVG 파일을 애니메이션하려면 자바스크립트(JavaScript)나 자바(Java)로 코딩하여 SVG 파일의 선을 정의하는 수학적 데이터를 조작하거나 웹 페이지 위에서 요소를 움직여야 했습니다. SVGator는 타임라인과 키프레임 트랙을 갖춘 웹 애플리케이션을 통해 이 모든 과정을 단순화했습니다. 덕분에 장면 안의 모든 벡터 요소의 위치를 조정하고, 이를 하나의 재생 가능한 에셋으로 컴파일할 수 있습니다.
그 결과물은 웹 페이지와 모바일 앱에서 바로 사용할 수 있는 파일입니다. 새롭게 추가된 모바일 내보내기 옵션 덕분에 가볍고 확장성 있는 애니메이션을 모바일 앱용으로 손쉽게 제작할 수 있습니다.
플래시를 떠올리게 하는 벡터 엔진
앞서 플래시를 언급한 데에는 이유가 있습니다. 필자의 눈에는 SVGator가 예전의 벡터 애니메이션 주역이었던 플래시와 매우 흡사하게 느껴집니다. 픽셀이 아닌 부드러운 선을 애니메이션하는 키프레임 기반 벡터 애니메이션 도구이기 때문입니다. 즉, 완성된 애니메이션은 어떤 크기로 재생해도 화질 저하 없이 확장 가능합니다.
프로그램을 시작하면 작업 흐름에 빠르게 익숙해지도록 돕는 데모 장면들이 준비되어 있습니다. 인터페이스는 제작 중인 애니메이션이 표시되는 작업 영역과, 시간에 따른 화면 속 객체의 변화를 보여주는 타임라인으로 구성됩니다. 왼쪽에는 화면의 도형을 조작하는 도구 열과 직접 만든 에셋 라이브러리가 배치되어 있습니다.
일러스트레이터(Illustrator)나 잉크스케이프(Inkscape) 같은 벡터 드로잉 프로그램으로 만든 SVG 파일을 가져올 수도 있고, 처음부터 직접 도형을 그릴 수도 있습니다.
SVGator에서의 드로잉은 다른 벡터 편집기와 마찬가지입니다. 핸들을 조절해 완벽하게 매끄러운 곡선을 만들 수 있는 베지어 곡선 방식을 사용하며, 취향과 선 품질에 맞춰 선 굵기와 색상을 변경하거나 점선·파선 스타일을 적용할 수 있습니다. 벡터 프로그램을 사용해 본 적이 있다면 아주 자연스럽게 익힐 수 있습니다.
이 도구는 온라인 웹 앱이므로 설치할 것이 전혀 없습니다. 모든 작업은 브라우저에서 이루어집니다. 생산성 측면에서 놀라운 장점인데, 세계 어디에서든 어떤 컴퓨터의 브라우저에서든 앉아서 마치 집에 있는 자신의 책상처럼 작업을 이어갈 수 있기 때문입니다. 노트북과 데스크톱에서 잘 작동하며, 직접 확인해 보지는 못했지만 태블릿에서도 충분히 사용할 수 있을 것으로 보입니다.
SVGator로 애니메이션을 만드는 과정은 간단합니다. 화면에 도형을 그리고, 해당 도형에 키프레임을 설정한 뒤 다음 키프레임으로 이동합니다. 도형을 새로운 형태로 조정하고 또 키프레임을 설정하면 됩니다. 애니메이션을 재생하면 도형이 한 위치에서 다음 위치로 매끄럽게 움직입니다.
무엇보다 중요한 점은, 이것이 단순한 프리셋 모음이 아니라 제대로 된 전문가용 애니메이션 소프트웨어라는 사실입니다. 물론 애니메이션 실력을 한 단계 끌어올려 줄 유용한 도구들도 함께 제공됩니다.
결제 플랜 등급이 올라갈수록 도형에 적용할 수 있는 동작이 더 많아집니다. 회사는 이런 동작들을 ‘애니메이터(Animator)’라고 부릅니다. 무료 플랜에서는 도형의 위치, 크기, 앵커, 회전을 조정하고 불투명도를 변경할 수 있습니다. 기본적인 애니메이션 기능입니다. 한 단계 위인 Lite 등급에서는 모핑(morph), 왜곡(skew), 채우기(fill), 선(stroke)까지 추가되며, 이 모든 설정이 애니메이션 가능합니다. 이를 통해 애니메이션의 표현 폭이 크게 넓어집니다. 최상위 Pro 등급에서는 앞서 언급한 모든 기능에 더해 애니메이션에 인터랙티브 요소를 추가할 수 있어, 마우스 조작에 반응하는 인터페이스나 동적 데이터 시각화 등을 구현할 수 있습니다.
Pro 등급에서는 그래픽 에셋 라이브러리도 이용할 수 있어, 스타일리시하고 빠르게 자신만의 애니메이션을 제작하는 데 큰 도움을 받을 수 있습니다.
이 소프트웨어의 유일한 단점은 무료 및 하위 등급에서 수행할 수 있는 작업 종류가 제한된다는 점입니다. 하지만 두 가지 이유에서 큰 문제가 되지 않습니다. 첫째, 기본 동작만으로도 창의력을 발휘하면 상당히 많은 것을 만들어낼 수 있습니다. 둘째, 제공되는 기능을 고려하면 유료 등급의 가격도 결코 비싸지 않습니다.
요금제 한눈에 보기
무료(Free) 플랜
기간 제한 없이 소프트웨어를 계속 사용할 수 있으며, 일부 제약이 따릅니다. 무제한 정적 그래픽 내보내기, 월 3회까지의 애니메이션 내보내기, 최대 10초 길이의 애니메이션 타임라인이 제공되고, 기본 애니메이션 헬퍼 세트가 포함됩니다.
Lite 플랜
월 11달러(연 132달러)로 고급 애니메이터의 결과물을 내보낼 수 있고, 무제한 정적 내보내기, 월 10회 애니메이션 내보내기, 최대 1분 길이의 애니메이션이 가능합니다. Basic 및 Advanced 애니메이션 헬퍼도 함께 제공됩니다.
Pro 플랜
월 19달러(연 228달러)로 모든 기능을 사용할 수 있습니다. Free와 Lite의 모든 기능에 더해, 최대 5분 길이의 무제한 애니메이션 내보내기, 에셋 라이브러리 접근, 모든 인터랙티브 옵션, 애니메이션 속도 조절 및 하이퍼링크 기능이 포함됩니다.
총평
SVGator는 훌륭한 소프트웨어입니다. 진입 장벽이 낮아 간단한 작업은 순식간에 능숙해질 수 있고, 동시에 깊이도 있어 약간의 학습과 연습만으로 실력을 빠르게 키울 수 있습니다. 여기에 모바일 내보내기 옵션까지 갖춘 것은 그야말로 보너스입니다. 필자에게 익숙한 타임라인 패러다임을 사용하고, 오랫동안 활용했던 플래시와 닮은 외관과 작동 방식은 그 자체로 큰 즐거움입니다.
SVGator는 강력할 뿐 아니라 비교적 저렴합니다. 유료 전환을 결심했다면 다양한 플랜 중에서 선택할 수 있습니다. 자세한 내용을 확인하고 무료 계정에 가입하려면 SVGator 공식 웹사이트를 방문하세요.