leecyno1/boutique-skills

video-shotcraft: 영화 같은 제품 영상 제작

독립형 제작 라이브러리입니다: 152장의 샷 레시피 카드(demo 소스 코드 및 동적 샘플 갤러리 포함), 검증된 완전한 프로모션 템플릿, 재사용 가능한 컴포넌트 및 오디오 에셋, 6단계 워크플로우를 제공합니다. 현재 초점은 웹/데스크탑 제품 프로모션 영상이지만, 샷 카드 자체는 범용 모션 표현 어휘입니다. 개별 샷을 뽑아서 모든 비디오의 단일 장면으로 사용할 수도 있습니다.

호출 시 먼저 모드 판단

완전한 프로모션 영상은 서로 병합되지 않는 세 가지 모드가 있습니다.素材 수집, 스토리보드 또는 구현을 시작하기 전에 사용자가 명확히 선택했는지 먼저 판단합니다. 이미 선택한 경우 바로 실행하고, 반복해서 묻거나 다른 모드로 변경하지 마십시오.

1. 템플릿 직접 사용: Ink Press의 기존 대체 프로세스를 유지합니다. template/TEMPLATE.md를 읽고, 기존 샷 구조에 따라 대상 제품의 스크린샷, 카피 및 브랜드 정보를 교체합니다.
2. 자유 창작: references/pipeline.md를 읽습니다. Agent는 사용자의 요청과 프로젝트 내용에 따라 시각적 방향, 샷 매핑, 스토리보드,素材 및 오디오를 자율적으로 결정하고 연속적으로 완성까지 진행합니다. 제품 브리핑, 스타일프레임, 샷 매핑 또는 스토리보드 단계에서 사용자 확인을 위해 멈추지 않습니다.
3. 공동 창작: references/guided-free-creation.md를 읽습니다. Agent는 근거 있는 판단과 계획을 먼저 제시하고, 사용자가 제품 브리핑, 요구사항 결정, 시각적 방향, 샷 매핑 및 최종 스토리보드를 순차적으로 확인합니다. 스토리보드가 승인된 후 references/pipeline.md의 최종素材 수집 및 제작 단계로 들어갑니다.

사용자가 프로젝트 경로, URL, 녹화 영상 또는 페이지 스크린샷을 제공했지만 아직 모드를 선택하지 않은 경우, 최소한의 읽기 전용 제품 검사를 먼저 수행합니다: 제품 포지셔닝, 주요 기능, 페이지 비주얼, 표시 가능한 상태 및素材 리스크를 파악합니다. 비즈니스 프로젝트를 수정하지 않고, 민감한 데이터를 수집하지 않으며, 비디오 코드를 작성하지 않습니다. 검사 후 세 가지 모드에 대해 설명하고 다음을 명시합니다:

• Ink Press가 해당 제품에 적합한지, 적합 및 부적합의 구체적인 근거;
• 자유 창작과 공동 창작이 각각 적합한지, 예상되는 시각적 단서 보존 수준;
• Agent가 추천하는 모드와 그 근거 및 장단점.

그런 다음 명확히 질문합니다: "위 제품 검사에 따라 ×× 모드를 추천합니다. 이 모드로 계속하시겠습니까?" 동시에 사용자에게 https://vincentwei1021.github.io/video-shotcraft/ 에서 동적 샘플을 탐색하고 영상에 사용할 모션 효과 샷을 선택할 수 있음을 알립니다.

사용자가 검사 가능한 프로젝트나 페이지를 제공하지 않은 경우, 세 가지 모드를 간략히 소개한 후 질문합니다. Ink Press가 기성 템플릿이라는 이유만으로 기본적으로 추천하지 마십시오.

• 사용자가 템플릿 선택: template/TEMPLATE.md를 전체 읽고 원래 템플릿 프로세스대로 실행합니다.
• 사용자가 자유 창작 선택: references/pipeline.md를 전체 읽고 Agent가 자율적으로 진행하며 단계별 확인을 기다리지 않습니다.
• 사용자가 공동 창작 선택: references/guided-free-creation.md를 전체 읽고 해당 확인 노드에서 협업합니다.
• 사용자가 아직 결정하지 않음: 여기서 멈추고 선택을 기다립니다. 사용자를 대신하여 기본값을 선택하거나 제작을 시작하지 마십시오.

