🔧Window 환경으로 Figma MCP + Cursor 구축 사례기 (Feat. Rose)

🎯 들어가며: 왜 Figma MCP + Cursor일까요?

최근 개발 커뮤니티에서 Figma MCP + Cursor 조합이 정말 핫해요.
디자인에서 코드까지 끊김 없는 워크플로우를 약속하는 이 조합은
많은 개발자들의 관심을 끌고 있어요.

하지만 대부분의 가이드가 Mac 환경 중심이라서, Window 사용자들은 종종 소외되곤 하죠.
이 글은 Rose님의 훌륭한 가이드를 참조해서
Window 환경에서 실제로 구축해본 생생한 경험을 공유해드릴게요.

Rose님의 훌륭한 가이드 : https://www.gpters.org/uiux/post/figma-mcp-cursor-usage-UseSOXQtjT0XiDc

💡 이 글에서 얻을 수 있는 것

- Window 환경에서의 실제 구축 과정과 시행착오

- WSL 환경 설정부터 MCP 연동까지의 상세한 단계

- 예상 소요 시간과 시스템 요구사항

- 실제 사용해본 솔직한 후기와 한계점

🚀 구축 여정: 2시간의 험난한 모험

Phase 1: 준비 단계 - Fork부터 시작해요

```bash
# 1. GitHub에서 Fork
https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
```

ALT

VPS의 설정 페이지의 스크린 샷

Rose님의 가이드를 따라 일단 Fork부터 했어요. 이 단계는 쉬웠죠. 문제는 그 다음부터였어요.

Phase 2: Window의 현실 - WSL과의 만남

```bash
# Git clone 시도
git clone [forked-repo-url]
```

Cursor에서 clone을 시도했지만, 곧 깨달았어요. Window는 Linux 환경이 필요하다는 사실을요.

🐧 WSL 환경 구축 - Window 개발자의 필수 관문

이 부분이 가장 시간이 오래 걸렸어요.
Window 환경에서는 WSL(Windows Subsystem for Linux) 구축이 필수예요.

ALT

한국과 중국어 텍스트가있는 컴퓨터 화면의 스크린 샷

WSL 설치 과정

```bash
# 1. WSL 기본 버전 설정
wsl --set-default-version 2

# 2. Ubuntu 설치
# Microsoft Store에서 Ubuntu 설치 또는
wsl --install -d Ubuntu
```

ALT

컴퓨터에서 중국어의 스크린 샷

💡 중요한 팁들

- 계정 설정: WSL 설치 시 사용자명과 비밀번호를 반드시 기록해두세요

- 재사용성: 이 계정은 다른 프로젝트에서도 활용할 수 있어요

- 시간 투자: WSL 구축만 30-40분 정도 소요돼요

ALT

한국어 텍스트가있는 검은 색 화면의 스크린 샷

🛠️ 본격 구축: BUN부터 WebSocket까지

BUN 설치 - Rose님 가이드 따라하기

Rose님이 추천한 BUN을 설치했어요. 이 부분은 비교적 순조로웠어요.

```bash
# BUN 설치
curl -fsSL https://bun.sh/install | bash
```

🤔 환경설정이 필요한 이유 (솔직히 모르겠어요)

ALT

우분투 패키지 도구의 스크린 샷

여기서 솔직히 고백하자면,
왜 이런 환경설정이 필요한지 완전히 이해하지 못했어요.
하지만 Rose님을 믿고 따라했어요.

이것이 바로 "가이드의 힘"이에요.
완벽히 이해하지 못해도, 신뢰할 수 있는 가이드가 있으면 진행할 수 있거든요.

WebSocket 구축 - 진짜 시작이에요

이 부분에서 Cursor의 진가가 드러났어요.
복잡한 설정 과정을 캡처해서 보여주면, Cursor가 알아서 해석하고 도움을 줘요.

🎯 Cursor 활용 팁

- 에러 메시지 캡처 → Cursor에게 질문

- 설정 파일 복붙 → 크로스체크 요청

- 단계별 진행 → 실시간 피드백

🎨 Figma MCP 연동 - 드디어 목표 지점이에요

