Repolode
제출하기
win4r

win4r/video-director

HTML, Canvas, SVG, Three.js, GSAP 또는 Remotion 코드로 작성한 짧은 영상을 계획·제작·렌더링·검수하도록 Claude Opus 5.5를 안내하는 Claude Code 스킬입니다.

GitHub에서 보기
스타
385
포크
33
열린 이슈
0
마지막 커밋
8시간 전

어떤 프로젝트인가요?

video-director는 코드를 사용해 짧은 영상을 만드는 Claude 스킬입니다. 영화를 수치로 계획하고, HTML, Canvas, SVG, Three.js, GSAP 또는 Remotion으로 애니메이션을 작성한 뒤 프레임 단위로 MP4를 렌더링하고 결과를 확인하도록 모델을 안내합니다. 런칭 영상, 프로모션, 설명 영상, 데이터 스토리, 키네틱 타이포그래피, 일러스트 단편, 루프 영상, 소셜 릴스를 대상으로 하며, 주로 Claude Code에서 Claude Opus 5.5와 함께 사용하도록 설계되었습니다.

이 스킬에는 근거를 덧붙인 원칙, 각 단계마다 검수 관문이 있는 워크플로, Python 스크립트 두 개가 포함되어 있습니다. check_timeline.py는 코드를 작성하기 전에 계획을 검증합니다. qa_video.py는 렌더링된 파일을 분석해 첫 프레임의 텍스트 크기와 대비, 플래시, 컷, 정지 구간, 루프 연결부, 음량, 무음 구간, 콘택트 시트를 확인합니다. 복사해서 쓸 수 있는 샷 라이브러리는 의도적으로 포함하지 않았습니다.

설치하려면 스킬 폴더를 ~/.claude/skills/에 복사하거나, 압축한 폴더를 커스텀 스킬로 업로드하면 됩니다. 스크립트를 실행하려면 ffmpeg, numpy와 Pillow가 설치된 Python 3이 필요하며, HTML 렌더링에는 Playwright와 Chromium이 포함된 Node도 필요합니다.

핵심 기능

  • 01타임라인 파일로 영상을 계획하고, 코드를 작성하기 전에 check_timeline.py로 검증합니다.
  • 02HTML, Canvas, SVG, Three.js, GSAP 또는 Remotion으로 애니메이션을 제작합니다.
  • 03렌더링된 MP4의 첫 프레임 텍스트 크기와 대비, 플래시, 컷, 정지 구간을 분석합니다.
  • 04qa_video.py로 루프 연결부와 오디오 음량 및 무음 구간을 확인합니다.
  • 05스킬을 평가하기 위한 채점 기준이 포함된 테스트 브리프를 제공합니다.

활용 사례

  • CLI 도구의 README를 바탕으로 짧은 루프형 런칭 영상을 제작합니다.
  • 코드로 그린 애니메이션을 활용해 알고리즘을 설명하는 내레이션 영상을 만듭니다.
  • CSV 데이터 세트를 사실에 충실한 수치로 소셜 릴스로 만듭니다.
  • 기존 코드 기반 영상의 속도감이 느리거나 텍스트를 읽기 어려운 문제를 검토하고 수정합니다.

빠른 시작

  1. 1

    저장소를 클론합니다

    git clone https://github.com/win4r/video-director.git
  2. 2

    스킬 폴더를 개인 Claude Code 스킬에 복사합니다

    cp -R video-director/video-director ~/.claude/skills/
  3. 3

    타임라인 검사기로 계획을 검증합니다

    python3 video-director/scripts/check_timeline.py timeline.json

사용 전 알아둘 점

  • 주로 Claude Code의 Claude Opus 5.5에 맞춰 제작되었으며, 다른 모델은 평가하지 않았습니다.
  • HTML 영상 렌더링에는 Playwright와 Chromium을 갖춘 Node, ffmpeg, Python 패키지가 필요합니다.
  • 평가 결과는 구성별로 한 번씩 실행한 결과이므로 근거가 제한적입니다.

포함된 컬렉션

Claude Code 도구·스킬·플러그인AI 에이전트 스킬 라이브러리AI 영상·오디오 도구

토픽

#claude-code#video-generation#animation#remotion#threejs#html-canvas#ffmpeg#agent-skill

자주 묻는 질문

video-director은(는) 무엇인가요?
HTML, Canvas, SVG, Three.js, GSAP 또는 Remotion 코드로 작성한 짧은 영상을 계획·제작·렌더링·검수하도록 Claude Opus 5.5를 안내하는 Claude Code 스킬입니다. video-director는 코드를 사용해 짧은 영상을 만드는 Claude 스킬입니다. 영화를 수치로 계획하고, HTML, Canvas, SVG, Three.js, GSAP 또는 Remotion으로 애니메이션을 작성한 뒤 프레임 단위로 MP4를 렌더링하고 결과를 확인하도록 모델을 안내합니다. 런칭 영상, 프로모션, 설명 영상, 데이터 스토리, 키네틱 타이포그래피, 일러스트 단편, 루프 영상, 소셜 릴스를 대상으로 하며, 주로 Claude Code에서 Claude Opus 5.5와 함께 사용하도록 설계되었습니다.
video-director은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
video-director은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
video-director은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. video-director의 마지막 커밋은 2026년 11월 7일입니다.
video-director은(는) 어디에 사용할 수 있나요?
CLI 도구의 README를 바탕으로 짧은 루프형 런칭 영상을 제작합니다. 코드로 그린 애니메이션을 활용해 알고리즘을 설명하는 내레이션 영상을 만듭니다. CSV 데이터 세트를 사실에 충실한 수치로 소셜 릴스로 만듭니다. 기존 코드 기반 영상의 속도감이 느리거나 텍스트를 읽기 어려운 문제를 검토하고 수정합니다.
video-director는 어떻게 설치하나요?
저장소를 클론합니다: git clone https://github.com/win4r/video-director.git 스킬 폴더를 개인 Claude Code 스킬에 복사합니다: cp -R video-director/video-director ~/.claude/skills/ 타임라인 검사기로 계획을 검증합니다: python3 video-director/scripts/check_timeline.py timeline.json
video-director은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/win4r/video-director

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트