[Lottie] 로티 애니메이션 만들기 2편 - 무료 애니메이션 json 파일 다운받기

스타트업은 언제나 리소스가 부족하다. 하지만 20명분의 디자인을 해내는 스타트업의 프로덕트 디자이너들에겐 종종 애니메이션을 만드는 미션까지 주어지곤 한다. 당장 짬 내서 에펙을 만지거나 개발자에게 부탁하기에는 시간도 많이 드는 골치 아픈 애니메이션.. 이런 디자이너들의 고민을 해결해줄 사이트가 있다. 디자이너들의 깃헙, 로티 애니메이션이다!

 

 

몇 달만에 로티 페이지를 들어가니 커스텀하는 기능이 꽤 업데이트되었다. 오늘은 로띠로 괜찮은 무료 로딩 애니메이션을 발견하고, 커스텀한 후 json 파일로 export, 저장하는 방법을 소개하려고 한다.

 

 

1. 먼저, LottieFiles 페이지에 들어간다

https://lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles

 

 

2. Discover에서 Free Animation을 선택한다

 

 

여기서 두가지 방법이 있다.
첫번째 방법, 카테고리를 선택해서 애니메이션을 찾는다. (비추)

 

 

로딩, 축하, 지도 마커.. 등 이 메인 카테고리로 나와있다.

하지만 카테고리 선택은 별로 추천하지 않는다. 원하는 애니메이션 찾기가 힘들다.

 

 

 

3. 두번째 방법, 검색을 이용한다. (추천)

loading을 검색하면 워낙 다양하고 실험적인 모션 그래픽이 많이 나오기 때문에 원하는 loading의 형태를 검색하는게 원하는 결과물과 가까울 가능성이 높다. 보통 spinner, dots, ( 3 dots, 4 dots) 형태를 많이 쓰는 것 같다.

 

 

 

4. 원하는 로딩 애니메이션을 찾았다면 클릭한다.

 

 

5. 지금 형태로 마음에 들면 아래 animation in 에서 web이나 app os에 따라 선택해서 추출한 파일을 개발자에게 넘겨준다.

6. 만약 색상이나 속도, 사이즈를 수정하고 싶다면 Edit Layer Colors를 클릭한다.

 

 

7. 사이즈나 전체 색상은 우측 패널에서 변경할 수 있다.

내가 선택한 애니메이션은 단순에서 색상을 한 번에 바꿔봤는데,
좌측의 레이어를 선택하면 레이어별로 디테일하게 변경할 수 있다.

 

 

 

9. 그리고 우측 패널 하단에 json 파일로 추출해서 개발자에게 드리면 끝이다! (너무 쉽다!)

 

+ json 파일 전달 시
보통 노션에 json 포멧으로 올려두고 개발자 분에게 공유한 후, 디테일한 위치나 사이즈 가이드는 커뮤니케이션으로 보완하고 있다.

 

 

디자이너, 개발자 모두의 시간을 아껴줄 로티, 적극적으로 활용해보자! 👍

(혹시 궁금한 점이 있다면 댓글로 남겨주세요!)

 

---

1편 - 그래서 Lottie, 로티가 뭔데요? 에어비엔비에서 왜 로티를 만든지 궁금하다면?👇

[Lottie] 로티 애니메이션 만들기 1편 - 디자이너들의 깃헙, 로티

 

3편 - AfterEffect에서 만든 애니메이션을 Lottie 파일로 만드는 방법이 궁금하다면? 👇

[Lottie] 로티 애니메이션 만들기 3편 - 에프터 이펙트에 로티 플러그인 설치하기 (어도비 플러그인