Video Shotcraft로 Claude Code와 Codex에 제품 홍보 영상 스킬 연결하기

개요

제품 기능은 이미 만들었는데 소개 영상에서 멈추는 경우가 많습니다. 화면 녹화만 이어 붙이면 기능은 보여줘도, 어떤 장면을 먼저 보여줄지와 전환 리듬을 잡는 문제는 그대로 남습니다. video-shotcraft는 Claude Code와 Codex에 넣는 skill 묶음입니다. 웹·데스크톱 제품의 실제 화면을 Remotion 영상으로 옮길 때 쓸 장면 카드와 템플릿을 제공합니다.

저는 이 도구가 영상 생성 모델보다 기존 제품 화면을 살려야 하는 팀에 더 맞는다고 봅니다. 새 이미지를 만드는 도구가 아니라 제품 스크린샷, 자막, 전환, 효과음을 조합하는 제작 규칙이기 때문입니다. README에는 shot recipe card 106개, motion preview 161개, style 162개, 그리고 Remotion 구현 예제가 들어 있습니다.

적용 대상

• 웹 서비스 출시 페이지용 짧은 제품 소개 영상
• 데스크톱 앱 기능 시연 영상
• Claude Code 또는 Codex가 이미 관리하는 프런트엔드 프로젝트

게임 트레일러, 실사 촬영, 텍스트 한 줄로 완성 영상을 뽑는 작업에는 맞지 않습니다. 실제 화면과 브랜드 자산이 있어야 카드와 템플릿의 장점이 살아납니다.

설치 절차

README의 빠른 설치 경로는 skills CLI입니다. Claude Code와 Codex 모두 저장소를 각 skill 디렉터리에 연결하는 방식도 지원합니다. 설치 전에 Node.js와 Remotion 프로젝트를 쓸 환경을 준비해주시면 됩니다.

npx skills add Vincentwei1021/video-shotcraft

수동 설치는 아래처럼 저장소를 복제한 뒤 심볼릭 링크를 만듭니다. Claude Code는 ~/.claude/skills/video-shotcraft, Codex는 ~/.codex/skills/video-shotcraft 경로를 사용합니다.

git clone https://github.com/Vincentwei1021/video-shotcraft.git
cd video-shotcraft
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft

저장소의 SKILL.md는 세 가지 제작 모드를 구분합니다. Ink Press 템플릿을 바로 바꾸는 방식, Agent가 흐름을 정하는 자유 제작, 중간 결정을 함께 고르는 공동 제작입니다. 제품 화면만 전달하고 자동으로 템플릿을 씌우는 도구는 아닙니다. 모드를 먼저 정해야 장면 구성과 필요한 자료가 엇갈리지 않습니다.

1. 작업 흐름

첫 단계는 제품을 읽는 일입니다. skill은 프로젝트나 페이지를 읽기 전용으로 확인하고, 실제 화면을 보여줄 때는 스크린샷을 쓰도록 안내합니다. 고객 정보, 계정명, API 키가 화면에 있으면 먼저 가린 뒤 캡처해야 합니다. 이 부분을 건너뛰면 영상 품질보다 공개 범위가 먼저 문제가 됩니다.

장면 카드는 Gallery에서 이름을 골라 쓸 수 있습니다. 예를 들어 deck-deal-flyin, row-embed, spotlight-hero-card처럼 장면 이름을 요청에 넣으시면 됩니다. 카드를 고르면 해당 카드 문서와 Remotion TSX demo를 읽어 전환 시간, easing, 화면 배치를 맞춥니다. 카드 이름만 보고 새 효과를 흉내 내는 방식보다 원본 구현을 쓰는 쪽이 안전합니다.

제작용 템플릿은 template/에 있습니다. npm install 뒤 npx remotion render src/index.ts AiflPromo out/promo.mp4 명령으로 렌더 경로를 확인합니다. gallery/는 python3 -m http.server 4178로 열 수 있습니다. Gallery에서 장면을 고른 다음 제품 화면을 준비하시면 됩니다. 여기까지가 설치입니다.

확인

저장소에는 GitHub Release와 tag가 아직 없습니다. 기본 브랜치 최신 커밋은 2026-07-24입니다. 따라서 특정 버전에 고정해야 하는 운영 작업이라면 커밋 SHA를 기록하고 skill을 복제해두는 편이 낫습니다.

SKILL.md, references/shots/, demos/, template/ 디렉터리가 보이면 설치 구조는 정상입니다. 기존 자동화 흐름은 Tasker, n8n, Firefly III 연동 가계부 자동 기록 시스템 구축 글처럼 결과물을 연결하는 용도로 이어갈 수 있습니다.