Cursor와 Figma로 경험하는 Model Context Protocol(MCP)

date

Mar 20, 2025

slug

cursor-figma-model-context-protocol

author

status

Public

1. Model Context Protocol(MCP)이란?

MCP는 AI 시스템이 콘텐츠 저장소, 비즈니스 도구, 개발 환경 등 다양한 데이터 소스와 원활하게 연결될 수 있도록 지원하는 표준화된 프로토콜입니다. AI 모델이 여러 시스템과 연동될 수 있도록 하는 핵심 기술로, 이를 통해 AI 어시스턴트가 더욱 유용한 정보를 제공하고 정교한 작업을 수행할 수 있습니다.

기존에는 AI 시스템이 개별적인 데이터 소스에 접근하려면 맞춤형 구현이 필요했으며, 이는 확장성과 유지보수 측면에서 큰 부담이었습니다. MCP는 이러한 문제를 해결하기 위해 보안적이고 양방향 연결을 제공하는 표준 프로토콜을 개발하여 AI 시스템과 데이터 소스를 간편하게 연결할 수 있도록 돕습니다.

🔗 더 자세한 내용은 공식 MCP 소개 페이지에서 확인할 수 있습니다.

2. MCP 서버의 구조와 주요 기능

출처: https://x.com/akshay_pachaar/status/1900456268084764689

MCP는 클라이언트-서버 모델을 기반으로 하며, AI 시스템이 다양한 데이터 소스와 연결될 수 있도록 설계된 프로토콜입니다. MCP의 기본적인 흐름은 다음과 같습니다.

2.1. MCP Host (MCP 실행 환경)

Claude Desktop: AI 모델이 실행되는 환경 (Claude AI 같은 AI 시스템)

IDE (개발 도구): VS Code, Cursor 같은 개발 환경

AI Tools: MCP와 통합된 다양한 AI 애플리케이션

2.2. MCP Client - MCP Server 연결

MCP Client는 MCP Server에 연결되어 데이터를 요청하고 응답을 받음.

MCP Server는 다양한 데이터 소스(Local Filesystem, Database, Web API 등)와 직접 연결됨.

MCP Server는 클라이언트의 요청을 받아 필요한 데이터를 전달하거나 AI의 명령을 실행함.

2.3. MCP Server가 제공하는 기능

Tools (도구): AI가 실행할 수 있는 기능 (예: GitHub PR 생성, 코드 리뷰)

Resources (리소스): 데이터베이스, 파일 시스템 등의 정보 제공

Prompts (프롬프트): 재사용 가능한 프롬프트 템플릿 제공

Notification (알림): 특정 작업이 완료되었을 때 클라이언트에 알림 제공

Sampling (샘플링): AI가 데이터를 효율적으로 활용하기 위한 샘플링 기능 제공

2.4. MCP Server 특징

데이터 소스 연결: AI 시스템이 파일 시스템, GitHub, Google Drive, Slack, Postgres 등의 외부 데이터 소스와 직접 통신할 수 있습니다.

보안성 강화: 각 연결은 안전하게 관리되며, 조직의 내부 시스템과 AI가 안전하게 연동됩니다.

양방향 데이터 흐름 지원: 기존 API 기반 통합과 달리, MCP는 AI가 데이터를 읽고 수정하는 양방향 통신을 지원합니다.

확장성: 오픈 소스 커뮤니티에서 적극적으로 지원하고 있으며, 기업 및 개인 개발자가 새로운 MCP 커넥터를 직접 개발하고 확장할 수 있습니다.

3. Figma MCP 서버 + Cursor로 MCP 서버 체험하기

디자인과 개발을 연결하는 자동화 시스템을 구축해 보면서 MCP를 체험해 보겠습니다.

3.1. Figma-Context-MCP로 디자인을 코드로 빠르게 변환하기

Figma MCP 서버를 활용하면 AI가 디자인 파일을 분석하고, 이를 코드로 변환하는 작업을 자동화할 수 있습니다.

🔗 Figma-Context-MCP

1. 위 Repository를 clone 합니다.

2. Figma에 들어가서 프로필 클릭 후 Settings에 들어간 다음 Security탭의 하위에 있는 Personal Access Token 영역에서 Generate new token을 눌러 새로운 토큰을 발급 받으세요.

3. clone받은 Repository의 .env 파일에


FIGMA_API_KEY=생성한 피그마 토큰을 넣어주세요

