Lottie Creator MCP

공식

Lottie Creator MCP는 AI 어시스턴트를 애니메이션 워크플로우에 직접 통합하여, 자연어를 통해 사용자를 대신해 Lottie 애니메이션을 제작하고 편집할 수 있도록 LottieFiles Creator에 대한 전체 액세스 권한을 제공합니다.

lottie.link에서 보기

Lottie Creator MCP(으)로 무엇을 할 수 있나요?

Create animations from scratch — describe an animation like a loading spinner or character motion and the AI builds it in Lottie Creator layer by layer.
Edit existing animations — ask the AI to change colors, adjust timing, swap easing curves, rename layers, or refactor a scene using the current file state.
Batch generate animation variants — produce multiple versions at once, such as dark/light themes, different sizes, or brand color variations.
Inspect animations for accessibility and brand — request analysis for contrast issues, motion speed, color consistency, or brand alignment, then apply fixes.
Manage scenes and layers — create and switch scenes, set visibility and blend modes, apply masks and mattes, and animate transforms like position, rotation, and scale.
Animate with keyframes and easing — add, read, or remove keyframes on properties such as opacity, color, and path, and set linear or cubic-bezier easing.

문서

Lottie Creator MCP

undefined

Lottie Creator MCP

Lottie Creator MCP는 AI 어시스턴트를 애니메이션 워크플로에 직접 연결하여 LottieFiles Creator에 대한 전체 접근 권한을 부여함으로써 자연어를 통해 Lottie 애니메이션을 대신 제작하고 편집할 수 있게 해줍니다. 설치는 아래에서 확인할 수 있습니다.

MCP 서버는 모델 컨텍스트 프로토콜을 사용하여 AI 에이전트가 데이터 소스와 상호 작용할 수 있도록 하는 표준화된 인터페이스의 일부입니다. Lottie Creator MCP는 Claude, Cursor, Windsurf와 같은 AI 어시스턴트를 로컬 브리지를 통해 Creator API에 연결하므로, AI가 Creator에 대한 여러분과 동일한 전체 접근 권한을 갖게 됩니다.

MCP를 활성화하면 다음을 수행할 수 있습니다:

✦ 애니메이션을 처음부터 제작

로딩 스피너, 진행 표시줄, 캐릭터 애니메이션 등 원하는 것을 설명하면 AI가 Creator에서 레이어별로 직접 제작합니다.

✦ 기존 애니메이션 편집 및 수정

색상 변경, 타이밍 조정, 이징 곡선 교체, 레이어 이름 변경 또는 전체 장면 리팩터링이 가능합니다. AI가 파일의 현재 상태를 읽고 실시간으로 편집합니다.

✦ 애니메이션 변형 일괄 생성

다크/라이트 테마, 다양한 크기, 브랜드 색상 변형 등 여러 버전의 애니메이션을 한 번에 자동 생성합니다.

✦ 접근성 및 브랜드 분석

AI에게 애니메이션의 대비 문제, 모션 속도, 색상 일관성 또는 브랜드 가이드라인 준수 여부를 검사하고 발견된 사항을 수정하도록 요청합니다.

✦ 프로젝트 워크플로에 통합

더 큰 프로젝트를 진행하는 동안 즉시 애니메이션 에셋을 생성합니다.

MCP를 사용하려면 AI 클라이언트에 설치하고 LottieFiles Creator에서 활성화하세요. 아래 섹션에서 각 단계를 안내합니다.

사전 준비 사항

설치하기 전에 다음 사항이 설정되어 있는지 확인하세요:

✅ 📦 Node.js 18 이상: npx를 통해 MCP 패키지를 실행하는 데 필요합니다. Node.js 다운로드 →

✅ 🎬 LottieFiles Creator: 브라우저에서 creator.lottiefiles.com을 열고 이 탭을 열어 두세요.

✅ 🤖 MCP 호환 AI: Claude, Cursor, Windsurf, VS Code Copilot 또는 기타 MCP 지원 어시스턴트.