예외 1: 사용자가 이미 Ink Press 템플릿을 지정한 경우 템플릿 모드가 선택된 것으로 간주합니다. 예: "Ink Press 템플릿으로 내 제품 프로모션 영상을 만들어줘." 이 경우 더 이상 묻지 말고 바로 template/TEMPLATE.md를 전체 읽고 템플릿 경로로 실행합니다.

예외 2: 사용자가 특정 샷 카드를 사용하거나 참조하도록 명확히 지정한 경우 샷 제약이 이미 선택된 것으로 간주합니다. 예: "이 영상에 deck-deal-flyin과 row-embed를 사용해줘" 또는 "spotlight-hero-card 효과를 참조해줘". 이 경우 템플릿을 소개하지 말고, 템플릿 사용 여부를 묻지 마십시오. Gallery 이름 분석 규칙에 따라 지정된 샷을 확인하고 각 카드를 전체 읽으며, 카드의 "참조 구현"에 따라 정확한 데모 소스 코드를 찾습니다. 단일 샷은 대상素材가 명확해지면 실행할 수 있습니다. 완전한 프로모션 영상의 경우 자유 창작인지 공동 창작인지 아직 설명되지 않았다면 두 가지 모드만 질문하고, 지정된 샷은 후속 제작 제약 조건으로 처리하며 자동으로 공동 창작과 동일시하지 않습니다.

네 가지 사용법

1. 완전한 프로모션 영상 (템플릿 경로): 템플릿 영상과 매우 유사한 효과를 원할 경우 → template/TEMPLATE.md를 읽고 "제품 교체 재현 가이드"에 따라素材를 교체하여 샷별로 적용합니다.
2. 완전한 프로모션 영상 (자유 창작): 새로운 스타일을 원하고 Agent가 자율적으로 결정할 수 있도록 위임할 경우 → references/pipeline.md를 읽고, 제품 이해부터 최종 검사까지 연속적으로 진행하며 중간 단계에서 확인을 위해 멈추지 않습니다.
3. 완전한 프로모션 영상 (공동 창작): 주요 결정에 참여하려는 경우 → references/guided-free-creation.md를 읽고, 제품 브리핑, 요구사항 결정, 시각적 방향, 샷 매핑 및 최종 스토리보드를 확인합니다. 승인 후 파이프라인의 최종素材 수집부터 계속합니다.
4. 단일 샷/단일 모션 효과: references/shots/에서 카드를 선택하고(또는 사용자가 gallery/ 갤러리에서 고르도록 함) 카드 전체를 읽은 후 "참조 구현"에 따라 정확한 데모 소스 코드를 찾아 대상素材에 적용합니다.

자유 창작과 공동 창작의 경계

자유 창작은 창의적 및 엔지니어링 결정을 Agent에게 맡깁니다. Agent는 프로젝트 내용에서 제품 중요성, 시각적 방향, 샷 매핑, 스토리보드,素材 처리 및 오디오 계획을 동적으로 도출하고, 주요 판단을 기록한 후 직접 실행합니다. 안전하게 추론할 수 없는 필수 입력이 없는 한 질문하지 않고, 단계별로 멈추지 않으며 중간 산출물에 대한 사용자 확인을 요구하지 않습니다. 사용자의 명확한 요청은 항상 제약 조건이며 Agent의 기본 선택으로 덮어쓸 수 없습니다.

공동 창작에서만 단계별 확인을 사용합니다. 기본적으로 references/guided-free-creation.md를 읽고, 각 라운드에서 재작업을 가장 크게 줄일 수 있는 1-3개의 질문만 하며, 제품 브리핑, 요구사항 결정, 시각적 방향, 샷 매핑 및 최종 스토리보드에서 멈추고 사용자 확인을 기다립니다. 사용자는 비즈니스 및 창의적 방향을 확인합니다. Agent는 수집 방식, 구현 매개변수, SFX 프레임钉, Remotion 프로젝트, 렌더링 및 기술 QA를 자율적으로 완료합니다.

공동 창작 중 사용자가 명확히 "전적으로 결정해" 또는 "확인 건너뛰고 바로 해"라고 말하면 자유 창작으로 전환하고 이 선택을 기록합니다. 자율적으로 진행한다고 주장하면서 단계별 확인을 계속 요구하지 마십시오.

