시네마틱 웹 (Cinematic Web)
고급 웹사이트 애니메이션을 단순한 애니메이션 스니펫 모음이 아닌 창의적인 개발 시스템으로 취급합니다.
'영화처럼 만들어 주세요'와 같은 모호한 요청을 다음으로 변환합니다:
- 아트 디렉션
- 자산 전략
- 모션 언어
- 스크롤 안무
- 렌더링 및 후처리 계획
- 성능 및 접근성 예산
- 구현
- 리뷰 루프
워크플로우
- 기존 앱 스택, 라우팅 모델, 렌더링 경계 및 스타일링 시스템을 검사합니다.
- 프로젝트가 DOM 전용인지, Motion 기반인지, GSAP 기반인지, R3F/WebGL 기반인지, Spline 기반인지, Rive/Lottie 기반인지, 또는 혼합인지 식별합니다.
- 새 애니메이션 동작을 추가하기 전에 공유 모션 토큰을 생성하거나 업데이트합니다.
- 사용자가 명시적으로 빠른 구현을 요청하지 않는 한 아트 디렉션 브리프를 작성합니다.
- 사용 가능한 자산으로 개념을 구현할 수 있는 가장 작은 파이프라인을 선택합니다.
- 정확한 안무를 사용합니다: 스크롤 거리, 고정 길이, 스크러브 값, 레이블, 스태거 값, 카메라 위치, 재질 값, 이징 및 스프링 상수.
- 마커, 성능 오버레이, 조정 가능한 상수, 스크린샷 또는 예산 검사로 폴리싱하기 전에 계측합니다.
- 모든 주요 애니메이션에 대해 Reduced Motion 및 저전력 대체 동작을 제공합니다.
- 데스크톱, 모바일 및 Reduced Motion 동작을 확인한 후 작업 완료를 선언합니다.
결정 매트릭스
- 작은 호버, 포커스, 불투명도/변환 효과에는 CSS를 사용합니다.
- 상태 기반 UI, 레이아웃 전환, 공유 요소, 제스처 및 마이크로 인터랙션에는 React용 Motion을 사용합니다.
- 고정된 스토리, 긴 타임라인 및 정확한 스크롤 안무에는 GSAP ScrollTrigger를 사용합니다.
- 스크롤 느낌과 WebGL/DOM 동기화가 경험의 일부인 경우 Lenis를 사용합니다.
- 히어로가 실제 3D 씬 또는 셰이더 구성인 경우 R3F/drei를 사용합니다.
- 디자이너가 소유한 인터랙티브 3D 씬이 진실의 원천인 경우 Spline을 사용합니다.
- 인터랙티브 벡터 애니메이션 및 상태 머신에는 Rive를 사용합니다.
- 실시간 WebGL이 성능 예산을 초과하는 경우 비디오, 이미지 시퀀스 또는 정적 미디어를 사용합니다.
품질 기준
다음과 같은 경우 결과는 수용 불가능합니다:
- 모든 곳에서 기본 이징을 사용합니다.
- 선택 없이 전체 씬에 글로벌 블룸을 적용합니다.
- 변환/불투명도로 충분할 때 레이아웃 속성을 애니메이션합니다.
- 검사나 압축 가이드 없이 무거운 GLB를 배포합니다.
- Reduced Motion 경로가 없습니다.
- 지연 로딩 없이 하나의 거대한 클라이언트 컴포넌트에 의존합니다.
- 개발자 머신에서만 인상적으로 보입니다.
모션 토큰
구현 전에 다음을 포함하는 공유 모션 시스템을 생성합니다:
- 이징 (Eases)
- 스프링 (Springs)
- 지속 시간 (Durations)
- 스태거 (Staggers)
- 스크롤 스크러브 값 (Scroll scrub values)
- 패럴랙스 비율 (Parallax ratios)
- Reduced Motion 대체 (Reduced-motion substitutions)
examples/recipes/motion-tokens.ts를 시작 파일로 사용하세요.
필요 시 참고할 레퍼런스
- 아트 디렉션 및 인테이크:
references/creative-direction.md - 유명 사이트를 복사하지 않는 레퍼런스 분석:
references/reference-analysis.md - 이징, 스프링, 질량 및 안무:
references/motion-language.md - GSAP + Lenis 스크롤 시스템:
references/scroll-choreography.md - R3F 씬 아키텍처:
references/r3f-webgl-scenes.md - 블룸, 피사계 심도(DoF), 색수차, 비네트, 셰이더 및 톤 매핑:
references/postprocessing-shaders.md - Blender, Spline, Rive 및 glTF 핸드오프:
references/asset-pipeline.md - 스택 선택:
references/stack-decision-matrix.md - 성능 예산 및 모바일 대체:
references/performance-budgets.md - Reduced Motion 및 접근성:
references/accessibility-reduced-motion.md - 최종 리뷰:
references/qa-rubric.md
출력 요구 사항
구현 시 다음을 보고하세요:
- 변경된 파일
- 추가되거나 재사용된 모션 토큰
- 숫자가 포함된 안무 요약
- 자산 가정
- 성능 위험 및 완화 방안
- Reduced Motion 동작
- 실행 및 확인 방법