방법 1. Figma의 Lottie Files 플러그인을 통해 애니메이션 제작하는 방법
LottieFiles for Figma - Elevate Your Designs & Create Animations with Figma to Lottie
Add Lottie animations to your Figma designs effortlessly with LottieFiles for Figma. Use the Figma to Lottie feature to create realistic prototypes and production-ready animations right within Figma.
lottiefiles.com
앞선 포스팅에서 말한 것처럼 After Effects 사용해서 만드는 방법만 있는 것은 아니다. 작업 특성상 AE 사용이 필수가 아닌 경우, Figma에서 훨씬 간단하게 만들 수 있는데 이건 위 링크에서 플러그인을 다운로드하여 만들면 된다.
방법은 만들려 하는 애니메이션에 따라 너무 다양하고 그리 복잡하지 않으니 따로 자세히 다루진 않겠다.
방법 2. After Effects(AE) 툴로 Lottie Animation 제작하는 방법
애프터이펙트 툴을 사용해 로티 애니메이션을 제작하는 방법은 크게 두 가지인데,
소스작업을 뭘로 하냐에 따라 AEUX 플러그인 설치가 추가로 필요할 수 있다는 점 빼고는 과정에 큰 차이가 없다.
A. 소스 작업을 Illustrator로 한 경우
Illustrator (소스작업) ➞ After Effects (모션작업) ➞ LottieFiles/Bodymovin (Export)
B. 소스 작업을 Figma 또는 Sketch로 한 경우
2번 방법을 이용할 경우 Figma 또는 Sketch를 After Effects에 연결해 줄 AEUX 플러그인이 추가로 필요하다.
Figma / Sketch (소스작업) ➞ After Effects (모션작업) ➞ LottieFiles/Bodymovin (Export)
AEUX 플러그인 다운로드 링크 : https://aeux.io/guide/download.html
- 다운하면 Sketch용, Figma용, AE 용 파일이 각각 있으니 사용할 툴에 따라 각각 설치 (AE는 둘 다 필수)
- AEUX 설치 및 실행방법 : https://aeux.io/guide/install.html#sketch
- 🚫 다운로드한 파일을 지우면 피그마에서 오류 발생하므로 유지
- AE : https://zxpinstaller.com/ 를 설치 후 AEUX의 AE용 파일을 ZXP installer에 드래그 앤 드롭
After Effects(AE)로 제작 시 주의사항과 우회하는 방법
애프터이펙트에서 적용을 해도 막상 로티로 빼내면 미적용되는 것들이 존재하여 우회 작업이 필요할 수 있다.
기껏 열심히 작업해서 Lottie JSON 파일로 빼냈더니 효과가 다 제거되어 있는 불상사를 방지하기 위해 아래에서는 Lottie에서 지원하지 않는 AE 효과와 우회방법에 대해 소개하겠다.
🚫 Lottie에서 지원되지 않는 AE 효과
해결 방법 (Lottie에서 쓸 수 있게 변환하는 법)
- Blur & Shadow
이 경우, 블러가 적용된 소스나 그림자 부분을 개별 Shape 레이어로 그리는 방법으로 해결 가능하다.
Lottie에서 SVG 필터 적용이 가능하므로, JSON 수정으로 해결 가능하다. - 텍스트 애니메이션
텍스트를 벡터화(Shape Layer로 변환)하여 애니메이션 적용 가능하다. 단, 벡터화했기에 텍스트의 수정은 불가하다.
이렇게 벡터화시킨 텍스트를 AE에서 Position, Scale 등의 애니메이션을 적용하면 된다. - 3D 소스 대체
3D를 2D 레이어로 변환 후 키프레임 애니메이션을 적용하면 되는데 이경우 크게 확대하면 깨질 수 있어 애초에 Figma 등에서 만든 SVG 애니메이션을 활용하는 방법을 사용할 수도 있다. - Mask 대체
마스크 대신 Shape Layer & Trim Path를 활용한다.
또한 Lottie는 Track Matte를 지원하지 않으므로, Opacity & Clip Path 방식을 활용한다.
글을 마무리하며
내가 이전에 진행했던 프로젝트에서는 AE를 꼭 써야만 하고 각종 우회방법이 꼭 필요했던 애니메이션 작업이어서 너무 복잡하고 힘들었다.
위에 소개한 것처럼 우회 방법이 있긴 하지만 저 방법을 사용하려면 소스 작업에만 상당한 시간이 소요되고, 수정 하나 하려면 또다시 그 과정을 거쳐야 해서 정말 힘들다. 또한 UX에서 필요로 하는 대부분의 애니메이션은 오히려 단순하고 임팩트 있는 게 더 효과적이다. 점점 단순화되는 상황에 복잡하고 긴 애니메이션은 사용자의 이탈을 유발할 것이다. 처음에 소개한 링크에 들어가 보면 알겠지만 굳이 After Effects 툴을 사용하지 않아도 고퀄리티의 애니메이션 제작이 가능하니 되도록이면 이 방법을 사용하는 걸 더 추천한다.