먼저 MCP 문자열과 명령에 접근할 수 있는 Creator MCP README 파일로 이동하세요.

MCP 설치

모든 AI 도구에 대해 다음 구성을 사용할 수 있습니다:

{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}

이 문서는 지원되는 일부 MCP 클라이언트에 대한 설치 단계를 다룹니다. 지원되는 MCP 클라이언트의 설치 가이드 목록은 아래를 참조하세요:

지원되는 MCP 클라이언트

특정 클라이언트에 대한 지침에 따라 Lottie Creator MCP를 설치하고 연결하세요. 일부 클라이언트는 AI가 더 의도적이고 세련된 애니메이션을 제작할 수 있도록 모션 디자인 지식을 추가하는 스킬도 지원합니다. 🖇️ LottieFiles 모션 디자인 스킬입니다.

MCP 클라이언트에 대한 단계를 따르세요:

**1. Claude Desktop 설정 열기**

**설정 → 개발자**로 이동하여 **"구성 편집"**을 클릭합니다. 컴퓨터에서 JSON 구성 파일이 열리며 VS Code, Cursor 또는 텍스트 편집기로 편집할 수 있습니다.

<Image src="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp" alt="Claude Desktop Settings → Developer, Edit Config" caption="Claude Desktop Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/cbcf2779e6-1024.webp 1024w" width="1490" height="1070" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAIAAABxZ0isAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAXklEQVR4nGWNSwqAMAxEc/8DiXgXF4rgp41pTNNWuxGpFEGYxcCbDwgjO5tPVaEUJZ9aBLtdinNkhFGFhPEBhOuVfA0G79DML6gL49B3bSOMMRxQin+B3Sb1+L0t4AYM8YjEckZSmwAAAABJRU5ErkJggg==" />

**2. MCP 구성 추가**

`mcpServers` 객체 내부의 구성 파일에 다음을 붙여넣습니다. JSON을 유효하게 유지하려면 괄호/쉼표를 추가하거나 제거해야 할 수 있습니다.

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

위 구성을 붙여넣은 후 구성 파일의 모습은 다음과 같습니다:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  },
  "preferences": {
    "quickEntryShortcut": "off",
    "coworkScheduledTasksEnabled": false,
    "ccdScheduledTasksEnabled": false,
    "sidebarMode": "chat",
    "coworkWebSearchEnabled": true,
    "floatingAtollActive": true
  }
}
```

**3. 연결 확인**

채팅에서 **"+"** 버튼을 클릭하고 **커넥터**로 이동하여 `lottiefiles-creator` 토글이 켜져 있는지 확인합니다.

<Image src="https://assets.docs.lottiefiles.com/static/661d017685-640.webp" alt="Claude Desktop Connectors with lottiefiles-creator enabled" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/661d017685-640.webp 640w, https://assets.docs.lottiefiles.com/static/661d017685-1024.webp 1024w" width="1470" height="840" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAXUlEQVR4nE1NQQ7AIAjz/1/14CZGBJEu6JaMpGkobUmqioC7IybYfWGtgCEREUQEYzCuu6J1xZxnNzOkUgrMJoJzzhCdYO5QldNQiXZdJJh5i+eFvYYW4hH+h8/wAH2hnMwEoNxAAAAAAElFTkSuQmCC" />

**1. 터미널에서 다음 명령 실행**

이게 전부입니다. Claude Code가 자동으로 MCP를 설치하고 등록합니다.

```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

#### **Cursor용 Lottie Creator MCP 사용**

1. `Cmd + Shift + P`(Mac) 또는 `Ctrl + Shift + P`(Windows/Linux)를 누르고 → **"Cursor 설정"** 검색
2. 사이드바에서 **도구 및 MCP**로 이동
3. **"사용자 지정 MCP 추가"** 클릭

