피그마를 사용해 SVG 애니메이션 적용을 해보자

사이트를 돌아다니다보면 뾰로롱 빵 하고 이미지가 현란하게 나오는데 뭔가 하고 관리자도구를 찍어보면 path태그 천지인 것을 볼 수 있다. 그것이 바로 svg라 하는 것!!!!!

 

svg는 대부분이 아시겠지만 ai에서 펜툴을 이용해서 슥삭쇽하고 그리고 svg로 내보내기 하면 된다.

그리기 귀찮기 때문에 만들어진 svg파일을 이용해서 애니메이션을 적용하도록 하겠다.

 

 

아래 사이트에서 이미지를 다운로드 받았다. (무료 사이트라는데 라이센스는 잘 확인해보시길!)

undraw.co/illustrations

Illustrations | unDraw

 

 

1. 피그마를 사용해서 svg 그룹 만들고, 추출하기

다운받은 svg의 컬러를 변경하고 그룹을 만들었다. 그룹은 애니메이션에서 어떤 것이 움직일지 생각하면서 묶어주는 것이 좋다. (그룹명은 영어로 지정해주기!)

색 변경하기는 path를 선택하고 우측의 Fill을 사용하면 간단하게 가능하다.

그룹은 그룹을 만들 path를 선택 후 ctrl + g 를 누르면 된다.

 

 

다 됐으면 왼쪽메뉴에서 파일을 선택 후 

우측메뉴 하단의 Export를 이용하여 추출한다.

추출 시 파일 확장자는 반드시 svg로 하고, include "id" attribute를 체크하여 id를 함께 추출한다

 

 

2. 소스창에서 svg 오픈해서 복사

svg를 vscode에서 열어보았다

세상마상에 복잡하기 그지없다

소스가 길어도 당황하지 말자😏

그룹을 지어서 id도 지정했으니 id값을 이용하여 애니메이션을 지정하면 된다.

 

 

3. 짜잔 완성!

See the Pen svg animation - ufo by esther kang (@esther0619) on CodePen.

 

참고 : youtu.be/gWai7fYp9PY