OmniLottie - Generating Vector Animations via Parameterized Lottie Tokens

🏷️ 논문 Headliner

벡터 애니메이션 생성은 AI가 어려워하는 분야 중 하나입니다. 이미지 생성은 Stable Diffusion, DALL-E가 있고, 영상 생성은 Sora가 있습니다. 하지만 벡터 애니메이션은 없습니다. 래스터 이미지와 달리 수학적 좌표와 곡선으로 정의되는 벡터는 기존 확산 모델의 접근 방식으로는 풀기 어려웠습니다.

OmniLottie는 텍스트, 이미지, 영상에서 Lottie 포맷의 벡터 애니메이션을 직접 생성하는 최초의 엔드투엔드 멀티모달 프레임워크입니다. CVPR 2026에 accept 되었고, 모델과 코드 모두 공개되었습니다.

Yiying Yang et al., "OmniLottie: Generating Vector Animations via Parameterized Lottie Tokens", CVPR 2026, arXiv:2603.02138, Mar. 2025.

링크 : https://arxiv.org/abs/2603.02138

요약

기술 스펙

모델 - 파라미터: 약 4B (Qwen2.5-VL-3B-Instruct 기반) - 모달리티: 텍스트 + 이미지 + 비디오 - 출력: Lottie JSON (벡터 애니메이션) - 모델 크기: 8.46GB

핵심 구성요소 - Lottie Tokenizer: JSON → 파라미터화된 토큰 시퀀스 변환 - MMLottie-2M: 200만 개 멀티모달 Lottie 애니메이션 데이터셋 - MMLottieBench: 900개 샘플 표준 벤치마크

성능 - 생성 성공률: 88.1% ~ 93.3% (기존 LLM/VLM 기반 방법은 30% 이하 또는 0%) - Text-to-Lottie FVD: 202.14 (Recraft: 300.70) - Video-to-Lottie SSIM: 0.82, DINO: 0.92 - GPU 메모리: 15.2GB - 생성 속도: 약 8.34초/256토큰

핵심 혁신

Lottie Tokenizer: Lottie JSON의 구조적 메타데이터를 제거하고 핵심 명령어+파라미터 시퀀스로 변환
멀티모달 입력: 텍스트, 이미지, 비디오 모두에서 벡터 애니메이션 생성 가능
MMLottie-2M: 5개 플랫폼에서 수집한 200만 개 애니메이션 + 다중 세밀도 어노테이션
높은 생성 성공률: 기존 방법 대비 압도적 성공률 달성

논문 상세

왜 Lottie인가

벡터 애니메이션 포맷은 여러 가지가 있습니다. SVG, CSS 애니메이션, GIF 등. 그중 Lottie는 현업에서 가장 널리 쓰이는 경량 JSON 기반 포맷입니다.

Lottie가 매력적인 이유: - JSON 기반이라 웹, 모바일, 데스크톱 어디서든 호환 - After Effects에서 내보낸 애니메이션을 그대로 재현 - 해상도 독립적 (벡터니까 당연하지만) - 파일 크기가 작음 - Airbnb가 2017년에 오픈소스로 공개한 이후 산업 표준으로 자리 잡았습니다

근데 문제가 있습니다. Lottie JSON은 거대하고 복잡합니다. 간단한 아이콘 애니메이션 하나가 수천 줄의 JSON이 될 수 있고, 구조적 메타데이터와 포맷팅 토큰이 전체의 상당 부분을 차지합니다. LLM이 이걸 직접 생성하려고 하면? 성공률이 30% 이하, 심지어 0%까지 떨어집니다.

Lottie Tokenizer: 핵심 기여

OmniLottie의 가장 중요한 기여는 Lottie Tokenizer입니다. Lottie JSON의 계층적 구조를 "함수 호출 시퀀스"로 평탄화(flatten)하고, 이를 다시 파라미터화하여 전용 어휘(vocabulary)와 토큰 세트를 정의합니다.

