비개발자를 위한 Cursor와 Figma MCP 연동 완벽 가이드: 초보자도 쉽게 따라 하는 설정 및 오류 해결법

 

Figma MCP(Model Context Protocol)는 Figma 디자인과 Cursor AI 코드 편집기를 연결해 디자인을 코드로, 코드를 디자인으로 바꾸는 혁신적인 도구입니다.

하지만 비개발자나 초보자 입장에서는 설치 과정에서 오류가 발생하거나 설정이 복잡하게 느껴질 수 있습니다.

이 글에서는 비개발자를 위한 Cursor와 Figma MCP 연동 방법을 단계별로 쉽게 설명하고, 자주 발생하는 오류 해결법을 포함해 누구나 따라 할 수 있도록 안내합니다.

또한, 기술적 분석을 통해 이 도구의 가능성과 활용 방법을 깊이 있게 알아보겠습니다.

Cursor와 Figma MCP란 무엇인가요?

Cursor란?

Cursor는 AI 기반 코드 편집기로, ChatGPT와 같은 대형 언어 모델(LLM)을 활용해 코드를 자동 완성하고, 오류를 수정하며, 자연어로 코드를 생성하는 도구입니다.

특히 비개발자도 직관적으로 사용할 수 있도록 설계되었으며, 다음과 같은 기능을 제공합니다:

• AI 코드 자동 완성: 코드를 작성하지 않아도 문맥에 맞는 코드를 제안.
• 자연어 기반 코드 생성: "로그인 화면 만들어줘" 같은 명령으로 UI 생성.
• IDE 통합 지원: Visual Studio Code와 유사한 환경 제공.
• 터미널 명령어 지원: 복잡한 명령어를 간단히 실행.

Figma MCP란?

Figma MCP는 Figma와 Cursor를 연결하는 Model Context Protocol 기반 도구입니다.

이를 통해 Figma의 디자인 데이터를 Cursor에서 읽고 수정하거나, AI를 활용해 디자인을 자동으로 생성할 수 있습니다.

비개발자에게는 디자인과 개발의 경계를 허무는 강력한 도구로, 클릭 몇 번으로 UI를 구현할 수 있습니다.

왜 Cursor와 Figma MCP를 사용해야 하나요?

• 효율성: 디자인을 코드로 변환하는 수작업을 줄여 시간을 절약.
• 비개발자 친화적: 코딩 지식 없이도 UI를 생성 가능.
• 자동화: 반복적인 디자인 작업을 AI가 대신 처리.
• 오류 최소화: 디자인과 코드 간 불일치를 줄임.

이제 본격적으로 설정 방법을 알아보겠습니다!

비개발자를 위한 Cursor와 Figma MCP 설정 가이드 (Mac 기준)

아래 단계는 초보자도 쉽게 따라 할 수 있도록 상세히 설명했습니다. 각 단계를 하나씩 따라 해 보세요.

1. 준비물 확인

• Figma 계정: Figma에 가입하고, 디자인 파일을 준비하세요.
• Cursor 설치: Cursor 공식 웹사이트에서 다운로드.
• Bun 설치: JavaScript 런타임으로, MCP 서버 실행에 필요.
• Figma API 키: Figma에서 생성 (아래에서 설명).
• Mac 환경을 기준으로 설명하며, Windows 사용자는 터미널 명령어를 약간 수정해야 할 수 있습니다.

2. Cursor Talk to Figma MCP 다운로드

1. Cursor Talk to Figma MCP GitHub 페이지에 접속.
2. Code 버튼을 클릭하고 Download ZIP 선택.
3. ZIP 파일을 다운로드한 후, 원하는 폴더(예: Documents)에 압축 해제.

3. Cursor 앱 설치 및 프로젝트 열기

1. Cursor 공식 웹사이트에서 Cursor 앱을 다운로드하고 설치.
2. Cursor를 실행한 후, Open Folder를 클릭.
3. 압축 해제한 cursor-talk-to-figma-mcp 폴더를 선택.

4. Bun 설치 및 WebSocket 서버 설정

Bun은 MCP 서버와 WebSocket을 실행하기 위한 필수 도구입니다. 터미널에서 다음 단계를 진행하세요.

4-1. 터미널 열기

• Cursor 상단 메뉴에서 Terminal > New Terminal 선택.

4-2. Bun 설치

터미널에 다음 명령어를 입력

curl -fsSL https://bun.sh/install | bash

• 설명: 이 명령어는 Bun을 다운로드하고 설치합니다. 인터넷 연결이 필요하며, 설치 후 터미널을 재시작해야 할 수 있습니다.

4-3. WebSocket 서버 시작

터미널에 다음 명령어를 입력

bun run src/socket.ts

• 설명: 이 명령은 Figma와 Cursor 간 통신을 위한 WebSocket 서버를 시작합니다. New client connected 메시지가 나타나면 성공입니다.

4-4. MCP 서버 실행

새 터미널을 열고 다음 명령어를 입력

bun run src/talk_to_figma_mcp/server.ts

• 설명: MCP 서버를 실행해 Figma 데이터를 Cursor와 연결합니다. 서버가 정상적으로 실행되면 포트 번호(예: 3333)가 표시됩니다.

5. Figma API 키 생성

Figma와 MCP를 연결하려면 API 키가 필요합니다.