4. 의존성 설치 후 아래 cmd를 입력하여 로컬 서버를 실행해주세요


npx figma-developer-mcp --figma-api-key=<여기도 피그마 토큰을 넣어주세요>

5. 그러면 아래 화면처럼 로컬 서버가 실행됩니다.

6. Cursor Settings를 열고 좌측 탭 중 MCP를 클릭합니다.

7. 우측 상단 Add new MCP server를 클릭합니다.

이름은 자유롭게 지으셔도 됩니다. command말고 Server send Event Type으로 설정해 주세요.

Server URL에 FIgma MCP 프로젝트 로컬 포트 번호에 맞춰 위와 같이 적어주세요.

8. 이제 커서 Chat을 켜고 Agent모드에서 Figma link를 붙여넣고 구현을 요청해봅시다.

피그마 요소 우클릭 > Copy link to selection

*MCP 서버는 Cursor Chat Agent 모드에서 사용할 수 있습니다.

MCP 서버가 Cursor Chat Agent 모드에서만 사용 가능한 이유

1. AI 모델과의 직접적인 연결

MCP 서버는 AI 시스템과의 보안된 통신을 유지해야 합니다.

Agent 모드는 AI 모델이 요청을 보내고 응답을 받을 수 있도록 MCP 클라이언트와 서버 간의 명확한 역할을 부여합니다.

2. 보안 및 데이터 접근 관리

일반적인 애플리케이션 모드에서 MCP 서버를 실행할 경우, 불필요한 보안 리스크(예: 데이터 유출, 권한 없는 접근)가 발생할 수 있습니다.

Agent 모드는 AI가 특정 데이터만 접근하도록 제어 가능하며, 클라이언트 요청을 필터링하는 역할을 수행합니다.

3. AI의 능동적 작업 수행

Agent 모드에서는 AI가 필요한 데이터와 리소스를 능동적으로 요청 및 활용할 수 있습니다.

일반 클라이언트-서버 모델에서는 특정 요청을 기다려야 하지만, Agent 모드는 실시간으로 데이터를 활용할 수 있도록 설계되었습니다.

4. MCP 서버의 최적화된 사용 방식

AI 시스템이 다양한 데이터 소스(Local Filesystem, Database, Web APIs 등)와 직접 연결되는 구조에서는 중간에서 데이터를 관리하고 AI에 제공하는 Agent 역할이 중요합니다.

따라서 MCP 서버는 AI 모델이 지속적으로 컨텍스트를 유지하며 데이터에 접근하는 Agent 기반 운영 방식이 최적화된 모델입니다.

*주의사항

Figma에 write 권한이 있는지 확인하세요 Read 권한만 있다면 디자인 생성이 안됩니다…

9. Figma MCP 서버와 Cursor가 정상적으로 연결되었다면 해당 link를 붙여넣고 관련 프롬프트(e.g. 피그마 디자인을 읽고 구현해줘)를 넣으면 아래와 같이 Called MCP tool과 파라미터들이 보이고 프롬프트에 따라 코드들을 생성하기 시작합니다.

10. 이제 자유롭게 피그마 특정 페이지 혹은 요소의 link를 복사하여 Cursor Chat에 붙여넣어보세요!

3.2. Cursor Talk to Figma MCP로 프롬프트로 Figma 디자인 생성하기

이번에는 Cursor를 활용한 MCP 서버를 사용해 프롬프트만 입력하면 AI가 Figma 내에서 원하는 UI를 생성하도록 해보겠습니다.

🔗 Cursor Talk to Figma MCP

1. 위 Repository를 clone 받습니다.

2. bun이 없으시다면 새로 설치해주세요.


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

3. MCP를 Cursor에 설치하기 위해 setup 명령어를 실행해주세요.


bun setup

4. Websocket server를 실행해주세요.


bun start

5. 피그마 플러그인을 설치해보겠습니다.

6. clone한 프로젝트의 아래 경로의 파일을 import 해줍니다.

src/cursor_mcp_plugin/manifest.json

7. 그러면 이렇게 플러그인이 Figma 화면상에 나타납니다.

8. MCP 로컬 서버의 포트와 잘 연결되었다고 표시됩니다.

9. Cursor Chat을 켜서 프롬프트로 Figma에 디자인을 추가해보세요!

아래와 같이 프롬프트에 따라 Figma 디자인이 생성됩니다! 😮

4. MCP 활용 사례

4.1. 개발 환경 자동화

