요약 및 핵심 성과
사용자 경험 강화
입장 효과·프로필 아이템·선물등 다양한 Lottie 애니메이션을 통해 몰입도와 감정적 연결 향상.콘텐츠 배포 속도 2배 향상
월 1–2회 → 3–4회로 모션 콘텐츠 배포 주기 단축.애니메이션 길이 확장
10초 → 20초 이상 재생시간 연장으로 더욱 풍부한 시각적 표현 가능.최대 90% 용량 절감
1MB 이하로 앱 성능 저하 없이 고품질 구현.작업 효율 개선
AE 디자인부터 구현까지 워크플로우 간소화 및 시간 절약.
“재밌는 콘텐츠로 세상을 더 즐겁게”
스푼 (Spoon)은 오디오와 비디오 기반의 콘텐츠 플랫폼을 통해, 사람들이 목소리와 이야기를 중심으로 소통하고 연결되는 새로운 소셜 경험을 만들어가는 글로벌 테크 스타트업입니다. 누구나 자신의 목소리 또는 이야기를 콘텐츠로 만들 수 있는 플랫폼을 제공하고 실시간으로 소통할 수 있는 공간을 제공함으로써, 전 세계 유저들이 일상과 생각을 공유하는 새로운 소셜 경험을 만들어가고 있습니다.
오디오 중심의 플랫폼인 스푼에서 후원 아이템(버추얼 기프팅) 시스템은 유저 간 감정 표현과 교류의 핵심 수단으로 활용됩니다. 하지만 정적인 이미지로는 복잡하고 미묘한 감정을 충분히 전달하기 어려운 부분이 고민으로 다가왔고 새로운 방법을 찾아야 했습니다. 단순히 청각적인 교감이 아닌 시각적으로 사용자에게 더욱 풍부하고 인상적인 경험을 선사하고자, 스푼 디자인팀은 모션 애니메이션을 통해 감정을 시각적으로 표현하는 방법을 고민하게 되었고, 그 출발점이 바로 Lottie였습니다.
감정을 전하는 디자인, 모션의 중요성
스푼에서 매우 중요하게 활용하는 주요 기능 중 하나는 ‘후원 아이템’ 입니다. 후원아이템은 방송 중 청취자들이 크리에이터에게 보내는 디지털 선물로, 플랫폼 내에서 감사를 전하고 관계를 형성하는 핵심 인터랙션 기능으로 활용되고 있습니다.
시각적인 이미지를 통해 감사와 고마움의 표시를 감정적으로 담아내고 청취자와 크리에이터가 소통하는 창구로 교감을 매우 중요시하는 스푼의 플랫폼에서 정말 큰 역활을 하고 있습니다. 스푼의 디자인 팀은 감정의 표현을 움직임, 즉 모션 디자인을 활용하여 더 나은 UX를 제공하기로 하였고 적극적으로 도입을 결정하게 되었습니다.
“감사의 마음, 응원의 에너지, 함께 웃고 싶은 감정 같은 미묘한 결을 더 잘 전달할 수 있는 수단이 필요했어요.” 이자운 - 콘텐츠 디자이너.
성공적인 Lottie의 도입으로 스푼은 Lottie 애니메이션을 통해 후원 아이템은 물론, 최근 젤리 컨셉으로 진행한 이벤트에서 프로필 장식, 방송 입장 효과 등 다양한 리워드 요소에도 생동감을 불어넣기 시작했습니다. 정적인 이미지 대신, 가볍고 부드러운 애니메이션이 적용된 인터랙션은 사용자 경험을 한층 더 몰입감 있게 만들어주었고 더욱 완성도 높은 방송을 제공할 수 있었습니다.
왜 Lottie였을까?
스푼의 UX 환경은 특별한 도전 과제를 안고 있었습니다. 실시간 오디오 기반 플랫폼 특성상, 시스템 퍼포먼스와 연결 안정성은 절대 양보할 수 없는 기준이었고, 비주얼 요소는 그 흐름을 방해하지 않는 선에서 구현되어야 했습니다.
“용량 제약이 엄격했기 때문에, 최대 1MB 안에서도 감정이 살아 있는 모션을 표현할 수 있어야 했어요.
그런 점에서 Lottie는 유일한 해답이었죠.” 이자운 - 콘텐츠 디자이너
Lottie 애니메이션은 JSON 형식으로 구현되어 용량이 매우 작고, 애니메이션 품질도 유지되기 때문에 파일포맷의 선택은 필연적이였고 LottieFiles의 최적화 기능을 사용하면 파일을 손쉽게 압축할 수 있어, 퍼포먼스는 유지하면서도 시각적 완성도를 끌어올릴 수 있었습니다.
무엇보다도 디자이너와 개발자 모두에게 익숙한 툴인 After Effect를 그대로 활용할 수 있어서, 복잡한 구현 설명 없이도 디자이너의 의도가 그대로 반영되는 협업 구조를 만들어 디자이너와 개발자 간의 협업 프로세스도 훨씬 더 간결하고 명확해졌습니다
가벼워진 워크플로우, 풍성해진 사용자 경험
Lottie 도입 이후 스푼의 디자인 프로세스는 놀라울 정도로 간결해졌습니다. 기존에는 렌더링과 별도 압축, 녹화 미리보기, 협업 전달 등 많은 단계를 거쳐야 했지만, Lottie를 통해 애니메이션 제작부터 공유, 최적화, 적용까지 전 과정이 단일 흐름으로 통합됐습니다.
스푼이 LottieFiles After Effect를 활용하면서 경험한 가장 효율적인 세가지 포인트:
앱 호환성 확인 기능
폴더링을 통한 파일 정리와, 미리보기 히스토리를 한눈에 관리
특정 장면을 PNG 이미지로 복사
“After Effects에서 바로 앱 호환성을 체크할 수 있었어요. 오류도 빠르게 잡고, 렌더링도 최소화되니,
디자이너들의 피로도가 눈에 띄게 줄었죠.” 이자운 - 콘텐츠 디자이너
이러한 효율성은 곧 콘텐츠의 다양성과 출시 속도로 이어졌습니다. 후원 스티커의 출시 주기는 기존 월 1~2회정도에서 현재 3~4회로 약 두 배 늘어 났고 더 자주, 더 다양한 스타일로 출시되고 있습니다. 10초 내외로 제한되던 모션도 20초 이상으로 확장되어, 가격대별 후원 아이템에 맞춘 섬세한 연출 차별화가 가능해졌습니다.
그 결과, 사용자는 이전보다 훨씬 다채로운 감정 표현을 경험하게 되었고, 단순한 아이템 하나에도 기대감을 갖게 되는 UX를 제공할 수 있게 되었습니다.
앞으로도, 감정이 연결되는 순간을 만들기 위해
스푼에게 있어 Lottie는 단순한 모션 애니메이션이 도구가 아닙니다. ‘감정 표현’이라는 사용자 니즈를 이해하고, 그것을 디자인 언어로 풀어내는 방법이었습니다.
“후원 아이템이 단지 장식이 아니라, 사람과 사람을 연결하는 도구가 되기를 바랐어요. 그런 의미에서 Lottie는 우리의 제품 철학과 정말 잘 맞았습니다.” 이자운 - 프로덕트 디자이너
앞으로도 스푼은 LottieFiles를 적극적으로 활용해, 유저들이 더 깊이 몰입하고, 더 감정적으로 연결되는 경험을 만들고자 합니다. 단순히 시각적 장식이 아닌, 제품 경험의 핵심 요소로서 모션을 바라보고 있는 것이죠. 스푼은 앞으로도 사람들의 목소리가 중심이 되는 세상에서, 그 목소리를 더 생생하게 전달하고, 기억에 남게 만드는 콘텐츠를 만들어나갈 계획입니다. LottieFiles는 그 여정에 있어, 감정과 감정 사이를 이어주는 매우 중요한 디자인 파트너가 될거라 확신합니다.