Figma 플러그인 설치

https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin

🚨 첫 번째 오류와 해결

웹소켓이 구축된 줄 알았는데 연결이 안 됐어요. 이때부터 진짜 시행착오가 시작됐어요.

Cursor에게 에러를 보여주고 해결책을 요청했어요. 이것이 바로 AI 도구의 강점이에요.

의존성 문제 해결

문제는 의존성 서버 구축에 있었어요. 이 부분에서 추가 설정이 필요했어요.

```bash
# 의존성 문제 해결
npm install

# 또는 
bun install

```

🎉 성공! 드디어 연결 완료

Window: Cursor + Figma MCP 환경구축 완료!

💭 솔직한 후기와 현실적 관점

🕐 실제 소요 시간

- 총 소요 시간: 약 1시간

💻 시스템 요구사항 체크

현재 시스템: 5800X + GTX 1660S

구축 과정에서 시스템이 잠시 버벅거렸어요.
나름 현역급 사양이라고 생각했는데, MCP 환경은 생각보다 리소스를 많이 먹네요.

🔍 시스템 요구사항 분석

- CPU: 최소 Ryzen 5 3600 이상 권장

- RAM: 16GB 이상 (32GB 권장)

- SSD: 필수 (HDD는 비현실적)

- 네트워크: 안정적인 인터넷 연결

🤔 MCP 의존성에 대한 우려

개인적으로 이런 워크플로우에 대해 경계하는 마음이 있어요. 이유는:

1. 환경 의존성: 데스크톱과 노트북을 모두 사용하는 상황에서 매번 환경 설정이 부담스러워요

2. 시간 비용: 구축에 2시간, 문제 발생 시 추가 시간이 필요해요

3. 복잡성 증가: 기존 워크플로우보다 복잡한 의존성 체인이에요

🎯 언제 사용할 만할까요?

✅ 추천하는 경우

- 팀 프로젝트: 디자이너-개발자 협업이 빈번한 경우

- 반복 작업: 유사한 UI 컴포넌트를 자주 만드는 경우

- 학습 목적: AI 도구 체이닝을 경험해보고 싶은 경우

❌ 비추천하는 경우

- 간단한 프로젝트: 설정 시간이 개발 시간보다 긴 경우

- 불안정한 환경: 시스템 사양이 부족한 경우

- 일회성 작업: 한 번만 사용할 프로젝트

🚀 다음 단계: 실제 활용편

구축은 완료했지만, 진짜 중요한 것은 실제 활용이에요. 다음 글에서는:

- Figma 디자인 → Cursor 코드 변환 실험

- 실제 웹페이지 구축 과정

- 번역 정확도와 수정 필요 비율 분석

- 전통적 개발 방식과의 비교

🌱 개인적 계획

앞으로도 지피터스 다마고찌처럼 이것저것 해보면서 실력을 늘려갈 예정이에요.
AI 툴이 많다 보니 욕심이 생기지만, 주어진 피드백을 수용하는 것부터 차근차근 해나가려고 해요.

🎁 마무리: Rose님과 커뮤니티에게 감사

이 구축 과정은 Rose님의 훌륭한 가이드 없이는 불가능했어요. 혼자였다면 중간에 포기했을 거예요.

📚 참고 자료

Rose님 : https://www.gpters.org/uiux/post/figma-mcp-cursor-usage-UseSOXQtjT0XiDc

윤누리님 :

• https://www.gpters.org/dev/post/reasons-using-figma-mcp-2vobzcvAIhPKmhx

• https://www.gpters.org/dev/post/mcp-airbnb-design-connecting-EngZxlWvVuTcjGE

💌 독자들에게

Window 환경에서 구축을 고민하고 있다면, 2시간 정도의 시간 투자를 각오하고 도전해보세요.
완벽하게 이해하지 못해도, 좋은 가이드와 Cursor의 도움이 있으면 충분히 가능해요.

다만 환경 구축의 무게를 고려해서, 정말 필요한 프로젝트에 활용하시길 권해요.

🌱 다음 글 예고: "Figma MCP로 실제 웹페이지 만들어보기 - 디자인에서 배포까지"