video-shotcraft：영화 같은 제품 영상 제작은(는) 무엇을 하나요?
자체 포함된 제작 능력 라이브러리: 106장의 샷 레시피 카드(데모 구현 소스 코드 및 동적 샘플 갤러리 포함), 검증된 완전한 홍보 영상 템플릿, 재사용 가능한 컴포넌트 및 오디오 에셋, 6단계 워크플로우. 현재는 웹/데스크톱 제품 홍보 영상에 초점을 맞추고 있지만, 샷 카드 자체는 범용 모션 디자인 어휘이므로 어떤 영상에서든 개별 샷을 뽑아 사용할 수 있습니다.
이 스킬을 사용해야 할 때
다음과 같은 경우에 사용하세요:
- 영화 같은 제품 홍보 영상, 제품 런칭 영상, 데스크톱/웹 애플리케이션 데모 영상을 제작할 때.
Ink Press(잉크 프레스) 템플릿을 지정하거나 요청하거나, 템플릿 홍보 효과를 재현할 때.- 특정 모션 디자인 샷 카드(예:
deck-deal-flyin,row-embed,spotlight-hero-card)를 구현할 때. - 2.5D 카메라 워크(PageCam), Remotion을 사용한 비트 싱크 영상 컷, 사운드 디자인이 필요할 때.
지침
1단계: 템플릿 소개 및 경로 확인
이 스킬을 호출할 때마다, 자료 수집, 스토리보드, 또는 구현을 시작하기 전에 먼저 사용자에게 다음을 설명하세요:
- 현재
template/에 있는 검증된 36.2초 제품 홍보 영상 템플릿 Ink Press(잉크 프레스) 를 바로 사용할 수 있습니다: 1920×1080, 30fps, 종이-먹-앰버 스타일, 10개의 완전한 샷, 2.5D 실제 페이지 카메라 워크, 자막 카드, 전환 효과, 영화 같은 SFX가 이미 구성되어 있습니다. 대상 제품의 스크린샷, 카피, 브랜드 정보만 교체하면 됩니다. - 템플릿을 사용하는 것이 가장 빠르고 품질이 보장된 경로입니다. 사용자가 완전히 새로운 비주얼 언어를 원한다면 자유 창작 워크플로우를 진행합니다.
명확하게 질문하세요: "이 기성 템플릿을 사용하여 이 영상을 제작하시겠습니까?" 사용자에게 https://vincentwei1021.github.io/video-shotcraft/ 에서 동적 샘플을 볼 수 있다고 알려주세요.
- 사용자가 템플릿 사용을 확인한 경우: 먼저
template/TEMPLATE.md를 완전히 읽은 후 템플릿 경로에 따라 실행합니다. - 사용자가 명확히 사용하지 않겠다고 한 경우:
references/pipeline.md의 0단계부터 시작하여 자유 창작 또는 단일 샷 경로로 진행합니다. - 사용자가 아직 결정하지 못한 경우: 선택을 기다리며 이 단계에서 멈춥니다. 템플릿을 기본으로 적용하지 말고, 제작을 시작하지 마세요.
예외:
- 사용자가 Ink Press 템플릿을 직접 언급한 경우(예: "Ink Press 템플릿을 사용하여 내 제품 홍보 영상을 만들어 주세요"), 템플릿 경로가 선택된 것으로 간주하고 바로
template/TEMPLATE.md를 읽어 실행합니다. - 사용자가 특정 샷 카드를 명확히 지정한 경우(예: "
deck-deal-flyin과row-embed를 사용하여 이 영상을 만들어 주세요"), 경로가 선택된 것으로 간주하고 해당 샷 카드와demos/<카드명>/구현 소스 코드를 바로 읽습니다.
2단계: 세 가지 사용 방식 중 하나 선택
- 완전한 홍보 영상 (템플릿 경로):
template/TEMPLATE.md를 읽고 "제품 교체 재현 가이드"에 따라 자료를 교체하며 샷별로 적용합니다. - 완전한 홍보 영상 (자유 창작):
references/pipeline.md의 6단계를 따릅니다(0단계 시작 질문 3가지로 시작). - 단일 샷/단일 모션:
references/shots/에서 카드를 선택하고, 카드 전체 내용 +demos/<카드명>/구현 소스 코드를 읽고 대상 자료에 적용합니다.
3단계: 언제 어떤 파일을 읽을지
| 시점 | 읽을 파일 |
|---|---|
| 프로젝트 시작 | pipeline.md (0단계 질문 3가지) |
| 사용자가 BGM을 선택한 경우 | music-beat-sync.md (분석 후 스토리보드) |
| 템플릿 경로 선택 | template/TEMPLATE.md 전체 |
| 스토리보드 디자인 | sequences/ 브릿지 템플릿; shots/ 모든 프론트매터; 선택한 카드 전체 내용 |
| 샷별 구현 | 해당 샷 카드 전체 내용 + demos/<카드명>/ 구현 소스 코드 전체 + assets/lib/ 해당 컴포넌트 |
| 사운드 디자인 | sound-design.md + assets/audio/ |
| 검수 | aesthetic-rules.md 전체 체크리스트 통과 (독립 서브 에이전트 실행) |
예시
예시 1: 템플릿 경로 (Ink Press)
"Ink Press 템플릿을 사용하여 내 Desktop Product의 30초 홍보 영상을 만들어 줘"
-> 자동으로 템플릿 경로 선택, template/TEMPLATE.md 읽기, 스크린샷 수집 및 자료 교체 진행.
예시 2: 특정 샷 카드 지정
"deck-deal-flyin과 row-embed 샷 카드를 참고하여 내 제품 데모 모션을 만들어 줘"
-> 자동으로 단일 샷/조합 샷 경로 선택, references/shots/ 및 demos/ 소스 코드 읽어 맞춤 구현 진행.
모범 사례
- 실제 스크린샷: 기존 페이지를 재현할 때는 반드시 실제 스크린샷을 사용하세요. 먼저 dev 서버를 시작하고 헤드리스 브라우저로 2x 텍스처 + layout.json을 캡처하세요.
- 제품 고유 비주얼 언어: 제품/웹사이트의 디자인 시스템에서 토큰(폰트, 글자 크기, 색상 팔레트, 둥근 모서리)을 추출하세요. 관련 없는 스킨을 임의로 만들지 마세요.
- 단일 샷 단일 모션과 호흡: 각 샷은 하나의 모션만 전달하고, 자막/중요 화면은 박자에 맞춰 1초 이상 유지하세요.
- 강한 리듬 BGM은 엄격하게 박자에 맞춰:
librosa로 실제 BPM/박자를 분석하고,beatF(n)으로 프레임 수를 결정하며, 컷 오차는 3프레임 이하로 유지하세요. - 데모 소스 코드 참조: 샷 카드를 사용하기 전에 먼저
demos/<카드명>/의 튜닝된 파라미터와 알려진 문제를 회피하는 코딩 방식을 읽으세요. - 결정론적 렌더링:
Date.now()/Math.random()은 금지하고, 고정 시드 의사 난수를 사용하세요.
참조
template/TEMPLATE.md— Ink Press 템플릿 구조 및 제품 교체 재현 가이드references/pipeline.md— 6단계 제작 프로세스 표준references/aesthetic-rules.md— 비주얼 검토 및 검수 체크리스트references/music-beat-sync.md— 음악 리듬 분석 및 박자 타임라인 계산references/sound-design.md— SFX 사운드 문장 및 음향 에셋 배치 가이드- https://vincentwei1021.github.io/video-shotcraft/ — 동적 샘플 및 106장의 샷 카드 온라인 갤러리