Gif는 비트맵 기반의 그래픽파일 포맷으로, 이전까지는 많은 웹의 애니메니션 작업에 사용되었다. 하지만 용량이 커서 서비스의 사용성을 떨어뜨리며 해상도 대응을 위해 크기 변경 시 화질이 저하되는 단점이 있다. 이러한 단점을 보완하여 등장한 Jason 기반의 새로운 애니메이션 파일 포맷이 ‘Lottie’이다. 그리고 이러한 Lottie 애니메이션을 테스트하고 공유하는 플랫폼이 ‘LottieFiles’이다.
Lottie Animation의 장점
- 가벼운 용량 : Lottiefiles 공식 홈페이지에서는 GIF보다 600% 가볍다고 설명
- 빠른 전송속도 : 10배 더 빠른 전송속도
- 벡터 기반 : SVG 기반이라 해상도에 영향을 주지 않고 구동 중에도 크기를 자유롭게 조절 가능
- JSON 기반으로 용이한 수정 : JavaScript, React, Flutter, iOS, Android에서 애니메이션 재생, 속도, 인터랙션 등을 제어 가능
- 다양한 플랫폼 지원 : 웹(Web), 모바일 앱(Android, iOS), 프레임워크(React, Vue, Flutter) 등 다양한 환경에서 사용 가능.
- 무료 애니메이션 중 맘에 드는 소스를 Figma로 가져와 편집 가능
Lottie Animation의 단점
- 복잡한 애니메이션에 한계 : AE(After Effects)의 모든 기능을 지원하는 것은 아니며, 특히 3D, Expression, Effects는 Lottie에서 호환되지 않음
- 렌더링 성능 문제 : 복잡한 애니메이션이 많아지면 일부 저사양 디바이스에서는 렌더링 성능이 저하될 수 있음.
- After Effects 플러그인(BODYMOVIN) 의존성 : Lottie JSON을 만들려면 After Effects에서 Bodymovin 플러그인을 사용해야 하므로, 별도의 플러그인 설치가 필요함. 특히 애프터이펙트 툴의 진입장벽이 높아 익숙하지 않다면 어려울 수 있음
- 브라우저 및 OS별 지원 차이 : 일부 오래된 브라우저(IE 등)나 OS에서는 완벽하게 지원되지 않을 수 있음.
- Lottie의 무료 애니메이션을 Figma로 가져올 때, 시퀀스별로 불러와지진 않아 그대로 사용할 게 아니라 조금이라도 수정해서 사용할 거라면 애니메이션을 위한 시퀀스 작업은 본인이 추가로 진행해야 함
애프터이펙트를 사용해야 하는 경우는 언제인가?
간단한 애니메이션 작업이라면 Figma에서 Lottie 플러그인을 통해 훨씬 쉽게 애니메이션을 만들 수 있다.
하지만 애프터이펙트를 사용해서 로티 애니메이션 작업을 해야 할 경우엔 상당히 복잡한 초기 세팅과정을 거쳐야 한다.
✔️ 애프터이펙트를 꼭 써야만 하는 경우는 아래와 같다.
1️⃣ 복잡한 애니메이션이 필요한 경우 (*주의)
- Path Morphing (예: 아이콘이 변형되는 애니메이션)
- 마스크 애니메이션 (Figma에서 제한적)
- 텍스트 애니메이션 (예: 한 글자씩 나타나는 효과)
2️⃣ 3D 요소가 포함된 경우
- Figma는 2D 벡터 기반이라 3D 애니메이션은 만들 수 없음 (예: 3D 모델이 회전하거나, 입체적으로 움직이는 애니메이션)
- 해결법: Blender → AE → Lottie 변환
3️⃣ 복잡한 인터랙션이 필요한 경우
- Figma에서는 JSON 내보내기가 가능하지만, 고급 인터랙션(스크롤 기반 애니메이션, 마우스 오버 시 인터랙션)은 AE에서 더 세밀하게 조정해야 함
4️⃣ 효과(Effects) 사용이 필요한 경우 (*주의)
블러, 글로우, 쉐도우 등의 효과는 AE에서는 자유롭게 조절 가능하지만, Figma에서는 제한적 AE의 모션 블러, 입자 효과(Particle), 광원 효과(Lighting) 같은 고급 기능은 Lottie에서도 일부 지원됨
(*주의)라고 표시한 것들은 AE에서 작업은 가능하지만 로티와 호환이 안 돼서 제이슨 파일의 결과물에서는 내보냈을 때 보이지 않을 수 있는 부분들이다. 다시 말해 AE에서 만들었다고 모든 효과가 Lottie로 변환되지는 않는다는 점에 유의해야 한다. 이 부분은 추가적인 우회 방법이 필요한데 이 부분은 Lottie Animation 만드는 법 포스팅을 참고 바란다.
애프터이펙트를 사용하여 Lottie Animation 작업 시, 사전 세팅 방법
01. 설치해야 할 툴과 플러그인
애프터이펙스를 통해 로티애니메이션 작업을 하기 위해서는 아래와 같은 툴과 플러그인 설치를 해야만 한다.
2번에 정리해 둔 링크를 통해 다운로드 가능하다.
- Adobe After Effects : 애니메이션 작업을 위해 필요 (⚠️한글판에서는 플러그인 설치 안될 수 있으니 ‘영문판' 설치)
- Plugin (Bodymovin / LottieFiles) : 애니메이션 '미리 보기'와 Lottie jason 파일로 'Export' 하기 위해 필요.
둘 중 하나만 사용해도 되는데, 내보내기 전 미리 보기와 배경색 변경 등의 기능이 추가된 LottieFiles 플러그인을 더 추천 - Sketch 사용자 : + AEUX 플러그인
- Figma 사용자 : + AEUX 플러그인
02. 툴과 플러그인 다운로드 링크와 설정 방법
1️⃣ LOTTIE VIEWER : https://lottiefiles.com/integrations
2️⃣ LottieFiles plugin for Adobe After Effects : https://lottiefiles.com/plugins/after-effects
ㄴ Adobe Creative Cloud 유저 : VIA ADOBE EXCHAGE
ㄴ Adobe Creative Cloud 비유저 / 사내 보안문제로 통제되는 경우 : DOWNLOAD PLUGIN(ZXP)
(잘 설치되었다면 After Effects의 Window > Extensions에 플러그인 노출됨)
3️⃣ ⚠️ 에펙에서 플러그인 실행 시 오류 방지를 위한 설정 : Preferences > Scripting & Expressions > Allow Scripts to Write Files and Access Network 체크하기