SVGator MCP

SVGator MCP 서버 — 문서

MCP 서버는 AI 어시스턴트를 온라인 SVG 애니메이션 도구인 SVGator에 직접 연결합니다. 이를 통해 어시스턴트는 프로젝트 내에서 작업하며 탐색, 검사, 편집, 생성, 내보내기를 수행할 수 있습니다. "이 브랜드 키트에 맞게 색상 편집"과 같은 간단한 작업부터 "애니메이션 로고 공개를 만들고 CSS 전용 파일로 내보내 줘"와 같은 완전한 작업까지 처리합니다.

• 엔드포인트: https://mcp.svgator.com/mcp
• 프로토콜: 스트리밍 가능 HTTP를 통한 모델 컨텍스트 프로토콜
• 인증: OAuth 2.1 (SVGator 계정으로 로그인 — 시작하기 참조)

가능한 작업

기능	도구	예시 프롬프트
프로젝트 탐색	list_projects, get_project, get_profile	"내 SVGator 프로젝트 목록 보여줘"
프로젝트 구조 검사	get_skeleton, read_part	"프로젝트 X에 어떤 요소가 있고, 어떤 것이 애니메이션 되나요?"
프로젝트 점진적 편집	edit_part	"원을 빨간색으로 만들고 바운스를 영원히 반복하게 해줘"
전체 프로젝트 생성 또는 교체	create_project, replace_project	"새 애니메이션 로딩 스피너를 만들어 줘"
프로젝트 복제, 이동 및 이름 변경	duplicate_project, move_project	"프로젝트 X를 내 '초안' 폴더에 복사해 줘"
재사용 가능한 자산 관리	list_assets, get_asset, create_asset, update_asset	"이 아이콘을 재사용 가능한 자산으로 저장해 줘"
프로젝트를 폴더로 정리	list_folders, get_folder, create_folder, update_folder	"'마케팅' 폴더를 만들고 이 프로젝트를 그 아래에 정리해 줘"
저작 참조 조회	describe_shape	(정확한 JSON 형태를 얻기 위해 어시스턴트가 사용)
전달 가능한 형식으로 내보내기	export_project, get_render	"프로젝트 X를 MP4 비디오로 내보내 줘"
모션 디자인 제작 가이드 받기	스킬 리소스 + 프롬프트	"로고 공개를 아트 디렉팅하고, 그 다음 빌드해 줘"

서버가 반환하는 모든 프로젝트에는 editor_url가 포함되어 있습니다. 이는 SVGator 편집기에서 프로젝트를 여는 딥 링크로, 어시스턴트가 중단한 부분부터 언제든지 수동으로 계속 작업할 수 있습니다.

도구

서버는 22개의 도구를 제공합니다. 전체 매개변수 및 출력 표는 도구 참조를 참조하세요.

프로젝트

• list_projects — 인증된 사용자의 SVGator 프로젝트를 나열하고(최신순), 행당 editor_url 딥 링크와 페이지 매김을 위한 총 개수를 제공합니다.
• get_project — 단일 프로젝트 요약 정보(제목, 미리보기, 폴더, 타임스탬프, 캔버스 크기, 배경색, 애니메이션 타임라인, 저장된 내보내기 설정)를 가져옵니다.
• create_project — 전체 프로젝트 JSON에서 인증된 사용자 소유의 새 SVGator 프로젝트를 생성합니다.
• replace_project — 제공된 전체 프로젝트로 기존 프로젝트의 전체 JSON을 교체합니다(변경 전 유효성 검사 실행).
• duplicate_project — 기존 프로젝트의 복사본을 만들고, 선택적으로 다른 폴더나 새 제목으로 저장합니다.
• move_project — 프로젝트를 다른 폴더로 이동하거나 이름을 변경합니다.

프로젝트 검사 및 편집

