영상·미디어

Video Shotcraft

교사 개인용 ⭐ 12,066 Apache-2.0

Claude Code나 Codex에 붙여, 웹 페이지를 가로 소개 영상(MP4)으로 만드는 스킬입니다. 2026-10 안내 기준 샷 카드 124장, 샷 150개.

무엇을 하나요

이미 있는 웹 페이지를 찍어, 가로 소개 영상으로 만들어 주는 스킬입니다. 교실을 찍는 앱이 아닙니다. 교사가 Claude Code나 Codex에게 페이지를 맡기면, 코드로 그린 영상 파일(MP4)이 나옵니다.

먼저 결과부터

아래는 저장소가 올린 예시입니다. 학교 장면이 아니라, 제품 페이지를 영상으로 바꾼 샘플입니다. 표지와 샷 세 장은 움직이는 그림이고, 만드는 순서는 GIF입니다.

갤러리 샷 여섯 장면을 모은 표지 — 표지. 저장소가 적은 여섯 샷: graze-face-tour, logo-shrink-wordmark-lockup, panel-grid-moves, product-card-progressive-assemble, space-camera-moves·exploded-view, spotlight-hero-card

페이지를 찍어 영상 파일로 만드는 여덟 초 흐름 — 약 8초. 페이지를 찍고, 샷 카드로 구성을 짜고, Remotion으로 움직인 뒤, 박자와 소리를 맞추고, 검사해서 MP4와 편집기, 젠잉 초안까지 갑니다

큰 글자 사이로 화면이 보이는 오프닝 샷 text-as-mask — 시작·브랜드, text-as-mask. 제목 글자 사이로 화면이 보입니다

카드가 펼쳐지는 샷 card-stack — 화면 등장, card-stack. 카드가 펼쳐지며 자리에 앉습니다

그래프가 치솟으며 축이 바뀌는 샷 axis-rescale-shock — 데이터, axis-rescale-shock. 그래프가 치솟으며 축이 바뀝니다

만든 뒤 고치는 화면

브라우저에서 샷, 자막, 소리를 고치는 Motion Workbench — Motion Workbench. 왼쪽에서 영상을 보고, 아래 줄에서 샷·전환·자막·효과음을 고칩니다

▲ 출처: workbench/docs/overview.png. 글, 글자 크기, 색, 길이, 속도를 고치고, 갤러리의 150개 샷을 끌어 넣을 수 있습니다. 미리보기와 최종 파일의 프레임은 같다고 합니다. 안내 글은 중국어입니다.

수업 준비에 어떻게 쓰나

저장소가 말하는 용도는 제품 홍보 영상입니다. 교사는 같은 순서로, 이미 공개한 페이지만 넣을 수 있습니다.

학급 홈, 행사 안내, 과제 안내처럼 주소가 있는 페이지를 보여 주고, 소개 영상을 맡깁니다.
샷 이름은 갤러리에서 복사해 그대로 말할 수 있습니다. README 예시는 deck-deal-flyin, spotlight-hero-card입니다.
빠르게 가려면 Ink Press 템플릿에 스크린샷, 문구, 로고를 넣는 길입니다.
파일은 MP4, 가로 1920×1080, 30fps, h264이고 음악과 효과음이 들어갑니다. Remotion 프로젝트 원본도 남습니다.

학생 얼굴 영상이나 수행평가 촬영본을 잘라 주는 기능은 이 저장소 안내에 없습니다.

준비부터 파일까지

Claude Code 또는 Codex가 필요합니다. README는 이 스킬을 그 둘에 맞춰 만들었다고 합니다.
에이전트에게 이 문장을 보냅니다. Install this skill for me: https://github.com/Vincentwei1021/video-shotcraft
터미널을 쓴다면 npx skills add Vincentwei1021/video-shotcraft 입니다. 저장소를 직접 받으면 Claude는 ~/.claude/skills/video-shotcraft, Codex는 ~/.codex/skills/video-shotcraft로 연결합니다.
Node.js, npm, ffmpeg, ffprobe가 있어야 합니다. uv는 배경음악 박자를 볼 때만, puppeteer는 페이지를 찍을 때 스크립트가 설치합니다. Remotion은 처음 렌더할 때 헤드리스 크롬을 받습니다.
그다음 말합니다. Use video-shotcraft to make a promo for my product. 페이지 주소나 프로젝트 폴더를 함께 줍니다.
영상이 나오면 브라우저 편집기가 열립니다. 다시 열려면 node workbench/scripts/open.mjs 뒤에 프로젝트 이름을 붙입니다.