<Image src="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp" alt="Cursor Settings → Tools & MCP, Add custom MCP" caption="Cursor Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp 640w, https://assets.docs.lottiefiles.com/static/1d779c5bf1-1024.webp 1024w" width="1724" height="1122" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYElEQVR4nD2OWQpFMQhDXUVnh1JKu/8N5qKPvg8hJPEoqSqYGbVWlFKQUkLO+T8kIhGOMXDvhZnFgpqGR27MOdF7j8JaC04VFbDyr/AoHuy9cc4JUmsN5BgXft9L75enP/5xNWNuTqnuAAAAAElFTkSuQmCC" />

4. 다음을 붙여넣습니다:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

저장하고 **Cursor를 완전히 다시 시작**합니다(종료 후 다시 열기 - 새로고침이 아님).

다시 시작한 후 **설정 → 도구 및 MCP**로 이동하면 `lottiefiles-creator` 옆에 녹색 점이 표시되어 연결되었음을 확인할 수 있습니다.

<Image src="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp" alt="Cursor Settings → Tools & MCP, lottiefiles-creator connected" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp 640w, https://assets.docs.lottiefiles.com/static/d5e4c14c2c-1024.webp 1024w" width="1724" height="1118" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYUlEQVR4nD2NSw7AIAhEOYVfBHSlsfe/3jTY2MUEeDAMqSpEBKUUpJQQQkCM8Rf5MucMZsacE713tNagZoeRmR3ow1oLY4xzICoQU5BHOKhcsZ/9fWCGG5sKyJ033+vtr14GGTV0KRWZBgAAAABJRU5ErkJggg==" />

**옵션 A: 딥 링크 설치**

