클로드를 로티 크리에이터에 잇는 공식 MCP 연결 순서

LottieFiles 가 2026년 4월 Lottie Creator 용 공식 MCP 를 열었습니다. 클로드 같은 AI 에 말로 시키면 Creator 캔버스에서 레이어가 직접 움직이는 방식입니다. 이 글은 공식 문서의 연결 순서를 처음부터 끝까지 옮긴 것입니다. 준비물, 클로드 데스크톱과 클로드 코드, 커서와 그 밖의 클라이언트 명령, Creator 쪽에서 켜는 법, 막히기 쉬운 곳, Node 없이 되는 길까지 한 번에 볼 수 있습니다. 저희는 2026년 10월 6일에 클로드 코드로 연결 테스트를 마쳤고, 나머지는 공식 문서 그대로이며 해 본 것처럼 쓰지 않았습니다.

클로드↔로티 크리에이터 공식 MCP

LottieFiles 가 Lottie Creator 용 공식 MCP 를 열었습니다. MCP 는 쓰던 AI 가 다른 프로그램의 기능을 직접 부르게 해 주는 연결 규격이고, 이 경우에는 클로드 같은 AI 가 Lottie Creator 캔버스에서 장면과 레이어를 직접 만지게 됩니다. LottieFiles 공식 채널은 2026년 4월 15일에 Lottie Creator speaks MCP(1분 17초), 4월 16일에 Lottie Creator MCP: Create animations with your favorite AI assistants(2분 7초) 영상을 올렸습니다. 영상 설명에는 클로드·코덱스·제미나이가 파일을 읽고 레이어를 고치고 변형을 만들어 dotLottie 로 내보낸다고 적혀 있고, 지원하는 MCP 클라이언트가 40개 이상이라고 합니다. 방금 나온 소식은 아닙니다. 4월에 공개됐고 공식 문서는 2026년 9월 11일에 마지막으로 갱신됐습니다. 문서에 따르면 Creator MCP, Motion Copilot, WebMCP 세 방식은 같은 편집 기능을 제공합니다.

이런 소식, 남들보다 먼저 받으실 분?
직접 돌려보고 되는 것만 골라 매주 보내드립니다. 광고성 하이프는 거릅니다.

📮 뉴스레터 신청

프롬프트 한 번 일러스트가 움직입니다

공식 영상(DNQiaE-e2rg)의 1분 4초부터 1분 50초 사이에 이 연결로 할 수 있는 일이 나옵니다. 클로드 데스크톱에서 MCP 를 켠 뒤, 이미 그려 둔 일러스트(수정, 손, 떠다니는 구슬)를 프롬프트 한 번으로 움직이게 시킵니다. 영상 속 모델 이름은 여기서 다루지 않고 장면만 소개합니다. 해외의 한 UX 디자이너는 2026년 4월 17일 자기 엑스 계정에 Lottie Creator 를 MCP 로 움직여 간단한 로딩 애니메이션을 만들고 JSON 파일로 내보냈다고 올렸습니다. 문서가 소개하는 기능은 장면·레이어·도형·텍스트·키프레임·이징, SVG·이미지 가져오기, 테마와 상태 머신, 같은 애니메이션의 색·크기 변형을 한 번에 만들기, 접근성 점검입니다.

클로드 코드로 연결 테스트 완료

저희가 해 본 것은 연결까지입니다. 2026년 10월 6일에 클로드 코드(데스크톱 앱)에 lottiefiles-creator MCP 를 붙였고, claude mcp get lottiefiles-creator 로 보니 상태가 Connected 였습니다. 크롬에서 creator.lottiefiles.com 탭을 열고 Settings → MCP Settings → Enable local MCP 를 켠 다음 클로드가 list_scenes 를 불렀더니 Main Scene · 512×512 · 5초 · 30fps 라는 장면 정보가 돌아왔습니다. 연결 전에는 같은 호출이 "No Creator tab is connected" 로 막혔습니다. 크롬 확장 없이도 됐습니다. 정리하면 클로드 코드 연결은 된다는 확인이고, 그림이나 애니메이션 결과물은 공식 영상이 보여 주는 쪽을 보시면 됩니다. 클로드 데스크톱·커서·VS Code 등은 공식 문서 그대로 옮길 뿐 저희가 해 본 것이 아닙니다.

딱 두 가지 먼저 챙기세요

공식 문서가 말하는 준비물은 Node.js 18 이상, creator.lottiefiles.com 탭을 열어 둔 상태, 그리고 MCP 를 지원하는 AI(클로드·커서·윈드서프·VS Code 코파일럿 등)입니다. 연결 순서는 두 단계입니다. 첫째, 쓰는 AI 에 MCP 를 설치합니다. 둘째, Creator 에서 로컬 MCP 를 켭니다. 어느 AI 를 쓰든 설치할 때 쓰는 설정은 같습니다. 이름은 lottiefiles-creator, 실행은 npx -y @lottiefiles/creator-mcp@latest 입니다. 클라이언트마다 이 설정을 넣는 자리만 다릅니다. 아래 8번에 클라이언트별 순서를 전부 적어 두었습니다.

첫 단계 클로드 데스크톱

