motion은(는) 무엇을 하나요?
개요
Motion은 위계와 피드백을 명확히 합니다 — 장식이 아닙니다. 패밀리/패턴을 이름으로 선택한 다음 수동으로 작성하세요 (CSS / Motion / GSAP). 서드파티 레지스트리 설치는 기본값이 아닙니다.
전체 카탈로그: references/motion-families.md (12개 패밀리 · 144개 패턴).
사용 시점
- 마이크로 인터랙션 (호버, 포커스, 프레스)
- 진입/퇴장 또는 레이아웃 전환 (섹션 교체, 드로어, 모달)
- 스크롤 연동, 텍스트, 캐러셀, 히어로 또는 기타 명명된 패턴
- 기본값 (가벼움): 앱 셸 / 대시보드 / 다중 섹션
/ui— 섹션 페이드 + 드로어 슬라이드 + 부드러운 스크롤 (사용자가 금지하지 않는 한)
생략해야 하는 경우
- 정적 토큰/색상만 조정하는 경우
- 사용자가 애니메이션 없음 / "tanpa animasi"를 요청한 경우
- 기존 모션 검사/설명 →
motion-inspection
축소 모션 사용자에게도 상태 변경과 사용 가능한 즉시/불투명도 폴백이 여전히 필요합니다. 공간적/장식적 효과는 건너뛰되, 상호작용 계약은 건너뛰지 마십시오.
레인
| 레인 | 용도 | 기본값 |
|---|---|---|
| 제품 / 셸 | 앱 크롬, 설정, 대시보드 | fade-up / page-crossfade, drawer-slide, press-scale, lift-hover |
| 마케팅 / 표현적 | 랜딩, 캠페인 | 카탈로그에서 1–2개 패밀리 + 1–2개 패턴 선택 — 뷰포트당 2–3개 모션 할당 |
패밀리 용도 (빠른 참조)
| 패밀리 | 용도 | 사용하지 않을 경우 |
|---|---|---|
| 마이크로 인터랙션 | 토글, 토스트, 좋아요, 진행률 | 히어로 / 스크롤 스토리 |
| 호버 및 인터랙션 | 리프트, 프레스, 마그네틱, 틸트 | 페이지 진입 |
| 스크롤 기반 | 고정(sticky), 가로, 스크롤 확대/축소 | 버튼 전용 마이크로 |
| 리빌 및 와이프 | 진입 페이드, 분할, 마스크, 드로어 | 유일한 모션인 무한 루프 |
| 텍스트 모션 | 단어 리빌, 타자기, 마키 유형 | 폼 / 밀집된 설정 |
| 캐러셀 및 연속 흐름 | 마키, 필름스트립, 스냅 | 단일 CTA 집중 페이지 |
| 그리드 모션 | 벤토, 플립 그리드, 리플로우 | 한 버튼 크롬 |
| 스포트라이트 및 포커스 | 중앙 무대, 형제 흐리게 처리 | 전체 페이지 노이즈 |
| 스택 및 분산 | 덱, 팬, 스와이프 덱 | 관리 테이블 |
| 히어로 섹션 모션 | 패럴랙스 / 플로팅 디바이스 / 오로라 | 앱 셸 (최대 1개 서명) |
| 모프 및 변환 | 공유 요소, FAB 모프 | 모든 내비게이션 |
| 3D 및 원근 | 오빗, 커버플로우 | 기본 제품 UI |
워크플로
- 레인 — 제품 셸 vs 마케팅
- 패밀리 — 용도에 맞게 매칭 (최대 2개 패밀리)
- 패턴 —
motion-families.md에서 1–2개 이름 지정; 정의 및 수동 작성 힌트 읽기 - 계약 및 구현 — 트리거/상태 식별, 속성, 중단, 입력 대안 및 축소 모션 종료점 기록 (
motion.md).transform/opacity선호; 공개 또는 모프에 필요한 경우 제한된 측정된 크기/레이아웃 사용. - 예산 — 뷰포트당 ≤2–3개의 의도적 모션
- 접근성 —
prefers-reduced-motion: reduce(불투명도/즉시 폴백); 모션 단독으로 의미 전달 금지 - 보고 — 규칙:
Motion: light shell | families: Hover+Reveal | patterns: lift-hover, fade-up; 소스/상태 확인과 실제 대상 재생 및 성능 측정을 구분.
셸 기본값 (제품)
- 섹션 진입:
fade-up~250–300ms - 모바일 드로어:
drawer-slide+ 배경 페이드 - 컨트롤:
press-scale(0.96) scroll-behavior: smooth(축소 모션에서 비활성화)
부드러운 스크롤은 들어오는 데이터를 자동 스크롤할 권한이 아닙니다. references/motion.md의 제품 상태 레시피가 차트 업데이트, 공개 및 스트림 추적을 규율합니다. 위로 스크롤하는 사용자는 제어권을 유지합니다.
엄격한 규칙
- 패턴 이름에서 수동으로 작성 — 레지스트리 설치는 기본값이 아닙니다
- 하나의 뷰포트에 Hero + 3D + Text + Spotlight + Carousel을 쌓지 마십시오
- 마케팅: 최대 하나의 Hero 서명 패턴
체크리스트
- 레인 선택됨 (제품 vs 마케팅)
- 패밀리 용도가 요청과 일치함 (≤2개 패밀리)
- 명명된 패턴 나열됨 (뷰포트에서 ≤2–3개 모션)
- 정의에서 수동으로 작성됨 (레지스트리를 답변으로 사용하지 않음)
-
prefers-reduced-motion처리됨 - 빠른 역방향, 중첩 모션, 포커스/키보드 및 제스처 취소가 관련된 경우 확인됨; 최종 데이터/상태는 정확하게 유지됨
- 레이아웃 쓰래싱 / 장식성 스팸 없음
- 규칙 Motion 라인이 채워짐
깊이
- 용어집:
references/motion-families.md - 레시피:
references/motion.md - 마이크로 크래프트 중복:
polish - 데모 셸: 로컬
test/샌드박스 (선택 사항; 출시되지 않음)