Modal motionDistance.modalEnter
창
아래에서 16px 올라오며 나타나고, 퇴장할 때는 8px 내려가며 사라집니다. 300ms · motion.easeOut
FOUNDATIONS
모션·애니메이션
상태 변화와 공간 관계를 전달하는 모션의 기준과 실제 동작 예제입니다.
사용 원칙
모션은 선택의 변화, 패널의 위치, 작업의 진행을 이해하는 데 사용합니다. 사용자가 달라진 상태를 알아볼 수 있는 만큼만 움직이세요.
- 조작에 바로 반응합니다. 결과와 선택 상태는 즉시 바꾸고, 전환 중에도 다음 조작을 받습니다.
- 움직임에 이유를 둡니다. 등장·퇴장은 공간 관계를, 반복 모션은 진행 중인 작업을 표현합니다.
- 결과를 함께 설명합니다. 완료·오류·로딩은 문구와 상태로도 전달합니다.
현재 브라우저의 동작 줄이기: 확인 중예제에 바로 반영됩니다.달라지는 점
속도 곡선·이동 거리
등장과 선택 변화는 표준 감속으로 반응하고, 화면 가장자리에서 먼 거리를 이동하는 패널만 강조 감속을 씁니다. 퇴장 이동은 가속하고, 투명도는 일정한 속도로 먼저 사라집니다.
motion.layerEnter 300ms 동안 이동합니다. 눈금은 거리의 90% 지점이고, 그 옆 시간은 곡선마다 그 지점에 닿는 시점입니다.가로축은 시간, 세로축은 이동한 거리입니다. 곡선이 일찍 위로 솟을수록 빨리 도착한 것처럼 보입니다.
일정 속도
motion.easeLinear비교 기준선 · 퇴장 페이드표준 감속
motion.easeOut선택선·펼침·Modal·팝업 등장강조 감속
motion.easeEmphasizedDrawer처럼 먼 거리를 이동하는 등장가속
motion.easeIn퇴장 이동동작 줄이기이동 없이 결과 상태로 바뀝니다.
모든 견본이 시작 상태입니다.
숫자 변화는 motion.number 600ms 감속 보간을 사용합니다. Spinner는 일정한 속도로 회전하고 Skeleton은 강조가 왕복합니다.
이동 거리 선택
작은 팝업은 짧게, 화면 가장자리의 패널은 패널 크기만큼 이동합니다. 선택선·펼침·알림 재배치는 실제 위치와 크기의 차이를 따라갑니다.
Modal
×3 확대
Popup motionDistance.popup
팝업
트리거 쪽에서 도착 방향으로 이동합니다. 위·좌·우 배치도 같은 거리입니다. 200ms · motion.easeOut
Toast motionDistance.toast
알림
위에서 내려오며 나타나고, 퇴장은 같은 방향으로 되돌아가며 사라집니다. 200ms · motion.easeOut
Drawer 패널 크기
패널
먼 거리를 이동하므로 강조 감속을 씁니다. 상하 Drawer는 높이만큼 이동합니다. 300ms · motion.easeEmphasized
위치와 크기를 재는 전환
Tabs: 선택 항목의 위치와 폭Accordion: 펼쳐지는 콘텐츠 높이Toast: 남은 알림의 새 위치
이 전환들은 고정 픽셀 거리 대신 실제 크기와 위치 차이를 따라갑니다.
거리 견본은 Web의 CSS px 기준입니다. Native는 같은 수치를 논리 단위로 사용합니다.
전환 시간
작은 상태 변화는 빠르게 전달하고, 새 영역의 등장은 위치를 알아볼 수 있게 표현합니다. 디자인과 구현은 아래 토큰 이름으로 같은 전환을 가리킵니다.
| 역할 | 토큰 | 시간 | 곡선 | 90% 도달 |
|---|---|---|---|---|
| 상태 피드백 Tabs | motion.controlmotion.indicatormotion.collapse | 200ms | motion.easeOut | 108ms |
| 팝업 등장 | motion.popupEntermotion.toastEnter | 200ms | motion.easeOut | 108ms |
| 창 등장 Modal | motion.layerEnter | 300ms | motion.easeOut | 162ms |
| 가장자리 패널 등장 Drawer | motion.layerEnter | 300ms | motion.easeEmphasized | 110ms |
| 스크림 등장 | motion.backdrop | 200ms | motion.easeOut | — |
| 툴팁 등장 | motion.tooltipEnter | 100ms | motion.easeOut | — |
| 창·패널 퇴장 이동 | motion.layerExit | 200ms | motion.easeIn | 186ms |
| 팝업·알림 퇴장 이동 | motion.popupExitmotion.toastExit | 150ms | motion.easeIn | 139ms |
| 스크림 퇴장 페이드 | motion.backdropExit | 150ms | motion.easeLinear | — |
| 팝업·툴팁 퇴장 페이드 | motion.fadeExitmotion.tooltipExit | 100ms | motion.easeLinear | — |
| 숫자 변화 AnimatedNumber | motion.number | 600ms | 감속 보간 | — |
| 진행률 변화 Progress | motion.progress | 300ms | motion.easeOut | 162ms |
| 가격 변동 글자색 PriceCell | motion.priceFlash | 800ms | motion.easeOut | — |
| 가격 변동 배경 | motion.priceBackground | 1000ms | motion.easeOut | — |
| 반복 회전 Spinner | motion.spin | 1000ms | 일정 속도, 작업 중에만 | — |
| 반복 강조 Skeleton | motion.shimmer | 1500ms | 왕복, 작업 중에만 | — |
ms는 1/1,000초입니다. 90% 도달은 이동 거리의 90%가 보이는 시점으로, 사용자가 체감하는 전환 길이에 가깝습니다. 퇴장 페이드는 이동보다 먼저 끝나 사라지는 순간이 끊겨 보이지 않습니다.
실제 동작 예제
살펴볼 동작을 선택하고 아래에서 직접 조작해 보세요. 예제마다 표시한 토큰은 앞의 전환 시간 표와 같은 이름입니다. 전환 도중 다시 조작했을 때 이어지는 움직임도 확인할 수 있습니다.
선택선
펼침
모달
패널
알림
숫자
문서 플랫폼을 확인하는 중…
예제 실행 환경 안내
선택한 예제는 바로 조작할 수 있습니다. 모션은 직접 조작할 때 시작하며, 레이어와 알림은 시연 영역 안에서 열립니다.
다른 예제 선택·초기화·플랫폼 전환은 열린 레이어와 알림, 진행 중인 전환을 정리합니다. 각 예제는 처음 상태에서 시작합니다.
Vue 2·React는 브라우저에서 실행합니다. React Native 선택은 Native Web 미리보기이며, iOS·Android 기기 검증은 별도로 필요합니다.
연속 조작
전환 도중 다시 조작하면 현재 위치나 값에서 새 목표로 이어집니다. 이전 움직임이 끝날 때까지 기다리게 하지 않습니다.
motion.indicator 200ms · motion.easeOut
- 실제 동작 예제에서 Tabs를 빠르게 왕복하거나 Accordion을 펼치는 중 다시 눌러 보세요.
- 숫자가 증가하는 중 더 작은 값을 선택하면 현재 표시값에서 방향이 바뀝니다.
- Modal·Drawer를 닫으면 이전 실행 버튼으로 포커스가 돌아옵니다. 닫힘 자체가 작업 성공을 뜻하지는 않습니다.
동작 줄이기
움직임을 줄여도 선택 결과와 작업 상태는 동일하게 전달합니다. 시스템 설정은 열려 있는 예제와 곡선 비교에도 바로 반영됩니다.
- 일반 동작
- 위치·높이·숫자가 현재 상태에서 목표로 이어집니다. 진행 중인 작업은 반복 모션으로 표시합니다.
- 동작 줄이기
- 위치·높이·숫자는 최종 상태를 바로 보여줍니다. 반복 모션은 줄이거나 멈추고, 로딩 문구와 상태는 유지합니다.
Toast의 남은 알림도 동작 줄이기를 켜면 즉시 배치합니다. 설정을 다시 꺼도 끝난 전환을 재생하지 않으며, 다음 조작부터 움직임이 적용됩니다.