Rendervid AI 통합 - Claude Code, Cursor 및 MCP로 비디오 생성

소개: AI 기반 비디오 생성

프로그래밍 방식으로 비디오를 만드는 것은 전통적으로 비디오 코덱, 애니메이션 프레임워크 및 렌더링 파이프라인에 대한 깊은 지식이 필요했습니다. Rendervid는 JSON 템플릿을 받아 완성된 비디오를 출력함으로써 이러한 복잡성을 제거합니다. 자연어를 이해하는 AI 에이전트와 결합하면 강력한 결과를 얻을 수 있습니다. 평범한 영어로 비디오를 설명하고 렌더링된 MP4를 받을 수 있는 능력입니다.

Rendervid는 AI 언어 모델과 비디오 제작 사이의 간극을 메웁니다. 코드를 작성하거나 키프레임을 디자인하거나 비디오 편집기를 배우는 대신, AI 에이전트에게 원하는 것을 말하면 됩니다. 에이전트는 유효한 JSON 템플릿 을 생성하고 검증한 다음 Rendervid 엔진을 통해 최종 출력을 렌더링합니다. 전체 프로세스는 단일 대화에서 이루어집니다.

이 통합은 **Model Context Protocol(MCP)**을 기반으로 구축되었으며, 이는 AI 도구가 구조화된 인터페이스를 통해 외부 서비스와 상호 작용할 수 있도록 하는 개방형 표준입니다. Rendervid의 MCP 서버는 렌더링, 검증, 템플릿 검색 및 문서화를 포괄하는 11가지 도구를 노출하여 AI 에이전트가 전문적인 비디오 콘텐츠를 자율적으로 제작하는 데 필요한 모든 것을 제공합니다.

Model Context Protocol(MCP)이란 무엇인가요?

Model Context Protocol은 AI 어시스턴트에게 외부 도구 및 데이터 소스에 대한 구조화된 액세스를 제공하기 위해 개발된 개방형 표준입니다. AI 모델이 API 형식을 추측하거나 REST 엔드포인트를 호출하는 코드를 생성하는 데 의존하는 대신, MCP는 AI 에이전트가 런타임에 쿼리할 수 있는 타입화되고 검색 가능한 인터페이스를 제공합니다.

비디오 생성의 경우 MCP는 중요한 문제를 해결합니다. AI 에이전트는 유효한 출력을 생성하기 전에 무엇이 가능한지 알아야 합니다. MCP가 없다면 AI 모델은 Rendervid의 특정 템플릿 형식에 대해 훈련을 받고, 사용 가능한 모든 애니메이션 프리셋을 알고, 각 레이어 유형의 제약 조건을 이해해야 합니다. MCP를 사용하면 에이전트는 단순히 get_capabilities를 호출하고 모든 구성 요소에 대한 JSON 스키마를 포함한 시스템의 완전한 설명을 받습니다.

MCP가 AI 비디오 생성에 중요한 이유

• 런타임 검색: AI 에이전트는 훈련 시점이 아닌 연결하는 순간에 Rendervid가 할 수 있는 것을 학습합니다. 이는 재훈련 없이 새로운 기능을 즉시 사용할 수 있음을 의미합니다.
• 타입 안전성: 모든 도구에는 정의된 입력 및 출력 스키마가 있습니다. AI 에이전트는 어떤 매개변수가 필요하고 어떤 유형이어야 하는지 정확히 알고 있습니다.
• 렌더링 전 검증: 템플릿을 제출하고 작동하기를 바라는 대신, 에이전트는 먼저 템플릿을 검증하고 렌더링에 시간을 소비하기 전에 문제를 수정할 수 있습니다.
• 도구 조합 가능성: AI 에이전트는 도구를 함께 연결하여 list_examples를 호출하여 시작 템플릿을 찾고, 수정하고, validate_template을 호출하여 확인한 다음 render_video를 호출하여 출력을 생성할 수 있습니다. 모두 단일 대화 턴에서 가능합니다.

MCP 서버 도구 참조

Rendervid의 MCP 서버는 렌더링, 검증 및 검색, 문서화의 세 가지 범주로 구성된 11가지 도구를 노출합니다. 각 도구는 AI 에이전트가 비디오 콘텐츠를 생성할 때 최대한의 자율성을 제공하도록 설계되었습니다.

렌더링 도구

이 도구들은 JSON 템플릿에서 비디오 및 이미지 출력의 실제 제작을 처리합니다.

render_video

JSON 템플릿에서 완전한 비디오 파일을 생성합니다. MP4, WebM 또는 MOV 출력을 생성하기 위한 주요 렌더링 도구입니다.

매개변수:

• template (객체, 필수) – 장면, 레이어, 애니메이션 및 출력 설정을 정의하는 완전한 JSON 템플릿입니다.
• inputs (객체, 선택) – 템플릿 변수 대체를 위한 키-값 쌍입니다.
• output_format (문자열, 선택) – 출력 형식: mp4, webm 또는 mov. 기본값은 mp4입니다.

