Lottie를 일회성 파일이 아니라 여러 제작 도구와 런타임에서 같은 규칙과 자산을 재사용하는 모션 인프라로 확장했어요.
같은 팀이 Figma, After Effects, 웹, Creator를 사용해도 이징과 프리셋, 에셋의 의미를 도구마다 다시 만들고 설명해야 했습니다.
Lottie는 애니메이션을 여러 플랫폼에서 재생하게 했지만, 제작 과정의 결정까지 하나의 시스템으로 관리해주지는 않았습니다. 브랜드 색상과 타이포그래피가 디자인 시스템으로 공유되는 것처럼, 모션도 이름과 사용 맥락을 가진 재사용 단위가 필요했어요.
이 프로젝트에는 웹과 Creator를 맡은 디자이너, 포맷과 런타임을 구현한 엔지니어가 함께 참여했습니다. 저는 Figma와 After Effects 등 디자인 도구 플러그인 UX, 공식 문서, 출시 후 엔터프라이즈 온보딩을 주도했습니다.
한 번 만든 애니메이션의 내용과 모습, 행동을 런타임에서 바꿀 수 있어야 진짜 제품 자산이 됩니다.
Motion Tokens는 텍스트, 색상, 그라디언트, 위치, 크기, 회전, 투명도 같은 속성을 이름 있는 값으로 노출합니다. State Machines는 상태와 전환, 입력을 애니메이션과 함께 .lottie에 담아 클릭, 호버, 제품 상태에 반응하게 합니다.
플러그인 UX에서는 이 고급 기능을 포맷 구조부터 설명하지 않았습니다. Figma 변수와 프로토타입처럼 디자이너가 이미 이해하는 개념에서 시작하고, 내보낼 수 있는 범위와 런타임 요구사항을 필요한 순간에 보여줬어요. 하나의 에셋을 브랜드, 기기, 상태에 맞춰 다시 쓰되 원본을 여러 벌 복제하지 않는 기반이 만들어졌습니다.
Motion Tokens 문서특히 여러 한국 대기업은 기존 제작 환경과 승인 과정 안에 새로운 모션 체계를 넣어야 했습니다.
고객 이름과 도입 규모는 공개하지 않습니다. 대신 온보딩에서 반복된 질문을 제품 개선의 근거로 사용했어요. 어떤 프리미티브부터 정의해야 하는지, 기존 After Effects 에셋을 어떻게 옮길지, 디자이너와 개발자가 같은 이름을 어떻게 공유할지, 어떤 런타임에서 고급 기능을 재생할 수 있는지가 주요 문제였습니다.
공식 문서는 기능 설명을 넘어 도구 선택, 출력 포맷, 런타임 호환성, 전달 방법을 잇는 운영 인터페이스가 됐습니다. 플러그인과 웹, Creator가 각자 좋은 기능을 제공하는 데서 끝나지 않고, 팀이 같은 모션 결정을 만들고 전달하고 다시 사용하는 순환을 지원하게 됐어요.
State Machines 문서