1. Figma 웹사이트에 로그인.
2. 오른쪽 상단 프로필 아이콘 > Settings > Security 탭.
3. Personal Access Token에서 Generate new token 클릭.
4. 토큰 이름을 입력(예: figma-mcp-token)하고 생성.
5. 스코프 선택

• File Content: 디자인 데이터를 읽기 위해 필수.
• Library Assets: 컴포넌트 데이터를 가져올 때 사용.
• Comments: 피드백 주고받기 원할 경우 추가.
• 필요에 따라 Dev Resources, Projects 등 선택.

   6. 생성된 토큰을 복사해 안전한 곳에 저장.

6. Figma 플러그인 설치

1. Figma를 열고 Plugins > Development > Import Plugin from manifest 선택.
2. cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json 파일을 선택.
3. 플러그인이 Figma의 개발 플러그인 목록에 추가됨.

7. Figma와 Cursor 연결

1. Figma에서 Cursor MCP Plugin 실행.
2. Connected to server on port (포트번호) in channel: (채널이름) 메시지가 나타나면 성공.
3. 연결되지 않을 경우, Connect 버튼을 클릭.
4. Cursor로 돌아가 우측 채팅창에서 Agent 모드 선택.
5. 채팅창에 다음을 입력

cursor talk to figma plugin channel: (채널이름)

   6. Run tool 버튼을 클릭.

8. Figma 디자인 연동 및 UI 생성

1. Figma에서 원하는 디자인 요소를 선택하고 Share > Copy Link 클릭.
2. Cursor 채팅창에 링크를 붙여넣고 Send 클릭.
3. Run tool을 눌러 Figma 문서 정보를 확인.
4. 예를 들어, "모바일 로그인 화면 만들어줘"라고 입력하면 AI가 디자인을 기반으로 코드를 생성.

자주 발생하는 오류와 해결법

비개발자가 설정 과정에서 자주 마주치는 오류와 해결 방법을 정리했습니다.

1. "New client connected" 메시지가 나타나지 않음

• 원인: WebSocket 서버가 실행되지 않음.
• 해결법
  • 터미널에서 bun run src/socket.ts를 다시 실행.
  • Bun이 설치되었는지 확인: bun --version.
  • 인터넷 연결 상태 점검.

2. Figma 플러그인 설치 실패

• 원인: 잘못된 manifest.json 파일 선택.
• 해결법
  • src/cursor_mcp_plugin/manifest.json 파일 경로를 정확히 확인.
  • Figma에서 Plugins > Development 메뉴를 다시 확인.

3. "Channel not connected" 오류

• 원인: 채널 이름 불일치 또는 서버 연결 문제.
• 해결법
  • Figma 플러그인에서 표시된 채널 이름을 정확히 입력.
  • Cursor 설정에서 MCP 서버 연결 확인: Settings > MCP.

4. 디자인 링크가 작동하지 않음

• 원인: Figma 문서에 쓰기 권한 부족.
• 해결법
  • Figma 문서 설정에서 Write 권한이 있는지 확인.
  • 링크를 다시 복사해 붙여넣기.

5. 일반적인 디버깅 방법

채팅창에 다음 명령어를 입력해 문제를 진단하세요

Check the README for installation issues
Open Cursor settings MCP menu and check for errors
Review Bun installation, setup, socket, and MCP server connection

기술적 분석: Figma MCP의 가능성과 한계

가능성

• 디자인-코드 워크플로우 혁신: Figma MCP는 디자인과 개발을 실시간으로 연결해 생산성을 극대화합니다. 예를 들어, 디자이너가 버튼을 수정하면 Cursor가 즉시 코드를 업데이트 가능.
  
  
• 비개발자 접근성: 코딩 지식 없이도 UI를 생성할 수 있어 프로덕트 매니저나 디자이너가 프로토타입을 빠르게 제작 가능.
  
  
• 확장성: MCP는 Figma 외에도 GitHub, Slack 등 다양한 도구와 연동 가능.

한계

• 로컬 컴포넌트 제한: 현재는 연결된 Figma 페이지의 로컬 컴포넌트만 지원해 복잡한 디자인 시스템에서는 제약이 있음.
  
  
• 초기 설정 복잡성: 비개발자에게 터미널 명령어와 API 키 설정이 다소 어려울 수 있음.
  
  
• 의존성: Bun, Node.js 등 외부 런타임에 의존해 환경 설정 오류가 발생할 가능성 존재.

활용 팁

• 명확한 프롬프트 사용: "다크모드 로그인 화면"처럼 구체적인 요청이 더 나은 결과를 가져옴.
  
  
• 소규모 프로젝트부터 시작: 복잡한 디자인보다 간단한 UI로 연습.
  
  
• 정기적 업데이트 확인: GitHub에서 최신 버전 확인.

"당신의 학습 스타일에 맞춘 효율적인 학습, Study Duck과 함께하세요!"

MBTI에 따라 맞춤형 학습법을 적용하면, 학습 효과가 두 배로! 혼자 학습하면 빠르게 배울 수 있지만, Study Duck은 꾸준히 장기간 학습을 도와줍니다.
학습 타이머로 집중을 유지하고, 리더보드에서 다른 사람들과 경쟁하며 꾸준함을 유지하세요.
지금 바로 Study Duck으로 학습의 새로운 장을 열어보세요!

www.studyduck.net

Study Duck - Smart Learning Assistant