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

 

 

디자이너들의 깃헙, Lottie 로티란?

로티는 Airbnb 에어비앤비에서 제작한 애니메이션 오픈소스 라이브러리다. 무료 애니메이션 리소스를 다운로드하여 쉽게 커스텀할 수도 있고, After Effect 에프터이펙트에서 제작한 애니메이션을 json 파일로 변환할 수도 있다. (디자이너 출신 Founder들 덕분에 소스 공유가 활발한 것 같다)

 

 

출처 - Lottie 공식 홈페이지

 

Lottie 로티의 장점

1) 애니메이션의 용량이 겁나 줄어든다.
2) 정교한 애니메이션 작업이 가능하다.
3) 괜찮은 무료소스가 많다.

 

 

 

출처 - Lottie 공식 홈페이지

이미지 컷들을 연결한 GIF로 애니메이션을 만들면 파일이 굉장히 무거워진다. 특히 기기별 해상도에 따라 사이즈를 대응하다 보면 정말.. 용량은 기하급수적으로 늘어나게 된다. 로티는 애니메이션을 코드로 변환해주기 때문에 벡터 이미지처럼 사이즈 변경에 손실이 없다. 로티의 가장 큰 장점이 아닐까 싶다.

출처 - Lottie 공식 홈페이지

코드로 풀어내기 까다로운 애니메이션들을 디자이너가 직접 정교하게 제작할 수 있다. 개발자에게 생각해둔 느낌과 이미지를 레퍼런스와 보여주는 것에 비해 커뮤니케이션 코스트가 훨씬 줄어든다. 에펙에서 만들고 json파일로 변환해서 쉽게 건네주면 끝이다. 에펙을 조금 다룰 줄 알면 더욱 다양하게 만들어낼 수 있을뿐만 아니라 무료 소스들도 조금만 손봐주면 쓸만한 것들이 꽤 많다.

기존에는 디자이너가 제작한 애니메이션을 json 파일로 변환할 때 bodymovin을 사용했는데, Lottie에 플러그인이 생기면서 여러 방면에서 훨씬 편리해졌다. 플러그인을 설치하면 로티 웹사이트에 들어가지 않고 에펙안에서 클라우드 형식으로 오픈 소스들을 불러오고 편집할 수 있다. 구글 계정으로 로그인하고 작업물들을 퍼블릭으로 전환하면 웹, 앱, 에펙에서 전부 확인할 수 있다. 앱 서비스를 이용하면 QR 코드를 통해 모바일 화면상에서 어떻게 구현되는지 실제로 확인도 가능하다.

인터렉티브 디자인

주의 깊게 보지 않으면 모르고 지나칠 수 있지만, 모바일 앱에는 사소하게 들어간 애니메이션들이 정말 많다. 인터렉티브 한 서비스들에 익숙해진 유저들에게 아무런 애니메이션이 없는 좋아요는 어딘가 모르게 굉장히 밋밋하고 지루하게 느껴질 것이다.

<-인스타그램                      넷플릭스->

요즘은 로티 홈페이지에서 강의 콘텐츠도 제공한다. 로티의 확장세에 비해 한국에서 제공하는 로티 관련 아티클은 적은 듯하다. 그래서 직접 로티로 작업물을 만들면서 사용했던 경험을 공유해보려고 한다. 생각보다 정보가 없어서 혼자 고군분투한 경우도 꽤 많았다... (영어조차 정보가 없었다) 디자인 오픈소스 라이브러리의 밝은 미래를 기대해본다.

---

2편 - Lottie 무료 애니메이션 파일 사용법이 궁금하다면? 👇

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

 
로티 파일 무료로 어디까지 쓸 수 있는거에요? 로티 라이센스, 저작권, 상업적 이용 범위가 궁금하다면? 👇

[LottieFiles] 로티 무료 애니메이션 저작권, 상업적이용 범위, 라이센스 조건

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

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