애니메이션의 자연스러움은 ease에서 나온다Easing Functions: The Difference Between Cheap and Polished Animation
linear가 어색하게 느껴지는 이유와 ease-in/out의 사용처, 커스텀 큐빅 베지어 활용법을 설명합니다.What easing functions do, why linear animation feels robotic, and which curves to use for entrances, exits, and emphasis.
- 이징 함수별 사용처
- 지속 시간: 200~500ms의 과학
- 한 단계 더: 커스텀 베지어
- 코드 스니펫: 이징 토큰 세트
- 스프링 모션이라는 다음 단계
- The four essential curves
- Custom cubic-bezier for brand feel
- Duration guidelines
현실 세계에서 등속으로 움직이는 물체는 거의 없습니다. 손을 뻗을 때도, 자동차가 출발할 때도 가속과 감속이 있습니다. 그래서 처음부터 끝까지 같은 속도로 움직이는 linear 애니메이션은 기계적이고 어색하게 느껴집니다. UI 모션의 자연스러움은 속도의 변화, 즉 이징(easing)에서 나옵니다.
이징 함수별 사용처
ease-out(빠르게 시작해 천천히 멈춤)은 화면에 등장하는 요소에 씁니다. 모달, 드롭다운, 토스트가 빠르게 나타나 부드럽게 안착하면 반응이 즉각적으로 느껴집니다. ease-in(천천히 시작해 빠르게 사라짐)은 퇴장에 어울립니다. ease-in-out은 시작과 끝이 모두 부드러워, 화면 안에서 위치나 크기가 변하는 요소(탭 전환, 패널 확장)에 적합합니다. 요약하면 등장은 out, 퇴장은 in, 이동은 in-out입니다.
지속 시간: 200~500ms의 과학
이징만큼 중요한 것이 시간입니다. 100ms 이하는 눈이 변화를 추적하지 못해 깜빡임으로 느껴지고, 500ms를 넘으면 사용자가 기다린다고 인식합니다. 버튼 호버나 토글 같은 미세한 피드백은 150~200ms, 모달·패널 등장은 250~350ms, 화면 전환은 300~500ms가 통용되는 범위입니다. 같은 동작이라도 이동 거리가 길거나 요소가 크면 시간을 조금 늘려 주는 것이 자연스럽습니다.
한 단계 더: 커스텀 베지어
CSS 기본 키워드가 밋밋하게 느껴지면 cubic-bezier()로 곡선을 직접 설계할 수 있습니다. 머티리얼 디자인의 표준 곡선 cubic-bezier(0.4, 0, 0.2, 1)은 기본 ease보다 또렷한 가감속을 보여 많은 디자인 시스템이 차용합니다. 프로젝트에 이징 토큰(예: --ease-standard, --ease-enter, --ease-exit)을 정의해 두면 모션의 일관성이 시스템 차원에서 유지됩니다.
마지막 원칙은 절제입니다. 모든 요소가 움직이면 아무 움직임도 의미를 갖지 못하고, prefers-reduced-motion을 설정한 사용자에게는 모션을 줄여서 제공해야 합니다. 모션은 양념이지 주재료가 아닙니다.
코드 스니펫: 이징 토큰 세트
프로젝트에 바로 넣을 수 있는 이징 토큰 예시입니다. --ease-standard: cubic-bezier(0.4, 0, 0.2, 1) — 화면 내 이동·크기 변화의 기본값. --ease-enter: cubic-bezier(0, 0, 0.2, 1) — 등장(감속 중심). --ease-exit: cubic-bezier(0.4, 0, 1, 1) — 퇴장(가속 중심). --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms. 모든 transition에 이 토큰만 쓰도록 규칙을 정하면 제품 전체의 모션이 한 사람의 손길처럼 통일됩니다.
스프링 모션이라는 다음 단계
베지어 곡선은 시간이 고정된 애니메이션이지만, 최신 모바일 OS의 자연스러운 모션은 대부분 물리 기반 스프링입니다. 스프링 모션은 드래그하던 속도를 이어받아 감속하는 등 사용자 입력과 연속적으로 연결되는 것이 강점입니다. CSS의 linear() 함수나 Framer Motion, React Spring 같은 라이브러리로 구현할 수 있습니다. 모든 곳에 필요하진 않지만, 드래그·스와이프가 핵심인 인터랙션(바텀 시트, 카드 스와이프)에서는 스프링이 베지어보다 한 수 위의 감촉을 만듭니다.
Two animations with identical duration and distance can feel completely different based on their easing function — the curve describing how speed changes over time. Linear easing (constant speed throughout) looks mechanical and unnatural; the right curve makes motion feel purposeful and physical.
The four essential curves
ease-in: starts slow, ends fast — appropriate for exits (elements leaving the screen should accelerate away, as if moving off-camera). ease-out: starts fast, ends slow — the natural deceleration of objects entering a space; use for entrances and appearing elements. ease-in-out: starts and ends slow, peaks in the middle — best for elements that move within the screen (like a drawer sliding open). linear: reserved for looping animations like spinners, where consistent speed conveys continuity.
Custom cubic-bezier for brand feel
CSS cubic-bezier(x1,y1,x2,y2) lets you define any curve. A common "snappy" entrance: cubic-bezier(0.34, 1.56, 0.64, 1) — starts fast, overshoots slightly, settles back. This slight overshoot (overshoot easing) mimics spring physics and adds life. cubic-bezier.com is the fastest way to explore and preview custom curves in the browser.
Duration guidelines
Element entrances: 200–300ms. Exits: 150–200ms (exits should be faster — the user has already decided to move on). Modal/sheet appearance: 300–400ms. Microinteractions (hover state color, checkbox check): 80–150ms. Exceeding 400ms for most transitions makes the UI feel slow, not polished.
Duration sense is built through comparison, not memorization. Build the same toggle at 100ms, 250ms, and 600ms and tap each. When numbers become sensations, motion design shifts from guesswork to judgment.