video-shotcraft: 영화감각 제품 비디오 제작
자가 수용형 제작 라이브러리: 152장의 촬영 기법 카드 (데모 구현 소스 코드 및 동적 샘플 갤러리 포함), 검증 완료된 전체 프로모션 템플릿, 재사용 가능한 컴포넌트 및 오디오 에셋, 6단계 워크플로우. 현재 초점은 웹/데스크톱 제품 프로모션 비디오이지만, 촬영 카드 자체는 범용 모션 어휘입니다 – 개별 카드를 추출하여 임의 비디오의 단일 장면으로 사용할 수도 있습니다.
호출 시 모드 판단
전체 프로모션 비디오는 상호 배타적인 세 가지 모드가 있습니다.素材 수집, 스토리보드 구성 또는 구현을 시작하기 전에 사용자가 명확히 선택했는지 먼저 판단합니다. 이미 선택된 경우에는 다시 묻지 않고 직접 실행하며, 다른 모드로 변경하지 않습니다.
- 템플릿 직접 사용: Ink Press 기존 교체流程을 유지합니다.
template/TEMPLATE.md를 읽고, 기존 촬영 구조에 따라 대상 제품의 스크린샷, 카피 및 브랜드 정보를 교체합니다. - 자율 자유 창작:
references/pipeline.md를 읽습니다. 에이전트는 사용자의 요구사항과 프로젝트 내용에 따라 시각적 방향, 촬영 매핑, 스토리보드,素材 및 오디오를 자율적으로 결정하고 완성본까지 연속적으로 진행합니다. 제품 브리핑, 스타일프레임, 촬영 매핑 또는 스토리보드 단계에서 사용자 확인을 위해 멈추지 않습니다. - 공동 창작:
references/guided-free-creation.md를 읽습니다. 에이전트가 근거 있는 판단과 계획을 먼저 제시하고, 사용자가 제품 브리핑, 요구사항 결정, 시각적 방향, 촬영 매핑 및 최종 스토리보드를 순서대로 확인합니다. 스토리보드 승인 후references/pipeline.md의 최종素材 수집 및 제작 단계로 진입합니다.
사용자가 프로젝트 경로, URL, 화면 녹화 또는 페이지 스크린샷을 제공했지만 모드를 선택하지 않은 경우, 먼저 최소한의 읽기 전용 제품 검사를 수행합니다: 제품 포지셔닝, 주요 기능, 페이지 시각적 요소, 표시 가능 상태 및素材 리스크를 파악합니다. 비즈니스 프로젝트를 수정하지 않고, 민감 데이터를 수집하지 않으며, 비디오 코드를 작성하지 않습니다. 검사 후 세 가지 모드를 제시하고 다음을 설명합니다:
- Ink Press가 해당 제품에 적합한지, 적합/부적합의 구체적인 근거
- 자율 자유 창작과 공동 창작 각각의 적합 여부, 예상되는 제품 시각적 단서 보존
- 에이전트 추천 모드와 그 근거 및 트레이드오프
그리고 명확히 질문합니다: "위 제품 검사에 따라, 저는 ×× 모드를 추천합니다. 이 모드로 계속하시겠습니까?" 동시에 사용자에게 https://vincentwei1021.github.io/video-shotcraft/ 에서 동적 샘플을 탐색하고 비디오에 사용할 모션 효과 장면을 선택할 수 있음을 알립니다.
사용자가 검사 가능한 프로젝트나 페이지를 제공하지 않은 경우, 세 가지 모드를 간략히 소개한 후 질문합니다. Ink Press가 기성 템플릿이라는 이유만으로 기본적으로 추천하지 마십시오.
- 사용자가 템플릿 선택:
template/TEMPLATE.md전체를 읽고 원래 템플릿流程대로 실행합니다. - 사용자가 자율 자유 창작 선택:
references/pipeline.md전체를 읽고, 에이전트가 자율적으로 진행하며 단계별 확인을 기다리지 않습니다. - 사용자가 공동 창작 선택:
references/guided-free-creation.md전체를 읽고, 명시된 확인 노드에 따라 협업합니다. - 사용자가 아직 결정하지 않음: 여기서 멈추고 선택을 기다립니다. 사용자를 대신해 기본 선택을 하지 말고, 제작을 시작하지도 마십시오.
예외 1: 사용자가 이미 Ink Press 템플릿을 명시한 경우, 템플릿 모드가 선택된 것으로 간주합니다.
예: "Ink Press 템플릿으로 내 제품 프로모션 비디오를 만들어 줘." 이 경우 다시 묻지 말고 바로 template/TEMPLATE.md 전체를 읽고 템플릿 경로로 실행합니다.
예외 2: 사용자가 특정 촬영 카드를 사용하거나 참조하도록 명확히 지정한 경우, 촬영 제약이 이미 선택된 것입니다.
예: "deck-deal-flyin과 row-embed로 이 비디오를 만들어 줘" 또는 "spotlight-hero-card 효과를 참조해 줘." 이 경우 템플릿을 소개하거나 사용 여부를 묻지 마십시오. 갤러리 이름 해석 규칙에 따라 지정된 촬영 카드를 확인하고, 각 카드를 전체적으로 읽은 후 카드의 "참조 구현"을 통해 정확한 데모 소스 코드를 찾습니다. 단일 장면은 대상素材가 명확해진 후 실행할 수 있습니다. 전체 프로모션 비디오가 아직 자율 자유 창작 또는 공동 창작 중 어떤 방식을 사용할지 명시되지 않은 경우, 이 두 가지 모드만 질문하고, 지정된 촬영 카드는 후속 제작 제약 조건으로 사용하며 자동으로 공동 창작으로 간주하지 않습니다.
네 가지 사용법
- 전체 프로모션 비디오 (템플릿 경로): 템플릿 비디오와 매우 유사한 효과를 원할 경우 →
template/TEMPLATE.md를 읽고 "제품 교체 재현 가이드"에 따라素材를 교체하며 장면별로 적용합니다. - 전체 프로모션 비디오 (자율 자유 창작): 새로운 스타일을 원하고 에이전트에게 자율 결정 권한을 부여할 경우 →
references/pipeline.md를 읽고, 제품 이해부터 최종 검사까지 연속적으로 진행하며 중간 단계별로 확인을 기다리지 않습니다. - 전체 프로모션 비디오 (공동 창작): 주요 결정에 참여하려는 경우 →
references/guided-free-creation.md를 읽고, 제품 브리핑, 요구사항 결정, 시각적 방향, 촬영 매핑 및 최종 스토리보드를 확인합니다. 승인 후 파이프라인의 최종素材 수집 단계부터 계속 진행합니다. - 단일 장면 / 단일 모션 효과:
references/shots/에서 카드를 선택하고(또는 사용자가gallery/갤러리에서 고름), 카드 전체를 읽은 후 "참조 구현"에 따라 정확한 데모 소스 코드를 찾아 대상素材에 적용합니다.
자율 자유 창작과 공동 창작의 경계
자율 자유 창작은 창의적 및 엔지니어링 결정을 에이전트에게 맡깁니다. 에이전트는 프로젝트 내용에서 동적으로 제품 핵심, 시각적 방향, 촬영 매핑, 스토리보드,素材 처리 및 오디오 계획을 도출하고, 주요 판단을 기록한 후 직접 실행합니다. 안전하게 추론할 수 없는 필수 입력이 부족하지 않는 한 질문하지 않으며, 중간 단계에서 멈추지 않고, 중간 결과물에 대한 사용자 확인을 요구하지 않습니다. 사용자의 기존 명확한 요구사항은 항상 제약 조건이며, 에이전트의 기본 선택에 의해 덮어씌워질 수 없습니다.
공동 창작에서만 단계별 확인을 사용합니다. 기본적으로 references/guided-free-creation.md를 읽고, 각 라운드에서 재작업을 가장 줄일 수 있는 1-3개의 질문만 하며, 제품 브리핑, 요구사항 결정, 시각적 방향, 촬영 매핑 및 최종 스토리보드에서 멈추고 사용자 확인을 기다립니다. 사용자가 비즈니스 및 창의적 방향을 확인합니다. 에이전트는 획득 방식, 구현 매개변수, SFX 프레이밍, Remotion 프로젝트, 렌더링 및 기술 QA를 자율적으로 완료합니다.
공동 창작 중 사용자가 명확히 "전적으로 결정하세요" 또는 "확인 건너뛰고 바로 진행하세요"라고 말하면 자율 자유 창작으로 전환하고 이 선택을 기록합니다. 자율적으로 진행한다고 주장하면서 계속해서 단계별 확인을 요구하지 마십시오.
기능에서 장면으로의 매핑은 단지 "어떤 움직임 문법을 사용할지"일 뿐, 전체 스토리보드가 아닙니다. 공동 창작에서 매핑 확인 후, 에이전트는 반드시 장면 순서, 지속 시간, 구체적인 화면, 페이지 상태,素材 출처, 자막, 전환 및 SFX를 계속 제공해야 합니다. 전체 스토리보드가 확인된 후에만 최종素材 수집에 들어갑니다. 사용자가 갤러리에서 촬영 카드 이름을 복사할 때는 카드 이름 또는 "카드 이름 · 스타일 이름"만 제공하면 되며, 에이전트가 로컬 레시피 카드와 데모 소스 코드를 읽습니다.
핵심 철학
-
기존 페이지를 재현할 때는 반드시 실제 스크린샷을 사용합니다. UI를 직접 코딩하는 것은 비재현 시나리오로 제한되며, 품질과 표현 명확성은 엄격한 기준입니다. 실제 제품 페이지를 표현할 때 첫 단계로 로컬 dev 서버를 실행하고, 헤드리스 브라우저로 전체 페이지 2x 텍스처 + 요소별 분할 이미지 + layout.json 좌표표를 캡처합니다. 비재현 시나리오(추상 오프닝/브랜드 섹션/독립형 컴포넌트 전시)에서는 UI를 직접 코딩할 수 있지만, 출판 수준의 질감에 미치지 못하거나 시청자가 무엇을 표현하는지 이해할 수 없다면 스크린샷 경로로 되돌아갑니다. 페이지 데이터는 리스크에 따라 처리합니다. 공개 데모 데이터는 제품 브리핑에서 명확히 확인된 경우에만 유지할 수 있습니다. 고객, 개인, 내부, 키, 실시간 또는 기타 민감 데이터는 가상 또는 비식별화된 내용을 사용해야 하며, 수집 전에 고정해야 합니다.
-
전체 비디오의 시각적 언어는 반드시 제품 자체에서 성장해야 하며, 관련 없는 "프로모션 비디오 스킨"을 따로 만들어서는 안 됩니다. 스타일프레임을 만들기 전에 먼저 제품/웹사이트의 디자인 시스템, 소스 코드 또는 computed styles에서 디자인 스펙을 추출하여 기록합니다: 글꼴 패밀리와 두께, 글꼴 크기 계층, 줄 높이/자간, 그리드, 간격, 정렬, 정보 밀도와 모서리 둥글기, 그리고 배경/표면/본문/강조/상태 색상, 그라데이션 및 재질. 비디오의 모든 제목, 자막, 숫자, 텍스트 카드, 타이포그래피, 전환, 파티클, 조명 효과 및 기타 모션 효과 배색은 이 토큰을 재사용하거나 절제되게 확장해야 하며, 동시에 제품의 톤, 취향 및 질감과 일치해야 합니다. 템플릿 또는 촬영 카드 경로를 사용할 때는 해당 촬영 구조, 모션 문법, 리듬 및 조정된 매개변수만 상속합니다. 글꼴, 타이포그래피, 배색 및 재질은 대상 제품에 맞게 다시 스키닝해야 합니다. 스토리텔링 필요에 의해 제품의 시각적 요소에서 벗어나야 하는 경우, 공동 창작에서는 먼저 이유를 설명하고 사용자가 확인하도록 합니다. 자율 자유 창작에서는 이유와 트레이드오프를 디자인 스펙에 기록한 후 계속 진행합니다.
-
영화감각은 카메라 움직임, 빛과 그림자, 리듬과 사운드의 조화에서 비롯되며, 화려한 애니메이션 기술에서 비롯되지 않습니다. 반복적으로 인정받은 요소는 다음과 같습니다: 단일 주역의 완전한 동작 아크(스포트라이트 → 확대 → 부유 → 귀환), 물리적 은유에 기반한 가속(카드 딜링), 측면 경사 오르빗(orbit) 클로즈업, riser → impact → sparkle의 사운드 구문. 대량 요소의 등장은 움직임 자체에 의존하며, 하나하나 빛나는 효과에 의존하지 않습니다 – 장식적인 glint/범람 광택 효과는 저렴해 보이며, 단일 지점 고품질 조명 효과는 사용할 수 있습니다.
-
각 장면은 하나의 모션 동작만 전달합니다. 핵심 정보가 안착된 후에는 반드시 숨을 쉬어야 합니다. 하나의 애니메이션 기법(날아들기/쌓기/페이지 넘기기)은 전체 비디오에서 단 한 번만 주역으로 등장합니다. 반복 장면, 반복 태그라인은 모두 삭제합니다. 리듬 선호도는 단방향입니다: 모든 역사적 피드백은 "느리게/멈춤"을 지시했으며, "너무 느리다"는 단 한 번도 없었습니다 – 브랜드 로고 안착 후 홀드 ≥1초, 대량 모션 효과 종료 후 0.5초 정지, 오프닝 주역 동작에 3초 할당. 타임라인을 구성할 때 미리 홀드/휴식에 프레임 예산을 할당합니다.
-
강한 리듬의 BGM이 있는 비디오는 모든 전환과 모션 효과가 반드시 비트에 맞아야 합니다. 사용자가 이미 음악을 선택한 경우 → 작업 시작 전에 먼저 리듬 분석을 수행합니다(librosa 그리드 피팅을 통한 실제 BPM/위상 + kick/snare/hihat 3분류 드럼 포인트 위치 파악). 그리드는 순간적 커버리지로 검증 통과 후에 스토리보드를 구성합니다. 타임라인은 박자 기호
beatF(n)으로 작성하고, 드문 악센트는 실제 순간적 움직임에 고정하며 그리드 보간 지점에 고정하지 않습니다. 렌더링 후 완성본에서 오디오 트랙을 추출하여 절단 오차를 ≤3프레임으로 확인합니다. 방법론은references/music-beat-sync.md를 참조하십시오. BGM이 포함된 비디오의 최종 렌더링은 두 가지 버전을 항상 제공합니다: BGM 포함 버전 + BGM 제외 버전(SFX 유지).bgminputProp을 사용하여 동일한 타임라인에서 렌더링하여 사용자가后期에 직접 음악을 배치할 수 있도록 합니다. -
촬영 카드 모션 효과를 사용하려면 먼저 갤러리 인덱스를 해석하고 정확한 데모 구현 코드를 읽어야 합니다. 먼저
gallery/api/library.json을 사용하여 카드 이름과style-key를 검증한 다음, 카드 문서의 "참조 구현"에 따라 구체적인 TSX를 찾습니다. 레시피 카드는 의미와 매개변수 표를 제공하고, 정확한 데모 소스 코드가 조정된 매개변수의 실제 모습입니다(이징, 시간 값 비율, 마스크 타이밍, 알려진 함정 회피 방법). 적응형 수정은 허용되지만, 카드에 "알려진 함정/취약점"으로 표시된 매개변수는 저하시킬 수 없습니다 – 품질 기준은 오직 향상만 가능합니다. 카드 이름과 이해를 바탕으로 새로 작성하는 것은 모든 조정 축적을 포기하는 것입니다. -
공동 창작은 저렴한 확인 사항을 앞으로 가져오고, 자율 자유 창작은 동일한 판단을 실행 기록으로 남깁니다. 제품 브리핑 → 요구사항 대 실행 결정표 → 텍스트 방향 → 스타일프레임 → 촬영 매핑 → 스토리보드의 순서는 동일합니다. 공동 창작은 단계별로 사용자에게 확인을 넘기고, 자율 자유 창작은 에이전트가 자율적으로 선택하고 연속적으로 진행합니다. 두 모드 모두 방향이 정해지지 않은 상태에서 개별 장면 구현에 들어가서는 안 됩니다.
-
검증은 전 과정에 걸쳐 수행되며, 납품 전 독립적인 검토가 필요합니다. 5단계부터 각 장면은
npx remotion still로 정지 프레임을 출력하여 자체 점검하고, 각 수정 후 전체 비디오를 렌더링하고 ffmpeg로 프레임을 추출하여 다시 확인합니다. 납품 전에 반드시 깨끗한 컨텍스트의 subagent를 파견하여 독립적인 최종 검사를 수행해야 합니다. 검토 입력에는 완성본, 키프레임, 제품 브리핑, 요구사항 대 실행 결정표, 현재 모드 확인 또는 기록된 시각적 방향/스타일프레임, 기능-장면 매핑, 갤러리 카드 이름/변형, 정확한 데모 TSX, 갤러리 참조 샘플/프레임 추출, 최종 스토리보드, 선택된 촬영 카드 및 미적 기준이 포함됩니다.references/final-review.md에 따라 계획 일관성, 기능 완전성, 장면 재현도, 시각/오디오 기술 품질 및 데이터 보안을 동시에 검사하고, 각 항목에 대해 프레임 번호가 포함된 증거 보고서를 작성합니다. 제작자는 자신의 산출물에 대해 확인 편향이 있으므로, 첫 번째 검사는 절대 사용자에게 맡겨서는 안 됩니다. -
결정적 렌더링:
Date.now()/Math.random()을 금지합니다. 모든 의사 난수는 고정 시드(mulberry32/해시, seed는 index에서 파생)를 사용하며, 프레임별로 재현 가능해야 합니다.
워크플로우
자율 자유 창작은 references/pipeline.md에 따라 0단계부터 연속적으로 실행하며, 사용자 확인을 위해 단계별로 멈추지 않습니다.
공동 창작은 먼저 references/guided-free-creation.md에 따라 0-3단계(제품 이해, 시각적 방향, 촬영 매핑 및 스토리보드 확인)를 완료한 후, 파이프라인 4단계(최종素材 수집)부터 계속 진행합니다. 질문을 반복하거나 재설계하지 않습니다.
2-3단계에서는 references/shots/의 각 카드 frontmatter를 스캔하여 에너지 곡선에 따라 장면을 선택합니다. 5-7단계에서는 지속적으로 references/aesthetic-rules.md를 참조하여 자체 점검합니다. 6단계에서는 references/sound-design.md를 읽습니다. 비트 동기화 비디오는 전 과정에서 references/music-beat-sync.md를 참조합니다.
언제 어떤 파일을 읽을까
| 시점 | 읽을 파일 |
|---|---|
| 프로젝트 시작 및 모드 미정 | 최소 읽기 전용 검사 후 세 가지 전체 프로모션 모드 제시 및 추천 |
| 자율 자유 창작 | pipeline.md (에이전트가 0-7단계를 자율적으로 완료, 단계별 확인 없음) |
| 공동 창작 | guided-free-creation.md (0-3단계 확인), 이후 pipeline.md 4단계부터 계속 |
| 사용자가 BGM 선택 | music-beat-sync.md (분석 후 스토리보드 구성) |
| 템플릿 경로 | template/TEMPLATE.md 전체 |
| 스토리보드 설계 | sequences/ 브릿지 템플릿 (전체 비디오 골격 먼저 채움); shots/ 전체 frontmatter; 선택된 카드 전체 읽기 |
| 개별 장면 구현 | 해당 촬영 카드 전체 + "참조 구현"에 따른 정확한 데모 소스 코드 전체 + assets/lib/ 해당 컴포넌트 |
| 사운드 디자인 | sound-design.md + assets/audio/ |
| 검수 | final-review.md + aesthetic-rules.md 전체 체크리스트 통과 (독립 subagent 실행) |
에셋 사용 방식
assets/lib/컴포넌트는 새 프로젝트로 복사 후 자유롭게 수정합니다 (본 라이브러리를 import하지 않음). 목록: PageCam(2.5D 페이지 카메라 – 모든 "실제 페이지" 장면의 기초), DigitRoll, FlashCut, Caption, FlatPanel, VerticalTicker(3D 무한 스크롤 월), helpers(rand/shake/camera/motion). FlatPanel과 helpers/camera는three+@react-three/fiber+@remotion/three의존성이 필요하며, 나머지는 remotion만 필요.assets/scripts/capture-template.mjs는 복사 후 상단 CONFIG(BASE/라우트/선택자)를 수정합니다.assets/audio/사운드 이펙트는 직접 복사하여 사용합니다 (무료 상업 사용 라이선스, audio/ATTRIBUTION.md 참조):audio/bgm/은 리듬감 있는 BGM 후보;audio/sfx/<카테고리>/149개의 사운드 이펙트가 16개 카테고리로 분류됨 (transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter). 사운드 검색 시 먼저 카테고리 디렉토리로 이동하며, 목록은 sound-design.md 참조. 용어집 sparkle의 디렉토리명은light/입니다 (sparkle/없음). S1은 음색을 금지하지만 동작은 금지하지 않습니다 – 화면에 실제 클릭/스위치가 있으면 해당 의성어를 배치해야 하지만,ui/의 절반은 합성 피드백 사운드(tone/bleep/ notification)이므로 개별적으로 들어보아야 하며, 전체 디렉토리를 허용해서는 안 됩니다 (목록은 sound-design 3.3 참조). 긴 샘플 및 가벼운素材 사운드는 각각 특별 처리가 필요한 목록이 있습니다 (sound-design 4.1).demos/각 카드 구현 소스 코드: 대부분 자체 포함형 그레이스케일 데모 (일부는demos/_fixtures/Fixtures.tsx의 가짜 UI 장면 컴포넌트를 import하고, 일부는demos/_textures/의 실제 페이지 텍스처를 import). Remotion 프로젝트에 복사하여 실행 가능. 일부 데모는@remotion/motion-blur(CameraMotionBlur)를 사용하므로,npm i @remotion/motion-blur가 필요하며, 목록은demos/README.md참조.template/완전히 렌더링 가능한 프로젝트:npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4.gallery/정적 갤러리: 우선 사용자에게 온라인 버전 https://vincentwei1021.github.io/video-shotcraft/library.html 을 제공합니다. 로컬 실행 시 먼저gallery/fetch-media.sh로 샘플 비디오를 가져온 후 (mp4는 git에 없음),cd gallery && python3 -m http.server 4178를 실행합니다. 152개 카드 209개 동적 샘플 비디오를 탐색/검색/다중 선택하여 카드 이름을 복사할 수 있습니다 – 사용자가 샘플을 보면서 장면을 선택하기에 적합합니다.