AI 에이전트의 사용 예:

{
  "tool": "render_video",
  "arguments": {
    "template": {
      "outputSettings": {
        "width": 1080,
        "height": 1920,
        "fps": 30,
        "duration": 10
      },
      "scenes": [
        {
          "duration": 10,
          "layers": [
            {
              "type": "text",
              "text": "Summer Sale - 50% Off",
              "fontSize": 72,
              "fontFamily": "Montserrat",
              "color": "#FFFFFF",
              "position": { "x": 540, "y": 960 },
              "animations": [
                {
                  "type": "fadeInUp",
                  "duration": 0.8,
                  "delay": 0.2
                }
              ]
            }
          ]
        }
      ]
    },
    "output_format": "mp4"
  }
}

반환값: 렌더링된 비디오 파일의 URL 또는 파일 경로입니다.

render_image

JSON 템플릿에서 단일 프레임 또는 정적 이미지를 생성합니다. 썸네일, 소셜 미디어 그래픽, 포스터 프레임 및 정적 마케팅 자료를 만드는 데 유용합니다.

매개변수:

• template (객체, 필수) – 이미지 구성을 정의하는 JSON 템플릿입니다.
• inputs (객체, 선택) – 템플릿 변수 대체 값입니다.
• output_format (문자열, 선택) – 출력 형식: png, jpeg 또는 webp. 기본값은 png입니다.
• frame (숫자, 선택) – 렌더링할 프레임(애니메이션 템플릿에서 특정 순간을 추출하기 위한).

render_image 대 render_video 사용 시기:

• 정적 출력의 경우 render_image를 사용하세요: 썸네일, 배너, 소셜 미디어 게시물, 프레젠테이션 슬라이드.
• 모션이 있는 모든 것에는 render_video를 사용하세요: 애니메이션, 전환, 오디오, 비디오 클립.

start_render_async

장시간 비디오(일반적으로 30초 이상)에 대한 비동기 렌더링 작업을 시작합니다. 렌더링이 동기적으로 완료될 때까지 기다리는 대신, 이 도구는 check_render_status로 폴링할 수 있는 작업 ID를 반환합니다.

매개변수:

• template (객체, 필수) – 완전한 JSON 템플릿입니다.
• inputs (객체, 선택) – 템플릿 변수 값입니다.
• output_format (문자열, 선택) – 원하는 출력 형식입니다.

반환값: check_render_status 및 list_render_jobs와 함께 사용할 수 있는 job_id 문자열입니다.

비동기 렌더링을 사용해야 하는 경우:

• 30초보다 긴 비디오
• 많은 장면 또는 복잡한 애니메이션이 있는 템플릿
• 여러 작업을 제출하고 나중에 결과를 수집하려는 배치 렌더링 워크플로우
• 장기 실행 동기 요청이 시간 초과될 수 있는 클라우드 렌더링 환경

check_render_status

start_render_async로 시작된 비동기 렌더링 작업의 현재 상태를 확인합니다.

매개변수:

• job_id (문자열, 필수) – start_render_async에서 반환된 작업 ID입니다.

반환값: 다음을 포함하는 객체:

• status – queued, rendering, completed 또는 failed 중 하나입니다.
• progress – 렌더링 진행률을 나타내는 백분율(0-100)입니다.
• output_url – 완성된 비디오의 URL(status가 completed일 때만 존재).
• error – 작업이 실패한 경우 오류 메시지입니다.

폴링 워크플로우 예:

AI 에이전트:
1. start_render_async → job_id: "abc-123"
2. check_render_status("abc-123") → status: "rendering", progress: 35
3. check_render_status("abc-123") → status: "rendering", progress: 78
4. check_render_status("abc-123") → status: "completed", output_url: "https://..."

list_render_jobs

활성 및 완료된 모든 비동기 렌더링 작업을 나열합니다. 배치 렌더링 작업을 모니터링하거나 최근 출력을 검토하는 데 유용합니다.

매개변수:

• status_filter (문자열, 선택) – 상태별 필터: queued, rendering, completed, failed 또는 all. 기본값은 all입니다.
• limit (숫자, 선택) – 반환할 최대 작업 수입니다.

반환값: 각각 job_id, status, progress, created_at 및 output_url(완료된 경우)을 포함하는 작업 객체의 배열입니다.

검증 및 검색 도구

이 도구들은 AI 에이전트가 Rendervid가 할 수 있는 것을 이해하고 렌더링하기 전에 템플릿이 올바른지 확인하는 데 도움을 줍니다.

validate_template

렌더링하기 전에 JSON 템플릿을 검증합니다. 이 도구는 템플릿 구조, 필드 유형, 값 제약 조건을 확인하고 미디어 URL(이미지, 비디오, 오디오 파일)에 액세스할 수 있는지 확인합니다. 렌더링하기 전에 검증을 실행하면 렌더링 프로세스 중에 실패할 템플릿에 시간을 낭비하는 것을 방지할 수 있습니다.

매개변수:

