LottieFiles 밋업 다녀왔다

뱅크샐러드, 킥보드·자전거 공유 서비스 지바이크, LottieFiles 세 팀의 발표. 모션 디자인 밋업인데 개발자로서 실무 적용 포인트가 꽤 많았다.

뱅크샐러드 — 25MB를 4MB로 줄이는 방법

세 가지 사례 중 가장 인상 깊었던 건 샐러드 게임 최적화 과정이었다. 아이소메트릭 3D 캐릭터 + 섬 배경으로 시작한 로티 파일이 25MB까지 커졌는데, 앱에 심을 수 없는 수준이었다. 크기를 줄이는 시도를 여러 번 했다. 각도 변경, 사이즈 축소 — 다 해봤는데 1MB 이하 차이라 의미가 없었다.

결국 해결한 건 컨셉 자체를 바꾼 거였다. “두더지 게임처럼 구멍에서 왔다갔다 하는 구조”로 전환하면서 배경 오브젝트를 2D 벡터로 교체하고, 짧게 루핑되는 이미지 시퀀스 + AE 키프레임 조합으로 “긴 듀레이션, 작은 용량”을 동시에 잡았다. 결과는 25MB → 4MB, 89% 감소.

기술적 최적화로 1MB 줄이는 것보다 컨셉을 바꾸는 게 더 효과적이었다는 게 인상적이었다. 코드 레벨 최적화에 갇히다가 설계 자체를 다시 보는 게 훨씬 빠른 경우가 개발에서도 자주 있는데, 그 이야기를 다른 영역에서 보는 느낌이었다.

지바이크 — 설명 방식이 바뀌면 행동이 바뀐다

킥보드·자전거 공유 서비스 지쿠(GCOO) 운영사. 이동 중 앱을 써야 하는 환경이라 유저가 텍스트를 읽지 않고, 그게 불법 주차 → 견인 → 민원으로 이어지고 있었다.

견인 구역 안내를 경고성 텍스트 팝업에서 “왜 안 되는지”를 시각화한 로티 애니메이션으로 바꿨더니 견인 발생률이 32.5% 줄었다. 태국 관광지 서비스는 QR 스캔 → 앱 없이 웹에서 바로 탑승 + 4개 언어를 로티로 동시 처리했고, 매출이 7배 성장했다.

“설명 방식이 바뀌면 → 사용자 행동이 바뀌고 → 비즈니스 결과가 된다”는 마무리 문장이 발표 전체를 잘 요약했다. 경고 팝업이 안 읽힌다는 건 개발하면서도 자주 만나는 문제인데, 해결 방법이 “더 눈에 띄는 팝업”이 아니라 “모션으로 맥락을 전달하는 것”이었다는 게 인상적이었다. 모션을 비주얼 요소로만 보던 시각이 설득 도구로 바뀌는 느낌.

LottieFiles — 개발자가 챙길 신기능

발표 자료 없이 피그마 파일 라이브 데모로 진행했다. 몇 가지 실무에서 바로 쓸 수 있을 것 같은 기능들.

닷로티(dotLottie) — 크로스 플랫폼 렌더링 차이가 있다는 건 알고 있었는데, 해결 방법은 몰랐다. LottieFiles 자체 라이브러리로 iOS/Android/Web 동일 렌더링을 목표로 만든 포맷이라고 한다.

모션 토큰 — 피그마 Variables처럼 로티 포맷 레벨에서 값을 변수로 정의하는 개념. 배터리 UI에 API 연동해서 실시간 값을 애니메이션에 반영하거나, 텍스트 슬롯에 유저명 삽입하거나. 정적 로티를 동적으로 쓸 수 있게 되는데, 개발자 입장에선 기존 JSON을 코드에서 직접 조작하던 것보다 명시적으로 관리할 수 있다는 점이 좋다.

피직스 시뮬레이터 — 키프레임 없이 중력·물리 기반 애니메이션을 만드는 기능.

마무리

세 세션에서 공통으로 나온 말이 있다. 모션의 기준은 하이어라키 — 가장 중요한 포인트 하나에 집중하는 게 전체에 다 넣는 것보다 훨씬 낫다는 것. 뱅크샐러드가 하이라이트 배너 하나에 집중해서 월 1억 매출을 만들었다는 숫자가 그걸 보여준다.

모션을 많이 쓴다고 좋은 UX가 아니라, 스크롤을 멈추게 할 곳을 선택하는 게 핵심이라는 걸 숫자로 증명한 밋업이었다.