1. [LottieFiles MCP 서버 딥 링크](https://vscode.dev/redirect/mcp/install?name=%40lottiefiles%2Fcreator-mcp\&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40lottiefiles%2Fcreator-mcp%22%5D%7D)를 클릭합니다. VS Code에서 MCP 구성이 열립니다.
2. **설치** 버튼을 누릅니다.

<Image src="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp" alt="VS Code Install MCP Server prompt for Lottie Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp 640w, https://assets.docs.lottiefiles.com/static/215df2a202-1024.webp 1024w" width="1720" height="736" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAIAAAAhqtkfAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAANUlEQVR4nGNQ19TW0NFX0tCSlVcQk5AUFBaFIAYJKRlxSSlhUXG4EFRCSkZOUlpWXFIKTQIAGEcGwVfSfA0AAAAASUVORK5CYII=" />

**옵션 B: CLI 또는 구성 파일**

또는 CLI를 통해:

터미널

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

또는 `.vscode/mcp.json`에 추가:

JSON — .vscode/mcp.json

```
{
  "servers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

ℹ️ VS Code에서 MCP 도구를 사용하려면 계정에 [GitHub Copilot](https://github.com/features/copilot)이 활성화되어 있어야 합니다.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Antigravity의 MCP 설정 문서를 따르고 위 구성을 사용하세요. Cline의 MCP 설정 문서를 따르고 위 구성을 사용하세요. [MCP 구성 가이드](https://github.com/openai/codex/blob/main/docs/config.md)를 따라 다음을 사용하세요:

```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```

또는 CLI를 통해 추가:

```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

1. `copilot` 시작 2. `/mcp add` 실행 3. 구성: - 서버 이름: `lottiefiles-creator` - 서버 유형: `Local` - 명령: `npx -y @lottiefiles/creator-mcp@latest` VS Code MCP 설정 문서를 따르고 위 구성을 사용하세요. 또는 CLI를 통해:

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

``` gh copilot mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` ``` droid mcp add lottiefiles-creator "npx -y @lottiefiles/creator-mcp@latest" ``` ``` gemini mcp add lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest gemini mcp add -s user lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest ``` Gemini Code Assist MCP 설정 문서를 따르고 위 구성을 사용하세요. JetBrains MCP 설정 문서를 따르고 위 구성을 사용하세요. Kiro MCP 설정 문서를 따르고 위 구성을 사용하세요. Qoder MCP 설정 문서를 따르고 위 구성을 사용하세요. 다음으로 로컬 MCP 서버 추가: - 이름: `lottiefiles-creator` - 명령: `npx` - 인수: `y @lottiefiles/creator-mcp@latest` Warp MCP 설정 문서를 따르고 위 구성을 사용하세요. Windsurf MCP 설정 문서를 따르고 위 구성을 사용하세요.

Lottie Creator에 연결

Lottie Creator 열기

브라우저에서 creator.lottiefiles.com으로 이동하고 세션 내내 이 탭을 열어 두세요. MCP는 이 브라우저 탭을 통해 Creator와 통신합니다.

Creator에서 MCP 활성화

Creator에서 설정 → MCP 설정 → MCP 활성화로 이동합니다.

Lottie Creator Settings → MCP Settings with Enable MCP

연결 확인

Creator에 '로컬 MCP 브리지 연결됨' 알림이 표시되어야 합니다.

Lottie Creator notification: Local MCP bridge connected

이 알림이 표시되면 모든 설정이 완료되었으며 프롬프트를 시작할 준비가 된 것입니다! 애니메이션 품질은 사용 중인 모델에 크게 좌우되므로 사용 가능한 최상의 모델을 사용해야 합니다.

Lottie Creator top bar with a blue MCP connection indicator next to the file name

스킬 정보

스킬은 MCP 도구 호출과 재사용 가능한 지침으로 포함된 심층적인 모션 디자인 지식을 조합하여 에이전트가 애니메이션 작업에 접근하는 방법에 대한 지침을 제공합니다.

Lottie Creator MCP는 개별 도구(레이어 생성, 키프레임 설정, 채우기 조정)를 노출하는 반면, 스킬은 AI가 이를 잘 사용하는 방법을 이해하도록 돕습니다. 바운스와 페이드에 적합한 이징 곡선을 아는 것, 다중 요소 등장 시퀀스를 구성하는 방법, 애니메이션이 기계적이지 않고 의도적으로 느껴지도록 타이밍을 구성하는 방법 등이 이에 해당합니다.

스킬은 MCP 연결을 대체하거나 새로운 도구를 추가하지 않습니다. AI가 애니메이션 작업 시 자동으로 활용하는 지침에 모션 디자인 전문 지식을 패키징하여 추측을 줄입니다.

모션 디자인 스킬 설치

터미널에서 이 명령을 한 번 실행하세요. Claude Code, Cursor, Codex, GitHub Copilot을 포함한 40개 이상의 에이전트에서 작동합니다.

터미널

npx skills add LottieFiles/motion-design-skill

✨ 강력히 권장합니다. 딱딱하고 기계적인 애니메이션을 생성하는 AI와 세련되고 의도적인 모션을 생성하는 AI의 차이는 거의 전적으로 이 컨텍스트의 유무에 달려 있습니다. 한 번 설치하면 모든 애니메이션 세션에 적용됩니다.

GitHub에서 전체 스킬 보기 → LottieFiles/motion-design-skill

기능

MCP는 AI에 Creator API에 대한 전체 접근 권한을 부여합니다. 가능한 모든 작업은 다음과 같습니다:

🎬 장면 관리

장면 생성 — 이름, 크기, 프레임 속도, 지속 시간 설정
장면 간 전환
배경색 설정 (미리보기 전용, 내보내기 안 됨)
장면 속성 읽기 — 레이어, 크기, 프레임 속도
장면을 Lottie JSON으로 내보내기
Lottie JSON, dotLottie, SVG 또는 이미지 가져오기

🗂 레이어 관리

가시성, 잠금 상태 및 포커스 설정
타이밍 제어 — 시작 프레임, 종료 프레임, 오프셋
혼합 모드 설정 (곱하기, 스크린, 오버레이 등 16가지 모드)
마스크 및 매트 적용 및 애니메이션
레이어 정렬 및 뒤집기
변형 애니메이션 — 위치, 회전, 크기 조정, 기울이기

🔷 도형 생성

직사각형 — 위치, 크기, 모서리 둥글기
타원 — 위치, 크기
다각형 — 점, 반경, 둥글기
별 — 내부/외부 반경, 점
패스 — 전체 접선 제어가 가능한 사용자 지정 베지어
그룹 — 기존 도형을 함께 그룹화

🎨 채우기 및 획

단색 채우기 — 정적 또는 애니메이션 RGB
선형 그라데이션 채우기 — 사용자 지정 시작/종료 지점
방사형 그라데이션 채우기 — 하이라이트 각도 및 길이
단색 및 그라데이션 획 — 애니메이션 가능한 너비
패스 트리밍 — 그리기 애니메이션 (시작 %, 종료 %, 오프셋)

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

특정 프레임에 값이 있는 키프레임 추가
정적 값 설정 (애니메이션 없음)
키프레임 읽기, 검사 및 제거
이징 설정 — 선형 또는 3차 베지어 (x1, y1, x2, y2)
애니메이션: 위치, 회전, 크기 조정, 불투명도, 색상, 패스 등

🖼 에셋 및 재생

에셋 (장면 및 이미지) 나열, 복제 및 제거
이미지 속성 읽기 — 너비, 높이, base64 URI
재생, 일시 정지 및 특정 프레임으로 이동
현재 프레임 및 재생 상태 읽기
선택된 노드 및 키프레임 읽기

출시 예정: 상태 머신 및 모션 토큰

모범 사례

더 나은 품질을 위해 모션 디자인 스킬을 설치하세요: MCP는 AI에 도구를 제공합니다. 모션 디자인 스킬은 이징 곡선, 타이밍 원칙, 안무 등 도구를 잘 사용할 수 있는 판단력을 제공합니다. 단 하나의 명령으로 훨씬 더 나은 결과물을 얻을 수 있습니다. 모션 디자인 스킬은 여기에서 찾을 수 있습니다.
자신만의 SVG로 시작한 다음 애니메이션을 적용하세요: AI가 처음부터 일러스트레이션 형태를 생성할 때는 예측하기 어려울 수 있습니다. 최상의 결과를 얻으려면 기존 SVG 자산을 Creator로 먼저 가져온 다음 AI에 애니메이션을 요청하세요. 이렇게 하면 시각적 스타일의 일관성을 유지하고 AI가 가장 잘하는 일, 즉 모션, 타이밍, 시퀀싱에 집중할 수 있습니다.
- 다음 리믹스 링크를 테스트해 보세요
  - 메달: https://lottie.link/metal
  - 날씨: https://lottie.link/weather
  - 그래프: https://lottie.link/graph
  - 우편함: https://lottie.link/mailbox1
항상 사용 가능한 최고의 모델을 사용하세요: 애니메이션 품질은 모델에 정비례합니다. Claude Sonnet이나 Opus에 접근할 수 있다면 더 작은 모델 대신 사용하세요. 타이밍, 시퀀싱, 공간 추론을 처리하는 방식에서 차이가 눈에 띕니다.
프롬프트를 입력하기 전에 레이어 이름을 지정하세요: AI는 레이어 이름을 읽고 애니메이션 구조를 이해합니다. left_arm, right_leg, bg_circle, text_headline과 같이 잘 명명된 레이어는 올바른 요소를 대상으로 지정하고, 실수를 피하며, 복잡한 장면에서도 체계적으로 작업할 수 있도록 도와줍니다. Shape 1 또는 Group 4과 같은 일반적인 이름은 AI가 작업을 정확하게 구축하기 어렵게 만듭니다.
복잡한 애니메이션을 단계별로 나누세요: "전체 온보딩 애니메이션을 만들어 줘" 대신 장면별로 진행하세요. 장면 만들기 → 도형 추가 → 키프레임 추가 → 타이밍 다듬기. 작은 단계로 나누면 더 많은 제어가 가능하고 오류를 더 쉽게 발견하고 수정할 수 있습니다.
타이밍과 느낌을 구체적으로 설명하세요: "부드러운 페이드"는 모호합니다. "이즈 아웃으로 400ms 페이드 인"은 AI가 작업할 수 있는 구체적인 정보를 제공합니다. 빠릿빠릿하게, 통통 튀게, 느리고 영화처럼 등 느낌을 더 많이 설명할수록 첫 번째 결과물이 상상하는 것에 더 가까워집니다.