피그마가 스프링 (새 탭에서 열림)

Figma는 베지어 곡선 대신 물리 법칙을 기반으로 한 스프링 애니메이션을 도입해 더 자연스럽고 직관적인 움직임을 구현했다. 질량, 강성, 감쇠라는 물리적 매개변수로 움직임을 계산하면 오버슈트와 감속을 자연스럽게 표현할 수 있다. 다만 디자이너가 물리 상수를 직접 조정하기는 어렵기 때문에, 실제 제품에서는 이 값을 UI 속도·탄성·오버슈트 같은 직관적인 개념으로 다루는 것이 중요하다.

스프링 애니메이션이 필요한 이유

• 기존 Figma의 주요 방식은 베지어 애니메이션이었다.
• 베지어 곡선은 시작과 종료 시점의 움직임을 세밀하게 지정할 수 있지만 다음 문제가 발생할 수 있다.
  • 물체가 갑자기 가속하는 것처럼 보임
  • 이동 방향이 부자연스럽게 바뀜
  • 속도가 아무 이유 없이 증가하는 느낌을 줌
  • 정지 시점이 어색해짐
• 스프링 애니메이션은 이동 경로를 직접 그리는 대신, 물리적 속성을 지정하고 그 결과로 움직임을 계산한다.
• 이를 통해 다음과 같은 자연스러운 효과를 만들 수 있다.
  • 무게감 있는 UI 요소의 움직임
  • 적절한 오버슈트가 있는 팝업
  • 부드럽게 감속하는 화면 전환
  • FigJam의 이모트나 하이파이브처럼 생동감 있는 인터랙션

질량·강성·감쇠로 움직임 정의하기

스프링 애니메이션은 세 가지 주요 변수로 구성된다.

• 질량(Mass, m)

  • 물체가 무거울수록 같은 힘으로 가속하기 어렵다.
  • 뉴턴의 운동 법칙으로 F = m × a로 표현된다.
  • 질량을 높이면 일반적으로 애니메이션이 더 느리고 묵직해진다.

• 강성(Stiffness, k)

  • 스프링이 원래 위치로 돌아가려는 힘의 정도다.
  • 스프링을 많이 당길수록 더 강하게 저항한다.
  • 훅의 법칙은 F = -k × x로 표현된다.
  • 강성이 높으면 목표 위치로 빠르게 복귀하고, 움직임이 더 민첩해진다.

• 감쇠(Damping, b)

  • 마찰처럼 움직임을 줄여 물체가 멈추도록 만드는 저항이다.
  • 속도가 빠를수록 더 큰 저항을 받으며 F = -b × v로 표현된다.
  • 감쇠가 높으면 흔들림과 오버슈트가 줄어들고 더 차분하게 멈춘다.

• 세 변수의 조합에 따라 애니메이션은 부드럽거나, 빠르거나, 튀거나, 느린 형태로 달라진다.

물리 공식에서 코드로

• 스프링 애니메이션은 이미 정립된 물리 공식을 활용하므로, 이론을 코드로 옮기는 과정 자체는 안정적이다.
• Figma는 개발 과정에서 WebKit SpringSolver를 활용했다.
• 이 솔버에 질량, 강성, 감쇠 값을 입력하면 특정 시간의 위치 값 x를 계산할 수 있다.
• 결과적으로 시간에 따른 위치를 구해 UI 요소를 애니메이션할 수 있다.

물리 매개변수와 디자이너의 언어 사이의 간극

• 질량·강성·감쇠는 정확한 물리 모델이지만, 디자이너가 애니메이션을 조정할 때 사용하는 표현과는 다르다.
• 디자이너는 보통 다음과 같이 생각한다.
  • 더 빠르게
  • 더 느리게
  • 더 탄력 있게
  • 더 많이 튀게
  • 오버슈트를 줄이게
• 예를 들어 애니메이션을 느리게 만들 때 질량을 높일 수 있지만, 강성과 감쇠도 속도에 영향을 주므로 단순히 한 변수만 바꾸면 원하는 결과가 나오지 않을 수 있다.
• 따라서 세 물리 변수 사이의 상호작용을 고려해 조정해야 한다.
• Figma는 디자이너가 물리 공식을 직접 이해하지 않아도 자연스러운 결과를 만들 수 있도록, 세 변수를 한곳에서 조정하는 전용 도구를 개발하려 했다.

실용적인 결론

스프링 애니메이션은 이동 경로를 수작업으로 설계하기보다 물리적 규칙을 적용해 자연스러운 움직임을 얻는 방식이다. 구현 시에는 WebKit SpringSolver 같은 검증된 솔버를 활용하고, 사용자 인터페이스에서는 질량·강성·감쇠 대신 속도·탄성·오버슈트처럼 이해하기 쉬운 추상화를 제공하는 것이 효과적이다.