변환 과정: 1. Lottie JSON의 계층적 구조를 분석 2. 불변하는 구조적 메타데이터(formatting tokens, bracket 등) 제거 3. 도형(shape), 애니메이션 함수, 제어 파라미터를 구조화된 명령어 시퀀스로 변환 4. 전용 Lottie 어휘 임베딩으로 매핑

이게 왜 중요하냐면, 원본 Lottie JSON에서 실제 의미 있는 정보(도형 좌표, 베지어 곡선, 키프레임 값)는 전체의 일부입니다. 나머지는 JSON 구문({, }, "key": 등)과 반복적인 구조 정보죠. 토크나이저가 이 노이즈를 제거하면 모델이 학습해야 할 시퀀스가 훨씬 짧아지고, 실질적인 애니메이션 정보에 집중할 수 있게 됩니다.

Lottie 구조에서는 레이어 타입(shape, solid, image, null, precomp)별로 공통 속성과 고유 속성이 있는데, 토크나이저가 이 계층 구조를 명시적으로 인코딩합니다.

아키텍처

OmniLottie는 Qwen2.5-VL-3B-Instruct를 백본으로 사용합니다. 여기에 Lottie 어휘 임베딩을 추가해서 오토리그레시브(auto-regressive) 방식으로 Lottie 토큰을 생성합니다.

구조는 비교적 직관적입니다: 1. 멀티모달 입력(텍스트/이미지/비디오)을 VLM이 인코딩 2. Lottie 어휘 임베딩이 추가된 디코더에서 토큰 시퀀스 생성 3. 생성된 토큰 시퀀스를 Lottie JSON으로 디코딩

VLM 기반이라 별도의 복잡한 아키텍처 없이도 멀티모달 이해 능력을 그대로 활용할 수 있습니다. 4B 파라미터에 15.2GB GPU 메모리면 실용적인 수준이네요.

데이터셋: MMLottie-2M

200만 개의 Lottie 애니메이션을 5개 플랫폼(LottieFiles, IconScout, Flaticon, Iconfont, Icons8)에서 수집했습니다. 데이터 구축 파이프라인은 3단계로 나뉩니다.

Stage 1 - 수집 및 변환 - SVG 에셋을 정적 Lottie 파일로 변환 + 랜덤 애니메이션 효과 적용 - 전문 제작된 Lottie 애니메이션을 5개 온라인 플랫폼에서 수집 + 필터링

Stage 2 - 처리 - 시공간 정규화(spatio-temporal normalization) 적용 - 비디오 렌더링 및 랜덤 키프레임 추출

Stage 3 - 어노테이션 - 기하학적 구조, 색상 속성, 모션 특성을 강조하는 다중 세밀도(multi-granularity) 어노테이션

흥미로운 점은 SVG를 Lottie로 변환하면서 랜덤 애니메이션을 붙이는 방식입니다. 정적 벡터 자산에 움직임을 부여해서 데이터를 대폭 늘렸네요. 200만이라는 규모는 이 도메인에서 상당합니다.

지원 태스크

OmniLottie는 세 가지 태스크를 지원합니다.

Text-to-Lottie: 텍스트 설명에서 벡터 애니메이션 생성
Text+Image-to-Lottie: 텍스트 가이드 + 시각적 레퍼런스 조합
Video-to-Lottie: 비디오 시퀀스를 Lottie 포맷으로 변환

특히 Text+Image-to-Lottie가 실용적입니다. 디자이너가 정적 아이콘을 주고 "이걸 바운스 효과로 애니메이션 만들어줘" 같은 요청을 할 수 있다는 뜻이니까요.

평가 및 결과

MMLottieBench는 900개 샘플로 구성됩니다: - 450 실제(real-world) 애니메이션 + 450 합성(synthetic) 샘플 - 태스크당 150개씩 균등 배분

주요 결과:

