Craft Frontend Motion
모션을 단순한 장식이 아닌 제품 상호작용의 일부로 구축하세요. 실제 렌더링 소유자를 추적하고, 가장 적합한 기술을 선택하며, 상태 의미론을 유지하고, 라이브 브라우저에서 결과를 검증합니다.
워크플로
- 구현을 제안하기 전에 대상을 검사합니다.
- 실제 라우트, 컴포넌트, 스타일, 상태 소유자, 이벤트 소유자, 기존 애니메이션 스택을 찾습니다.
- 프로젝트 지침을 읽고 관련 없는 변경 사항을 보존합니다.
- 사용자가 먼저 논의를 요청하는 경우, 승인이 있을 때까지 구체적인 모션 명세로 멈춥니다.
- 모션 계약을 정의합니다.
- 트리거, 시작 및 종료 상태, 지속 시간, easing 또는 spring, 중단 동작, 반복 동작, 레이어링, 축소 모션 결과를 명시합니다.
- 비즈니스 상태와 시각적 피드백을 분리합니다. 제품이 명시적으로 요구하지 않는 한, 삭제 작업, 탐색 또는 양식 제출이 장식적 타임라인의 완료에 의존해서는 안 됩니다.
- 소스 자료를 선택합니다.
python3 scripts/query_catalog.py --need "<효과 설명>" --top 4를 실행합니다.- 기술 선택을 위해
references/motion-routing.md를 읽습니다. - 코드를 복사하거나 의존성을 추가하기 전에 선택한 저장소의 현재 공식 README, 관련 소스, 의존성/API 버전, 라이선스를 검사합니다. 카탈로그 메타데이터를 영구적인 진실이 아닌 날짜가 있는 라우팅 스냅샷으로 취급합니다.
- 채택 모드를 선택합니다.
- 대상 프로젝트에 설치된 애니메이션 스택이 계약을 깔끔하게 충족할 수 있다면 이를 선호합니다.
- 작은 컴포넌트의 코드와 라이선스가 허용하는 경우에만 복사 및 적용합니다. 데모 셸 가정과 사용되지 않는 의존성을 제거합니다.
- 런타임 모델이 복잡성이나 위험을 실질적으로 줄이는 경우 라이브러리를 추가합니다.
- 저장소가 오래되었거나, 프레임워크가 일치하지 않거나, 너무 무거운 경우 패키지 대신 기술을 추출합니다.
- 가장 작은 일관된 모션 시스템을 구현합니다.
- 타이밍과 easing 토큰을 중앙화합니다.
- RAF 루프, 옵저버, 이벤트 핸들러, 캔버스, 타임라인, 텍스처, GPU 리소스를 정리합니다.
- 리마운트, 빠른 반복 입력, 중단, 라우트 변경, 크기 조정, 숨겨진 탭, React Strict Mode를 처리합니다.
- SSR 애플리케이션에서 브라우저 전용 코드를 올바르게 게이팅하고, 실용적인 경우 무거운 시각 엔진을 지연 로드합니다.
references/quality-gates.md로 검증합니다.- 집중된 정적 검사 및 테스트를 실행합니다.
- 실제 런타임을 와이드 데스크탑, 중간/태블릿, 모바일 크기에서 실행합니다.
- 전환 연속성, 최종 지오메트리, 콘솔 오류, 수평 오버플로, 입력 동작, 축소 모션, 현실적인 성능을 확인합니다.
- 결과를 보고합니다.
- 이제 작동하는 것을 먼저 말합니다.
- 선택한 기술 또는 소스 저장소와 그것이 적합했던 이유를 명명합니다.
- 검증된 내용과 남아 있는 제한 사항을 정직하게 진술합니다.
선택 규칙
- 소수의 합성 속성과 단순한 결정론적 상태에는 CSS 전환/키프레임을 사용합니다.
- React 프레즌스, 공유 레이아웃, 제스처, 값, 조정된 컴포넌트 전환에는 Motion을 사용합니다.
- 중단 가능한 물리 효과와 속도 연속성 및 자연스러운 반응이 고정 타임라인보다 중요한 경우 React Spring을 사용합니다.
- 명시적인 다단계 타임라인, 밀집된 오케스트레이션, SVG/패스 작업, 스크롤 연출, 명령형 통합에는 GSAP을 사용합니다.
- React 특정 추상화 외부의 컴팩트한 DOM/SVG/객체/캔버스 트위닝 및 엇갈린 생성 효과에는 Anime.js를 사용합니다.
- DOM 스냅샷 입자화를 위한 기술/참조로만 Disintegrate를 사용합니다. html2canvas 충실도 한계를 예상하고 라이프사이클을 현대화합니다.
- 구성 가능한 주변 입자, 컨페티, 불꽃놀이, 배경에는 tsParticles를 사용합니다. 정밀한 DOM 분해로 잘못 표시하지 마십시오.
- 대규모 2D 입자 수, 필터, 스프라이트 필드, 셰이더 기반 2D 효과, 명시적 GPU 리소스 제어에는 PixiJS를 사용합니다.
- React Bits, Magic UI, 또는 Motion Primitives를 소스 컬렉션으로 사용합니다. 의존성, 렌더링 비용, 품질이 다르므로 개별 컴포넌트를 검사합니다.
제품 가드레일
- 공간 인과 관계를 유지합니다. 모션은 객체가 어디에서 왔는지, 어디로 갔는지, 무엇이 변경되었는지 설명해야 합니다.
- 변형과 불투명도를 선호합니다. 비용이 허용 가능하다는 증거가 있는 경우에만 레이아웃 속성을 애니메이션화합니다.
- 모션 뒤에 깨진 레이아웃을 숨기지 마십시오.
- 동시에 주변, 스크롤, 호버, 진입 애니메이션이 주목을 경쟁하지 않도록 합니다.
- 키보드에 상응하는 동작을 제공하고 포커스 의미를 유지합니다.
prefers-reduced-motion을 존중합니다. 움직임을 즉각적인 상태 변경 또는 제한된 크로스페이드로 대체합니다.- 코드 검사만으로 부드러움을 주장하지 마십시오. 렌더링된 경로에서 검증하고 테스트된 범위를 보고합니다.
- 사용자가 현재 턴에서 명시적으로 승인하지 않는 한 프록시/라우팅 규칙 또는 관련 없는 로컬 환경 구성을 변경하지 마십시오.
리소스
references/repositories.json: 10개의 소스 저장소, 라이선스, 강점, 위험, 소스 진입점의 날짜가 있는 카탈로그.references/motion-routing.md: 의사 결정 가이드 및 제품 준비 아키텍처 패턴.references/quality-gates.md: 구현 및 라이브 시각적 검증 체크리스트.scripts/query_catalog.py: 자연어 요구 또는 태그로 저장소 카탈로그를 검증하고 검색합니다.