프로덕트 디자이너/LottieFiles 로티 애니메이션

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

재키방 2022. 9. 24. 01:39
반응형

지난번에는 무료 로티 파일을 내려받아서 간단하게 편집하는 방법을 다루었다. 
아래 링크에서 무료 로티파일 사용 방법 확인하기 👇

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

스타트업은 언제나 리소스가 부족하다. 하지만 20명분의 디자인을 해내는 스타트업의 프로덕트 디자이너들에겐 종종 애니메이션을 만드는 미션까지 주어지곤 한다. 당장 짬 내서 에펙을 만지

jackiebang-design.tistory.com

 
로딩처럼 간단한 애니메이션은 직접 만드는 것보다 무료 로티 Lottie 파일을 사용하는 게 시간을 아낄 수 있다. 색상이나 속도를 간단하게 편집할 수 있지만, 찾고자 하는 소스가 없을 땐 처음부터 직접 만들 수밖에 없다. 그래서 이번엔 어도비의 애프터 이펙트 After Effect로 로티 애니메이션을 만드는 방법을 공유하고자 한다.
 
직접 만든 애니메이션은 Lottie files에서 json 파일로 추출해서 앱이나 웹에 바로 사용할 수도 있고, Lottie 홈페이지에 애니메이션을 업로드해서 무료로 공유하거나 유료로 판매할 수도 있다. 
 
기본적으로 After Effect로 애니메이션을 만드는 방법에 대해선 자료가 많으니 여기서는 생략하려고 한다. 제작한 애니메이션을 Lottie 파일로 바꾸고 싶다면 먼저 After Effect에 Lottie 플러그인을 설치해야 한다. (설치부터 생각보다 다사다난했기에 하나의 포스트로 정리했다. 큼.. 역시 어도비)
 
 
 


After Effect 에프터 이펙트에
Lottie 플러그인을 설치하는 2가지 방법

플러그인을 설치하는 2가지 방법이 있다.
1) Lottie에서 제공하는 ZXP파일 (zip 알집)
2) 어도비의 Exchange (어도비 플러그인)
 
ZXP의 경우 Extension Manager를 설치해야 하는 게 귀찮아서 어도비 Exchange를 이용하는 것을 선택했다. 둘 다 사용해보지 않아서 명확하게 어떤 차이가 있는지는 아직 모르겠다. 나중에 비교해보는 걸로. 여기선 어도비 플러그인 이용방법만 다룰 예정이다!

 
 
 

어도비 Lottie 플러그인 설치 전, 주의 사항

Lottie 플러그인은 After Effect의 영문판 버전만 지원한다. 기존에 After Effect 한글판을 사용 중이라면 반드시 한글판을 삭제 후 다시 영문판을 설치하고 플러그인을 설치 해야한다. 디스플레이를 영문으로 바꿔도 기존 한글판을 삭제하지 않으면 작동이 안 된다. (끔찍ㅎㅎㅎ)
After Effect 한글판을 삭제 후 영문판 설치 방법 확인하기 👇 (나중에 포스팅 예정)
 


어도비 After Effect Lottie 플러그인 설치 가이드


1. 아래 링크를 눌러서,  어도비 Exchange 사이트의 LottieFiles 페이지 열기

Adobe Exchange

exchange.adobe.com

 
 

2. Free 버튼 눌러서 설치 권한 얻기 (어도비 로그인 필요)

 

3. Manage를 눌러서 어도비 클라우드 열기 (아직 설치된 것 아님)

 

4. 클라우드에서 Install 버튼 누르고 설치하기

 

5. OK 누르고, 본인 PC(맥) 비밀번호 입력하기

어도비가 아닌 서드파티인 로티가 개인정보 접근 권한을 가지고 있기 때문에 본인에게 PC 접근에 허가를 받아야 한다는 의미다.

 

6. 설치 완료!!
After Effect를 켜서 플러그인이 잘 설치됐는지 확인하기

 

7.  플러그인 설치 확인 방법
Window >  Extensions  > LottieFiles 있는지 확인


혹시 설치가 안되어있나요? 
확인해 볼 체크리스트

일단 기본 중의 기본, 재부팅 하기 (어도비 프로그램 종류 후 재시작 혹은 컴퓨터 재시작)

 
1) 한글판을 사용했었다면? 제대로 삭제하고 다시 영문판을 설치 후 다시 플러그인 설치하기
2) After Effect 최신 버전으로 업데이트 했는지 확인
3) 어도비 클라우드 플러그인 목록에서 Installed로 뜨는지 확인하기 (Install로 뜨면 아직 설치 안된 상태)
4) AfterEffect 버전으로 설치된 건지 확인하기. (XD버전 Lottie 플러그인도 있음)
5) 어도비에서 계속 안된다면... ZXP 파일로 시도해보기


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


After effect 없이 Figma 피그마에서 로티 애니메이션 만들기 👇

Figma 피그마에서 로티 애니메이션 만들기 1편

최근 Lottie Files가 Figma 플러그인을 업데이트하면서 Figma에서도 Lottie 애니메이션을 쉽게 작업할 수 있게 됐다. 애니메이션을 직접 만들고 싶지만, After Effect를 배우는 것에 부담을 느끼는 프로덕트

jackiebang-design.tistory.com


로티 플러그인으로 After effect 에펙으로 만든 영상 json, Lottie 파일로 만들기 👇

[Lottie] 로티 애니메이션 만들기 4편 - 에프터 이펙트 영상을 로티 파일로 만들기 (혹은 json파일)

지난번에는 에프터 이펙트에 로티 플러그인을 설치하는 법을 알아봤다. 아래 링크에서 로티 플러그인 설치 방법 확인하기 👇 [Lottie] 로티 애니메이션 만들기 3편 - 에프터 이펙트에 로티 플러그

jackiebang-design.tistory.com

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

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

스타트업은 언제나 리소스가 부족하다. 하지만 20명분의 디자인을 해내는 스타트업의 프로덕트 디자이너들에겐 종종 애니메이션을 만드는 미션까지 주어지곤 한다. 당장 짬 내서 에펙을 만지

jackiebang-design.tistory.com


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

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

디자이너들의 깃헙, Lottie 로티란? 로티는 Airbnb 에어비앤비에서 제작한 애니메이션 오픈소스 라이브러리다. 무료 애니메이션 리소스를 다운로드하여 쉽게 커스텀할 수도 있고, After Effect 에프터

jackiebang-design.tistory.com

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

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

LottieFiles에서는 다양하고 많은 무료 애니메이션 파일들을 제공하고 있어요. 무료 애니메이션 파일들을 찾아 쓰면서, 혹시 저작권 문제에 걸리지 않을까, 상업적으로 사용해도 문제가 없는지, 법

jackiebang-design.tistory.com