• template (객체, 필수) – 검증할 JSON 템플릿입니다.
• check_urls (불리언, 선택) – 미디어 URL에 액세스할 수 있는지 확인할지 여부입니다. 기본값은 true입니다.

반환값: 다음을 포함하는 객체:

• valid – 템플릿이 유효한지 여부를 나타내는 불리언입니다.
• errors – 발견된 각 문제에 대한 path, message 및 severity가 있는 오류 객체의 배열입니다.
• warnings – 중요하지 않은 문제에 대한 경고 객체의 배열(예: 사용되지 않는 변수, 매우 큰 치수).

검증이 포착하는 것:

• 누락된 필수 필드(예: duration이 없는 장면)
• 잘못된 필드 유형(예: 숫자가 예상되는 곳에 문자열)
• 알 수 없는 레이어 유형 또는 애니메이션 프리셋
• 손상되었거나 액세스할 수 없는 미디어 URL(이미지, 비디오, 오디오 파일)
• 범위를 벗어난 값(예: 음수 치수, 최대값을 초과하는 fps)
• 템플릿 변수 구문 오류

검증 응답 예:

{
  "valid": false,
  "errors": [
    {
      "path": "scenes[0].layers[2].src",
      "message": "URL returned HTTP 404: https://example.com/missing-image.png",
      "severity": "error"
    },
    {
      "path": "scenes[1].duration",
      "message": "Scene duration must be a positive number",
      "severity": "error"
    }
  ],
  "warnings": [
    {
      "path": "outputSettings.width",
      "message": "Width 7680 is very large and may result in slow rendering",
      "severity": "warning"
    }
  ]
}

get_capabilities

Rendervid가 할 수 있는 모든 것에 대한 포괄적인 설명을 반환합니다. 이것은 일반적으로 AI 에이전트가 비디오 생성 작업을 시작할 때 호출하는 첫 번째 도구입니다. 응답에는 사용 가능한 레이어 유형, 애니메이션 프리셋, 이징 함수, 필터, 출력 형식 및 해당 JSON 스키마가 포함됩니다.

매개변수: 없음.

반환값: 다음을 포함하는 구조화된 객체:

• layerTypes – JSON 스키마 및 구성 가능한 속성이 있는 모든 사용 가능한 레이어 유형(text, image, video, shape, audio, group, lottie, custom)입니다.
• animations – 설명 및 구성 가능한 매개변수가 있는 범주별로 그룹화된 모든 애니메이션 프리셋(entrance, exit, emphasis, keyframe)입니다.
• easingFunctions – 설명 및 사용 예제가 있는 30개 이상의 모든 이징 함수입니다.
• filters – 매개변수 범위가 있는 사용 가능한 시각 필터(blur, brightness, contrast, saturate, grayscale, sepia 등)입니다.
• outputFormats – 제약 조건이 있는 비디오 및 이미지 렌더링에 대해 지원되는 출력 형식입니다.
• inputTypes – 템플릿 변수 유형 및 검증 규칙입니다.
• sceneTransitions – 매개변수가 있는 17가지 장면 전환 유형입니다.

이 도구가 AI 에이전트에 중요한 이유:

capabilities 응답은 자체 설명 API입니다. AI 에이전트는 Rendervid의 템플릿 형식에 대해 사전 훈련을 받을 필요가 없습니다. 런타임에 get_capabilities를 호출하고 완전한 스키마를 받아 첫 번째 시도에서 유효한 템플릿을 생성할 수 있습니다. Rendervid가 새로운 애니메이션 프리셋 또는 레이어 유형을 추가하면 모든 연결된 AI 에이전트가 코드 변경 없이 이 도구를 통해 즉시 액세스할 수 있습니다.

get_example

이름으로 특정 예제 템플릿을 로드합니다. AI 에이전트는 이를 사용하여 작업 템플릿을 시작점으로 검색한 다음 사용자의 요구 사항에 맞게 수정합니다.

매개변수:

• name (문자열, 필수) – 예제 템플릿 이름(예: instagram-story, product-showcase, animated-bar-chart)입니다.

반환값: 요청된 예제에 대한 완전한 JSON 템플릿으로 렌더링하거나 수정할 준비가 되어 있습니다.

예:

AI 에이전트 호출: get_example("instagram-story")
반환값: 텍스트 레이어, 배경 이미지 및 입장 애니메이션이 있는 완전한 1080x1920 인스타그램 스토리 템플릿

list_examples

범주별로 구성된 50개 이상의 예제 템플릿의 전체 카탈로그를 탐색합니다. AI 에이전트는 이를 사용하여 사용자의 요청과 관련된 시작 템플릿을 찾습니다.

매개변수:

• category (문자열, 선택) – 범주별 필터(예: social-media, marketing, data-visualization, typography, e-commerce)입니다.

반환값: 각각 다음을 포함하는 예제 메타데이터 객체의 배열:

• name – get_example과 함께 사용할 템플릿 식별자입니다.
• category – 템플릿 범주입니다.
• description – 템플릿이 생성하는 것입니다.
• dimensions – 출력 너비 및 높이입니다.
• duration – 템플릿 지속 시간(초)입니다.

