애니메이션이 어색한 이유 — 이징(easing) 곡선 입문
같은 0.3초짜리 애니메이션인데 어떤 것은 매끄럽고 어떤 것은 묘하게 기계 같습니다. 차이는 거리도 시간도 아닌 속도의 변화 — 이징(easing)입니다. 움직임이 어떻게 가속하고 감속하는지를 정하는 이 곡선 하나가 UI의 인상을 좌우합니다.
이징이란 — 속도의 곡선
- 애니메이션은 "무엇이 → 어디까지 → 몇 초 동안"에 더해 "어떤 속도 변화로"가 필요합니다. 그 마지막 조각이 이징입니다.
- 현실의 물체는 등속으로 움직이지 않습니다 — 밀면 가속하고, 멈출 때 감속합니다. 눈은 이 패턴에 익숙해서, 등속(linear) 움직임을 "기계 같다"고 느낍니다.
- 이징은 가로축 = 시간, 세로축 = 진행도인 그래프로 표현됩니다. 직선이면 등속, 휘어 있으면 가속·감속이 있는 것입니다.
기본 키워드 다섯 개
| 키워드 | 속도 패턴 | 어울리는 곳 |
|---|---|---|
linear | 처음부터 끝까지 등속 | 로딩 스피너 등 무한 반복 움직임 |
ease (기본값) | 살짝 가속 후 길게 감속 | 무난한 범용 |
ease-out | 빠르게 시작 → 부드럽게 멈춤 | 들어오는 것 — 모달·토스트·드롭다운 등장 |
ease-in | 천천히 시작 → 가속하며 끝 | 나가는 것 — 닫히고 사라지는 요소 |
ease-in-out | 양끝이 부드러움 | 제자리 변화 — 색·크기·위치 전환 |
ease-out, 퇴장은 ease-in. 클릭 직후에는 즉각 반응(빠른 시작)이 좋고, 사라지는 끝은 지켜볼 필요가 없기 때문입니다.cubic-bezier 네 숫자의 의미
키워드로 부족할 때 cubic-bezier(x1, y1, x2, y2)로 곡선을 직접 정의합니다.
- 첫 제어점
(x1, y1)은 시작 부분의 기울기 = 초반 속도를 정합니다. - 둘째 제어점
(x2, y2)은 끝부분의 기울기 = 마무리 속도를 정합니다. y가 1을 넘으면 목표를 지나쳤다가 돌아오는 오버슈트(통통 튀는 느낌)가 됩니다 — 예:cubic-bezier(.34, 1.56, .64, 1).- 숫자를 외울 필요는 없습니다 — 곡선을 직접 드래그하며 미리보기로 고르는 것이 정석입니다.
바로 쓰는 레시피
- 스냅 들어오기 —
cubic-bezier(.2, .7, .2, 1): 빠르게 출발해 깔끔하게 안착. 카드·패널 등장에. - 통통 튀는 등장 —
cubic-bezier(.34, 1.56, .64, 1): 살짝 지나쳤다 돌아오는 탄성. 알림 뱃지·버튼 강조에. - 묵직한 감속 —
cubic-bezier(.05, .7, .1, 1): 길게 미끄러지며 멈춤. 큰 시트·서랍 메뉴에. - 지속 시간 짝짓기 — 곡선만큼 중요한 것이 시간: 작은 요소 150~200ms, 패널·모달 250~350ms. 0.5초가 넘으면 대부분 "느리다"고 느낍니다.
- 접근성 메모 — 움직임에 민감한 사용자를 위해
prefers-reduced-motion미디어쿼리로 애니메이션을 줄이는 배려까지 하면 완성입니다.
현실의 물체는 일정한 속도로 움직이지 않기 때문입니다. 손으로 미는 물건도, 떨어지는 공도 가속과 감속이 있습니다. linear는 시작부터 끝까지 완전히 같은 속도라서 눈이 '기계적인 움직임'으로 인식합니다. 회전하는 로딩 스피너처럼 끝없이 반복되는 움직임에는 linear가 오히려 맞고, 시작과 끝이 있는 움직임에는 가속·감속이 있는 곡선이 자연스럽습니다.
화면에 들어오는 요소는 ease-out(빠르게 시작해 부드럽게 멈춤), 나가는 요소는 ease-in(천천히 시작해 가속하며 사라짐)이 기본 공식입니다. 사용자가 클릭한 직후에는 즉각 반응하는 느낌이 중요하므로 빠르게 시작하는 ease-out이 잘 맞고, 사라지는 것은 끝을 지켜볼 필요가 없으므로 가속하며 나가도 어색하지 않습니다. 제자리에서 변하는 것(색·크기)은 ease-in-out이 무난합니다.
cubic-bezier(x1, y1, x2, y2)는 속도 곡선을 휘게 만드는 두 제어점의 좌표입니다. 가로축이 시간, 세로축이 진행도이고, 첫 제어점(x1,y1)이 시작 부분의 기울기(초반 속도), 둘째 제어점(x2,y2)이 끝부분의 기울기(마무리 속도)를 정합니다. y값이 1을 넘으면 목표를 지나쳤다가 돌아오는 오버슈트(통통 튀는 느낌)가 됩니다. 숫자를 외울 필요는 없고, 곡선을 드래그하면서 미리보기로 고르면 됩니다.