프로덕트에 애니메이션 적용하기

에펙 할 줄 모르는 디자이너, Lottie 애니메이션 만들기

by 유네

Apr 27. 2021

이전부터 Lottie를 활용해서 프로덕트에 애니메이션을 넣고 싶었는데 기회가 없었고 막연하게 에펙을 다뤄야 한다는 사실이 무서워서;; 계속 미뤄두고 있었습니다.

이번에 진행하는 프로젝트에는 유저의 눈길을 끌만한 귀엽고 간단한 애니메이션이 들어가면 딱 좋을 것 같아 간단한 정도라면 가능하겠지라는 생각으로 우선 Lottie에 대해 알아보았습니다.

(브런치, medium, youtube에 공유된 노하우를 바탕으로 스터디하며 진행하였습니다. 참고자료는 맨 아래 링크 걸어두도록 할게요! )

에펙 모르는데 프로덕트에 애니메이션을 구현하고 싶으신 분은 충분히 간단하게 만들어볼 수 있으니 도전해보시면 좋을 것 같아 이 글을 작성합니다.

처음으로 만든 애니메이션!

일단 최종 결과물은 위와 같이 제작하였고, 제작에 걸린 시간은 약 3시간 정도 (툴 세팅까지 포함한 시간) 걸렸습니다. 저는 대부분의 그래픽을 sketch로 만들고 있어서 sketch에서 애프터이펙트로 레이어를 옮겨주는 AEUX라는 플러그인을 깔았습니다.

준비물

- zxp installer : 플러그인을 깔기 위해 미리 깔아두어야 합니다. (이 부분에 대한 사용법은 아래 참고 자료 링크를 참고해주세요)

- Sketch 플러그인 (AEUX)

- 애프터이펙트 플러그인 (bodymovin, lottiefiles,AEUX)

진행하기

1. Sketch에 AEUX 플러그인을 깔고 실행합니다!

플러그인에 설치된 AEUX

2. 에펙으로 구현할 레이어를 선택하고. 실행된 AEUX의 'send selection to Ae'를 선택합니다.

** 이 때 에펙이 실행되어 있지 않거나; 에펙에 AEUX가 설치되어 있지 않으면 왼쪽과 같이 에러메시지가 노출되니, 에펙에도 AEUX를 함께 설치해주세요!

3. 에프터이펙트 실행하여 작업하기

저는 에펙이 초면이라, 모션을 구현하기 위해 여러 영상을 보고 간단하게 구현했습니다.

참고영상 : https://www.youtube.com/watch?v=-gYOrdgvRjc

참고영상 :

4. 에펙에서 플러그인을 활용해 export 하기

완성된 파일을 우선 저장하고 window -> extension으로 이동하여 bodymovin 플러그인을 실행합니다.

1) 플러그인 실행하기

bodymovin 플러그인 실행하기

2)플러그인 실행 후 익스포트 할 파일을 select 하고 경로 지정하기

bodymovin을 실행하게 되면 위와 같은 창이 뜨게되는데요 리스트 부분의 selected를 선택하고 '...' 아이콘을 선택하여 저장 경로를 지정해줍니다.

3) 설정아이콘 눌러 export mode 설정하기

저장경로를 지정한 후 settings의 설정 아이콘을 누르게 되면 오른쪽 화면이 노출됩니다. 여기서 export mode를 위와 같이 선택하고 save를 눌러 저장해주세요. (Demo의 경우 html 파일 export하여 웹에서 확인이 가능합니다)

4) Render 진행하기

활성화된 Render 버튼을 누르게 되면 오른쪽 페이지와 같이 렌더링 진행되는 페이지가 노출되고 아마 애니메이션이 많지 않다면 랜더링이 순식간에 완료될 거에요! :D

5) 완료된 파일 찾기

2)에서 지정한 경로에서 json파일을 찾으시면 됩니다!

* 저 같은 경우는 html 파일로도 저장해서 확인해봤어요 :)

유튜브 따라서 천천히 에펙의 애니메이션을 구현해서 만드는게 전혀 어렵지 않았고 앞으로 개발팀의 도움 없이도 간단한 애니메이션 구현하기에는 나쁘지 않겠다는 생각이 들었습니다. 생각보다 오랜 시간이 들지도 않았구요! 실제로 개발에서 어떻게 적용될지는 이 후 글로 작성하여 공유드릴게요 :)