• get_skeleton — 프로젝트의 가볍고 토큰 효율적인 구조 맵(이름과 키프레임 개수만 있는 요소 트리, 값은 절대 없음)을 가져옵니다 — 편집 루프의 1단계.
• read_part — ID 기반 경로에서 정확한 값이나 요소를 읽습니다 — 편집 루프의 2단계.
• edit_part — 경로에서 검증된 하나의 편집(업데이트, 삽입, 이동 또는 삭제)을 적용하고 유지합니다 — 편집 루프의 3단계.
• describe_shape — 저작 전에 하나의 빌딩 블록(요소 또는 애니메이터)의 정확한 JSON 형태를 가져와 필드 이름을 추측하지 않도록 합니다.

자산

• list_assets — 인증된 사용자의 재사용 가능한 자산(정적 또는 애니메이션 SVG 항목)을 최신순으로 나열합니다.
• get_asset — 전체 data ({document, definitions}) 페이로드를 포함한 단일 자산을 가져옵니다.
• create_asset — 자산 문서에서 새 재사용 가능한 자산을 생성합니다.
• update_asset — 기존 자산의 전체 문서를 교체합니다.

폴더

• list_folders — 인증된 사용자의 폴더(프로젝트가 정리된 레이블)를 나열합니다.
• get_folder — ID로 단일 폴더(id, 제목, 타임스탬프)를 가져옵니다.
• create_folder — 프로젝트를 정리할 새 폴더를 생성합니다.
• update_folder — 기존 폴더의 이름을 변경합니다.

내보내기 및 계정

• export_project — 프로젝트를 전달 가능한 형식(SVG, Lottie, React Native, Flutter, 비디오 또는 GIF)으로 내보내고, 선택적으로 내보내기별 재정의를 적용합니다.
• get_render — export_project에 의해 시작된 래스터(비디오/GIF) 렌더링 상태를 폴링하고 완료 시 서명된 다운로드 URL을 가져옵니다.
• get_profile — 인증된 고객 프로필(이름, 이메일, 플랜, 팀)을 가져옵니다.

문서 맵

문서	대상	다루는 내용
시작하기	모든 사용자	claude.ai, Claude Desktop, Claude Code 및 기타 MCP 클라이언트에서 연결; 인증; 개인정보 보호
도구 참조	통합자 / 관심 있는 사용자	전체 매개변수 및 출력 표가 있는 모든 도구
프로젝트 편집	통합자 / 고급 사용자	탐색 → 읽기 → 편집 → 확인 루프, 경로 지정, 저작 규칙
프로젝트 내보내기	모든 사용자	형식, 전달 모드, 내보내기 옵션, 렌더링 폴링
스킬 및 리소스	통합자	모션 디자인 제작 스킬, MCP 리소스 및 프롬프트
문제 해결	모든 사용자	연결 문제, 일반적인 오류 및 그 의미

요구 사항

• SVGator 계정 (가입하기). 내보내기는 편집기에서와 마찬가지로 플랜 한도에 포함됩니다.
• claude.ai / Claude Desktop에서 연결하려면 사용자 지정 커넥터에 Claude Pro, Max, Team 또는 Enterprise 플랜이 필요합니다. Claude Code 및 기타 MCP 클라이언트는 엔드포인트에 직접 연결됩니다.

작동 방식 (한 단락)

서버는 원격 MCP 서버입니다. MCP 클라이언트(Claude 또는 스트리밍 가능 HTTP를 사용하는 모든 클라이언트)가 https://mcp.svgator.com/mcp에 연결하고 SVGator의 일반 OAuth 로그인을 통해 로그인합니다. SVGator 자격 증명은 서버 측에만 유지됩니다. AI 모델은 액세스 토큰이나 비밀 키를 절대 보지 못하며 도구 결과(프로젝트 목록, 구조 맵, 내보낸 파일)만 받습니다. 도구 입력은 게시된 스키마에 대해 유효성이 검사되며, 잘못된 요청은 어시스턴트가 읽고 수정할 수 있는 설명 오류를 반환합니다.

⚙️ 기능

