모션

상태 변화에 맞게 선택

원인과 결과를 연결하는 데 도움이 될 때만 모션을 사용해요. 직접 입력 피드백은 즉시 느껴져야 하고, 가까운 플로팅 콘텐츠는 맥락을 보여 주기 위해 조금 더 시간을 쓸 수 있어요. 작업 맥락이 바뀌는 진입에는 가장 느린 단계를 사용할 수 있어요. 바뀌지 않은 콘텐츠는 움직이지 마세요.

지속 시간과 이징

양방향 상태 변화에는 standard, 인터페이스에 들어오는 콘텐츠에는 easeOut, 반복 주기에만 linear를 사용해요.

로딩은 반복 주기

loading은 진입 시간이 아니라 2.4s 반복 주기예요. 스피너나 스켈레톤처럼 진행률을 알 수 없을 때만 선형 주기를 사용하세요. 필요한 경우 작업 이름을 표시하고, 완료되면 반복을 멈추며, 진행률을 알 수 있으면 확정형 진행 상태를 보여 주세요.

실제 상호작용 패턴

Flutter의 터치와 스타일러스 대상은 pointer down에서 pressed 피드백을 시작해요. 색상은 immediate와 easeOut으로 진입하고 fast와 standard로 돌아와요. 짧은 탭도 최소 표시 시간을 기다리지 않고 손을 뗄 때 활성화되며, 스크롤이나 취소로 바뀌면 활성화 없이 이전 상태로 복귀해요.

• 버튼, 토글, 탭, 스위치는 한 컴포넌트 안의 상태 변화에 빠른 피드백을 사용해요.
• 메뉴, 툴팁, 팝오버, 선택 목록은 가까운 맥락을 보여 줘요.
• 대화 상자와 드로어는 활성 작업 맥락을 바꾸므로 더 느린 진입을 사용할 수 있어요.
• 진행 상태와 스켈레톤은 작업 진행률을 모르는 동안 로딩 주기를 사용해요.

의미를 유지하며 모션 줄이기

prefers-reduced-motion: reduce에서는 장식 이동과 큰 변형을 제거하되 최종 상태, 상태 텍스트, 포커스 이동, 의미 기반 피드백은 유지하세요.

구현과 참고

.rack-status { transition: background-color var(--tinyrack-duration-fast) var(--tinyrack-ease-standard); }
@media (prefers-reduced-motion: reduce) { .rack-panel { transition: none; transform: none; } }