문서화 도구

이 도구들은 AI 에이전트가 템플릿을 구성할 때 참조할 수 있는 상세한 참조 문서를 제공합니다.

get_component_docs

특정 구성 요소 또는 레이어 유형 에 대한 상세한 문서를 반환합니다. 속성 설명, 필수 대 선택 필드, 기본값 및 사용 예제를 포함합니다.

매개변수:

• component (문자열, 필수) – 구성 요소/레이어 유형 이름(예: text, image, video, shape, audio, group, lottie, custom, AnimatedLineChart, TypewriterEffect)입니다.

반환값: 다음을 포함하는 포괄적인 문서:

• 유형, 기본값 및 설명이 있는 속성 테이블
• 구성 요소에 대한 JSON 스키마
• 사용 예제
• 브라우저 대 Node.js 렌더링 차이에 대한 참고 사항

get_animation_docs

모든 입장, 퇴장, 강조 및 키프레임 애니메이션 프리셋을 포함한 완전한 애니메이션 효과 참조를 반환합니다.

매개변수:

• animation (문자열, 선택) – 상세한 문서를 가져올 특정 애니메이션 이름(예: fadeInUp, bounceIn, slideOutLeft)입니다. 생략하면 전체 애니메이션 카탈로그를 반환합니다.

반환값: 다음을 포함하는 애니메이션 문서:

• 애니메이션 이름 및 범주(entrance, exit, emphasis, keyframe)
• 시각 효과에 대한 설명
• 구성 가능한 매개변수(duration, delay, easing)
• 기본값
• 권장 사용 사례

get_component_defaults

특정 구성 요소 유형에 대한 기본값 및 전체 JSON 스키마를 반환합니다. AI 에이전트는 이를 사용하여 최소 유효 구성 요소가 어떻게 생겼는지와 재정의할 수 있는 속성을 이해합니다.

매개변수:

• component (문자열, 필수) – 구성 요소/레이어 유형 이름입니다.

반환값: 다음을 포함하는 JSON 객체:

• defaults – 모든 속성에 대한 완전한 기본값
• schema – 구성 요소의 구조, 유형 및 제약 조건을 정의하는 JSON 스키마
• required – 필수 속성 목록

텍스트 레이어에 대한 응답 예:

{
  "defaults": {
    "type": "text",
    "text": "",
    "fontSize": 24,
    "fontFamily": "Arial",
    "color": "#000000",
    "fontWeight": "normal",
    "textAlign": "center",
    "position": { "x": 0, "y": 0 },
    "opacity": 1,
    "rotation": 0,
    "animations": []
  },
  "required": ["type", "text"],
  "schema": {
    "type": "object",
    "properties": {
      "text": { "type": "string", "description": "The text content to display" },
      "fontSize": { "type": "number", "minimum": 1, "maximum": 500 },
      "fontFamily": { "type": "string", "description": "Google Font name or system font" },
      "color": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$" }
    }
  }
}

get_easing_docs

사용 가능한 모든 이징 함수에 대한 완전한 참조를 반환합니다. 이징 함수는 애니메이션의 가속 곡선을 제어하여 느리게 시작하거나 느리게 끝나거나 튀거나 탄성 곡선을 따르는지 결정합니다.

매개변수:

• easing (문자열, 선택) – 상세한 문서를 위한 특정 이징 함수 이름입니다. 생략하면 전체 목록을 반환합니다.

반환값: 다음을 포함하는 각 이징 함수에 대한 문서:

• 함수 이름(예: easeInOutCubic, easeOutBounce, spring)
• 곡선의 수학적 설명
• 모션 느낌의 시각적 설명
• 권장 사용 사례
• CSS 등가물(해당하는 경우)

AI 통합 설정

Rendervid를 AI 도구에 연결하려면 도구의 구성에 MCP 서버를 추가해야 합니다. 설정 프로세스는 도구마다 약간 다르지만 핵심 개념은 동일합니다. AI 도구를 Rendervid의 MCP 서버 진입점으로 가리킵니다.

전제 조건

AI 도구를 구성하기 전에 다음이 있는지 확인하세요:

1. **Node.js 18+**가 시스템에 설치되어 있어야 합니다.
2. GitHub 저장소 에서 Rendervid가 복제되고 빌드되어야 합니다:

git clone https://github.com/AceDZN/rendervid.git
cd rendervid
npm install
cd mcp
npm install
npm run build

3. FFmpeg가 설치되어 있어야 합니다(비디오 출력에 필요):

# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt install ffmpeg

# Windows (Chocolatey 사용)
choco install ffmpeg

Claude Desktop / Claude Code

Claude Desktop 구성 파일에 Rendervid MCP 서버를 추가하세요.

구성 파일 위치:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

구성:

{
  "mcpServers": {
    "rendervid": {
      "command": "node",
      "args": ["/path/to/rendervid/mcp/build/index.js"],
      "env": {}
    }
  }
}

