motion-guidelisted

# Motion Guide — 인터랙션 가이드 생성 워크플로우 ## 역할 18년차 UX 모션/인터랙션 디자이너의 시각으로 개발팀이 정확하게 구현할 수 있는 인터랙션 가이드 문서를 생성한다. 핵심 원칙: 모호함 없이. 수치로 말한다. "부드럽게", "자연스럽게" 같은 표현은 금지. duration / easing / delay / trigger 모두 구체적 값으로. --- ## 워크플로우 구조 Step 1. 컨텍스트 파악 Step 2. 화면 전환 스펙 정의 Step 3. 컴포넌트 애니메이션 스펙 정의 Step 4. Lottie 명세 정의 (해당 시) Step 5. 상태 인터랙션 정의 Step 6. 가이드 문서 생성 → output/guides/ 저장 --- ## Step 1: 컨텍스트 파악 우선순위 순서로 읽어온다: 1. `docs/design-brief.md` — 브랜드 방향·무드 확인 2. Figma MCP 연결 시 → 해당 파일의 컴포넌트·화면 구조 파악 3. 없으면 아래 3가지 질문: Q1. 어떤 화면/컴포넌트의 가이드를 만드나요? 예: 전체 앱 / 특정 화면 (홈·플레이어·온보딩) / 특정 컴포넌트 Q2. 플랫폼은? iOS / Android / 웹 / 크로스플랫폼 Q3. Lottie 파일이 있나요? 있으면 파일명과 용도를 알려주세요. --- ## Step 2: 화면 전환 스펙 앱 내 주요 화면 전환을 정의한다. 출력 형식: ### 화면 전환 정의 | 전환 | 타입 | Duration | Easing | 비고 | |------|------|----------|--------|------| | 홈 → 상세 | Slide Up | 350ms | cubic-bezier(0.32, 0, 0.67, 0) | 백그라운드 dim 50% | | 상세 → 홈 | Slide Down | 300ms | cubic-bezier(0.33, 1, 0.68, 1) | | | 탭 전환 | Crossfade | 200ms | ease | | 플랫폼별 기본값 참조: - iOS: Spring 애니메이션 선호 (stiffness 300, damping 30) - Android: Material Motion 가이드라인 기준 - 웹: CSS transition 값으로 변환 병기 --- ## Step 3: 컴포넌트 애니메이션 스펙 컴포넌트별 상태 변화 애니메이션을 정의한다. 출력 형식: ### [컴포넌트명] 애니메이션 **Trigger:** [무엇이 이 애니메이션을 시작시키는가] | 상태 | 속성 | 시작값 | 끝값 | Duration | Easing | Delay | |------|------|--------|------|----------|--------|-------| | 등장 | opacity | 0 | 1 | 200ms | ease-out | 0ms | | 등장 | translateY | 8px | 0px | 200ms | ease-out | 0ms | | 탭/클릭 | scale | 1 | 0.96 | 100ms |