Claude Code 소개 영상 제작 스킬 (intro-video) — 캡처·모션그래픽부터 나레이션 mp4까지

서비스 소개 영상을 만들려면 촬영, 편집 프로그램, 성우가 필요하다고 생각하기 쉽습니다. 이 스킬은 Claude Code가 서비스 화면을 직접 캡처하거나, 장면을 HTML 애니메이션으로 만들어 나레이션이 들어간 mp4까지 뽑게 합니다.

만들 수 있는 것

• A형 모션그래픽 — 9:16 쇼츠·릴스. 키네틱 타이포, 카운트업, 카드 등장, 와이프 전환
• B형 화면 시연 — 16:9 소개 영상. 실제 서비스 캡처(데모 로그인 포함) + 느린 줌 + 자막
• 나레이션 자동 생성(edge-tts, 무료), 음성 길이에 맞춘 장면 길이 조정, 음량 정규화

실제 결과물 두 편은 커뮤니티 제작기에서 볼 수 있습니다. 촬영 없이 서비스 소개 영상 2편 만들기 — 제작기

이 스킬의 태도 — 한 번에 다 만들지 않는다

형식(A/B)·용도·규격·소리를 먼저 묻고, 소재 → 콘티 → 목소리 → 미리보기 → 최종 단계마다 결과를 보여주고 확인받습니다. 방향은 고치는 비용이 가장 싼 단계에서 잡습니다. 장면별 캐시가 있어서 한 장면을 고치면 그 장면만 다시 렌더됩니다.

들어 있는 것

• SKILL.md — 단계별 절차, 모델 분담(판단/실행), 실제로 겪은 함정 목록
• capture.mjs — 설정 JSON으로 페이지 캡처(데모 로그인 버튼 클릭, 스크롤, 요소 닫기)
• html-clip.mjs — HTML 애니메이션을 프레임 단위로 정확히 캡처해 mp4로
• tts.mjs — 장면별 나레이션 생성·캐시·길이 맞춤
• render.mjs — 켄 번즈, 자막, 전환, 엔드카드, 오디오 믹싱을 scenes.json 하나로
• contact-sheet.sh — 캡처·장면 썸네일 시트
• 템플릿 — 위 두 영상의 실제 scenes.json, 공통 CSS, 장면 HTML, 콘티

실측 (Linux 노트북, 2026-09)

필요 환경

• Claude Code, Node.js 18+, ffmpeg(drawtext 포함), 한글 폰트 파일
• 나레이션: uv(권장) 또는 pip install edge-tts, 인터넷 연결
• Linux에서 제작·검증했습니다. macOS는 폰트 경로만 바꾸면 됩니다(README에 안내). Windows는 검증하지 않았습니다.

확인한 것 / 못한 것

• 확인: 빈 폴더에 압축을 풀고 npm i → npx playwright install chromium → 장면 캡처까지 실제로 돌려 봤습니다.
• 못한 것: macOS·Windows 실행, BGM 믹싱(기능은 있으나 실제 곡으로 검증 안 함).
• edge-tts는 Microsoft Edge 온라인 음성을 쓰는 비공식 도구입니다. 상업 영상에 쓸 때는 약관을 직접 확인하세요.

이런 분께 권합니다

• SaaS·웹 서비스를 만들었는데 소개 영상이 없는 1인 개발자·소규모 팀
• 랜딩 페이지·영업 미팅·쇼츠용 영상을 매번 외주 주기 부담스러운 분
• Claude Code로 반복 작업을 스킬로 쌓아 가는 방식을 참고하고 싶은 분