MCP 서버는 SVGator를 평범한 언어로 조작할 수 있는 도구로 바꿔줍니다. 편집기를 클릭하는 대신 원하는 것을 설명하면 AI 어시스턴트가 프로젝트를 불러오고, 색상을 변경하고, 로고에 애니메이션을 적용하거나 완성된 파일을 내보내는 등의 작업을 수행합니다.

애니메이션의 반복적인 부분을 처리해 줄 어시스턴트를 원하는 디자이너, 사소한 변경에도 디자이너를 기다리지 않고 웹용 애니메이션을 필요로 하는 마케팅 팀, 제품에 바로 적용할 수 있는 프로덕션 준비 완료된 내보내기(Lottie, React Native, Flutter 또는 SVG)를 원하는 개발자를 위해 제작되었습니다. 모든 프로젝트는 직접 편집기 링크와 함께 제공되므로 언제든지 열어서 수동으로 마무리하여 토큰을 절약할 수 있습니다.

연결된 어시스턴트가 할 수 있는 작업은 다음과 같습니다.

🗂️ 프로젝트 및 자산

• 프로젝트 나열: 최신순, 각각 직접 편집기 링크 포함
• 대규모 라이브러리 검색 및 페이지 이동
• 프로젝트 설정 읽기: 캔버스 크기, 배경, 타임라인 및 내보내기 설정
• 전체 정의에서 프로젝트 생성
• 기존 프로젝트 덮어쓰기
• 프로젝트 복제: 동일하거나 다른 폴더로
• 프로젝트 이동 또는 이름 변경
• 프로젝트를 폴더로 정리
• 재사용 가능한 자산 관리: 나열, 읽기, 생성 및 업데이트

🔍 구조 및 검사

• 프로젝트 구조 매핑: 키프레임 개수가 있는 요소 트리, 무거운 데이터 없음
• 애니메이션 대상 확인: 각 요소에서 키프레임을 전달하는 채널
• 정확한 값 읽기: 모든 속성, 키프레임 또는 요소
• 저작 형태 조회: 모든 요소 또는 개념에 대한 정확한 JSON

🔷 도형 및 요소

• 사각형
• 원 및 타원
• 선, 폴리라인 및 폴리곤
• 사용자 지정 경로
• 텍스트 및 여러 줄 텍스트
• 이미지
• 재사용된 심볼 및 인스턴스
• 그룹
• 마스크 및 클립 경로

🎨 채우기, 획 및 색상

• 단색 채우기: 정적 또는 애니메이션
• 그라데이션 채우기
• 획: 단색 또는 그라데이션, 정적 또는 애니메이션
• 합성: 혼합 모드 및 불투명도
• 블러와 같은 필터 효과

🎞️ 애니메이션 및 키프레임

• 특정 시간에 값과 함께 키프레임 추가
• 모션이 필요 없는 곳에 정적 값 설정
• 키프레임 읽기, 검사 및 제거
• 키프레임별 이징 설정: 3차 베지어
• 변형 애니메이션: 위치, 회전, 크기 조정 및 기울이기
• 채우기, 획, 합성 및 필터 채널 애니메이션
• 한 도형을 다른 도형으로 모핑

📤 내보내기 및 전달

• 애니메이션 SVG 내보내기: JavaScript 또는 CSS로 구동
• 시작 트리거 설정: 로드, 호버, 클릭, 스크롤 또는 프로그래밍 방식
• 클릭 및 호버 동작 설정: 고정, 다시 시작, 역방향 또는 재설정
• Lottie로 내보내기
• React Native 또는 Flutter 소스로 내보내기
• 비디오 렌더링: MP4, MOV, AVI, MKV 또는 WebM
• GIF, WebP, PNG 시퀀스 또는 ZIP 렌더링
• 반복 제어: 반복 횟수, 방향, 핑퐁 및 속도
• 프레임 속도, 해상도 및 품질 설정
• 투명도 및 배경색 처리

✅ 모범 사례

