배민 모션시스템 二.O: ≪春의 호흡≫ 제 1형 Spring 주무르기 #우아콘2025 #우아한형제들

우아한테크·우아콘 2025 2025·7개월 전·

#design-system#interaction-design#swiftui#jetpack-compose#motion-design#spring-animation

AI 요약

배민 리브랜딩에 맞춘 새 모션 시스템의 핵심으로, cubic Bézier와 duration으로 미리 정해두는 easing 대신 mass·stiffness·damping의 물리 모델로 매 순간 계산되는 spring을 소개한다. 왜 interactive UI에서 spring이 더 자연스러운지, 그리고 그 도입을 무엇이 막아왔는지를 함께 짚는다.

핵심 포인트

easing은 네 control point의 cubic Bézier로 시간-값 변화를 미리 정의하는 반면, spring은 질량·강성·감쇠와 cosine wave·exponential decay로 easing으로 만들기 어려운 궤적과 지각적 종료 시점을 만듦
easing은 drag가 끝나거나 목표가 바뀌면 이전 속도와 무관하게 처음부터 재생돼 손가락과 UI가 분리되지만, spring은 gesture의 initial velocity와 진행 중 animation의 위치·속도를 이어받아 연속적 방향 전환에도 즉시 반응
mass·stiffness·damping이라는 engineer 언어가 duration 기반 timeline에 익숙한 디자이너의 mental model과 어긋나고 iOS·Android·web parameter 규격도 달라 도입이 늦었으나, Apple의 duration·bounce API와 Material 3 Expressive가 진입 장벽을 낮춤
공통 spring engine·authoring tool에서 duration·bounce token을 만들어 SwiftUI·UIKit·Compose·web으로 변환하되, 구형 API·종료 threshold 차이 때문에 동일 물리의 Kotlin engine도 구현하고 component에 interaction을 내장

왜 읽나정해진 시나리오 없는 interactive 제품에서 끊김 없는 움직임을 원하는 디자이너·엔지니어에게, spring의 수학적 원리와 플랫폼 간 handoff까지 아우르는 모션 시스템 설계.

챕터별 상세

012:57 – 5:07

리브랜딩에서 시작한 물리 기반 motion system

배민의 Bold & Simple 리브랜딩은 시각 자산뿐 아니라 사용자가 기대하는 동작과 움직임도 바꾸므로 viewport 기반 duration, choreography, easing과 handoff 도구를 포함한 새 motion system이 필요했다. 그중 핵심인 spring은 고정된 timing curve 대신 mass·stiffness·damping과 initial velocity로 물리 환경을 구성해 상호작용에 따라 움직임을 동적으로 계산한다.

일반 animation의 easing은 네 control point를 가진 cubic Bézier가 시간에 따른 값의 변화를 미리 정의해 현실적인 가속과 감속을 흉내 낸다. Spring은 질량이 움직임의 무게, stiffness가 변형 저항, damping이 에너지 손실을 결정하며 cosine wave에 exponential decay를 결합해 easing으로 만들기 어려운 풍부한 궤적과 지각적 종료 시점을 만든다.

Easing은 drag가 끝나거나 목표 위치가 바뀔 때 이전 속도와 무관하게 사전 정의된 animation을 처음부터 재생해 손가락과 UI가 분리되고 가속 구간이 반복된다. Spring은 gesture의 initial velocity와 진행 중이던 animation의 위치·속도를 이어받아 사용자가 연속해서 방향을 바꾸는 상황에도 즉시 반응하므로, 시나리오가 정해지지 않은 interactive product에 더 자연스럽다.

Spring API는 오래전부터 있었지만 mass·stiffness·damping이라는 engineer 언어가 duration 기반 timeline에 익숙한 designer의 mental model과 맞지 않고, prototype tool과 iOS·Android·web의 parameter 규격도 서로 달랐다. Apple의 duration·bounce API와 Material 3 Expressive의 물리 기반 token은 학습과 수요 장벽을 낮춰 spring을 특별한 고급 표현이 아니라 사용자가 기본으로 기대할 motion 품질로 확산시킬 계기를 만든다.

공통 spring engine과 authoring tool에서 designer가 duration·bounce token을 만들고 시각적으로 시험한 뒤 SwiftUI, UIKit, Compose, web 규격으로 변환하도록 설계한다. Target iOS의 구형 API와 Compose의 서로 다른 종료 threshold 때문에 단순 parameter 변환만으로 동작이 같지 않아 동일 물리 모델의 Kotlin engine도 구현했으며, component에 정교한 interaction을 내장하고 독립 token과 web API까지 제공해 designer와 engineer의 handoff를 단순화한다.