스프링 애니메이션: 자연스러운 UI 모션의 물리학
스프링 애니메이션이 UI 디자인에서 어떻게 작동하는지 알아보세요. 강성, 감쇠, 질량 및 속도를 이해합니다. React 및 SwiftUI에 대한 자연 물리학 기반 애니메이션을 구축하세요.
핵심 포인트
스프링 애니메이션은 질량-스프링-댐퍼 시스템의 물리적 동작을 사용하여 UI 동작을 모델링합니다. 여기서 구성 요소의 움직임은 강성(휴면 상태로 끌어당기는 정도), 감쇠(에너지를 잃는 속도) 및 질량(전달하는 관성의 정도)에 의해 제어됩니다. 지속 시간 기반 애니메이션과 달리 스프링은 사용자 속도에 자동으로 반응하며 시각적 중단 없이 언제든지 중단될 수 있습니다.
스프링이 지속 곡선보다 더 자연스럽게 느껴지는 이유
물리적 세계에는 "ease-in-out" 또는 "cubic-bezier(0.4, 0, 0.2, 1)"과 같은 개념이 없습니다. 물리적인 물체는 힘으로 인해 가속되고 마찰로 인해 감속합니다. 서랍이 미끄러져 열리면 추진력이 생깁니다. 손을 놓으면 마찰로 인해 정지됩니다. 스프링 물리학은 소프트웨어에서 이러한 물리적 현실을 복제하므로 iOS UIKit, Android Motion Compose 및 ExodeUI는 모두 스프링 우선 애니메이션 시스템입니다.
스프링 매개변수 설명
각 매개변수를 이해하면 원하는 물리적인 느낌을 정확히 디자인할 수 있습니다.
강성(긴장)
스프링이 정지 값을 향해 얼마나 강하게 당기는가입니다. 높은 강성(600+)은 버튼 누름 피드백과 같은 빠르고 반응성이 뛰어난 UI를 생성합니다. 낮은 강성(100-200)은 페이지 전환이나 주변 부동 요소에 적합한 느리고 부동적인 동작을 생성합니다.
감쇠(마찰)
스프링이 사이클당 손실하는 에너지의 양입니다. 임계 감쇠 시 스프링은 진동하지 않고 정지 상태에 도달합니다. 감쇠가 부족한 스프링(낮은 마찰)은 오버슈트되어 튕겨 나옵니다. 감쇠 비율 / (2 × sqrt(강성 × 질량))은 과소 감쇠, 임계 감쇠 또는 과다 감쇠 여부를 결정합니다.
대량의
애니메이션 요소가 전달하는 관성의 정도입니다. 질량이 높을수록 애니메이션이 더 무거워지고 방향을 변경하는 데 시간이 더 오래 걸립니다. 대부분의 UI 애니메이션은 질량을 1.0으로 유지하고 강성과 감쇠를 통해 느낌을 제어합니다.
초기 속도
사용자가 요소를 스와이프하거나 던지는 경우 해당 동작 속도로 스프링이 초기화되어 동작과 스프링 정착 사이의 원활한 연속성을 생성할 수 있습니다.
UI 구성 요소를 위한 실용적인 스프링 프리셋
이러한 사전 설정은 가장 일반적인 UI 상호 작용 패턴을 다룹니다.
- 버튼 탭: 강성 500, 감쇠 30 — 즉각적이고, 빠르고, 바운스가 최소화됩니다.
- 카드 확장: 강성 280, 감쇠 24, 질량 1.2 - 부드럽고 가중치가 부여된 확장
- 서랍/시트: 강성 340, 감쇠 28 — 결정적, 약간의 안정감 있음
- 탄력 알림: 강성 400, 감쇠 18 — 유쾌한 오버슛
- 페이지 전환: 강성 220, 감쇠 22, 질량 1.4 — 영화적, 가중치 있음
프로덕션 구현 예시
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}