피그마는 프로토타이핑 도구에 물리 기반의 스프링 애니메이션을 도입하여 더욱 생동감 있고 자연스러운 사용자 경험을 구현했습니다. 기존의 시간 기반(easing curve) 방식이 가진 한계를 극복하기 위해 물리 법칙인 '조화 진동자(Harmonic Oscillator)' 모델을 채택했으며, 이를 통해 애니메이션이 도중에 중단되거나 변경되어도 속도의 연속성을 유지하며 부드럽게 이어지도록 설계했습니다. 결과적으로 디자이너는 복잡한 수식 없이도 직관적인 컨트롤러를 통해 실제 사물처럼 반응하는 정교한 인터랙션을 제작할 수 있게 되었습니다.

이징 곡선의 한계와 물리 기반 애니메이션의 필요성

전통적인 애니메이션 방식인 '큐빅 베지어(Cubic Bezier)' 곡선은 정해진 시간 내에 움직임이 완료되어야 하므로, 사용자의 급격한 입력 변화나 애니메이션 중첩 시 끊기는 듯한(jerkiness) 느낌을 줍니다.
스프링 애니메이션은 물리학의 질량, 강성, 감쇠 개념을 도입하여 애니메이션이 고정된 시간이 아닌 '속도'와 '힘'에 반응하게 만듭니다.
이를 통해 요소가 목적지에 도달할 때의 탄성(bounce)을 자연스럽게 표현할 수 있으며, 이전 동작의 운동량을 다음 동작으로 매끄럽게 전달할 수 있습니다.

스프링 동작을 결정하는 수학적 모델: 감쇠 조화 진동자

피그마는 스프링의 움직임을 계산하기 위해 미분 방정식인 '감쇠 조화 진동자' 공식($mx'' + cx' + kx = 0$)을 사용합니다.
애니메이션의 상태는 세 가지로 구분됩니다:
- 저감쇠(Underdamped): 마찰이 적어 목표 지점을 지나쳐 앞뒤로 흔들리며 탄성이 발생하는 상태입니다.
- 임계 감쇠(Critically Damped): 흔들림 없이 가장 빠르게 목표 지점에 도달하는 최적의 상태입니다.
- 과감쇠(Overdamped): 마찰이 강해 목표 지점까지 아주 천천히 도달하는 상태입니다.
피그마는 매 프레임마다 수치 해석적 시뮬레이션을 돌리는 대신, 해석적 해(Analytical solution)를 사용하여 특정 시간 $t$에서의 위치를 즉각 계산함으로써 성능 효율을 극대화했습니다.

디자이너를 위한 직관적인 파라미터 설계

질량(Mass), 강성(Stiffness), 감쇠(Damping)라는 물리 용어는 디자이너가 직관적으로 이해하기 어려울 수 있습니다.
피그마는 이를 시각적인 그래프와 미리보기를 통해 제공하며, 특히 '탄성(Bounce)'과 '속도'를 조절하는 직관적인 UI를 구현하여 물리 법칙을 모르는 사용자도 원하는 느낌을 쉽게 찾을 수 있도록 했습니다.
또한, 이론적으로 스프링은 영원히 멈추지 않으므로, 움직임이 특정 임계값(Epsilon) 이하로 떨어지면 애니메이션이 종료된 것으로 간주하는 로직을 정교하게 설계하여 불필요한 리소스 소모를 방지했습니다.

연속성을 보장하는 애니메이션 인터럽트 처리

사용자가 애니메이션이 끝나기 전에 다른 인터랙션을 시도할 경우, 피그마의 스프링 모델은 현재의 위치와 '속도'를 그대로 다음 애니메이션의 시작점으로 전달합니다.
기존 방식은 속도가 0에서 다시 시작하여 시각적 단절이 발생하지만, 스프링 모델은 이전의 운동 에너지를 보존하므로 물리적으로 타당하고 매끄러운 전환이 가능합니다.

현대적인 인터페이스 디자인에서 '부드러움'은 단순한 심미적 요소를 넘어 제품의 완성도를 결정짓는 핵심 요소입니다. 피그마의 사례처럼 물리 기반의 스프링 모델을 도입하면 개발자와 디자이너 모두가 납득할 수 있는 수학적 근거 위에서 사용자에게 가장 자연스러운 반응형 인터랙션을 제공할 수 있습니다. 특히 인터랙션이 빈번한 모바일 앱이나 복잡한 웹 대시보드를 개발할 때, 고정된 시간 기반의 애니메이션보다는 물리 법칙을 활용한 접근을 권장합니다.