시험한 환경은 macOS입니다. Linux는 동시 작업 수, 크롬 실행 파일, CDN이 막힐 때를 README가 따로 적습니다. Windows에서 렌더가 되는지는 적혀 있지 않습니다.

학생 정보. 실제 페이지는 스크린샷으로 넣습니다. 공개된 데모 화면만, 확인한 뒤에 남기라고 합니다. 개인·고객·내부 자료, 열쇠, 실시간 데이터는 가짜로 바꾸거나 가리고, 찍기 전에 멈춰 두라고 SKILL.md에 있습니다. 학급 페이지의 이름, 사진, 점수는 지우십시오. 학생에게 이 도구를 직접 쓰라는 안내는 없습니다. 그래서 용도 구분은 교사 개인용입니다.

계정과 키. 영상을 만드는 준비물 표에는 API 키가 없습니다. Claude Code와 Codex 가입 방법은 이 저장소에 없습니다. 소셜에 올릴 때만, 사용자가 요청하면 Upload-Post 키와 프로필 이름이 필요합니다. 무료는 한 달에 10번이고 TikTok은 유료입니다. 문구와 올릴 곳을 확인한 뒤에 보냅니다.

라이선스. 코드와 문서는 Apache-2.0, 저작권 2026 Wei Yihao 입니다. 소리 파일은 여기에 포함되지 않았고, 라이선스도 따로입니다. 대부분은 Mixkit이고, 일부는 출처를 되찾지 못해 상업 사용 전에 확인하라고 ATTRIBUTION.md에 있습니다. Remotion은 개인과 작은 팀은 무료이고 회사는 유료일 수 있다고 README가 안내합니다. 학교가 어디에 해당하는지는 적혀 있지 않습니다. Remotion 라이선스를 따로 보십시오. 젠잉(캡컷 중국판)으로 보내는 기능은 macOS의 JianYing Pro 11.2에서 확인했고, Windows 설치기는 시험하지 않았다고 합니다.

안내 글은 영어와 중국어입니다. 한국어 안내는 없습니다. 저장소 한 줄 소개는 아직 샷 레시피 152개, 모션 미리보기 209개라고 적혀 있습니다. 2026-10 본문은 카드 124장, 샷 150개입니다. 이 페이지는 본문을 따릅니다.

원본 스킬 저장소 ↗ 샷 갤러리 ↗

예시 체험

고1 통합과학 — '우리 반 에너지 기록장' 소개 영상(30초) 만들기

꾸민 수업 예시 직접 생성 — 에이전트 제작 새 창에서 크게 보기

선생님이 입력한 내용

고등학교 1학년 통합과학 '에너지 전환' 단원을 마치며, 교사가 직접 만든 학급 웹페이지(이번 주 전력 사용량·학생 절전 실천 카드·이번 달 실천 현황)를 학부모 공개수업과 과학축제 부스에서 보여 줄 30초 소개 영상이 필요한 상황이다. 선생님 혼자 쓰는 교사 개인용 작업이다.

선생님이 직접 만든 '우리 반 에너지 기록장' 웹페이지를 학부모 공개수업에서 틀어 줄 30초 소개 영상으로 만들어 주세요. 실제 페이지 화면을 찍어서 쓰고, 이번 주 우리 반 전력 사용량 → 학생들이 올린 절전 실천 카드 → 이번 달 실천 현황 순서로 보여 주세요. 시작과 끝에는 '우리 반 에너지 기록장' 이름을 넣고, 자막은 한국어로, 밝고 차분한 종이 질감 분위기로 부탁해요.

나온 결과

