앱을 제품 홍보 영상으로 바꿔주는 오픈소스 Claude Code 스킬을 만들었습니다 (직접 예고편도 만들었어요)

공지: 이거 내 개인 프로젝트고, 무료에 MIT 라이선스임. 여기 있는 형들이 딱 좋아할 만한 물건이라 가져와 봤음 (써보고 문제점 있으면 좀 찔러줘).

난 데모 영상 만드는 거 진짜 극혐함. 화면 녹화하고, 내레이션 꼬여서 버벅대고, 타임라인 편집기랑 씨름하다가, 디테일 하나 바뀌면 처음부터 다시 해야 하잖아. 만드는 건 재밌는데, 영상 만드는 건 그냥 세금 내는 기분임.

그래서 Claude Code로 그 '세금'을 자동화해 버렸음. HVE Spielberg는 명령어 하나로 니 앱을 설명하는 브랜드 영상까지 싹 다 만들어줌.

프로젝트에서 /hve-spielberg를 실행하면 6단계 파이프라인이 돌아가는데, 단계마다 니 승인을 받고 진행함:

1. Discovery — 코드베이스 읽고 나서, 이게 누구를 위한 건지, 어떤 느낌을 줘야 하는지 물어봄. 픽셀 하나 찍기 전에 디자인 사고부터 하는 거임.
2. Storytelling — 서사, 스토리보드, 보이스오버 대본 작성.
3. Capture — Chrome DevTools가 니 실제 UI를 녹화함. 목업 따위 안 씀.
4. Design — 니 브랜드 스타일이나, 미리 설정된 10가지 프리셋(Stripe, Linear, Vercel, GitHub 등) 중 하나 선택.
5. Production — HTML + GSAP으로 모션 그래픽 만들고, headless Chromium으로 렌더링.
6. Audio + render — ElevenLabs나 로컬 TTS로 보이스오버 입히고, Freesound 음악 깔고, ffmpeg로 MP4 뽑아냄.

모드는 3가지: Promo, Showcase, Tutorial.

API 키 없어도 돌아감. 보이스오버는 로컬 모델(Kokoro-82M, 54개 목소리)이 기본이고, 퀄리티 높이고 싶으면 ElevenLabs 키만 추가하면 됨. 음악은 선택 사항임(Freesound 쓰거나 니가 가진 거 써도 됨). 결과물은 그냥 HTML/CSS/GSAP이라 니가 직접 수정해서 다시 렌더링할 수도 있음.

내가 제일 맘에 드는 부분은, 이 툴 소개 영상 전부 다 이 툴로 만들었다는 거임. 최근에 올린 건 Puppeteer에서 버그 고친 거 2분짜리 쇼케이스 영상인데 함 봐봐:

Watch

. 오리지널 트레일러: .