Remotion 영상편집 MCP 서버

Remotion 기반의 웹 영상편집 플랫폼으로, MCP (Model Context Protocol) 서버를 통해 직접적인 편집 기능을 제공합니다.

🎯 주요 기능

1. 미디어 파일 관리

• 파일 업로드: 비디오, 오디오, 이미지 파일 지원
• 메타데이터 추출: 해상도, 지속시간, 파일크기 등 자동 추출
• 썸네일 생성: 비디오 및 이미지 파일의 썸네일 자동 생성
• 파일 형식 지원: MP4, MOV, AVI, MP3, WAV, JPG, PNG 등

2. 타임라인 편집

• 멀티트랙 지원: 비디오, 오디오, 자막 트랙 독립 관리
• 정밀한 시간 조정: 프레임 단위 편집 가능
• 드래그 앤 드롭: 직관적인 미디어 배치
• 실시간 미리보기: 편집 중 즉시 결과 확인

3. 편집 작업

• 트림: 시작/끝점 조정으로 클립 길이 편집
• 분할: 특정 지점에서 클립을 둘로 나누기
• 이동: 타임라인 상에서 클립 위치 이동
• 겹침 해결: 자동으로 충돌하는 클립 정리
• 실행 취소/다시 실행: 모든 편집 작업 되돌리기 가능

4. 레이아웃 및 배치

• 2D 변환: 위치, 크기, 회전, 투명도 조정
• 레이어 관리: 여러 미디어의 층별 배치
• 키프레임 애니메이션: 시간에 따른 속성 변화
• 트랜지션 효과: fadeIn, fadeOut, slide 등

🏗️ 아키텍처

핵심 컴포넌트

1. MediaFileManager (src/utils/mediaUtils.ts)

// 미디어 파일 업로드 및 관리
const mediaManager = new MediaFileManager();
const mediaFile = await mediaManager.uploadFile(file);

2. TimelineManager (src/utils/timelineUtils.ts)

// 타임라인 및 편집 작업 관리
const timeline = new TimelineManager(30); // 30fps
const track = timeline.createTrack('Video Track', 'video');
timeline.addItemToTrack(trackId, mediaItem);

3. MCPVideoEditingServer (src/api/mcpInterface.ts)

// MCP 서버 인터페이스
const server = new MCPVideoEditingServer();
const sessionId = server.createSession();
const response = await server.handleRequest(mcpRequest);

MCP API 엔드포인트

세션 관리

• session.create: 새 편집 세션 생성
• session.delete: 세션 삭제
• session.list: 활성 세션 목록

미디어 관리

• media.upload: 파일 업로드
• media.list: 미디어 라이브러리 조회
• media.delete: 파일 삭제
• media.get_info: 파일 정보 조회

타임라인 편집

• timeline.create_track: 새 트랙 생성
• timeline.add_item: 미디어를 트랙에 추가
• timeline.move_item: 클립 이동
• timeline.trim_item: 클립 트림
• timeline.split_item: 클립 분할
• timeline.get_state: 현재 타임라인 상태

편집 작업

• edit.undo: 실행 취소
• edit.redo: 다시 실행
• render.export: 비디오 내보내기

🚀 시작하기

설치

npm install

개발 서버 실행

npm run dev

빌드

npm run build

💻 사용 예시

기본 편집 워크플로우

// 1. MCP 클라이언트 초기화
const client = new MCPClient('http://localhost:3000/mcp');
await client.startSession();

// 2. 미디어 파일 업로드
const mediaFile = await client.uploadMedia(fileData, 'video.mp4', 'video/mp4');

// 3. 트랙 생성 및 미디어 추가
const track = await client.createTrack('Main Video', 'video');
const mediaItem = await client.addToTimeline(track.id, mediaFile.id, 0);

// 4. 편집 작업
await client.trimItem(track.id, mediaItem.id, 30, 180); // 30-180프레임 구간만 사용

// 5. 내보내기
const exportId = await client.exportVideo('mp4', 'high');

고급 편집 기능

// 키프레임 애니메이션
const keyframeManager = new KeyframeManager();
keyframeManager.addKeyframe(itemId, {
  frame: 0,
  property: 'opacity',
  value: 0,
  easing: 'ease-in'
});
keyframeManager.addKeyframe(itemId, {
  frame: 30,
  property: 'opacity',
  value: 1,
  easing: 'ease-in'
});

// 현재 프레임에서 값 계산
const currentOpacity = keyframeManager.getValue(itemId, 15, 'opacity'); // 0.5

🎨 컴포넌트 구조

MyComposition

메인 비디오 컴포지션으로, 모든 미디어 요소들을 렌더링합니다.

<MyComposition 
  mediaItems={mediaItems}
  timelineControls={timelineControls}
/>

EditorDemo

편집 인터페이스 데모 컴포넌트입니다.

<EditorDemo 
  width={1280}
  height={720}
  fps={30}
/>

📁 프로젝트 구조

src/
├── Composition.tsx          # 메인 비디오 컴포지션
├── Root.tsx                 # Remotion 루트 컴포넌트
├── utils/
│   ├── mediaUtils.ts        # 미디어 파일 관리 유틸리티
│   └── timelineUtils.ts     # 타임라인 편집 유틸리티
├── api/
│   └── mcpInterface.ts      # MCP 서버 인터페이스
└── demo/
    └── EditorDemo.tsx       # 편집 데모 컴포넌트

🙏 Acknowledgments

• Remotion - React 기반 비디오 제작 프레임워크
• Model Context Protocol - AI 에이전트 통신 프로토콜