video-maker

video-maker: 코드 기반 영상 제작

React 기반 프레임워크 Remotion을 사용해서 코드로 영상을 만들어주는 커맨드예요. 프로그래밍으로 영상을 만들 수 있어서, AI가 직접 영상 코드를 작성하고 렌더링할 수 있어요.

모든 출력은 **한국어(토스체)**로 작성해요.

---

Step 0: Remotion MCP 설치 확인

Remotion MCP가 설치되어 있으면 문서 검색이 훨씬 정확해져요. 설치 여부를 먼저 확인하세요:

mcp__remotion-documentation__remotion-documentation 도구가 사용 가능한지 확인해요.

사용 불가능한 경우 — MCP 설치 안내

사용자에게 안내하세요:

Remotion MCP를 설치하면 AI가 공식 문서를 실시간으로 검색할 수 있어요. 설치 방법이에요:

# Claude Code를 종료하고, .mcp.json 파일에 추가해요

프로젝트 루트의 .mcp.json 파일을 확인하거나 생성하세요:

{
  "mcpServers": {
    "remotion-documentation": {
      "command": "npx",
      "args": ["@remotion/mcp@latest"]
    }
  }
}

설정을 저장한 뒤 Claude Code를 종료하고 다시 시작해야 MCP가 활성화돼요. 종료: Ctrl+C 또는 /exit 재시작: claude

재시작 후 다시 /video-maker를 실행해주세요!

MCP 없이도 기본 기능은 동작하지만, MCP가 있으면 30개 이상의 Remotion 전문 규칙(자막, 3D, 차트, 오디오 등)을 실시간 참조할 수 있어요.

---

Step 1: 모드 파악

사용자 메시지에서 모드를 파악하세요:

• init — "새 영상 프로젝트", "Remotion 셋업", "영상 프로젝트 만들기" → 프로젝트 초기 설정
• create — "영상 만들어줘", "인트로 영상", "텍스트 애니메이션" → 영상 컴포넌트 생성
• edit — "영상 수정", "길이 변경", "색상 바꿔" → 기존 영상 수정
• render — "렌더링", "영상 출력", "mp4로" → 영상 렌더링

---

Step 2-A: init 모드 (프로젝트 셋업)

기존 프로젝트에 추가하는 경우

npm i remotion @remotion/cli @remotion/media

필요에 따라 추가 패키지:

• @remotion/transitions — 장면 전환 효과
• @remotion/gif — GIF 임베딩
• @remotion/three — 3D (Three.js)

기본 파일 구조를 생성하세요:

src/remotion/
├── index.ts        # registerRoot
├── Root.tsx        # Composition 정의
└── compositions/   # 영상 컴포넌트들
    └── MyVideo.tsx

src/remotion/index.ts:

import { registerRoot } from "remotion";
import { Root } from "./Root";
registerRoot(Root);

src/remotion/Root.tsx:

import { Composition } from "remotion";
import { MyVideo } from "./compositions/MyVideo";

export const Root: React.FC = () => (
  <>
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150}
      width={1920}
      height={1080}
      fps={30}
      defaultProps={{}}
    />
  </>
);