기능-샷 매핑은 "어떤 모션 문법을 사용할지"일 뿐 완전한 스토리보드가 아닙니다. 공동 창작에서 매핑을 확인한 후 Agent는 반드시 샷 순서, 지속 시간, 구체적인 화면, 페이지 상태,素材 출처, 자막, 전환 및 SFX를 제시해야 합니다. 완전한 스토리보드가 확인된 후에야 최종素材 수집에 들어갑니다. 사용자가 Gallery에서 샷 이름을 복사할 때는 카드 이름 또는 "카드 이름 · 스타일 이름"만 제공하면 되며, Agent가 로컬 레시피 카드와 데모 소스 코드를 읽습니다.

핵심 철학

1. 기존 페이지 재현은 반드시 실제 스크린샷을 사용해야 합니다. 수제 UI는 비-재현 시나리오로 제한되며, 품질과 표현 명확성은 엄격한 문턱입니다. 제품 실제 페이지를 표현할 때 첫 번째 단계는 로컬 dev server를 시작하고, headless browser로 전체 페이지 2x 텍스처 + 요소별抠圖 + layout.json 좌표표를 캡처하는 것입니다. 비-재현 시나리오(추상 오프닝/브랜드 섹션/독립 디스플레이 컴포넌트)에서는 수제 UI가 허용되지만, 출판 품질에 미치지 못하거나 시청자가 무엇을 표현하는지 이해하지 못할 경우 스크린샷 경로로 되돌아갑니다. 페이지 데이터는 리스크에 따라 처리됩니다: 공개 데모 데이터는 제품 브리핑에서 명확히 확인된 경우에만 유지할 수 있습니다. 고객, 개인, 내부, 키, 실시간 또는 기타 민감한 데이터는 가상 또는 비식별화된 내용을 사용해야 하며 수집 전에 고정됩니다.

2. 전체 비디오의 시각적 언어는 제품 자체에서 성장해야 하며, 관련 없는 "프로모션 영상 스킨"을 따로 만들어서는 안 됩니다. 스타일프레임을 만들기 전에 제품/웹사이트의 디자인 시스템, 소스 코드 또는 computed styles에서 디자인 스펙을 추출하고 작성합니다: 글꼴 패밀리와 두께, 글꼴 크기 계층, 줄 높이/자간, 그리드, 간격, 정렬, 정보 밀도와 모서리 반경, 그리고 배경/표면/본문/강조/상태 색상, 그라데이션 및 질감. 비디오의 모든 제목, 자막, 숫자, 텍스트 카드, 타이포그래피, 전환, 입자, 조명 효과 및 기타 모션 효과 배색은 이 토큰을 재사용하거나 제한적으로 확장해야 하며, 동시에 제품의 톤, 취향 및 질감과 일치해야 합니다. 템플릿 또는 샷 카드 경로를 사용할 때는 샷 구조, 모션 문법, 리듬 및 조정된 매개변수만 상속합니다. 글꼴, 타이포그래피, 배색 및 질감은 대상 제품에 따라 다시 스키닝해야 합니다. 서사적 필요로 인해 제품 비주얼에서 벗어나야 하는 경우, 공동 창작에서는 먼저 이유를 설명하고 사용자 확인을 받습니다. 자유 창작에서는 이유와 장단점을 디자인 스펙에 기록한 후 계속합니다.

3. 영화 같은 느낌은 카메라 움직임, 조명, 리듬 및 사운드의 조화에서 오며, 화려한 애니메이션에서 오지 않습니다. 반복적으로 인정된 것은: 단일 주인공의 완전한 동작 호(집광→밀착→떠오름→제자리), 물리적 은유에 의해 구동되는 가속 (카드 분배), 측면 기울어진 orbit环绕 클로즈업, riser→impact→sparkle 사운드句式. 배치 요소 입장은 움직임 자체에 의존하며, 하나씩 빛을 내지 않습니다. 장식적인 glint/범람 광선군은 저렴해 보이며, 단일 고품질 광 효과는 가능합니다.