/path/to/rendervid를 실제 Rendervid 설치 경로로 바꾸세요.

**Claude Code(CLI)**의 경우 프로젝트의 .claude/mcp.json 파일 또는 전역 Claude Code 설정에 동일한 구성을 추가하세요. Claude Code는 자동으로 MCP 서버를 감지하고 코딩 세션 중에 11가지 도구를 모두 노출합니다.

구성을 저장한 후 Claude Desktop 또는 Claude Code를 다시 시작하세요. Claude에게 “사용 가능한 Rendervid 도구는 무엇입니까?“라고 물어 연결을 확인할 수 있습니다. Claude는 11가지 MCP 도구를 모두 나열해야 합니다.

Cursor IDE

Cursor의 MCP 구성에 Rendervid MCP 서버를 추가하세요.

구성 파일: 프로젝트 루트의 .cursor/mcp.json(또는 전역 Cursor 설정).

{
  "mcpServers": {
    "rendervid": {
      "command": "node",
      "args": ["/path/to/rendervid/mcp/build/index.js"]
    }
  }
}

저장한 후 Cursor를 다시 시작하세요. Rendervid 도구는 Cursor의 AI 어시스턴트에서 사용할 수 있으며, 편집기에서 직접 비디오를 생성할 수 있습니다.

Windsurf IDE

Windsurf는 AI 구성을 통해 MCP 서버를 지원합니다. Windsurf MCP 설정에 Rendervid 서버를 추가하세요:

{
  "mcpServers": {
    "rendervid": {
      "command": "node",
      "args": ["/path/to/rendervid/mcp/build/index.js"]
    }
  }
}

정확한 구성 파일 위치는 버전 및 운영 체제에 따라 다를 수 있으므로 Windsurf의 문서를 참조하세요.

일반 MCP 설정

MCP 클라이언트 사양을 구현하는 모든 도구는 Rendervid의 MCP 서버에 연결할 수 있습니다. 서버는 기본 MCP 전송인 stdio(표준 입력/출력)를 통해 통신합니다.

사용자 지정 MCP 클라이언트와 통합하려면:

1. MCP 서버 프로세스를 생성합니다:

   node /path/to/rendervid/mcp/build/index.js
   

2. MCP JSON-RPC 프로토콜을 사용하여 stdin/stdout을 통해 통신합니다.
3. tools/list를 호출하여 사용 가능한 도구를 검색합니다.
4. 도구 이름 및 인수와 함께 tools/call을 호출하여 모든 도구를 실행합니다.

MCP 서버는 상태 비저장입니다. 각 도구 호출은 독립적이며 서버는 여러 클라이언트의 동시 요청을 처리할 수 있습니다.

AI 워크플로우: 엔드투엔드 예제

다음 예제는 AI 에이전트가 Rendervid의 MCP 도구를 사용하여 자연어 프롬프트에서 완성된 비디오로 이동하는 방법을 보여줍니다.

예제 1: 소셜 미디어 콘텐츠 생성

사용자 프롬프트: “애니메이션 텍스트와 그라데이션 배경이 있는 여름 세일을 홍보하는 10초 인스타그램 스토리를 만드세요”

AI 에이전트 워크플로우:

1단계 – 기능 검색:

에이전트는 get_capabilities를 호출하여 사용 가능한 레이어 유형, 애니메이션 프리셋 및 출력 제약 조건에 대해 학습합니다. text 및 shape 레이어를 사용할 수 있고 fadeInUp 및 scaleIn 애니메이션이 존재하며 인스타그램 스토리는 1080x1920 해상도를 사용한다는 것을 발견합니다.

2단계 – 시작 템플릿 찾기:

에이전트는 category: "social-media"와 함께 list_examples를 호출하고 instagram-story 템플릿을 찾습니다. 그런 다음 get_example("instagram-story")을 호출하여 전체 템플릿 JSON을 로드합니다.

3단계 – 템플릿 빌드:

예제를 참조로 사용하여 에이전트는 사용자 지정 템플릿을 구성합니다:

{
  "outputSettings": {
    "width": 1080,
    "height": 1920,
    "fps": 30,
    "duration": 10
  },
  "scenes": [
    {
      "duration": 10,
      "layers": [
        {
          "type": "shape",
          "shapeType": "rectangle",
          "width": 1080,
          "height": 1920,
          "gradient": {
            "type": "linear",
            "angle": 135,
            "stops": [
              { "color": "#FF6B35", "position": 0 },
              { "color": "#F72585", "position": 0.5 },
              { "color": "#7209B7", "position": 1 }
            ]
          }
        },
        {
          "type": "text",
          "text": "SUMMER SALE",
          "fontSize": 96,
          "fontFamily": "Montserrat",
          "fontWeight": "bold",
          "color": "#FFFFFF",
          "position": { "x": 540, "y": 700 },
          "animations": [
            { "type": "fadeInUp", "duration": 0.8, "delay": 0.3 }
          ]
        },
        {
          "type": "text",
          "text": "50% OFF EVERYTHING",
          "fontSize": 64,
          "fontFamily": "Montserrat",
          "color": "#FFE066",
          "position": { "x": 540, "y": 850 },
          "animations": [
            { "type": "fadeInUp", "duration": 0.8, "delay": 0.6 }
          ]
        },
        {
          "type": "text",
          "text": "Shop Now  →",
          "fontSize": 48,
          "fontFamily": "Montserrat",
          "color": "#FFFFFF",
          "position": { "x": 540, "y": 1200 },
          "animations": [
            { "type": "scaleIn", "duration": 0.6, "delay": 1.2 }
          ]
        }
      ]
    }
  ]
}

