| 홈페이지 애니메이션 효과에 유용한 SVG 제작 프로그램 소개 |
아직까지는 웹디자이너에게 SVG(Scalable Vector Graphics)는 조금은 생소한 단어입니다. XML기반의 벡터 그래픽을 표현하는 파일 형태인데요. 개발은 1999년에 되었지만 실용성의 문제로 그렇게 주목받지 못했지만 최근 스마트폰과 반응형 웹개발이 활발하게 진행되면서 SVG는 현재에 와서야 다시 주목받기 시작했습니다.
마이크로소프트의 인터넷 익스플로러8 이전 버전은 플러그인을 설치해야만 SVG를 볼수 있었지만 현재 9버전 부터는 굳이 플러그인 설치없이 SVG를 볼수 있습니다. 대부분의 웹브라우저에서 설치없이 활용이 가능하기 때문에 플래쉬보다 활용도가 높다고 볼수 있는데요.
오늘은 홈페이지에 애니메이션 효과를 만들때 유용한 SVG 제작 도구를 소개해 드리겠습니다.
과거엔 SVG 제작은 매우 복잡하여 전문적인 지식이 없다면 활용하기 어려웠는데요. SVG 애니메이션 도구들이 속속 등장하면서 디자이너와 개발자는 훨씬 빠른속도로 SVG를 생성할 수 있게 되었습니다. 총 5가지의 애니메이션 도구를 이용하여 멋진 벡터 SVG를 만들어 보세요.
Snap.svg
스냅은 svg 작업을 위한 새로운 자바 스크립트 라이브러리 입니다. 직관적이고 능률적인 기능을 제공하여 모든 SVG 애니메이션 컨텐츠를 만들수 있으며 모든 크기의 화면에 맞도록 응답형 벡터 그래픽을 생성할 수 있습니다.
Pencil-Animation
팬슬 애니메이션 도구는 굉장히 오래된 SVG서비스입니다. 비트맵과 벡터 그래픽을 모두 사용하여 손으로 그린 애니메이션을 만들수 있습니다. 무료 오픈소스지만 관리가 좀 안되는지 업데이트가 중단되었네요. 인터페이스와 기능은 단조롭지만 손으로 그린 벡터 기반의 애니를 만들때 매우 유용한 서비스입니다.
Adobe Edge Animate
어도비 에지는 간편하고 정밀하게 SVG 애니메이션을 만들수 있는 도구입니다. 포토샵CC 또는 일러스트레이터CC를 사용하여 제작된 그래픽을 이용하여 애니메이션을 만들고 SVG 파일을 생성할수 있습니다.
Inkscape
잉크 스케이프는 디자이너가 수비게 벡터 그래픽을 만들수 있는 도구입니다. XML편집기에서 개체 조작, 채우기, 스트로크, 개체 생성이 가능하며 완벽하게 SVG파일을 생성 및 편집할수 있습니다. 자체 커뮤니티 갤러리를 제공하여 유저들의 작품을 참고할 수 있습니다.
SVG.js
SVG.js는 간단한 SVG를 만들수 있는 경량 라이브러리입니다. 애니메이션의 크기, 위치, 변형, 색상 등 다양한 수정도구를 제공하며 각종 유용한 플러그인으로 작업에 효율을 높여줍니다.
'IT&COMPUTER > 프로그램' 카테고리의 다른 글
| 나만의 오디오 작업을 위한 무료 음악 편집 프로그램 5종 소개 (2) | 2014.03.27 |
|---|---|
| 안전하게 데이터를 보호해주는 파일 암호화 무료 프로그램 13종 소개 (4) | 2014.02.28 |
| 전 세계 웹상에서 파일 관리를 할 수 있는 10가지 도구 소개 (2) | 2014.01.17 |
| 스마트폰에서 홈페이지를 테스트하기 위한 유용한 도구 모음 (0) | 2014.01.15 |
| 초보자도 가능한 홈페이지 제작 무료 프로그램 WEBYDO 소개 (2) | 2014.01.08 |
