Spring physics, Apple iOS의 물리 기반 자연스러움

한 줄로

베지에 곡선 대신 실제 용수철 물리를 시뮬레이션한 애니메이션입니다. iOS 특유의 "바운스 느낌"이 이것입니다.

어디서 왔나

CSS 이징 곡선은 미리 정의된 곡선을 따릅니다. 시작점, 끝점, 시간이 정해지면 정확히 그 경로를 따라갑니다.

스프링 물리는 다릅니다. 실제 용수철의 물리 법칙을 시뮬레이션합니다. 핵심 파라미터는 다음과 같습니다.

stiffness (강성): 용수철의 빳빳함. 높을수록 빠르게 도달합니다.

damping (감쇠): 진동의 제동. 낮을수록 더 흔들립니다.

mass (질량): 무게. 높을수록 느리고 부드럽습니다.

이 3가지 변수로 만들어지는 동작은 베지에 곡선보다 훨씬 더 자연스럽습니다. 사용자가 미세하게 다른 강도로 동작을 시작하면 끝나는 시점도 미세하게 달라집니다.

Apple의 도입

iPhone 첫 출시(2007)부터 iOS의 핵심 애니메이션은 스프링 기반이었습니다. 풀투리프레시의 바운스, 알림 패널 펼침, 앱 전환, 모두 스프링입니다.

Apple은 이걸 "self-correcting motion"이라 부릅니다. 사용자가 빠르게 스크롤하면 시스템이 그 가속도에 맞춰 부드럽게 멈춥니다. 미리 정의된 곡선으로는 흉내내기 어렵습니다.

도구

웹/React에서 스프링 애니메이션을 구현하는 라이브러리입니다.

React Spring: 가장 유명한 React 스프링 라이브러리입니다.

Framer Motion: spring이 기본 옵션입니다.

Reanimated (React Native): iOS 스프링을 직접 구현합니다.

<motion.div animate={{ x: 100 }} transition={{ type: 'spring', stiffness: 200, damping: 20 }} />

CSS의 한계

CSS에는 표준 스프링 함수가 아직 없습니다 (2024년 기준). 다만 Chrome이 실험적으로 linear() 함수로 임의 곡선을 정의할 수 있게 했고, 그것으로 스프링을 흉내낼 수 있습니다.

바이브 메이커가 챙길 한 가지

iOS 느낌을 웹에서 흉내내고 싶다면 Framer Motion이 가장 쉬운 길입니다. 한 줄로 스프링 적용이 가능합니다. 단, 모든 동작을 스프링으로 만들 필요는 없습니다. 페이드 같은 단순 동작은 일반 이징이 더 깔끔합니다.

관련

Easing curves · Disney 12 principles · Pull to refresh