video-shotcraft: 영화 같은 제품 홍보 영상 제작
웹/프론트엔드 프로젝트를 실제 페이지 스크린샷과 2.5D 운카메라, 비트 싱크 편집으로 영화 같은 제품 홍보 영상으로 만들어 주는 스킬입니다.
이미지·영상고급★ 4,305⑂ 381AI 점수 8/10마지막 업데이트: 2026. 8. 9.
무엇을 해주나
프론트엔드 프로젝트나 웹페이지를 Remotion 기반 영화적 제품 홍보 영상으로 완성해 주는 자급자족형 제작 라이브러리입니다.
- 152장의 샷 레시피 카드: 각 카드에 데모 구현 소스와 동적 샘플 영상(갤러리)이 딸려 있어, 원하는 모션만 골라 재사용할 수 있습니다.
- 검증된 Ink Press 템플릿: 스크린샷·문구·브랜드만 교체하면 바로 완성 홍보 영상이 나오는 렌더 가능한 프로젝트.
- 3가지 작업 모드: ① 템플릿 그대로 사용 ② 에이전트 자율 창작 ③ 사용자와 단계별 공동 창작.
- 실제 페이지 캡처 파이프라인: 로컬 dev 서버를 띄우고 헤드리스 브라우저로 2x 전체 페이지 텍스처 + 요소별 누끼 + 좌표표(layout.json)를 뽑아 2.5D 카메라 무빙에 사용.
- 사운드 디자인 & 비트 싱크: 상업적 사용이 가능한 149개 효과음과 BGM, librosa 기반 BPM/드럼 분석으로 전환·모션을 정확히 비트에 맞춤. BGM 포함/미포함 두 버전 동시 납품.
- 품질 게이트: 스틸 프레임 자체검수, ffmpeg 프레임 추출 리뷰, 납품 전 독립 서브에이전트 최종 심사.
이런 분께 추천
- SaaS·웹 서비스 랜딩페이지를 그대로 살려 데모/홍보 영상을 만들고 싶은 개발자, 인디 메이커
- 디자이너 없이도 제품의 디자인 토큰(폰트·색·간격)을 그대로 계승한 영상 톤을 유지하고 싶은 팀
- Remotion을 이미 쓰거나 코드로 영상을 제어하는 것에 익숙한 프론트엔드 엔지니어
- 특정 모션 한 컷(카드 플라이인, 오빗 클로즈업 등)만 급히 필요한 모션 디자이너
활용 예시
- 템플릿 복제: "Ink Press 템플릿으로 우리 SaaS 홍보 영상 만들어줘" → 템플릿 모드가 즉시 확정되어 스크린샷·카피·로고만 교체하고
npx remotion render로 mp4 출력. - 자율 창작: "이 프로젝트 폴더 읽고 30초 프로모 영상 알아서 만들어줘, 확인 안 물어봐도 돼" → 제품 브리프→스타일프레임→샷 매핑→콘티→렌더까지 중단 없이 진행.
- 단일 컷 제작: "
deck-deal-flyin카드 효과로 우리 대시보드 카드가 날아드는 8초 클립만 만들어줘" → 해당 레시피 카드 전문과 데모 TSX를 읽어 파라미터 그대로 적용. - 비트 싱크 편집: 준비한 BGM을 주면 실제 BPM/위상과 킥·스네어 위치를 먼저 분석하고, 모든 전환을
beatF(n)박자 단위로 배치한 뒤 완성본 오디오로 오차(≤3프레임)를 역검증.
· · · 설치 가이드 · · ·
Claude 앱에 설치 (터미널 필요 없음)
- 아래 버튼으로 ZIP 파일을 받으세요.
- Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
- Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
Claude Code에 설치
Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요
클로드스킬마트에서 찾은 스킬을 설치해줘. GitHub 저장소 Vincentwei1021/video-shotcraft 의 SKILL.m 폴더를 내 ~/.claude/skills/video-shotcraft/ 에 그대로 복사해줘. 설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.
직접 명령으로 설치하기
git clone https://github.com/Vincentwei1021/video-shotcraft.git ~/.claude/skills/video-shotcraft⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.
- 사전 준비: Node.js 18+ 와 npm, Python 3(갤러리 로컬 실행·비트 분석용), ffmpeg를 설치합니다. Chrome/Chromium이 있으면 페이지 캡처가 수월합니다.
- 스킬 폴더 생성: 터미널에서
mkdir -p ~/.claude/skills를 실행합니다. - 저장소 클론:
git clone https://github.com/Vincentwei1021/video-shotcraft.git ~/.claude/skills/video-shotcraft - 설치 확인:
ls ~/.claude/skills/video-shotcraft에서SKILL.md,references/,template/,demos/,assets/,gallery/가 보이면 정상입니다. - 템플릿 의존성 설치(선택):
cd ~/.claude/skills/video-shotcraft/template && npm install후npx remotion render src/index.ts AiflPromo out/promo.mp4로 샘플 영상이 나오는지 확인합니다. - 샘플 갤러리 둘러보기: 브라우저에서 https://vincentwei1021.github.io/video-shotcraft/library.html 를 열어 원하는 모션 카드 이름을 복사해 둡니다.
- Claude Code 실행: 프로젝트 폴더에서 Claude Code를 열고 "video-shotcraft로 이 웹사이트 홍보 영상 만들어줘"처럼 요청하면, 스킬이 먼저 제품을 읽기 전용으로 점검하고 3가지 모드를 제안합니다.
- 주의: 실제 페이지를 캡처하므로 고객·개인·내부 데이터가 화면에 있으면 반드시 더미 데이터로 교체한 뒤 캡처를 진행하세요.
GitHub에서 원본 보기 ↗라이선스: Apache-2.0