물리 엔진 대신 Lottie, 의도된 촉각 UX

Smashing Magazine의 Alexey Kopytin이 인터랙티브 웹 경험을 만들 때 '물리 엔진'을 버리고 Lottie를 택한 이유를 풀어놨습니다. 애니메이터가 181프레임짜리 '메가 스퀴즈' 같은 시퀀스를 프레임 단위로 정교하게 만들어 놓았는데, 물리 시뮬레이션은 그 의도를 매번 다르게 흩뜨려 버린다는 것이 출발점입니다. 해법은 결과를 '시뮬레이션'하지 않고 정확히 만든 애니메이션을 '재생'하는 것이었습니다.

"Lottie의 네이티브 타임라인 기능을 DOM에 매핑하면, 아트 디렉션을 완벽히 통제하면서도 대단히 풍부한 촉각적 사용자 경험을 전달할 수 있다."Alexey Kopytin, Smashing Magazine

왜 중요한가

핵심은 '알고리즘적 모션'이 아니라 '의도된 모션'입니다. 클릭 좌표를 캐릭터 중심 기준으로 피타고라스 정리로 환산해 동심원 점수 구역을 만들고, 폭발 애니메이션이 정확히 클릭한 자리에서 튀어나오게 합니다. 캐릭터는 자유 변형 대신 idle·squeeze1·squeeze2·squeeze3처럼 정의된 프레임 구간을 순환하며 내러티브 통제를 유지합니다. 무작위로 흔들리는 물리보다, 손끝에 닿는 반응이 '설계된 대로' 돌아올 때 사용자는 더 정교한 촉감을 느낍니다.

실무 적용

모든 인터랙션에 물리 엔진을 얹는 것이 능사가 아닙니다. 정해진 연출을 정확히 재생해야 하는 마이크로 인터랙션이라면 Lottie 타임라인을 코드로 트리거하는 편이 예측 가능하고 가볍습니다. 성능도 설계 대상입니다 — 순차 에셋 로딩, 진열 상태에선 품질 50%·집중 플레이 땐 100%로 동적 조절, 공격적인 메모리 관리로 모바일에서도 부드러움을 지켰습니다. '리치함'과 '통제'는 트레이드오프가 아니라 함께 설계할 대상입니다.

교차 참고

• Nielsen Norman Group: The Role of Animation and Motion in UX — 모션은 절제된 피드백일 때 가장 강하다는 원칙을 함께 봅니다.
• LottieFiles — Lottie 포맷과 웹 재생 도구의 공식 생태계를 보완합니다.

Wemeet의 관점

Wemeet은 좋은 모션이 '더 사실적인가'가 아니라 '얼마나 의도대로 전달되는가'로 갈린다고 봅니다. 물리 엔진의 자유도는 화려하지만, 브랜드의 손끝 감각은 프레임 단위로 다듬은 연출에서 나옵니다 — 통제할 수 있는 도구를 고르는 것 자체가 디자인 결정입니다.