Lottie Creator MCP
공식Lottie Creator MCP는 AI 어시스턴트를 애니메이션 워크플로우에 직접 통합하여, 자연어를 통해 사용자를 대신해 Lottie 애니메이션을 제작하고 편집할 수 있도록 LottieFiles Creator에 대한 전체 액세스 권한을 제공합니다.
Lottie Creator MCP(으)로 무엇을 할 수 있나요?
- 처음부터 애니메이션 만들기 — AI에게 로딩 스피너, 진행 표시줄, 또는 캐릭터 애니메이션을 Creator에서 레이어별로 직접 제작하도록 요청하세요.
- 기존 애니메이션 편집 —
lottiefiles-creator를 통해 색상 변경, 타이밍 조정, 이징 곡선 교체, 레이어 이름 변경, 또는 실시간으로 장면 리팩터링을 수행하세요. - 변형 일괄 생성 — 다크/라이트 테마, 다양한 크기, 또는 브랜드 색상 변형과 같은 여러 애니메이션 버전을 한 번에 생성하세요.
- 접근성 및 브랜드 분석 — AI가 애니메이션의 대비, 모션 속도, 색상 일관성, 또는 브랜드 정합성을 검사하고 문제를 수정하도록 하세요.
- 프로젝트 워크플로우에 통합 — 더 넓은 프로젝트를 진행하면서
or및lottiefiles-creator를 사용해 애니메이션 자산을 즉석에서 생성하세요.
문서
Lottie Creator MCP
로컬 MCP 브리지를 통해 AI 어시스턴트를 Lottie Creator에 연결하여 프롬프트로 애니메이션을 생성, 편집, 그리고 제작할 수 있습니다.
[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp)를 사용하면 호환되는 브라우저 어시스턴트가 이 로컬 브리지 없이 Creator를 직접 사용할 수 있습니다. 지원되는 브라우저에서는 기본적으로 활성화되어 있습니다. 로컬 Creator MCP 서버를 통해 연결하려면 이 가이드를 따르세요.Lottie Creator MCP는 AI 어시스턴트를 애니메이션 워크플로우에 직접 연결하여 자연어를 통해 LottieFiles Creator에서 Lottie 애니메이션을 검사, 구축, 편집할 수 있는 도구를 제공합니다. 설치 방법은 아래에서 확인할 수 있습니다.
MCP 서버는 Model Context Protocol을 사용하여 AI 에이전트가 데이터 소스와 상호 작용할 수 있게 하는 표준화된 인터페이스의 일부입니다. Lottie Creator MCP는 Claude, Cursor, Windsurf와 같은 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를 지원하는 기타 어시스턴트.
먼저 Creator MCP README 파일로 이동하여 MCP 문자열과 명령어를 확인하세요.
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 설정 열기**
**설정 → 개발자**로 이동하여 **"구성 편집"** 을 클릭하세요. 그러면 컴퓨터에서 VS Code, Cursor 또는 모든 텍스트 편집기에서 편집할 수 있는 JSON 구성 파일이 열립니다.
<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" />
끝입니다. Claude Code가 MCP를 자동으로 설치하고 등록합니다.
```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```
1. `Cmd + Shift + P` (Mac) 또는 `Ctrl + Shift + P` (Windows/Linux)를 누르고 **"Cursor Settings"** 를 검색하세요.
2. 사이드바에서 **Tools & MCPs**로 이동하세요.
3. **"Add custom 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를 완전히 다시 시작하세요** (종료 후 다시 열기 - 단순 새로고침 아님)
다시 시작한 후 **설정 → Tools & 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==" />
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)이 활성화되어 있어야 합니다.
```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```
또는 CLI를 통해 추가하세요:
```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```
```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```
- 이름: `lottiefiles-creator`
- 명령어: `npx`
- 인수: `y @lottiefiles/creator-mcp@latest`
Lottie Creator에 연결
- Lottie Creator 열기
브라우저에서 creator.lottiefiles.com으로 이동하고 세션 내내 이 탭을 계속 열어 두세요. MCP는 이 브라우저 탭을 통해 Creator와 통신합니다.
- Creator에서 로컬 MCP 활성화
Creator에서 설정 → MCP 설정 → 로컬 MCP 활성화로 이동하세요.
- 연결 확인
Creator에 알림이 표시됩니다: 로컬 MCP 브리지 연결됨
이 메시지가 보이면 모든 준비가 완료된 것입니다. 프롬프트를 시작하세요! 애니메이션 품질은 사용 중인 모델에 크게 의존하므로 사용 가능한 최상의 모델을 사용해야 합니다.
스킬 정보
스킬은 에이전트가 애니메이션 작업에 접근하는 방법에 대한 지침을 제공합니다 — 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
기능
Lottie Creator MCP, Motion Copilot, Lottie Creator WebMCP는 동일한 Creator 편집 기능을 제공합니다. 설정과 어시스턴트 인터페이스만 다릅니다.
| 영역 | 요청할 수 있는 내용 |
|---|---|
| 장면 및 레이어 | 장면 검사 및 생성; 크기, 프레임 속도, 지속 시간 또는 미리보기 배경 변경; 레이어 이름 변경, 복제, 그룹화, 정렬, 재정렬, 숨기기 또는 잠금. |
| 도형 및 텍스트 | 사각형, 타원, 다각형, 별, 경로 및 텍스트 생성 및 편집; 글꼴 및 텍스트 스타일 변경; 애니메이션을 위해 텍스트를 부분으로 분할. |
| 스타일링 및 효과 | 단색 및 그라데이션 채우기 또는 획 조정; 블렌드 모드, 그림자, 블러, 색상 효과, 마스크 및 매트 사용. |
| 애니메이션 및 타이밍 | 키프레임 추가, 검사, 변경, 복사 또는 제거; 이징 조정; 변형, 불투명도 및 색상 애니메이션; 모션 경로, 계단식 등장 및 리타이밍 사용. |
| 자산 및 장면 검사 | SVG, Lottie 애니메이션 및 이미지 가져오기; PNG 또는 JPG 이미지 레이어를 벡터로 변환; 장면 검사 및 플레이헤드를 특정 프레임으로 이동. |
| 테마 및 재사용 모션 | 모션 토큰 슬롯 생성 및 연결, 값 업데이트, 테마 생성 또는 전환. 작업 공간의 모션 시스템에서 저장된 스타일 및 모션 프리셋 찾기 및 적용. |
| 세그먼트 및 상호작용 | 명명된 애니메이션 세그먼트, 상태 머신, 상태, 전환 및 입력 생성; 클릭, 호버 및 상태 이벤트를 작업에 연결. |
기능 액세스는 Creator 작업 공간과 요금제를 따릅니다. 애니메이션이 준비되면 Creator의 내보내기 컨트롤을 사용하여 결과를 저장하세요.
모범 사례
- 더 나은 품질을 위해 모션 디자인 스킬을 설치하세요: MCP는 AI에게 도구를 제공합니다. 모션 디자인 스킬은 AI가 이를 잘 사용할 수 있는 판단력을 제공합니다 — 이징 커브, 타이밍 원칙, 안무. 하나의 명령으로 훨씬 더 나은 결과를 얻을 수 있습니다. 모션 디자인 스킬은 여기에서 찾을 수 있습니다.
- 자신의 SVG로 시작한 다음 애니메이션을 적용하세요: AI는 처음부터 일러스트레이션 모양을 생성할 때 예측 불가능할 수 있습니다. 최상의 결과를 얻으려면 먼저 기존 SVG 자산을 Creator로 가져온 다음 AI에 애니메이션을 요청하세요. 이렇게 하면 시각적 스타일이 일관되게 유지되고 AI가 가장 잘하는 작업인 모션, 타이밍, 시퀀싱에 집중할 수 있습니다.
- 다음 리믹스 링크를 테스트해 보세요
- 항상 사용 가능한 최고의 모델을 사용하세요: 애니메이션 품질은 모델에 직접적으로 비례합니다. Claude Sonnet 또는 Opus에 접근할 수 있다면 더 작은 모델보다 이를 사용하세요 — 타이밍, 시퀀싱, 공간 추론 처리 방식의 차이가 눈에 띕니다.
- 프롬프트 전에 레이어 이름을 지정하세요: AI는 레이어 이름을 읽고 애니메이션 구조를 이해합니다.
left_arm,right_leg,bg_circle,text_headline와 같이 잘 지정된 이름은 올바른 요소를 대상으로 하고, 실수를 방지하며, 복잡한 장면에서도 체계적으로 유지하는 데 도움이 됩니다.Shape 1또는Group 4와 같은 일반적인 이름은 AI가 작업을 정확하게 이어가기 어렵게 만듭니다. - 복잡한 애니메이션은 단계로 나누세요: "전체 온보딩 애니메이션을 만들어 줘" 대신 장면별로 진행하세요. 장면 만들기 → 모양 추가 → 키프레임 추가 → 타이밍 다듬기. 더 작은 단계는 더 많은 제어를 제공하고 오류를 쉽게 발견하고 수정할 수 있게 합니다.
- 타이밍과 느낌에 대해 구체적으로 설명하세요: "부드러운 페이드"는 모호합니다. "400ms 페이드인 with ease-out"은 AI가 작업할 수 있는 구체적인 정보를 제공합니다. 느낌을 더 많이 설명할수록 — 경쾌한, 탄력 있는, 느리고 영화적인 — 첫 번째 결과가 상상하는 것에 더 가까워집니다.