4. 각 샷은 하나의 모션 효과만 이야기합니다. 핵심 정보가 안착된 후에는 반드시 숨을 쉬어야 합니다. 하나의 애니메이션 기법(날아오기/쌓기/페이지 넘기기)은 전체 비디오에서 한 번만 주인공이 되어야 합니다. 반복 샷, 반복 태그라인은 모두 삭제합니다. 리듬 선호도는 단방향입니다: 이전 피드백은 전부 "느리게/멈춤"을 가리켰으며, "너무 느리다"는 한 번도 없었습니다. 브랜드 로고 안착 hold ≥1초, 배치 모션 끝에 0.5초 정지, 오프닝 주체 동작에 충분한 3초. 타임라인을 작성할 때 미리 hold/rest에 프레임 예산을 할당합니다.

5. 강한 리듬의 BGM이 있는 영상은 모든 전환과 모션 효과가 박자에 맞아야 합니다. 사용자가 이미 음악을 선택한 경우 → 작업 시작 전에 리듬 분석(librosa 그리드 피팅으로 실제 BPM/위상 + kick/snare/hihat 3분류 드럼 히트 위치 파악)을 먼저 수행합니다. 그리드는 과도 커버리지로 승인된 후에만 스토리보드를 진행합니다. 타임라인은 박자 표기 beatF(n)으로 작성하고, 드문 악센트는 실제 과도에 고정하며 그리드 보간점에 고정하지 않습니다. 렌더링 후 완성된 영상에서 오디오 트랙을 추출하여 컷 포인트 오차가 ≤3프레임인지 역테스트합니다. 방법론은 references/music-beat-sync.md를 참조하십시오. BGM이 있는 영상의 최종 렌더링은 항상 두 버전을 제공합니다: BGM 버전 + 무 BGM 버전(SFX 유지). bgm inputProp을 사용하여 동일한 타임라인에서 렌더링하여 사용자가 나중에 직접 음악을 구성할 수 있도록 합니다.

6. 샷 카드 모션 효과를 사용하려면 먼저 Gallery 인덱스를 파싱하고 정확한 데모 구현 코드를 읽어야 합니다. 먼저 gallery/api/library.json을 사용하여 카드 이름과 style-key를 검증한 다음, 카드 문서의 "참조 구현"에 따라 특정 TSX를 찾습니다. 레시피 카드는 의미론과 매개변수 테이블을 제공하며, 정확한 데모 소스 코드가 조정된 매개변수의 진실입니다(이징, 지속 시간 비율, 마스크 해제 타이밍, 알려진 함정 회피 기법). 적용 변경은 허용되지만, 카드에 "알려진 함정/약점"으로 표시된 매개변수는 다운그레이드할 수 없습니다. 품질 기준은 올릴 수만 있고 내릴 수 없습니다. 카드 이름과 이해만으로 새로 작성하는 것은 모든 조정 누적을 포기하는 것입니다.

7. 공동 창작은 저렴한 확인 항목을 선행하고, 자유 창작은 동일한 판단을 실행 기록으로 남깁니다. 제품 브리핑→요구사항-실행 결정 테이블→텍스트 방향→스타일프레임→샷 매핑→스토리보드 순서는 변경되지 않습니다. 공동 창작은 단계별로 사용자 확인에 넘기고, 자유 창작은 Agent가 자율적으로 선택하고 연속적으로 진행합니다. 두 모드 모두 방향이 정해지지 않은 상태에서 개별 샷 구현에 들어가서는 안 됩니다.

8. 검수는 전체 과정에 걸쳐 이루어지며 + 전달 전 독립적 검토를 수행합니다. 단계 5부터 각 샷은 npx remotion still로 정지 프레임을 출력하여 자체 점검하고, 각 수정 후 전체 렌더링 + ffmpeg 프레임 추출로 다시 확인합니다. 전달 전에 반드시 깨끗한 컨텍스트의 하위 Agent를 지정하여 독립적 최종 검토를 수행합니다. 검토 입력에는 완성 영상, 키프레임, 제품 브리핑, 요구사항-실행 결정 테이블, 현재 모드 확인 또는 기록된 시각적 방향/스타일프레임, 기능-샷 매핑, Gallery 카드 이름/변형, 정확한 데모 TSX, Gallery 참조 샘플/프레임 추출, 최종 스토리보드, 선택된 샷 카드 및 미적 기준이 포함됩니다. references/final-review.md에 따라 계획 일관성, 기능 완전성, 샷 재현도, 시각적/오디오 기술 품질 및 데이터 보안을 동시에 검사하고, 프레임 번호가 포함된 증거와 함께 항목별 보고서를 제공합니다. 제작자는 자신의 결과물에 대해 확인 편향을 가지므로 첫 번째 검토는 절대 사용자에게 맡겨서는 안 됩니다.

