실제 컴포넌트 프로모션 영상 워크플로우
기본 스타일 = 《한 줄》: 제품의 브랜드 모티브 하나가 영상 전체를 관통하며, 여백과 실제 인터랙션에서 비롯된 3개의 임팩트로 구성됩니다. 정형화된 설명서 스타일의 장면과 효과가 중첩된 프레젠테이션 스타일의 장면을 대조하여 사용합니다. 자세한 내용은 크리에이티브 매뉴얼을 참조하세요.
templates/ = 촬영 기본 템플릿(일반화, 문제점 수정 완료) + v3 확정된 합성, 스타일, 배경음악, 내보내기 스크립트. videos/<name>/에 복사한 후 【필수 수정】 표시된 위치를 변경하세요.
필요 시 참조:
references/creative-playbook.md: 모티브, 3개의 임팩트, 여백 규칙, 카피, 리듬 표. 화면 구성(分镜) 전 반드시 읽을 것.references/compose-recipes.md: 좌표 측정, 시간 매핑, 장면 컨테이너, 광택 패널, 라인 드로잉, 스포트라이트, 세계 뒤집기, 로고 조합, 전환, 타임라인 작성. 합성 전에 읽을 것.references/pitfalls.md: 촬영, 렌더링, 오디오, 전달 시 발생하는 현상→근본 원인→처리 테이블과 검수 명령. 이상 현상 발생 시 먼저 확인할 것.
기술 스택
| 단계 | 기술 | 핵심 사항 |
|---|---|---|
| 합성/렌더링 | HyperFrames (고정 [email protected], npx --yes, 프로젝트 의존성에 추가하지 않음) | check 검증, snapshot 프레임 추출, render 영상 출력 |
| 모션 효과 | GSAP (비즈니스 프로젝트에 설치된 버전을 assets/vendor/gsap.min.js로 복사) | 단일 paused 타임라인을 window.__timelines[id]에 등록 |
| 촬영 빌드 | Vite + @vitejs/plugin-vue (createRequire로 프론트엔드 프로젝트에서 의존성 해석) | 독립적인 루트; envDir/publicDir은 프론트엔드 프로젝트를 가리킴; vendor는 별도 청크로 분리 |
| 결정적 클록 | Vite transform 플러그인 | 일반 호출 및 window. 접두사가 붙은 setTimeout/rAF/Date.now/performance.now를 모두 window.__shoot에 연결 |
| 데이터 격리 | 메모리 기반 fixtureFetch (쓰기 작업 시뮬레이션 포함) + 네트워크 화이트리스트 + 고정 시드 + 고정 epoch + 고정 위치 | 가상 데이터, 실제 요청은 fixture로 변경, 촬영 클록 고정 |
| 인터랙션 스크립트 | performActions(t) + once/byText/rowButton/typeInto | 지정된 초에 실제 클릭, 입력, 드래그 실행 |
| 소재 | 가로 화면 PROMO_RESOLUTION=4k 2배 픽셀; 모바일 430×932 별도 뷰포트 | 합성 시 크게 확대해도 선명함 유지 |
| 배경음악 | Python3 + NumPy (96 BPM, FFT 리버브, 시드 고정) | 무음 비트, 임팩트에 강조, 노드 활성화 시 종소리 |
| 라우드니스/내보내기 | FFmpeg 2-pass loudnorm (−14 LUFS / TP −3), 노멀라이즈된 원본 배경음악 패키징, 압축 버전, 커버 | 메인 + -share.mp4 (약 11 MB) + 커버 PNG |
디렉토리 구조
videos/<name>/
promo.config.mjs appDir/srcDir/entry/motionFile/id/duration/coverAt/hyperframes —— 유일한 프로젝트 관련 설정
capture/ index.html(촬영 템플릿) bootstrap.ts(클록/격리/인터랙션) fixtures.ts(가상 데이터, 새로 작성 필요) vite.config.mjs
scripts/ render-footage.mjs compose-film.mjs compose-audio.py normalize-audio.mjs render-film.mjs remux.mjs
assets/ footage/ footage-4k/ audio/score-final.wav vendor/gsap.min.js
index.html(compose 생성) film.css package.json README.md
npm scripts: capture / compose / audio / check / snap -- <초,초> / render / remux / dev.
프로세스
- 방향 설정:
PRODUCT.md/DESIGN.md/브랜드 아이덴티티를 읽고, creative-playbook에 따라 모티브를 찾고 3개의 임팩트를 설계합니다. 사용자에게 두 가지만 확인합니다: 크리에이티브 메인 라인 (2~3개 방향 제시, "하나의 모티브" 권장), 카피 방향 (기존 사용 또는 변경). - 화면 구성: 각 장면 = 실제 페이지 + 송체(Songti) 제목 + 주요 인터랙션 시간(초) + 해당 장면에서의 모티브 라인 형태; 45초 기준 리듬은 playbook 참조. README에 화면 구성표를 작성합니다.
- 촬영 템플릿:
bootstrap.ts에window.__shoot, 네트워크 화이트리스트, 고정 위치, 스토리지 초기화(IndexedDB 초안 포함), 테마/뷰/오프라인 토큰 사전 설정,replaceState로 라우트 이동 후 제품 진입점import; 느린 로딩 페이지는waitFor/settle로 rAF 정리; 숨겨진 커서/스크롤바/입력 커서 스타일 주입.fixtures.ts필드는 실제 API와 동일하게 유지하고 쓰기 작업은 메모리만 변경합니다. 먼저 브라우저에서?shot=<장면>&live로 인터랙션을 미리 시연합니다. - 소재 촬영:
npm run capture(단일 worker), 확대가 많이 필요한 가로 장면은PROMO_RESOLUTION=4k npm run capture로 다시 실행합니다. - 좌표 측정: 소재에서 프레임을 추출하여 (1920 좌표, 4K 로컬 크롭으로 정확한 값 측정) 궤적의 꺾은선, 버튼, 팝업, 단계 노드 위치를 측정합니다.
- 합성:
compose-film.mjs의 장면 테이블, 좌표, 카피, 시간 포인트를 수정하고 그 유틸리티 함수를 재사용합니다; 규칙은 compose-recipes 참조. 매 라운드npm run compose && npm run check를 실행하고,npm run snap -- <중요 초>로 접촉 시트(contact sheet)를 확인합니다 (임팩트 진입/퇴장, 전환, 주석 정렬). - 배경음악:
compose-audio.py의 시간 포인트(임팩트 강조, 무음 구간, 클릭, 노드 종소리)를 수정하고npm run audio를 실행합니다. - 렌더링 및 검수:
npm run render를 백그라운드에서 실행합니다; 완료 후 ffprobe로 길이/프레임 수/해상도/프레임 속도를 확인하고, ebur128로 라우드니스와 실제 피크 값을 확인하며, blackdetect를 실행하고(설계상의 검은 화면은 설명 필요), 약 18프레임을 모자이크하여 육안으로 검사합니다. 커버만 변경할 경우npm run remux를 실행합니다.
제약 사항
- 제품 소스 코드와 의존성은 변경하지 않습니다; 클록 변경은 촬영 빌드에서만 발생합니다.
- 가상 데이터만 사용하고 비즈니스 백엔드/데이터베이스에 연결하거나 실제 자격 증명을 읽지 않습니다; 타사 온라인 리소스(예: 지도)는 화이트리스트를 거치며, Key는 무시된 빌드 디렉토리에만 저장됩니다. README에 격리 방식, 시드, 고정 날짜를 명시합니다.
- 주석은 인터페이스에 실제로 표시되는 숫자만 사용합니다; 화면과 카피에 "데모/샘플/시뮬레이션"이라는 단어를 사용하지 않습니다.
- 시각적 요소는 프로젝트의
DESIGN.md와 브랜드 색상을 따릅니다; 폰트는 로컬에서 선언합니다 (Songti SC / PingFang SC / Georgia). - 중간 산출물 (
.capture-build/ .shots/ .quality/ renders/ 로그)은.gitignore에 추가합니다; 이전 버전의 프로젝트는 원래대로 유지하고 새 버전은 별도 디렉토리를 만듭니다. - 사용자가 명시적으로 요청하지 않는 한 외부 플랫폼에 커밋하거나 게시하지 않습니다.
- 합성 작성 또는 수정 전에 필요에 따라
hyperframes-core,hyperframes-animation,hyperframes-cli의 현재 API를 확인합니다.
전달 목록
- 메인 영상 MP4 (45.000 초 / 2700 프레임 / 1920×1080 / 60 fps / H.264 yuv420p / AAC 320k 48 kHz / −14 LUFS / 실제 피크 ≤ −1 dBTP).
- 압축 버전
-share.mp4및 커버 PNG. 현재 플랫폼에서 지원하는 파일 전달 방식을 통해 제공됩니다. - 편집 가능한
index.html+film.css및 소재와 스크립트. - README: 시각적 설명, 화면 구성표, 배경음악 설명, 재현 명령어, 촬영 격리, 전달 확인 사항.