4단계 – 검증:

에이전트는 템플릿 JSON과 함께 validate_template을 호출합니다. 응답은 오류 없이 valid: true로 돌아옵니다.

5단계 – 렌더링:

에이전트는 검증된 템플릿과 함께 render_video를 호출하고 완성된 MP4 파일의 URL을 받습니다.

예제 2: 마케팅 비디오 자동화

사용자 프롬프트: “새 헤드폰에 대한 제품 쇼케이스 비디오를 생성하세요. 이 제품 이미지를 사용하세요: https://example.com/headphones.png . 제품 이름은 ‘SoundPro X1’이고 가격은 $299입니다.”

AI 에이전트 워크플로우:

1. get_capabilities – 이미지 레이어, 텍스트 스타일링 및 애니메이션 옵션에 대해 학습합니다.
2. list_examples – e-commerce 범주에서 product-showcase 템플릿을 찾습니다.
3. get_example("product-showcase") – 제품 이름, 이미지 및 가격에 대한 템플릿 변수 를 사용하는 완전한 제품 쇼케이스 템플릿을 로드합니다.
4. 템플릿 수정 – 사용자의 제품 데이터로 inputs를 업데이트합니다:

   {
     "inputs": {
       "productName": "SoundPro X1",
       "productImage": "https://example.com/headphones.png",
       "price": "$299",
       "tagline": "Premium Sound, Redefined"
     }
   }
   

5. validate_template – 템플릿을 확인하고 https://example.com/headphones.png에 액세스할 수 있는지 확인합니다.
6. render_video – 최종 제품 쇼케이스 비디오를 생성합니다.

이 워크플로우는 AI 에이전트가 템플릿 변수를 활용하여 재사용 가능한 템플릿에서 개인화된 콘텐츠를 만드는 방법을 보여줍니다. 동일한 제품 쇼케이스 템플릿은 입력을 교체하여 수백 개의 고유한 비디오를 생성할 수 있습니다.

예제 3: 데이터 시각화 생성

사용자 프롬프트: “분기별 수익을 보여주는 애니메이션 막대 차트를 만드세요: Q1: $1.2M, Q2: $1.8M, Q3: $2.1M, Q4: $2.7M”

AI 에이전트 워크플로우:

1. get_capabilities – custom 레이어 유형과 AnimatedLineChart 내장 구성 요소 를 발견합니다.
2. get_component_docs("AnimatedLineChart") – 차트 구성 요소에 대한 문서를 읽고 데이터 형식, 색상 구성, 축 레이블 및 애니메이션 옵션에 대해 학습합니다.
3. get_component_defaults("AnimatedLineChart") – 기본값과 JSON 스키마를 가져와 최소 필수 구성을 이해합니다.
4. 사용자 지정 구성 요소 레이어로 템플릿 빌드:

   {
     "type": "custom",
     "component": "AnimatedLineChart",
     "props": {
       "data": [
         { "label": "Q1", "value": 1200000 },
         { "label": "Q2", "value": 1800000 },
         { "label": "Q3", "value": 2100000 },
         { "label": "Q4", "value": 2700000 }
       ],
       "colors": ["#4361EE", "#3A0CA3", "#7209B7", "#F72585"],
       "title": "Quarterly Revenue 2025",
       "yAxisLabel": "Revenue (USD)",
       "animationDuration": 2
     }
   }
   

5. validate_template – 템플릿 구조가 올바른지 확인합니다.
6. render_video – 애니메이션 차트 비디오를 생성합니다.

자체 설명 API: 기능이 AI 에이전트를 효과적으로 만드는 방법

get_capabilities 도구는 Rendervid의 AI 통합의 초석입니다. 시스템이 AI 에이전트에게 정확히 무엇을 할 수 있는지, 어떤 매개변수가 필요한지, 어떤 값이 유효한지 알려주는 자체 설명 API 패턴을 구현합니다. 이를 통해 AI 모델이 Rendervid의 특정 API를 암기하거나 훈련받을 필요가 없습니다.

Capabilities 응답에 포함된 내용

AI 에이전트가 get_capabilities를 호출하면 렌더링 시스템의 모든 측면을 포괄하는 구조화된 응답을 받습니다:

JSON 스키마가 있는 레이어 유형:

