[LottieFiles] 에프터이펙트에서 로티 파일 불러오고 편집하기, 2024년 업데이트

안녕하세요 재키입니다!
오늘은 After Effect 에프터 이펙트에서 Lottie Files 로티 애니메이션 파일을 불러오고 편집하는 방법을 알려드릴게요.

최근에 앱에서 애니메이션을 사용할 일들이 많아서 이래저래 편집해야 하는 상황이 많았는데요, 특히 애니메이션끼리 이어 붙이는 작업을 하게 됐었습니다. 로티 에디터로는 애니메이션을 붙이는 작업이 불가능하고, 로티 크리에이터는 피그마에서 만든 효과 중에 아직은 지원하지 않는 부분들이 있어서 우선 빠른 작업을 위해 에프터 이펙트로 불러와서 작업해보려고 했어요.

혹시나 했는데 LottieFiles의 에프터 이펙트 플러그인은 export기능만 지원하고 Import는 지원하지 않더라고요. 여기저기 블로그 글을 찾아봐도 최신 글은 없어서 로티 파일즈 매니저님께 직접 문의드렸더니 LottieFiles에서 지원하는 부분은 아니라고 하시더라구요. 그래서 찾아보니 그 옛날 추억의 bodymovin 플러그인을 설치해야 했습니다. ㅎㅎ

 

*플러그인 설치 전, 불러오고싶은 Lottie Files를 먼저 json 파일로 다운로드하여주세요!
로티파일을 JSON파일로 저장하는 방법은 아래 포스팅을 참고해 주세요 👇

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

 
로티파일을 준비했다면 이제 아래 가이드를 따라와 주세요!

---

After Effect에프터 이펙트에서
Lottie File을 불러오고 편집하는방법, 3단계

1. 에프터 이펙트 플러그인 Bodymovin 다운받기

플러그인을 다운로드하는 경로는 Adobe Exchange 웹사이트에서 검색하는 방법과 Creative Cloud에서 찾는 방법 2가지로 나뉩니다. Creative Cloud가 이미 있으신 경우 아래 웹사이트에서 들어가는 방법은 건너뛰시는 걸 추천드려요. (어차피 Cloud로 들어가지기 때문)

Adobe Exchange 웹사이트 경로로 플러그인 다운받기

1. 아래 Adobe Exchange 웹사이트의 'Bodymovin' 플러그인 페이지를 열어주세요

Adobe Exchange

 

2. 'Free' 혹은 'Manage' 버튼을 눌러주세요

어도비 bodymovin 플러그인

 

3. (Manage 버튼을 눌렀다면) Creative Cloud가 열리면 Install을 눌러주세요.

Creative Cloud 플러그인

 

Creative Cloud 앱에서 플러그인 다운로드하기 (미리 설치 필요)
1. Creative Cloud에서 Plugins를 눌러주세요

Creative Cloud 플러그인

 

2. 좌측 검색창에서 검색 후 Install을 눌러주세요

Creative Cloud Bodymovin 플러그인

 

3. 안내 및 동의서를 읽고 Install을 눌러주세요

Creative Cloud Bodymovin 플러그인 설치

 

4. 설치 완료!

Creative Cloud Bodymovin 플러그인 설치 완료

 

2. 에프터 이펙트에서 로티 파일 불러오기

1. 에펙을 연 후, Window > Extensions > Bodymovin을 열어주세요

에프터 이펙트 bodymovin

 

2. 두 번째 버튼인 Import Lottie Animation을 눌러주세요

에프터 이펙트 bodymovin 로티 파일

 

3. Lottie File의 URL을 직접 입력하거나, Import Local File을 눌러서 불러올 LottieFile (Json 코드 파일)을 선택해 주세요

에프터 이펙트 bodymovin 로티 파일

 

4. 파일을 불러오는 동안 기다려줍니다

그 옛날 UX 디자인 감성들이 반겨줍니다..ㅎㅎ

에프터 이펙트 bodymovin 로티 파일

 

5. 로티 파일 불러오기 완료!

에프터 이펙트 bodymovin 로티 파일

 

3. 에프터 이펙트에서 불러온 로티 파일 편집하기

1. 좌측 패널에 import 된 폴더 파일을 눌러줍니다.

에프터 이펙트 bodymovin 로티 파일

 

2. 파일 안에 있는 컴포지션 파일을 2번 클릭해 주면 세팅 끝!

에프터 이펙트 bodymovin 로티 파일 편집

 
자, 이렇게 오늘은 로티 파일을 에프터 이펙트에 불러오는(import)하는 방법에 대해 써봤습니다. 요즘 로티 파일즈에서도 로티 크리에이터와 에디터의 빠른 업데이트로 전 보다 훨씬 쉽게 여러 편집이 가능해져서 참 편해졌는데요. 그럼에도이렇게 에프터 이펙트가 편하시거나 로티에 있는 애니메이션 파일들을 좀 더 고급 설정을 다루고 편집하고 싶으신 분들을 위해 안내해 드렸습니다!

그리고 이번에 최근에 새로 나온 무료 모션 툴 Phrase도 한 번 써보게 됐는데요, 조만간 후기 한 번 올려보도록 하겠습니다! 에프터 이펙트의 피그마 버전 같은 느낌이 들어서 학습 코스트도 굉장히 낮고 기대가 되더라고요. 이렇게 여러 모션 툴들이 생겨서 프로덕트 디자이너들이 손쉽게 모션을 사용하게 되면 좋을 것 같아요.

로티파일과 에프터 이펙트를 사용하시면서 어려운 점이 있거나 궁금한 점이 있으시면 언제든 댓글 남겨주세요! 오늘도 포스트 읽어주셔서 감사합니다 :)

---

LottieFiles 시리즈 한눈에 보기

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

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

2편 - Lottie 무료 애니메이션 JSON 파일 다운로드하고 편집하기👇
 

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

 
3편 - AfterEffect에서 만든 애니메이션을 Lottie 파일로 만들기 👇

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

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

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

 
5편 - Figma 피그마에서 LottieFiles 로티 플러그인으로 로티 애니메이션 만들기👇

[LottieFiles] Figma 피그마에서 Lottiefiles 플러그인으로 애니메이션 만드는 5단계

 
[현재 포스트] 6편 - LottieFiles 로티 애니메이션 파일 에펙에서 불러오고 편집하는 방법 👇

[LottieFiles] 에프터이펙트에서 로티 파일 불러오고 편집하기, 2024년 업데이트