Cocos Creator MCP를 Cursor 및 Claude와 설정하는 방법 (비디오 튜토리얼)

비디오 튜토리얼 시청하기

비디오: Cocos Creator MCP 설정 워크스루 on the VberAI YouTube 채널

이 녹화는 실습형 Cocos Creator MCP 구성 가이드입니다—여러 엔진에 대한 개요가 아닙니다. MCP 플러그인 설치, 로컬 브리지 시작, Cursor 또는 Claude Desktop과 같은 AI 클라이언트를 연결하여 어시스턴트가 에디터 내에서 Cocos Creator 프로젝트를 읽고 변경할 수 있게 하는 방법을 볼 수 있습니다.

배우게 될 내용

아래 비디오와 체크리스트를 따라하면 다음을 할 수 있어야 합니다:

• Creator 2.x 또는 3.x용 Cocos Creator MCP 플러그인 설치 및 활성화
• 플러그인 패널에서 로컬 MCP 서버/브리지 시작
• Cursor, Claude, Windsurf 또는 다른 MCP 호환 클라이언트에 서버 추가
• 읽기 전용 테스트(씬 트리) 및 작은 쓰기 테스트(노드 생성 또는 이름 변경) 실행

**Model Context Protocol (MCP)**는 디스크의 파일뿐만 아니라 실시간 에디터 상태—현재 씬, 노드 계층, 선택 항목—를 노출합니다. 이것이 게임 워크플로우에서 MCP 설정이 중요한 이유입니다.

사전 요구 사항

항목	참고
Cocos Creator	에디터에서 2.x 또는 3.x 프로젝트 열기
MCP 플러그인	Cocos Creator MCP 확장 (비디오는 VberAI Cocos MCP 빌드 사용)
AI 클라이언트	Cursor, Claude Desktop, Claude Code, Windsurf, Cline 또는 MCP 지원 어시스턴트
로컬 액세스	MCP 브리지는 127.0.0.1에서 실행; 방화벽은 루프백 허용

설정 단계 (비디오와 함께 따라하기)

1. Cocos Creator MCP 플러그인 설치

1. 플러그인 제공자로부터 Creator 버전에 맞는 MCP 확장을 다운로드합니다 ( Cocos MCP 다운로드 참조).
2. 확장을 프로젝트의 extensions 폴더로 가져오거나 복사하거나, 플러그인 문서에 명시된 대로 Creator의 확장 관리자를 통해 설치합니다.
3. Extension → Extension Manager를 열고 MCP 플러그인을 활성화한 후, 프롬프트가 표시되면 에디터를 다시 로드합니다.

2. MCP 브리지 시작

플러그인의 제어 패널을 엽니다 (메뉴 이름은 빌드에 따라 다르며, 종종 MCP 또는 AI Bridge):

• Start Server / Start MCP 클릭
• 패널에 표시된 로컬 URL과 포트를 기록합니다 (이것을 AI 클라이언트에 붙여넣을 것입니다)

브리지가 활성화된 동안 Cocos Creator를 계속 실행하세요.

3. AI 클라이언트 구성

2단계의 브리지 URL을 가리키는 MCP 서버 항목을 추가합니다. Cursor (mcp.json) 예시:

{
  "mcpServers": {
    "cocos-mcp": {
      "url": "http://127.0.0.1:PORT/mcp"
    }
  }
}

PORT를 플러그인 UI의 값으로 바꿉니다. 많은 Cocos MCP 빌드에는 올바른 JSON을 복사하는 Configure for Cursor / Claude 버튼이 포함되어 있습니다—가능하면 사용하세요.

구성 저장 후 AI 클라이언트를 다시 시작하거나 다시 로드합니다.

4. 연결 확인

Cursor 또는 Claude에서 먼저 읽기 전용 질문을 합니다:

• “현재 씬 노드 트리를 나열해줘.”
• “Canvas 아래에 어떤 노드가 있니?”

에디터에서 구조화된 경로를 받아야 합니다—추측된 파일 내용이 아닙니다.

5. 작은 쓰기 작업 시도

되돌릴 수 있는 변경을 프롬프트합니다:

• 선택 항목 아래에 빈 자식 노드 생성
• 이름이 잘못된 UI 그룹 이름 변경
• 스텁 컴포넌트 또는 스크립트 연결

더 큰 자동화 작업을 실행하기 전에 Hierarchy 패널에서 변경 사항이 나타나는지 확인합니다.

MCP가 파일 전용 AI 코딩보다 나은 이유

MCP가 없으면 어시스턴트는 디스크의 파일만 볼 수 있습니다. 다음을 놓칩니다:

• 저장되지 않은 씬 변경 및 현재 선택 항목
• 실시간 노드 속성 및 컴포넌트 값
• 에디터 전용 컨텍스트 (프리팹 모드, 빌드 설정 등)

MCP는 에디터의 실제 상태를 모델에 전송하며, 이것이 Cocos Creator MCP 설정의 핵심입니다. 유사한 브리지 아키텍처에 대한 자세한 내용은 Godot용 실시간 MCP 서버를 구축한 방법을 참조하세요.

MCP를 디자인-투-UI 도구와 함께 사용하기 (선택 사항)

MCP는 에셋이 존재한 후 에디터 작업을 처리합니다. VberAI Studio (AI Studio)와 같은 도구는 Unity, Godot 또는 Cocos용 PSD / Figma → 엔진 UI 구조를 처리합니다. 일반적인 스택:

1. AI Studio가 레이어드 화면을 가져와 Cocos 프리팹 / 노드 레이아웃을 내보냅니다
2. Cocos MCP가 버튼을 연결하고, 노드 이름을 변경하고, Creator에서 참조를 검증합니다

참조: AI Studio로 3분 만에 게임 UI 구축하기.

FAQ

Cursor를 Cocos Creator에 어떻게 연결하나요?
Cocos Creator MCP를 설치하고, 에디터에서 로컬 브리지를 시작하고, Cursor의 mcp.json의 mcpServers 아래에 브리지 URL을 추가한 후, 씬 트리 프롬프트로 테스트합니다.

Cocos Creator MCP란 무엇인가요?
AI 클라이언트가 실행 중인 에디터를 통해 Cocos Creator 프로젝트를 읽고 수정할 수 있게 하는 Model Context Protocol 플러그인입니다.

어떤 AI 클라이언트가 Cocos MCP와 작동하나요?
MCP 호환 클라이언트: Cursor, Claude Desktop, Claude Code, Windsurf, Cline 등.

비디오가 Unity나 Godot을 다루나요?
아니요—이 녹화는 Cocos Creator MCP 구성에만 초점을 맞춥니다. Unity는 Unity MCP 설치 가이드를, Godot은 Godot MCP vs 수동 스크립팅을 참조하세요.

공식 비디오는 어디에 있나요?
YouTube: Cocos Creator MCP 설정, 채널 @vber_ai. 더 많은 MCP 튜토리얼을 보려면 VberAI YouTube 채널을 구독하세요.