9. 결정론적 렌더링: Date.now()/Math.random()을 금지합니다. 모든 의사 난수는 고정된 시드(mulberry32/해시, seed는 index에서 파생)를 사용하며, 프레임별로 재현 가능합니다.

워크플로우

자유 창작은 references/pipeline.md에 따라 단계 0부터 연속적으로 실행하며, 단계별 사용자 확인을 기다리지 않습니다. 공동 창작은 먼저 references/guided-free-creation.md에 따라 단계 0-3의 제품 이해, 시각적 방향, 샷 매핑 및 스토리보드 확인을 완료한 다음, 파이프라인 단계 4의 최종素材 수집부터 계속합니다. 질문을 반복하거나 재설계하지 마십시오. 단계 2-3에서는 references/shots/의 각 카드 프론트매터를 스캔하여 에너지 곡선에 따라 샷을 선택합니다. 단계 5-7에서는 지속적으로 references/aesthetic-rules.md를 참조하여 자체 점검합니다. 단계 6에서는 references/sound-design.md를 읽습니다. 비트 동기화 영상은 전체적으로 references/music-beat-sync.md를 참조합니다.

모든 모드의 완성 영상 전달 후, 기본적으로 사용자에게 CapCut 프로젝트 파일을 동시에 내보낼지 한 번 묻습니다(CapCut에서 자막 내용/글꼴 크기/색상 변경, 샷 속도 변경/재정렬, 오디오 조정/교체 가능). 사용자가 필요하거나 직접 내보내기를 요청하면 references/jianying-export.md를 읽고 실행합니다.

언제 어떤 파일을 읽을지

시점	읽을 파일
프로젝트 시작, 모드 미정	최소 읽기 전용 검사 후 세 가지 완전 프로모션 모드 제공 및 추천
자유 창작	pipeline.md (Agent가 단계 0-7을 자율적으로 완료, 단계별 확인 대기 없음)
공동 창작	guided-free-creation.md (단계 0-3 확인), 그 후 pipeline.md 단계 4부터 계속
사용자가 BGM 선택함	music-beat-sync.md (먼저 분석 후 스토리보드)
템플릿 경로	template/TEMPLATE.md 전체
스토리보드 설계	sequences/ 에피소드 템플릿 (전체 영상 골격 먼저 채움); shots/ 모든 프론트매터; 선택된 카드는 전체 읽기
개별 샷 구현	해당 샷 카드 전체 + "참조 구현"에 따른 정확한 데모 소스 코드 전체 + assets/lib/ 해당 컴포넌트
사운드 디자인	sound-design.md + assets/audio/
검수	final-review.md + aesthetic-rules.md 전체 체크리스트 (독립 하위 Agent 실행)
완성 영상 전달 후 (CapCut 프로젝트 내보내기)	jianying-export.md + jianying-export/ 플랫폼 모듈

에셋 사용 방식

• 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.
• jianying-export/ CapCut 프로젝트 내보내기 모듈: mac_draft.py(Mac CapCut 11.2 테스트 완료), windows_draft.py(업스트림 지원 경로에 따라 구현, 실제 기기에서 테스트되지 않음), smoke_test.py(새 환경에서 먼저 실행하는 최소 스모크 테스트). 프로세스, 타임라인 추출 및 트랙 생성 방법은 references/jianying-export.md를 참조하십시오. venv + pip install pyJianYingDraft가 필요합니다.
• gallery/ 정적 갤러리: 사용자에게 온라인 버전 https://vincentwei1021.github.io/video-shotcraft/library.html 을 직접 제공하는 것이 우선입니다. 로컬에서 실행하려면 먼저 gallery/fetch-media.sh로 샘플을 가져오고(mp4는 git에 없음), 그런 다음 cd gallery && python3 -m http.server 4178을 실행합니다. 152개 카드, 209개의 동적 샘플을 탐색/검색/다중 선택하여 카드 이름을 복사할 수 있습니다. 사용자가 샘플을 보면서 샷을 선택하는 데 적합합니다.