- 650k → 1mil · 피그마 플러그인 이용자, 54% 성장
LottieFiles for Figma 플러그인의 모션 제작 경험 전반에 대한 오너십을 바탕으로, 훨씬 넓은 범위의 안정성과 기능을 지원하는 크리에이티브 툴로 확장했습니다. 기능을 설계하는 데서 그치지 않고, 고객이 잘 이해하고 활용하도록 다양한 형태로 공유하며 플러그인의 성장을 이끌었어요.
새로운 로티 스펙과 피그마 연동, 대시보드, 로티 크리에이터 등 플러그인 밖 환경과의 유기적인 연결 등 플러그인 전반의 UX를 설계했고, 2026년부터는 직접 제품에 코드 레벨로 기여하고 있습니다.
하지만 확인해 보니 많은 유저들이 피그마 디자인을 로티로 변환하는 데 실패하고 있었어요. 유저가 피그마에서 자유롭게 수정하는 과정에서 프레임 간 레이어 위계 일관성을 잃거나, 로티에서 지원하지 않는 피그마 기능이 추가되기 때문이었어요. 결과적으로 유저는 매달 2만 건 이상 렌더 실패 화면을 보고 있는 있는 심각한 상황이었고, 저는 이를 제대로 해결하기 위해 정확히 어떤 상황에서 렌더링이 실패하는지 조사했어요.
수십 회에 달하는 온, 오프라인 커뮤니티 세션과 기업 온보딩을 진행하며 반복되는 렌더 실패 사례를 모으고 체계적으로 기록했습니다.
이런 ‘맥락 기반의’ UX 설계를 통해 유저 인지 부하를 줄이면서 사용률을 높일 수 있었기 때문에, 같은 기법을 피그마 플러그인 속 다른 여러 프로젝트에도 적용하게 되었어요. 대표적인 다른 사례로 피그마 속Vectorizer UX 개선 프로젝트를 소개할게요.
Vectorizer 기능은 피그마 혹은 유저가 갖고 있는 이미지를 벡터로 만들어주는 유용한 기능이에요. 그 과정에서 AI가 스마트하게 오브젝트를 인식해 개별 편집 가능한 레이어 형태로 변환해 주고요.
로티파일즈 유저들은 이렇게 벡터 애셋을 먼저 갖게 된 후 이를 기반으로 로티 애니메이션 제작을 쉽게 시작할 수 있습니다. 다만 좋은 기술임에도 불구하고 기능이 바로 노출되지 않아 유저가 기능의 존재를 알지 못하고 지나치는 경우가 많았어요.
로티의 핵심 장점은 유저가 만든 복잡한 애니메이션이 저용량 & 벡터 형태로 제품에 반영된다는 점이지만, 아직 해결이 필요한 문제가 여럿 있었어요. 같은 파일인데 OS환경에 따라 애니메이션이 다르게 보인다던지, 배포된 애니메이션을 바로 업데이트하기 어렵다던지, 인터랙션을 넣으려면 여전히 개발자 도움이 필수라던지 등이요. 이러한 플러그인의 문제 전반에 피쳐 체커에 적용한 UX 원칙을 차근차근 확대 적용했습니다.
로티나 피그마에는 시간이 지남에 따라 여러 모션 관련 기능이 추가되었는데요. 이럴 때마다 때마다 플러그인에 버튼을 추가로 만들지 않고, 이미 익숙한 유저 플로우에서 여러 기능을 자연스럽게 적용했어요. 결과적으로 피그마 모션, 인터랙션, 피그마 배리어블, 테마, 컴포넌트 등 수많은 추가 기능이 가장 유저에게 익숙한 형태로 ‘클릭 한 번에’ 로티로 지원했습니다.
그 과정에서 로티로 옮길 수 없는 요소는 정직하게 검사 결과로 알려주고, 수정할 레이어로 바로 이동할 수 있게 했습니다. 이를 통해 여러 기능이 추가되더라도 유저는 플러그인 사용법을 매번 새로 배울 필요 없이 자신의 디자인과 실제 애니메이션 프리뷰를 중심으로 애니메이션 작업을 이어갈 수 있게 되었고요.
이러한 플러그인의 발전 과정에서도 플러그인의 모든 편집과 관리 기능을 플러그인에 담으려고 하지는 않았습니다. 피그마보다 세밀한 모션 편집이 필요하면 Lottie Creator로, 저장한 애니메이션의 버전 관리와 CDN 배포가 필요하면 웹 워크스페이스로 이어지도록 했어요. 핵심은 플러그인 안에서 모든 일을 끝낼 수 있게 하는 것이 아니라 각 디자인 툴에서 시작한 애니메이션을 매번 다시 만들지 않고, 작업의 깊이와 목적에 맞는 도구에서 계속 활용할 수 있게 하는 것이었기 때문이었어요.
2025년 12월 배포 직후부터 실패 건수는 순차적으로 급감해, 도입 후 현재까지 월평균 실패 건수가 50건 미만으로 줄어들었어요. 유저는 인지하지 못한 채 사용한 로티 미지원 스펙이나 레이어 불일치를 '렌더 실패'라는 극단적인 결과가 아닌, 스스로 쉽게 해결할 수 있는 형태로 마주하고 고칠 수 있게 되었고요.
결과적으로 이러한 다양한 경험 개선을 통해 현재 유저는 피그마에서 만든 디자인을 로티파일즈 플러그인을 통해 프로덕션에 사용가능한 형태로 변환할 수 있게 되었고, 단일 플러그인의 이용자는 65만에서 100만으로 약 54% 성장했어요. 유저당 로티 애니메이션 저장 수는 2.07회에서 3.18회로, 종전 대비 50% 이상 늘었습니다.
2024년 당시, 피그마 유저는 이미 여러 프레임과 프로토타입 연결로 움직임을 표현하고 있었습니다. 당시에는 실무에 쓸 수 있는 수준의 모션을 만들려면, 애프터이펙트 같은 별도의 모션 툴에서 키프레임 베이스 작업 방식을 처음부터 배워야 했어요. 대부분의 디자이너에게는 너무 어려운 일이었죠.
로티파일즈 플러그인은 피그마 유저들이 이미 사용 중인 프레임 단위 작업 방식을 존중하면서 애니메이션을 만들 수 있게 해서 많은 유저들의 사랑을 받는 플러그인이었어요. 피그마에서 선택한 여러 프레임의 변화를 읽어 모션을 만들어 로티로 내보낼 수 있었거든요.
이 기능 덕분에 유저는 피그마 캔버스에서 마치 UI 프로토타입 플로우를 만들듯이 애니메이션을 만들 수 있게 됩니다. 그 과정에서 유저는 자연스레 복제한 프레임에 필요한 레이어를 추가하거나, 아예 새로운 프레임을 플로우에 추가하며 작업하기도 했죠.
LottieFiles for Figma 플러그인사례를 모은 후에는 팀에 상황을 공유하고 2가지를 물어봤어요.
최종 목표는 이러한 문제점과 렌더 오류를 숨기는 것이 아니라, 원인 불명의 실패를 최소화, 대부분의 오류를 정의 & 공유해서 유저 스스로 해결할 수 있는 문제로 바꾸는 것으로 잡았습니다. 결과적으로 렌더 실패 건수가 자연스럽게 줄어들 것으로 생각했고요.
위 두 가지 질문을 기반으로 팀내 개발자들과 기술을 검토하며 검사할 조건을 샘플과 함께 스펙 문서로 정리했습니다. 레이어 구조뿐 아니라 이너 섀도우 등 로티 스펙에서 지원하지 않는 피그마 이펙트도 검사와 안내의 대상으로 삼았어요. 그 과정에서 부분 렌더가 가능한 곳들은 모두 경고 배너로 이슈를 확인, 스스로 해결할 수 있게 설계했고요.
피쳐체커 릴리스 노트저는 이러한 AI 기능이 플러그인을 연 원래 목적(export)을 방해하지 않는 선에서 맥락적으로, 하지만 확실하게 노출하려고 했어요. 피그마에서 이미지 레이어를 선택했을 때 Export 대신 Vectorize를 주요 행동으로 보여줘, 클릭 한 번으로 바로 기능을 사용해볼 수 있게 했거든요. 결과적으로 유저는 이미지 선택 시에도 편리하게 벡터를 만들어 애니메이션에 활용할 수 있게 되었고, 별도 플러그인으로 제공하면 더 많은 유저를 확보할 수 있는 기능이라는 인사이트와 함께 AI Vectorizer 라는 이름으로 독립 플러그인으로 병렬 출시하게 되었어요. 로티라는 맥락에서 벗어나 모든 피그마 유저에게 벡터라이저 기능을 노출해 오가닉 유저를 더 많이 모을 수 있게 되었고요.
AI Vectorizer 살펴보기