MCP를 활용하면 AI 어시스턴트가 개발 환경과 연동되어 코드 리뷰, 자동화된 코드 수정, 프로젝트 관리를 수행할 수 있습니다. 예를 들어, GitHub MCP 서버를 통해 AI가 새로운 저장소를 생성하고 PR(Pull Request)을 자동으로 처리할 수 있습니다.

4.2. 사내 데이터 자동화

Slack, Google Drive, Postgres 등의 데이터 소스를 AI와 연결하여 자동화된 데이터 분석, 문서 요약, 일정 관리 등을 수행할 수 있습니다.

4.3. 개인 비서 역할을 하는 AI

Claude 데스크톱 앱을 활용하여 로컬 MCP 서버를 실행하고, AI가 폴더 정리, 일정 관리, 노트 정리 등의 작업을 자동으로 수행하도록 설정할 수 있습니다.

5. MCP 관련 플랫폼 추천

5.1. Smithery

MCP 서버를 손쉽게 검색하고 활용할 수 있는 Smithery는 2,000개 이상의 MCP 서버를 제공하는 중앙 레지스트리 플랫폼입니다. 개발자들은 원하는 MCP 서버를 쉽게 검색하고 실행할 수 있습니다.

MCP 서버 검색 및 설치: 다양한 MCP 서버를 검색하고 간편하게 설치 가능

CLI 기반 관리 도구 제공: 개발자가 쉽게 MCP 서버를 실행하고 관리할 수 있도록 지원

5.2. cursor.directory

MCP 서버를 활용한 다양한 개발 도구 및 서비스를 한곳에서 탐색할 수 있는 플랫폼입니다. MCP 기반의 애플리케이션과 확장 기능을 쉽게 찾고 연동할 수 있도록 지원합니다.

5.3. awesome-mcp-servers

awesome-mcp-servers

punkpeye • Updated Mar 19, 2025

6. 마무리: MCP와 AI 개발의 미래

이번 글에서는 Cursor와 Figma MCP 서버를 활용하여 AI와의 협업을 어떻게 극대화할 수 있는지를 살펴보았습니다. 단순한 디자인-코드 변환을 넘어, AI가 직접 UI를 생성하고, 개발 환경과의 통합을 자동화하는 과정을 경험하면서, MCP가 제공하는 엄청난 가능성을 엿볼 수 있었습니다.

6.1. MCP는 단순한 자동화 도구가 아니다

MCP는 AI와 다양한 데이터 소스를 연결하는 새로운 개발 패러다임을 제시합니다. 특히 프론트엔드 개발자들에게는 디자인과 코드의 경계를 허물어, UI/UX 작업의 효율을 획기적으로 향상시킬 수 있는 도구가 될 수 있을 것 같습니다. 기존에는 수작업으로 처리해야 했던 디자인 시스템 반영, 코드 생성, UI 자동화 등의 작업을 MCP 기반으로 AI가 처리할 수 있기 때문입니다.

6.2. 생산성과 창의성, 두 마리 토끼를 잡을 기회

MCP를 활용하면 단순 반복 작업에서 벗어나, 보다 창의적인 개발과 문제 해결에 집중할 수 있습니다.

특히 Figma와 같은 디자인 도구를 코드와 연결하여 자동화된 UI 시스템을 구축한다면, 개발자와 디자이너 간의 협업도 더욱 원활해질 것이라고 기대합니다.

6.3. MCP 활용 시 보안은 신중히 검토해야 한다

그러나 MCP가 아직 완벽한 보안성을 보장하는 것은 아니므로, 실무에서 활용할 경우 데이터 접근 권한 및 보안 정책을 철저히 검토해야 합니다.

특히 기업 환경에서 민감한 데이터를 다룰 경우, AI와의 데이터 공유 방식과 접근 권한을 명확하게 설정하는 것이 중요하겠습니다.

6.4. MCP 지금 체험해보세요!

이제 AI와 협업하는 방식은 더 이상 선택이 아닌 필수적인 요소가 되어가고 있습니다. 생산성이 매우 가파르게 향상되는걸 체감합니다. 단순 반복식 작업은 더이상 직접 할 필요가 없는 것 같습니다.

MCP를 활용하면 더 빠르고, 더 효율적인 개발 환경을 구축할 수 있으니 여러분도 MCP를 직접 활용해 보면서, AI 기반 자동화의 가능성을 경험해 보시길 바랍니다.