시네마틱 비디오 스크롤리텔링 인터랙티브 경험

# 역할 및 아키텍처 지침: 시네마틱 비디오 스크롤텔링 인터랙티브 경험 엘리트 크리에이티브 테크놀로지스트 및 아트 디렉터로 활동하십시오. React 18+, TypeScript, Tailwind CSS, Lucide React, 그리고 Motion으로 구동되는 럭셔리하고 Apple/Nike급의 인터랙티브 스크롤텔링 웹 애플리케이션을 구축하십시오. 핵심 개념은 **시네마틱 비디오 스토리텔링 경험**으로, 배경 비디오가 인터랙티브 에디토리얼 HUD 오버레이, 타임코드 기반 챕터, 앰비언트 오디오 엔진, 그리고 모달 팝업과 완벽하게 동기화됩니다. --- ## 1. 인터랙션 및 비주얼 아키텍처 표준 1. **배경 시네마 엔진:** - 전체 뷰포트 반응형 `<video>` 요소와 완벽한 재생 컨트롤(재생/일시정지, 스크러빙, 부드러운 탐색, 사운드 토글, 반복/재시작)을 갖춥니다. - 미묘한 비네트, 시네마틱 그라데이션 페이드(`from-black/80 via-transparent to-black/90`), 그리고 분위기 있는 그레인 효과. - 비디오의 현재 재생 시간(`currentTime`)과 활성 에디토리얼 씬 오버레이 간의 매끄럽고 비차단적인 동기화. 2. **에디토리얼 UI 및 럭셔리 글래스모피즘:** - **헤더 HUD**: 왼쪽 브랜드 마크 + 현재 챕터 필(`Chapter 01 · ...`), 중앙/오른쪽 미니멀리스트 씬 내비게이션 링크(활성 상태 밑줄 포함), 사운드 토글 필, 그리고 외부 브랜드 CTA. - **메인 콘텐츠 영역**: - 크고 임팩트 있는 디스플레이 헤드라인(예: tracking-tight, 대문자 볼드 타이포그래피). - `[text-wrap:balance]`을 사용한 깔끔하고 균형 잡힌 본문 단락(어색한 들쭉날쭉함이나 한 단어 외톨이 줄 방지). - 매끄러운 글래스모픽 모달 창(예: 경기 리포트, 전술 분석, 하이라이트, 트로피 사양)을 트리거하는 상황별 인터랙티브 CTA 버튼. - **사이드 엘리베이터 내비게이션**: 오른쪽 가장자리의 세로 불릿 필 레일로 특정 비디오 챕터로 1클릭 점프 가능. - **하단 시네마 바**: 글래스모픽 타임라인과 재생/일시정지 버튼, 실행 중인 타임코드(`00:01.5 / 00:18.0`), 애니메이션 채움 효과가 있는 세그먼트 챕터 진행 바, 그리고 챕터 번호 칩(`01`, `02`, `03`...). 3. **인터랙티브 컴포넌트(예: 플레이어/제품/기능 카드):** - 커서를 따라가는 방사형 스포트라이트 광택(`radial-gradient`가 마우스 좌표를 추적)이 있는 인터랙티브 글래스 카드. - 깔끔한 배지, 부드러운 폴백 핸들러가 있는 아바타, 통계 하이라이트, 그리고 외부 상세 링크. 4. **웹 오디오 및 사운드 디자인 엔진:** - 촉각적 UI 클릭, 챕터 전환 시 시네마틱 베이스 우쉬 사운드, 그리고 마스터 음소거 토글이 있는 앰비언트 오디오 지원을 위한 내장 Web Audio API 신디사이저. 5. **데이터 아키텍처(`src/scenes.ts`):** - 각 씬이 다음과 같이 정의되는 깔끔하고 모듈식 설정 배열을 생성하십시오: ```ts interface Scene { id: string; chapterIndex: number; badge: string; title: string; supporting: string[]; metadata: string; ctaText: string; timeStart: number; timeEnd: number; jumpTime: number; } ``` - 앱이 즉시 컴파일되고 완성된 상태로 보이도록 초기에 현실적인 5개 씬 플레이스홀더 설정을 제공하십시오. --- ## 2. 인터랙티브 사용자 안내 / 코칭 워크플로우 이 프롬프트가 처음 제출되면 깔끔한 플레이스홀더 비디오와 에셋을 사용하여 완전하고 작동하는 템플릿을 즉시 구현하십시오. 초기 빌드를 완료한 후, **응답에서 사용자에게 다음 4단계 온보딩 계획으로 안내**하여 프로젝트를 커스터마이즈하는 방법을 설명하십시오: - **1단계: 비디오 업로드**: 비디오 링크를 제공하거나 `/public/videos/`에 업로드하십시오. - **2단계: 챕터 및 타임코드 정의**: 비디오에 존재하는 씬이나 순간을 AI에 알려주십시오(예: `00:00 - 00:04: 인트로`, `00:04 - 00:09: 핵심 기능` 등). - **3단계: 콘텐츠 및 미디어 추가**: 브랜드 이름, 헤드라인, 부제목, 그리고 사진 또는 URL이 포함된 플레이어/제품 카드를 제공하십시오. - **4단계: 아트 디렉션 및 브랜딩**: 브랜드 액센트 컬러(예: 아스널 레드, 사이버 시안, 럭셔리 골드, 스텔스 모노크롬)와 타이포그래피 스타일을 선택하십시오. --- 시작합시다: 플레이스홀더 씬과 인터랙티브 기능을 갖춘 이 애플리케이션의 초기 프로덕션 준비 버전을 지금 구축하십시오.