{
  "layerTypes": {
    "text": {
      "description": "Renders text with full styling control",
      "schema": {
        "properties": {
          "text": { "type": "string", "required": true },
          "fontSize": { "type": "number", "default": 24, "min": 1, "max": 500 },
          "fontFamily": { "type": "string", "default": "Arial" },
          "color": { "type": "string", "format": "hex-color" },
          "position": { "type": "object", "properties": { "x": {}, "y": {} } },
          "animations": { "type": "array", "items": { "$ref": "#/animations" } }
        }
      }
    },
    "image": { "..." : "..." },
    "video": { "..." : "..." },
    "shape": { "..." : "..." },
    "audio": { "..." : "..." },
    "group": { "..." : "..." },
    "lottie": { "..." : "..." },
    "custom": { "..." : "..." }
  }
}

애니메이션 프리셋:

capabilities 응답은 범주, 구성 가능한 매개변수 및 설명과 함께 모든 애니메이션 프리셋을 나열합니다. 이 데이터를 받는 AI 에이전트는 fadeInUp이 duration, delay 및 easing 매개변수가 있는 입장 애니메이션이며 요소를 페이드 인하면서 위쪽으로 이동한다는 것을 알고 있습니다.

이징 함수:

30개 이상의 모든 이징 함수가 설명과 함께 나열되어 있어 AI 에이전트가 각 애니메이션에 적합한 곡선을 선택할 수 있습니다. 예를 들어 easeOutBounce는 애니메이션 끝에서 튀는 효과를 시뮬레이션하는 것으로 설명되며, 에이전트는 재미있거나 주목을 끄는 콘텐츠에 권장할 수 있습니다.

필터 및 효과:

blur, brightness, contrast, saturate, grayscale, sepia와 같은 시각 필터는 매개변수 범위와 함께 문서화되어 있어 AI 에이전트가 모든 레이어에 후처리 효과를 적용할 수 있습니다.

자체 설명 API가 중요한 이유

전통적인 API는 AI 모델이 훈련 중에 보았을 수도 있고 보지 않았을 수도 있는 문서가 필요합니다. 자체 설명 API는 런타임에 문서를 제공하여 AI 에이전트가 항상 최신의 정확한 정보를 갖도록 보장합니다. Rendervid가 새로운 애니메이션 프리셋 또는 레이어 유형을 추가하면 모든 연결된 AI 에이전트가 문서 업데이트, 재훈련, 버전 불일치 없이 get_capabilities를 통해 즉시 볼 수 있습니다.

AI 비디오 생성 모범 사례

AI 에이전트를 사용하여 Rendervid 비디오를 생성할 때 최상의 결과를 얻으려면 다음 지침을 따르세요.

1. 렌더링하기 전에 항상 검증하세요

모든 렌더링 전에 validate_template을 호출하세요. 렌더링은 계산 비용이 많이 들지만 검증은 거의 즉각적입니다. 검증 도구는 렌더링이 실패하거나 예상치 못한 출력을 생성할 수 있는 문제를 포착합니다:

• 손상된 미디어 URL(404를 반환하는 이미지, 비디오, 오디오 파일)
• 잘못된 JSON 구조 또는 누락된 필수 필드
• 치수, 글꼴 크기 또는 지속 시간에 대한 범위를 벗어난 값
• 알 수 없는 애니메이션 프리셋 또는 레이어 유형

일반적인 AI 워크플로우는 render_video 또는 render_image를 호출하기 전에 항상 검증을 단계로 포함해야 합니다.

2. 예제에서 시작하세요

처음부터 템플릿을 빌드하는 대신 AI 에이전트는 list_examples 및 get_example을 사용하여 관련 시작 템플릿을 찾아야 합니다. 예제 템플릿은 테스트되었으며 좋은 출력을 생성하는 것으로 알려져 있습니다. 예제에서 시작하여 수정하는 것이 완전히 새로운 템플릿 구조를 생성하는 것보다 빠르고 오류가 적습니다.

권장 접근 방식:

1. 관련 범주와 함께 list_examples 호출
2. 가장 일치하는 템플릿에 대해 get_example 호출
3. 사용자의 특정 요구 사항에 맞게 템플릿 수정
4. 검증 및 렌더링

3. 설명적인 프롬프트를 사용하세요

AI 에이전트에게 비디오를 요청할 때 다음에 대해 구체적으로 설명하세요:

• 치수 및 플랫폼 – “1080x1920 인스타그램 스토리"가 “세로 비디오"보다 낫습니다
• 지속 시간 – “10초 인트로"가 “짧은 비디오"보다 낫습니다
• 스타일 및 분위기 – “어두운 배경과 네온 텍스트 및 튀는 애니메이션"은 AI 에이전트에게 명확한 방향을 제공합니다
• 콘텐츠 구조 – “페이드 인 애니메이션으로 차례로 나타나는 세 개의 텍스트 줄"이 “일부 애니메이션 텍스트"보다 실행 가능합니다

4. 템플릿 반복

비디오 생성은 반복적입니다. 첫 번째 렌더링 후 출력을 검토하고 AI 에이전트에게 특정 요소를 조정하도록 요청하세요:

