Motion
매크로 · 마이크로 모션, 이징 · 지속 시간, 반복, 키프레임, 모션 줄이기
모션은 인터페이스의 표현력을 높이고 쓰기 쉽게 돕는다. 무엇이 어디서 나타나고 사라지는지 보여 주고, 사용자의 입력이 닿았음을 알린다.
이 값들은 아직 두 웹 · 앱에 들어가지 않았다. Desk 앱은 따로 정한 값(instant 80ms · 곡선 spring · decel)을 쓰고, Desk 웹은 500 · 600ms 를 직접 적은 곳이 있다. 앱마다 PR 을 따로 내며, 그 전까지 제품 코드가 이 페이지와 다른 게 정상이다.
매크로 · 마이크로 모션
매크로 모션은 페이지 전환 · 모달 · 시트 · 메뉴처럼 화면의 짜임이 크게 바뀌는 움직임이다. 마이크로 모션은 버튼 누름 · 입력칸 포커스 · 스크롤처럼 작은 움직임이다.
둘은 시간으로 가른다 — 마이크로 모션은 motion-duration-d4 이하에서 끝나고, 매크로 모션은 그보다 길다. 사용자의 입력에 대한 반응 가운데 누름은 Feedback 에서 따로 정한다.
이징
움직임의 빠르기가 시간에 따라 어떻게 바뀌는지를 정한다. 자리마다 곡선을 새로 만들지 않고 아래 이름 가운데에서 고른다.
easing
버튼 누름 · 입력칸 포커스처럼 기능적인 마이크로 모션에 쓴다.
enter
다이얼로그 · 시트처럼 나타나는 매크로 모션에 쓴다. 빠르게 들어와 천천히 멈춰, 새로 온 것에 눈이 머문다.
exit
다이얼로그 · 시트처럼 사라지는 매크로 모션에 쓴다. 천천히 떠나다 빠르게 빠져, 떠나는 것을 오래 붙잡지 않는다.
expressive
enter · exit 가운데 특히 강조할 움직임에 쓴다.
| 토큰 | 값 | 쓰는 곳 |
|---|---|---|
motion-ease-easing | cubic-bezier(0.35, 0, 0.35, 1) | 버튼 · 포커스 같은 기능적 마이크로 모션 |
motion-ease-enter | cubic-bezier(0, 0, 0.15, 1) | 다이얼로그 · 시트가 나타날 때 |
motion-ease-exit | cubic-bezier(0.35, 0, 1, 1) | 다이얼로그 · 시트가 사라질 때 |
motion-ease-enter-expressive | cubic-bezier(0.03, 0.4, 0.1, 1) | 특히 강조해야 하는 등장 |
motion-ease-exit-expressive | cubic-bezier(0.35, 0, 0.95, 0.55) | 특히 강조해야 하는 퇴장 |
motion-ease-pressed-scale | cubic-bezier(0, 0, 0.15, 1) | 눌림 축소 |
motion-ease-pressed-scale은 눌림 축소에만 쓴다 — Feedback › Scale.- 반복의 곡선은 컴포넌트가 정한다 — 스켈레톤 반짝임은
motion-ease-easing, Progress Circle 은 그 스펙의 곡선이다.motion-ease-linear는 일정한 속도가 필요한 반복에 남긴다. - 옛
motion-ease-out은 걷는 중이다. 나타나는 모션은motion-ease-enter, 사라지는 모션은motion-ease-exit로 옮긴다.
지속 시간
여섯 단계를 두고, 짧은 쪽은 마이크로 모션, 긴 쪽은 매크로 모션에 쓴다. 사라질 때는 나타날 때보다 짧게 쓴다 — 아래 키프레임 표의 fade-out · scale-out 처럼.
d150msd2100msd3150msd4200msd5250msd6300ms| 토큰 | 값 | 쓰는 곳 |
|---|---|---|
motion-duration-d1 | 50ms | 아주 작은 상태 변화 |
motion-duration-d2 | 100ms | 작은 상태 변화(옛 앱 instant 80ms 는 여기로) |
motion-duration-d3 | 150ms | 마이크로 모션 기본 — 색 전환 · 눌림 |
motion-duration-d4 | 200ms | 마이크로 모션 상한 — 메뉴 · 툴팁 |
motion-duration-d5 | 250ms | 매크로 모션 — 시트 · 서랍 |
motion-duration-d6 | 300ms | 매크로 모션 상한 — 모달 · 페이지 전환 |
motion-duration-color-transition | 150ms | 역할 — 색 전환(= d3) |
motion-duration-pressed-scale | 150ms | 역할 — 눌림 축소(= d3) |
- 색 전환(
motion-duration-color-transition)과 눌림 축소(motion-duration-pressed-scale)는 같은 시간을 쓴다 — 시작과 속도가 같아야 하나의 반응으로 읽힌다. - 옛 이름은 같은 값의 별칭이다 —
motion-duration-fast→d3,base→d4,slow→d6.slower는 걷는 중이다 — 큰 전환도d6안에서 끝낸다.
반복
스켈레톤 반짝임 · 펄스처럼 되풀이하는 움직임이다. 쉬는 틈 없이 되풀이하고, 곡선은 컴포넌트가 정한다 — 스켈레톤 반짝임은 motion-ease-easing, Progress Circle 은 그 스펙의 시간 · 곡선을 쓴다. 모션 줄이기 모드에서는 멈춘다.
| 토큰 | 값 | 주 용도 |
|---|---|---|
motion-duration-loop | 1500ms | 스켈레톤 반짝임 1주기(곡선은 motion-ease-easing — 2026-10-03), pulse 1주기 |
motion-ease-linear | linear | 일정한 속도가 필요한 반복 (ease-out 반복은 끝에 멈춰 어색) — 스켈레톤 · Progress Circle 은 쓰지 않는다(2026-10-03) |
키프레임
자주 쓰는 움직임은 키프레임으로 정해 두고, 위의 지속 시간 · 이징과 짝지어 쓴다. 판을 누르면 권장하는 짝으로 재생한다.
spinloop · linearpulseloop · cubic-bezier(0.4, 0, 0.6, 1)shimmerloop · easingpingloop · cubic-bezier(0, 0, 0.2, 1)단발
| keyframe | 권장 duration | 권장 ease | 주 용도 |
|---|---|---|---|
fade-in | motion-duration-d4 (200ms) | motion-ease-enter | dropdown/popover/toast 등장 |
fade-out | motion-duration-d3 (150ms) | motion-ease-exit | dropdown/popover/toast 사라짐 (등장보다 빠르게) |
slide-in-up | motion-duration-d6 (300ms) | motion-ease-enter | drawer bottom / bottom sheet / Toast bottom |
slide-in-down | motion-duration-d4 (200ms) | motion-ease-enter | dropdown / banner 등장 |
slide-in-left | motion-duration-d6 (300ms) | motion-ease-enter | drawer right 등장 — Side Panel 은 스펙의 motion(2026-10-04) |
slide-in-right | motion-duration-d6 (300ms) | motion-ease-enter | drawer left — Side Panel 은 스펙의 motion(2026-10-04) |
scale-in | motion-duration-d4 (200ms) | motion-ease-enter | modal / dialog / popover (scale(0.96 → 1) + opacity 0 → 1) |
scale-out | motion-duration-d3 (150ms) | motion-ease-exit | modal / dialog / popover dismiss |
bounce-in | motion-duration-d6 (300ms) | cubic-bezier(0.34, 1.56, 0.64, 1) | empty state celebrate, success indicator (over-shoot) |
shake | motion-duration-d6 (300ms) | cubic-bezier(.36,.07,.19,.97) | form validation error, 잘못된 input 강조 |
반복
| keyframe | duration | ease | 주 용도 |
|---|---|---|---|
spin | motion-duration-loop (1500ms) | linear | 새로 고침 아이콘처럼 일정하게 도는 것 — Progress Circle 은 쓰지 않는다(1.2초 · progress-circle.yaml, 2026-10-03) |
pulse | motion-duration-loop (1500ms) | cubic-bezier(0.4, 0, 0.6, 1) | dot indicator, focus 강조 (in-out ease) |
shimmer | motion-duration-loop (1500ms) | motion-ease-easing | 스켈레톤 반짝임 띠(왼쪽 밖 → 오른쪽 밖) — SEED 곡선(2026-10-03) |
ping | motion-duration-loop (1500ms) | cubic-bezier(0, 0, 0.2, 1) | notification dot, attention attractor (scale 1 → 2, opacity 1 → 0) |
쓰는 모양
| 패턴 | shorthand 예시 |
|---|---|
| Toast 등장 | animation: slide-in-up var(--motion-duration-d6) var(--motion-ease-enter) both |
| Modal 등장 | animation: scale-in var(--motion-duration-d4) var(--motion-ease-enter) both |
| Modal dismiss | animation: scale-out var(--motion-duration-d3) var(--motion-ease-exit) both |
| Skeleton 반짝임 | animation: shimmer var(--motion-duration-loop) var(--motion-ease-easing) infinite |
| Progress Circle | 회전 · 호 · 채움 — progress-circle.yaml 의 motion(1.2초 숫자 곡선, 2026-10-03) |
| Notification dot | animation: ping var(--motion-duration-loop) cubic-bezier(0, 0, 0.2, 1) infinite |
| Form error | animation: shake var(--motion-duration-d6) cubic-bezier(.36,.07,.19,.97) |
| 펼치고 접기(아코디언 · Collapsible · 하위 줄 · 나무 · 사이드바 하위) | transition: height var(--motion-duration-d6) var(--motion-ease-easing) + 꺾쇠 회전 같은 시간 — 모션 줄이기면 높이 대신 opacity 150ms(2026-10-10) |
| 숨는 머리 스냅(Scroll Auto Hide) | transition: transform var(--motion-duration-d4) var(--motion-ease-enter) — 스크롤이 끝났을 때만, 스크롤 중은 거리 1:1(2026-10-10) |
모션 줄이기
색의 라이트 · 다크처럼 모션에도 보통 · 줄이기 두 모드를 둔다. 사용자가 기기에서 동작 줄이기를 켜면 줄이기 모드다 — 웹은 prefers-reduced-motion: reduce, 앱은 MediaQuery.disableAnimations 로 안다.
| 무엇 | 보통 | 줄이기 |
|---|---|---|
| 눌림 축소 | 세로 2px | 없음(배율 1) — 색 전환만 남는다 |
| 색 전환 | 150ms | 그대로 |
| 매크로 모션(200ms 초과) | 이동 · 확대 · 미끄러짐 | 150ms 서서히 나타남 · 사라짐 |
| 반복(스켈레톤 · 로딩 원 · 펄스) | 계속 | 멈춘다 — 스켈레톤은 띠 없이 면만, Progress Circle 은 돌지 않는 3/4 호(2026-10-03) |
- 모든 애니메이션을 0 에 가깝게 끄는 전역 규칙은 쓰지 않는다. 서서히 나타남과 색 전환까지 사라져, 무엇이 바뀌었는지 보이지 않는다.
- 위 키프레임 판의 모션 줄이기 모드로 보기 를 켜면 줄이기 모드의 모습을 볼 수 있다.
구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.