클로드 데스크톱은 Settings → Developer → Edit Config 로 설정 파일을 엽니다. 공통 설정을 mcpServers 안에 붙여 넣고 저장한 뒤 클로드를 재시작합니다. 다시 열고 채팅창의 "+" 를 눌러 Connectors 에 들어가면 lottiefiles-creator 가 보이고, 토글이 켜져 있으면 설치가 끝난 것입니다. 공식 영상에서는 0분 17초부터 50초 사이에 이 과정을 보여 줍니다. 이 순서는 공식 문서 그대로이고 저희가 클로드 데스크톱에서 해 본 것은 아닙니다.

클로드 코드는 명령 한 줄

클로드 코드는 설정 파일을 열 필요 없이 터미널에서 한 줄이면 됩니다. claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest 입니다. 붙인 뒤 claude mcp get lottiefiles-creator 로 상태를 보면 연결 여부를 알 수 있고, 저희는 이 방식으로 Connected 를 확인했습니다. 이 단계에서 Connected 는 클로드 코드와 MCP 프로그램이 이어졌다는 뜻일 뿐이고, Creator 캔버스까지 이어진 것은 다음 카드의 둘째 단계를 마쳐야 합니다. 저희 경우 Creator 에서 켜기 전에는 장면을 읽는 호출이 "No Creator tab is connected" 로 막혔습니다.

Enable local MCP 알림이 뜨면 끝

둘째 단계는 Creator 쪽입니다. creator.lottiefiles.com 을 열어 둔 채 Settings → MCP Settings → Enable local MCP 를 켭니다. 공식 문서는 화면에 "Local MCP bridge connected" 알림이 뜨면 연결이 끝난 것이라고 설명하고, 공식 영상에서는 약 54초부터 1분 3초 사이에 이 장면이 나옵니다. 저희가 막힌 곳은 순서였습니다. Creator 탭을 열어 둔 상태에서 켜야 하고, 켜지 않으면 AI 가 "No Creator tab is connected" 라고 답합니다. 알림이 뜬 뒤에는 AI 에게 말로 시키면 되고, 문서는 레이어 이름을 먼저 붙이고 기존 SVG 를 가져와 움직이는 방식을 권합니다.

연결 순서 정리

공식 문서 기준 연결 순서 전체입니다. 출처는 공식 문서(https://docs.lottiefiles.com/en/creator/13_ai-tools/lottie-creator-mcp)입니다. 저희가 직접 해 본 것은 클로드 코드 연결과 Creator 에서 켜기, 그리고 장면 정보 읽기까지이고, 나머지는 공식 문서를 그대로 옮겼습니다.

준비물

Node.js 18 이상
creator.lottiefiles.com 탭을 열어 둔 브라우저
MCP 를 지원하는 AI (클로드 · 커서 · 윈드서프 · VS Code 코파일럿 등)

공통 설정

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

첫 단계 — 쓰는 AI 에 설치하기

클로드 데스크톱 (공식 문서 그대로)

Settings → Developer → Edit Config 를 엽니다.
공통 설정을 mcpServers 안에 붙여 넣고 저장합니다.
클로드를 재시작합니다.
채팅창의 "+" → Connectors 에서 lottiefiles-creator 토글이 켜져 있는지 봅니다.

클로드 코드 (저희가 해 본 것)

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

커서 (공식 문서 그대로)

명령 팔레트를 엽니다(Windows 는 Ctrl+Shift+P, 맥은 Cmd+Shift+P).
Cursor Settings → Tools & MCPs → Add custom MCP 를 누릅니다.
공통 설정을 붙여 넣고 저장합니다.
커서를 완전히 종료했다가 다시 켭니다.
Settings → Tools & MCP 에서 lottiefiles-creator 옆에 초록 점이 있는지 봅니다.

그 밖의 클라이언트 (공식 문서의 명령 그대로, 저희가 해 본 것은 아닙니다)

VS Code        code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
Amp            amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
Codex          codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
Gemini CLI     gemini mcp add lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest
Copilot CLI    gh copilot mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
Factory CLI    droid mcp add lottiefiles-creator "npx -y @lottiefiles/creator-mcp@latest"

VS Code 는 GitHub Copilot 이 켜져 있어야 합니다.

둘째 단계 — Creator 에서 켜기

creator.lottiefiles.com 을 열어 둡니다.
Settings → MCP Settings → Enable local MCP 를 켭니다.
화면에 "Local MCP bridge connected" 알림이 뜨면 연결이 끝입니다.

문서가 권하는 것

모션 디자인 스킬 설치: npx skills add LottieFiles/motion-design-skill (문서가 "Highly recommended" 라고 적었습니다)
쓸 수 있는 가장 성능이 좋은 모델을 씁니다.
레이어 이름을 먼저 붙여 둡니다.
이미 있는 SVG 를 가져온 뒤 움직이게 시킵니다.

막힌 곳

Creator 탭을 열어 둔 채 Enable local MCP 를 켜야 합니다. 켜지 않으면 AI 가 "No Creator tab is connected" 로 답합니다.

Node 없이 되는 길 — 공식 안내만 옮깁니다

lottiefiles.com/mcp 의 WebMCP 방식은 Node 설치 없이 프롬프트를 쓰는 AI 에 붙여 넣으면 됩니다. 공식 안내는 AI 가 Creator 를 열고 캔버스에 그린다고 설명합니다. 저희는 이 길을 해 보지 않았습니다.

출처:

Lottie Creator MCP: Create animations with your favorite AI assistants — LottieFiles 공식 채널, 2026-04-16
Lottie Creator speaks MCP — LottieFiles 공식 채널, 2026-04-15
Lottie Creator MCP — 공식 문서
LottieFiles MCP