이온디

서비스 소개 영상은 늘 "언젠가 만들어야지" 목록에 있었습니다. 촬영 장비도, 편집 프로그램도 없이 Claude Code 한 세션에서 소개 영상 두 편을 만들었고, 그 과정을 다시 쓸 수 있게 스킬로 묶었습니다. 아래 두 영상이 결과물입니다.

결과물 두 편

1. 모션그래픽 쇼츠 (9:16, 30초)

앱 스크린샷 없이 장면을 HTML과 CSS 애니메이션으로 만들고, 프레임 단위로 캡처해 영상으로 이었습니다. 나레이션 포함.

2. 실제 화면 시연 (16:9, 60초)

로컬에 띄운 서비스를 헤드리스 브라우저로 캡처했습니다. 로그인이 필요한 대시보드는 데모 로그인 버튼을 스크립트가 직접 눌렀고, 캡처 위에 느린 줌·자막·나레이션을 얹었습니다.

어떻게 요청했나 — 예시 프롬프트

처음부터 "다 만들어줘"라고 하면 오래 걸리고 결국 다시 고치게 됩니다. 첫 시도에서 한 번에 끝까지 렌더하니 12분이 걸렸고, 자막이 화면 숫자와 겹쳐 다시 돌려야 했습니다. 그래서 단계마다 확인받는 순서로 바꿨습니다.

우리 서비스 http://localhost:5173 소개 영상 만들어줘.
- 대상: 재가복지센터 원장님
- 9:16 쇼츠 30초, 나레이션 + 자막
- 캡처(또는 콘티)부터 보여주고, 내가 확인하면 다음 단계로

스킬을 설치해 두면 이 한 문장으로 아래 순서가 자동으로 진행됩니다.

1. 형식 질문 — 모션그래픽(A) / 화면 시연(B) / 촬영본 편집(C), 용도, 규격, 소리
2. 소재 — B형은 화면 캡처 후 썸네일 한 장으로 보여주고 쓸 화면을 고르게 함
3. 콘티 + 나레이션 — 장면·시간·자막·나레이션 표. 여기서 고치는 비용이 0
4. 목소리 — 같은 문장으로 샘플 2~3개를 들려주고 선택
5. 미리보기 → 최종 — 바뀐 장면만 다시 렌더

만들면서 알게 된 것

• 판단과 실행을 나눴습니다. 콘티·대본은 판단이 많은 상위 모델에, 좌표 잡기·렌더링은 꼼꼼한 실행 모델에 맡겼습니다.
• 장면별 캐시가 체감 속도를 가장 크게 바꿨습니다. 장면 하나를 고쳤을 때 다시 렌더하는 시간이 60초 영상은 58초, 30초 쇼츠는 21초였습니다(Linux 노트북 실측).
• 나레이션은 발음대로 씁니다. "YNCare"는 대본에 "와이엔케어"로, 자막은 표기 그대로.
• 렌더 전에 끝 상태 한 장씩 봅니다. 쇼츠에서 떨어지는 파일 카드가 업로드 문구를 덮는 걸 이 단계에서 잡았습니다.
• 로컬 음성 모델은 사양을 탑니다. 4GB GPU에서 Qwen3-TTS는 문장당 약 70초, edge-tts는 1~3초였습니다. 기본은 edge-tts로 두었습니다.

스킬로 받아서 쓰기

캡처·HTML 애니메이션 캡처·나레이션 생성·렌더 스크립트와 위 두 영상의 실제 설정 파일을 묶은 스킬을 프롬프트 게시판에 올렸습니다. Claude Code 소개 영상 제작 스킬 보러 가기

필요 환경: Claude Code, Node.js 18+, ffmpeg, 한글 폰트. 설치는 압축을 ~/.claude/skills/에 풀고 npm i && npx playwright install chromium 두 줄입니다.