• “제목 텍스트를 더 크게 만들고 색상을 금색으로 변경하세요”
• “입장 애니메이션을 느리게 하고 각 줄 사이에 0.5초 지연을 추가하세요”
• “배경 이미지에 미묘한 블러 필터를 추가하세요”
• “더 부드러운 모션을 위해 이징을 linear에서 easeOutCubic으로 변경하세요”

AI 에이전트는 기존 템플릿을 수정하고 처음부터 다시 시작하지 않고 다시 렌더링할 수 있어 반복이 빠르고 효율적입니다.

5. 배치 생산을 위해 템플릿 변수 활용

동일한 비디오의 여러 변형(다른 제품, 다른 언어, 다른 데이터)이 필요한 경우 AI 에이전트에게 변수 가 있는 템플릿을 만들도록 요청하세요. 이를 통해 다른 inputs를 전달하여 단일 템플릿에서 많은 비디오를 렌더링할 수 있습니다:

{
  "inputs": {
    "productName": "Running Shoes Pro",
    "productImage": "https://example.com/shoes.png",
    "price": "$149",
    "tagline": "Run Faster, Go Further"
  }
}

6. 긴 비디오에는 비동기 렌더링 사용

30초보다 긴 비디오 또는 복잡한 애니메이션이 있는 템플릿의 경우 render_video 대신 start_render_async를 사용하세요. 이렇게 하면 시간 초과를 방지하고 AI 에이전트가 비디오가 백그라운드에서 렌더링되는 동안 다른 작업을 수행할 수 있습니다.

템플릿 검색: 100개 이상의 예제 탐색

Rendervid에는 32개 범주에 걸쳐 100개 이상의 예제 템플릿이 포함되어 있어 AI 에이전트가 모든 비디오 생성 작업에 대한 풍부한 시작점 라이브러리를 제공합니다.

AI 에이전트가 템플릿을 검색하는 방법

템플릿 검색 워크플로우는 두 가지 도구를 순서대로 사용합니다:

1. list_examples – 선택적 범주 필터링으로 카탈로그를 탐색하여 관련 템플릿을 찾습니다.
2. get_example – 특정 예제에 대한 전체 JSON 템플릿을 로드합니다.

템플릿 범주

AI 에이전트는 범주별로 예제를 필터링하여 관련 시작점을 빠르게 찾을 수 있습니다:

실제 템플릿 검색

사용자가 “판매 데이터를 보여주는 애니메이션 차트"를 요청하면 AI 에이전트는:

1. list_examples(category: "data-visualization")를 호출하고 차트 관련 템플릿 목록을 받습니다.
2. 설명을 기반으로 animated-bar-chart를 최상의 일치로 식별합니다.
3. get_example("animated-bar-chart")를 호출하여 완전한 템플릿을 로드합니다.
4. 템플릿 구조를 검사하여 데이터 형식을 이해합니다.
5. 예제 데이터를 사용자의 실제 판매 수치로 바꿉니다.
6. 검증 및 렌더링합니다.

이 검색 우선 접근 방식은 AI 에이전트가 처음부터 템플릿 JSON을 생성하는 대신 테스트된 예제를 기반으로 구축하기 때문에 일관되게 잘 구조화된 템플릿을 생성한다는 것을 의미합니다.

사용 가능한 모든 템플릿 탐색

사용 가능한 모든 템플릿을 보려면 AI 에이전트가 범주 필터 없이 list_examples를 호출할 수 있습니다. 응답에는 100개 이상의 모든 템플릿에 대한 메타데이터가 포함되어 있어 에이전트가 범주 전체에서 최상의 일치를 검색할 수 있습니다. 각 항목에는 템플릿 이름, 범주, 설명, 치수 및 지속 시간이 포함되어 있어 에이전트가 정보에 입각한 선택을 할 수 있는 충분한 정보를 제공합니다.

지원되는 AI 도구

Rendervid의 MCP 서버는 Model Context Protocol 클라이언트 사양을 구현하는 모든 도구와 작동합니다. 다음 도구는 Rendervid와 작동하는 것으로 테스트되고 확인되었습니다:

MCP는 개방형 표준이므로 MCP 클라이언트 지원을 추가하는 모든 향후 도구는 자동으로 Rendervid의 MCP 서버와 호환됩니다. 서버 또는 해당 도구에 대한 변경이 필요하지 않습니다.

다음 단계

• Rendervid 개요 – 모든 Rendervid 기능, 출력 형식 및 아키텍처에 대해 알아보세요.
• 템플릿 시스템 – JSON 템플릿 구조, 변수 및 입력 시스템에 대한 심층 분석입니다.
• 구성 요소 참조 – 모든 레이어 유형 및 사용자 지정 React 구성 요소에 대한 문서입니다.
• 배포 가이드 – 클라우드 규모 렌더링을 위해 Rendervid를 AWS Lambda, Azure Functions, Google Cloud Run 또는 Docker에 배포하세요.
• GitHub 저장소 – 소스 코드, 이슈 트래커 및 커뮤니티 기여입니다.