Reese-log
  • About
  • Blog

© 2025 Reese. All rights reserved.

2025년 3월 20일

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

#AI

최근 AI 기술이 빠르게 발전하면서, 인공지능이 보다 효율적으로 데이터를 활용하고 다양한 시스템과 통합될 필요성이 커지고 있습니다. 이러한 흐름 속에서 Anthropic은 24년 11월 25일 Model Context Protocol(MCP)이라는 새로운 오픈 소스 프로토콜을 도입하였으며 최근 이를 활용한 여러 실험과 프로젝트들이 진행되면서 계속 화제가 되고 있습니다.

이번 글에서는 Cursor와 Figma를 활용한 MCP 체험을 중심으로, 디자인과 개발을 연결하는 자동화 프로세스를 체험해보겠습니다.

1. Model Context Protocol(MCP)이란?

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

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

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

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

출처:
출처:

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 파일에

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

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

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

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

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

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

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

    *MCP 서버는 Cursor Chat 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이 없으시다면 새로 설치해주세요.

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

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

    shell
    bun setup

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

    shell
    bun start

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

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

    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

    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 기반 자동화의 가능성을 경험해 보시길 바랍니다.