SVG 애니메이션 제작 도구로 홈페이지를 역동적으로 만들어 보자

 

홈페이지 애니메이션 효과에 유용한 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를 만들수 있는 경량 라이브러리입니다. 애니메이션의 크기, 위치, 변형, 색상 등 다양한 수정도구를 제공하며 각종 유용한 플러그인으로 작업에 효율을 높여줍니다.

 

 

 

 

 

 

 

 

 

 

<관련글>

2013/12/26 - 드림위버 템플릿 무료 소스로 최신 홈페이지를 제작해보자.~

2013/10/21 - HTML5와 CSS3의 새로운 기능을 이용한 홈페이지 무료 템플릿 디자인 22종

2013/07/10 - [ Dreamweaver CC ] 어도비 드림위버CC의 새로운 기능을 파해쳐보자

2013/07/01 - [Adobe Muse CC] 코딩없이 홈페이지 제작이 가능한 어도비 뮤즈CC 새로운 기능

2012/08/07 - 간단하게 웹싸이트 또는 어플을 미리 만들어볼수 있는 무료 Mockup 툴

이 글을 공유하기

댓글(2)

  • 2014.01.21 22:46 신고

    이야 쥑이네요 이게 이제 대세가 될려나요

    • 2014.01.22 08:52 신고

      ^^ 좀 색다른 방법이라서 소개해드렸는데요..아직 대세라고 하기엔 좀 무리가 있는것 같아요. 요즘 html5를 이용한 애니메니션 도구들이 많이 나와서 힘들것 같습니다.

Designed by JB FACTORY