SVGator 모션 디자인 스킬을 설치한 다음 이름으로 호출하세요: 이는 어시스턴트가 평범하고 일반적인 모션 대신 타이밍, 이징 및 개성에 대해 신중한 선택을 하도록 돕는 제작 가이드입니다. SVGator 스킬 리포지토리에서 다운로드한 다음, "이 로고에 애니메이션을 적용하기 위해 SVGator 모션 스킬을 사용해 줘"와 같은 말로 프롬프트에서 바로 트리거하세요. 수동으로 호출하는 데는 이유가 있습니다. 내보내기만 하거나 작은 편집을 할 때는 스킬이 토큰 사용량에 포함되지 않고, 추가적인 아트 디렉션이 실제로 필요할 때만 로드됩니다.

자신의 아트워크로 시작한 다음 애니메이션을 적용하세요: 처음부터 독창적인 도형을 생성하는 것은 어떤 AI 어시스턴트에게도 가장 어려운 작업입니다. 최상의 결과를 얻으려면 먼저 SVGator 편집기에서 SVG를 빌드하거나 가져온 다음, 어시스턴트에게 애니메이션을 적용하도록 요청하세요. 이렇게 하면 시각적 스타일의 일관성을 유지하고 AI가 가장 잘하는 모션, 타이밍 및 시퀀싱에 집중할 수 있습니다.

프롬프트를 작성하기 전에 요소 이름을 지정하세요: 어시스턴트는 프로젝트 구조를 이해하기 위해 요소 이름을 읽습니다. "left_arm", "bg_circle" 또는 "headline"과 같은 명확한 이름은 올바른 요소를 대상으로 지정하고, 실수를 피하며, 복잡한 장면에서 체계적으로 작업하는 데 도움이 됩니다. 일반적인 이름은 작업을 더 어렵게 만들고 결국 더 많은 토큰을 소비하게 할 수 있습니다(모델에 따라 다름).

복잡한 애니메이션을 단계로 나누세요: "전체 온보딩 애니메이션을 만들어 줘" 대신 한 번에 한 조각씩 진행하세요. 요소를 만들고, 키프레임을 추가한 다음, 타이밍을 다듬으세요. 서버는 편집당 하나의 검증된 변경 사항을 적용하므로, 더 작은 단계는 더 많은 제어를 제공하고 실수를 쉽게 발견하고 수정할 수 있게 합니다.

타이밍과 느낌을 구체적으로 지정하세요: "부드러운 페이드"는 다소 모호합니다. "이즈 아웃이 적용된 400ms 페이드 인"은 어시스턴트에게 구체적인 작업 기반을 제공합니다. 빠르고, 탄력 있고, 느리거나, 미묘한 등 느낌을 더 많이 설명할수록 첫 번째 결과가 의도한 바에 더 가까워집니다.

내보내기 형식을 사용 위치에 맞추세요: SVG는 웹에 적합한 선택이며, JavaScript 또는 CSS 전용(더 나은 성능을 위해) 중에서 선택할 수 있습니다. Lottie, React Native 및 Flutter는 앱 및 모바일 프로젝트에 깔끔하게 전달됩니다. 비디오와 GIF는 애니메이션 SVG가 재생되지 않는 소셜 미디어 및 이메일용으로 준비됩니다. 형식을 미리 선택하면 재내보내기 과정을 한 번 줄일 수 있습니다.

대규모 실험 전에 프로젝트를 복제하세요: AI가 무언가를 처음부터 다시 빌드하도록 하려면 먼저 프로젝트를 복제한 다음 복사본에서 변경하도록 요청하세요. 원본은 그대로 유지되므로 과감한 실험으로 인해 작동하는 버전을 잃을 염려가 없습니다. 에디터에서 마무리: 모든 프로젝트는 직접 에디터 링크와 함께 돌아옵니다. 어시스턴트가 대부분의 작업을 완료하면, 프로젝트를 열고 최종 마무리를 직접 처리하세요. AI가 무거운 작업을 담당하고, 세부 사항은 여러분이 통제합니다. 또한, 직접 작은 수정을 하는 것이 어시스턴트가 하나씩 처리하는 것보다 빠르고 저렴하므로 토큰을 절약할 수 있습니다.