[AE/모그] Lottie 완전 가이드 — After Effects에서 웹 JSON 애니메이션으로

 

들어가며

교대역 근처 IT 회사에서 일하다 보면, 디자이너와 개발자 사이에서 “이 애니메이션을 웹에 어떻게 올릴까요?”라는 이야기를 정말 자주 듣게 돼요. 저도 낮에는 풀스택 개발자로, 밤이나 주말에는 모션그래픽 외주를 하다 보니 After Effects에서 만든 움직임을 앱이나 웹에 넣는 일이 꽤 많았어요.

 

예전에는 짧은 아이콘 애니메이션도 GIF나 MP4로 뽑는 경우가 많았는데, 막상 서비스에 넣어보면 용량이 크고, 배경 투명 처리도 애매하고, 해상도 대응도 불편했어요. 특히 버튼 로딩, 온보딩 일러스트, 빈 상태 화면 같은 UI 모션은 “가볍고 선명하고 제어 가능한 방식”이 필요했는데, 그때 실무에서 가장 많이 쓰는 선택지가 바로 Lottie예요.

 

Lottie는 After Effects에서 만든 벡터 기반 애니메이션을 JSON 형태로 내보내고, 웹이나 앱에서 실시간으로 재생할 수 있게 해주는 포맷이에요. 쉽게 말하면 “AE 모션을 개발자가 바로 붙일 수 있는 코드 친화적인 애니메이션 파일”이라고 보면 돼요.

 

핵심 내용

Lottie의 기본 원리는 생각보다 단순해요. After Effects에서 만든 레이어, 키프레임, 벡터 패스, 트랜스폼 정보 등을 Bodymovin 플러그인이 읽어서 JSON 데이터로 변환해요. 그리고 웹에서는 lottie-web, React에서는 lottie-react 같은 라이브러리가 그 JSON을 읽어서 SVG, Canvas, HTML 방식으로 렌더링하는 구조예요.

 

즉, Lottie는 영상 파일이 아니에요. 픽셀로 구워진 MP4가 아니라, 애니메이션의 좌표와 속성값을 데이터로 저장한 파일이에요. 그래서 장점이 분명해요. 용량이 작고, 해상도에 강하고, 재생/정지/반복/속도 조절 같은 제어가 쉬워요. 반대로 모든 AE 기능을 지원하는 건 아니기 때문에 제작 단계에서 제약을 알고 작업해야 해요.

 

단계별 실사용 방법은 보통 이렇게 진행해요.

 

1. After Effects에서 컴포지션을 만들어요.

2. Shape Layer 중심으로 애니메이션을 구성해요.

3. Bodymovin 또는 LottieFiles 플러그인을 설치해요.

4. 내보낼 컴포지션을 선택하고 JSON으로 export해요.

5. LottieFiles Preview나 웹 환경에서 테스트해요.

6. 개발 프로젝트에 JSON 파일을 넣고 라이브러리로 재생해요.

 

웹에서 가장 기본적인 사용 예시는 이런 형태예요.

 

`html

 

 

`

 

React 프로젝트라면 보통 이런 식으로 써요.

 

`tsx

import Lottie from "lottie-react";

import loadingAnimation from "./loading.json";

 

export function LoadingIcon() {

return (

<Lottie

animationData={loadingAnimation}

loop={true}

autoplay={true}

style={{ width: 120, height: 120 }}

/>

);

}

`

 

실무 팁 첫 번째는 Shape Layer 위주로 만드는 거예요. Illustrator에서 가져온 벡터도 AE 안에서 “Create Shapes from Vector Layer”로 변환해두는 게 좋아요. Lottie는 벡터 패스와 트랜스폼에는 강하지만, 이미지 소스나 복잡한 이펙트에는 약해요.

 

두 번째는 AE 이펙트를 남발하지 않는 거예요. Blur, Glow, Turbulent Displace, Particular 같은 효과는 Lottie에서 제대로 지원되지 않거나 결과가 달라질 수 있어요. 실무에서는 효과를 쓰기보다 패스 애니메이션, opacity, scale, position, trim paths로 최대한 해결하는 편이 안정적이에요.

 