Text-to-Lottie에서 FVD 202.14, Motion Alignment 5.94로 상용 도구 Recraft(FVD 300.70, Motion Alignment 4.68)를 크게 앞섰습니다. Video-to-Lottie에서도 FVD 227.11, PSNR 16.08, SSIM 0.82, DINO 0.92로 최고 성능을 기록했습니다.

무엇보다 눈에 띄는 건 생성 성공률입니다. OmniLottie는 88.1%~93.3%를 달성한 반면, 기존 LLM/VLM 기반 베이스라인(GPT-5, DeepSeek, Qwen2.5-VL, Gemini 등)은 30% 이하, 일부는 0%였습니다. Lottie JSON의 복잡한 구조를 직접 생성하는 게 얼마나 어려운지를 보여주는 수치이면서, 동시에 Lottie Tokenizer의 효과를 증명하는 결과입니다.

생각

잘한 점

토크나이저 설계가 인상적입니다. LLM으로 구조화된 코드를 생성하는 연구는 많지만, "JSON의 의미 없는 부분을 날리고 핵심만 남긴다"는 접근이 깔끔합니다. 기존 방법들이 Lottie JSON을 그대로 생성하려다 성공률 0%를 찍은 걸 보면, 문제 정의 자체가 정확했다는 뜻이죠.

4B 모델로 이 정도 성능을 냈다는 것도 좋습니다. 15.2GB GPU면 대부분의 개발 환경에서 돌릴 수 있는 수준입니다. 모델과 코드가 모두 공개(Apache 2.0)된 것도 연구 재현성 면에서 좋은 선택입니다.

200만 개 데이터셋을 직접 구축한 점도 주목할 만합니다. 벡터 애니메이션 도메인에서 이 규모의 데이터셋은 처음이고, 이 자체만으로도 후속 연구에 기여할 것 같습니다.

한계

벤치마크 결과가 인상적이긴 하지만, 몇 가지 짚어볼 점이 있습니다.

첫째, Lottie Tokenizer의 표현력 한계입니다. JSON을 토큰 시퀀스로 변환하는 과정에서 어느 정도의 정보 손실이 불가피합니다. 복잡한 표현식(expression)이나 중첩된 프리컴프(precomp) 구조를 얼마나 충실히 재현하는지는 추가 검증이 필요해 보입니다.

둘째, 벤치마크 구성입니다. MMLottieBench의 900개 샘플이 실제 프로덕션 환경의 다양성을 충분히 반영하는지 의문입니다. 자체 데이터셋에서 자체 벤치마크로 평가하는 구조는 어쩔 수 없는 부분이긴 한데, 외부 검증이 동반되면 더 설득력이 있을 것 같습니다.

셋째, 생성 속도입니다. 256토큰당 약 8.34초면, 복잡한 애니메이션은 상당한 시간이 걸릴 수 있습니다. 실시간 인터랙티브 디자인 도구에 바로 적용하기엔 한계가 있어 보입니다.

넷째, 데이터셋 라이센스가 CC BY-NC-SA 4.0입니다. 비상업적 용도로만 사용 가능하다는 뜻이니, 상용 제품에 직접 활용하려면 별도의 데이터 파이프라인이 필요합니다.

의의

방향성은 확실히 맞다고 봅니다. 래스터 이미지 생성 AI가 폭발적으로 성장하는 동안, 벡터 애니메이션은 상대적으로 소외받았습니다. 디자인 산업에서 Lottie 사용량은 계속 증가하고 있는데, 이를 AI로 생성할 수 있다는 건 꽤 큰 임팩트를 가질 수 있습니다.

특히 "도메인 특화 토크나이저 + VLM 백본"이라는 패턴은 Lottie 외에도 SVG, CSS 애니메이션, Three.js 같은 다른 구조화된 출력 포맷에도 적용할 수 있을 것 같습니다. OmniLottie가 이 방향의 선례가 되지 않을까 싶네요.