스킬이 만든 제작 보드 화면. 위쪽에 '꾸민 수업 예시' 배지와 1920×1080·30fps·SFX-only 표기, 단원·길이·노선·쓰임 정보 칸이 있고, 그 아래 3×3 스토리보드가 있다. 9개 칸에는 어두운 브랜드 오픈, '매일의 실천이 기록으로 남습니다' 자막 카드, 호박색 스포트라이트를 받는 전력 카드(12.4 kWh), 실천 카드가 페이지로 날아 들어오는 장면, 주간 기록 행이 끼워지는 장면, 카드가 쌓이며 카운터가 27로 오르는 장면, '숫자가 아니라 습관을 봅니다' 자막 카드, 카드들이 워드마크 옆에 모이는 아웃트로가 각각 샷 카드 이름·프레임과 함께 보인다. 아래에는 9행 프레임 타임라인 표(프레임·샷 카드·자막/화면 내용·사운드), 시각 토큰 색 견본, 기능→샷 카드 매핑이 있다.

노선: 자유 창작 · 종이와 잉크(호박색) · 890f ≈ 29.7초 · 9샷 01 brand-ink-open — 십자선 그리기 → 「우리 반 에너지 기록장」 낙인 → 1초 정지 03 spotlight-hero-card — 대시보드 소등 → 이번 주 전력 카드에 스포트라이트 → 3D 주석 07 list-stack-press — 실천 카드가 아래에서 위로 쌓이고 카운터가 한 칸씩 올라감 09 outro-group-photo-launch — 기록·실천 카드가 사방에서 모여 워드마크 옆에서 단체 사진 → 1초 hold

직접 해 보기 — 3단계

Claude Code 같은 AI 에이전트에 저장소 안내대로 이 스킬을 설치한다.
학급 웹페이지 주소와 보여 줄 순서·길이·분위기를 적은 한 문장을 붙여 넣는다. 위 문장을 바꿔 써도 된다.
에이전트가 낸 제작 보드(제품 브리프·기능→샷 매핑·스토리보드·프레임 타임라인)를 먼저 확인하고, 렌더링된 MP4의 화면과 자막·숫자를 실제 페이지와 맞춰 본다.

수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (video-shotcraft) · 확인일 2026-10-16. 이 스킬은 실제로는 Remotion(코드로 프레임을 그리는 영상 렌더러)으로 1920×1080·30fps MP4를 뽑는 도구다. 이 환경에서는 렌더러(Remotion·헤드리스 Chrome)를 돌릴 수 없어, 스킬 문서가 정한 제작 보드(제품 브리프·시각 토큰·기능→샷 매핑·스토리보드·프레임 타임라인)를 문서 순서대로 산출해 그대로 보여 주는 방식으로 대신했다. 그림은 그 제작 보드를 캡처한 것이고, 9개 칸은 스토리보드용 목업 프레임이며 실제 학급 페이지 캡처나 렌더링된 영상 프레임이 아니다. 화면 속 12.4 kWh·27장·참여 24명 같은 숫자는 수업용 예시 값이고 측정한 사실이 아니다. 실제로 쓰려면 학급 웹페이지를 로컬에서 띄워 2배 해상도 전체 페이지 캡처를 넣어야 하고, 실명·개인정보가 담긴 자료는 반드시 가상·비식별로 바꿔야 한다. 영상 렌더링에는 Node.js·ffmpeg가 필요하고, 렌더 엔진인 Remotion은 개인·소규모 팀은 무료이나 학교·회사는 별도 라이선스 확인이 필요하다. 완성된 MP4는 교사가 직접 화면을 넘겨 보며 자막 오탈자와 숫자를 실제 페이지와 대조해야 한다.

써 보려면

저장소 Vincentwei1021/video-shotcraft를 엽니다.
설치가 필요합니다. 절차는 저장소 안내를 따릅니다.
이 기록에는 API 키가 필요하지 않다고 되어 있습니다.

저장소 열기 정보가 틀렸나요?

출처

저장소Vincentwei1021/video-shotcraft

확인일2026-10-16

용도 구분교사 개인용

GitHub 스타12,066

스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 소개 글과 화면 예시는 발굴·재구성 과정에서 작성했습니다. 정보 정정 요청

라이선스

라이선스Apache-2.0

설치필요

API 키이 기록에는 불필요

변경 이력 (최근 3건)

daily-verifier가 매일 GitHub/GitLab API로 재확인한 사실 변경 기록입니다. 확인 근거는 변경 이력 페이지에 있습니다.

2026-10-16별 수12,066
2026-10-15별 수11,926
2026-10-14별 수11,884