세 번째는 컴포지션 사이즈와 프레임 수를 작게 유지하는 거예요. UI용 애니메이션은 대부분 1~3초면 충분해요. 60fps로 길게 만들면 JSON이 불필요하게 무거워질 수 있어요. 보통 24fps 또는 30fps로도 충분히 부드럽고, 루프 애니메이션은 시작 프레임과 끝 프레임이 자연스럽게 이어지도록 설계하는 게 중요해요.

 

자주 하는 실수도 몇 가지 있어요. 첫 번째는 텍스트 레이어를 그대로 내보내는 거예요. 폰트가 웹 환경에 없으면 다르게 보일 수 있어서, 중요한 로고나 타이포 모션은 Shape으로 변환하는 게 안전해요.

 

두 번째는 표현식(expression)을 과하게 쓰는 경우예요. 일부 표현식은 Lottie에서 지원되지 않거나 예상과 다르게 동작할 수 있어요. 흔들림 정도는 키프레임으로 굽거나, 꼭 필요한 경우 테스트하면서 최소한으로 쓰는 게 좋아요.

 

세 번째는 LottieFiles에서는 잘 보이는데 실제 서비스에서는 깨지는 경우예요. 이건 렌더러 차이일 때가 많아요. svg, canvas, html 렌더러마다 결과와 성능이 조금씩 달라요. UI 아이콘이나 일러스트는 보통 svg가 선명하고 관리하기 좋아요. 파티클 느낌이나 요소가 많은 애니메이션은 canvas를 검토할 수 있어요.

 

실무 활용 예시

제가 실제로 많이 쓰는 케이스는 SaaS 서비스의 빈 상태 화면이에요. 예를 들어 사용자가 아직 프로젝트를 만들지 않았을 때, 단순히 “프로젝트가 없습니다”라고 보여주면 화면이 너무 차갑게 느껴져요. 이때 작은 폴더 아이콘이 통통 튀고, 플러스 버튼이 살짝 나타나는 Lottie를 넣으면 제품이 훨씬 친근해져요.

 

또 다른 예시는 로딩 애니메이션이에요. 개발자 입장에서는 스피너 하나면 충분하다고 생각할 수 있지만, 브랜드가 있는 서비스라면 로딩도 경험의 일부예요. 클라이언트 작업에서 로고 심볼을 1.5초짜리 루프 모션으로 만들고 Lottie로 전달했더니, 개발팀이 JSON 하나만 import해서 바로 붙일 수 있었어요. GIF보다 선명했고, 다크모드에서도 색상 조정이 쉬웠어요.

 

앱 온보딩에서도 Lottie는 강력해요. “자동화”, “협업”, “알림” 같은 추상적인 기능을 짧은 벡터 애니메이션으로 보여주면 사용자가 기능을 훨씬 빨리 이해해요. 특히 모바일 앱에서는 MP4보다 Lottie가 용량 면에서 유리한 경우가 많아서, 초기 다운로드 부담을 줄이는 데 도움이 돼요.

 

다만 모든 애니메이션을 Lottie로 만들 필요는 없어요. 실사 영상, 복잡한 3D, 과한 블러와 글로우가 핵심인 작업은 MP4가 더 현실적이에요. Lottie는 “벡터 기반 UI 모션”에 가장 잘 맞는 도구라고 생각하면 판단이 쉬워요.

 

마무리

Lottie의 핵심은 After Effects에서 만든 모션을 웹과 앱에서 가볍고 선명하게 재생할 수 있는 JSON 애니메이션으로 바꿔준다는 점이에요. 실무에서는 Shape Layer 중심으로 만들고, 지원되지 않는 AE 효과를 피하고, export 후 실제 개발 환경에서 꼭 테스트하는 게 중요해요.

 

처음에는 제약이 많아 보여도, UI 모션 관점으로 접근하면 오히려 작업 기준이 명확해져요. 포지션, 스케일, 오퍼시티, 패스, Trim Paths만 잘 써도 충분히 세련된 결과를 만들 수 있어요.

 

다음에 이어서 배우면 좋은 주제는 “Bodymovin export 세팅 제대로 이해하기”, “React에서 Lottie 제어하기”, “Lottie 성능 최적화와 파일 용량 줄이기”예요. AE를 영상 도구로만 쓰는 단계에서 한 걸음 더 나아가, 제품 경험을 설계하는 모션 도구로 쓰고 싶다면 Lottie는 꼭 익혀둘 만한 실무 스킬이에요.

 

---

 

참고 영상

 

 

관련 YouTube 튜토리얼 보기