Cursor에게 MCP 쥐어주기

요즘 HOT한 MCP

요즘 동료들과 AI 관련 이야기를 나눌 때마다 나오는 키워드가 있습니다.

'MCP를 이용해서 생산성이 2~3배 높였어요!', 'MCP 이거 완전 물건이네요!' 등 MCP를 안 쓰면 급변하는 시대에 뒤쳐지는 기분이 들기까지 합니다.

MCP가 뭐지?

MCP란 Model Context Protocol의 줄임말로, LLM에 컨텍스트를 제공하는 방식을 표준화하는 프로토콜

다른 말로, 다양한 AI 모델에게 다양한 프로그램을 제공하는 표준이라 볼 수 있습니다.

클로드(Claude)를 제작한 Anthropic사에서 만든 프로토콜으로, 클로드 데스크탑에서 사용할 수 있습니다.

그런데, 이미 이전에도 각 AI 모델은 pdf 분석, 동영상 분석, 그림 제작 등 여러 가지 업무를 수행하는 데 어려움이 없었습니다. 왜 이제 와서 MCP 라는 것에 사람들이 열광을 하는 걸까요?

왜 HOT해?

1. 모델 업데이트의 한계

LLM은 훈련된 시점의 데이터만을 기반으로 응답
실시간으로 세상이 바뀌는 데 비해, LLM은 매일 업데이트되지 않으며, 업데이트하려면 막대한 시간과 자원이 듬
따라서 최신 정보나 유동적인 상황에 대응하기 어려움이 존재

2. 외부 데이터 연동 표준의 부재

현재 대부분의 LLM은 자체적으로 인터넷이나 API, DB 등에 직접 접근하지 못함
외부 시스템이나 실시간 데이터에 연결하기 위한 공식적인 표준이나 인터페이스가 부족
그 결과로 정적, 폐쇄형 정보 기반 대답만 가능하고, 사용자 맥락에 맞는 연동형 응답이 제한됨

3. 동적, 상황 맞춤형 처리 요구 증가

사용자는 질문마다 다른 목적, 상황, 형식(예: 표, 이미지, 코드 등)을 갖고 질문
정적인 언어 모델만으로는 이러한 멀티모달·다양한 입력을 문맥에 맞게 처리하기 어려움

결국

이 전에까지는 AI 모델에게 외부 시스템이나 데이터 소스를 편하게 제공하기가 어려웠습니다. 제작사마다, 모델마다 제각기 다른 방식으로 덕지덕지 붙여서 일을 수행하게 했죠.

MCP는 이러한 문제를 해결하기 위해 만들어졌습니다.

내가 쓰는 LLM을 내 마음대로 MCP 표준에 맞는 프로그램으로 커스텀하고, 내가 원하는 기능을 만들어서 AI의 손에 쥐어줄 수 있는 것이죠.

마치 레고블록처럼 말이죠!

MCP 쥐어주기

현재 (제가 잘 사용하고 있는) VScode를 기반으로 한 인공지능 IDE인 Cursor에서 MCP를 쉽게 쥐어줄 수 있습니다.

저는 현재 회사에서 프론트 개발을 맡고 있지만 기획과 디자인을 일부 참여하고 있습니다. 그래서 Figma 툴을 자주 사용하는데요, 이 툴에서 작업한 내용을 코드로 퍼블리싱을 더 쉽게 진행해보고자 Figma-Context-MCP를 도입해 보았습니다.

(Figma로 디자인한 파일을 AI가 분석하고, 이를 코드로 변환하는 작업 자동화)

1. Figma에서 Access Token 발행하기

Figma에서 로그인 후 Settings 탭으로 이동합니다.

[Figma] - [프로필] - [Settings] 2. Security 탭에서 새 토큰을 발행합니다.
[Security] - [Generate new token] 클릭
임의의 이름과 만료기간(최대 90일), write 권한들 부여한 뒤 Generate token 클릭합니다. 3. 값은 잘 저장해두세요.

2. Figma-Context-MCP SSE 스트림 연결하기

Figma-Context-MCP 오픈소스 저장소로 이동합니다.
Fork한 뒤 npm i, npm run dev 명령어를 실행합니다.

참고하기

figma-context-mcp는 Figma에서 정보를 수집해서 Cursor에 넘겨주는 역할을 하는 미들웨어 서버입니다.
npm run dev를 실행하면 이 서버가 실행되고, /sse 엔드포인트에서 SSE 연결을 열어 Cursor와 통신합니다.
Cursor는 이 localhost:3333/sse 스트림에 연결해서 Figma에서 어떤 변경이 일어나는지 실시간으로 받아야 하기 때문에, 이 주소에 접근이 불가능하면 연결 자체가 실패하게 됩니다.

3. Cursor에 MCP 서버 연결하기

Cursor에 MCP 서버 연결
1. Ctrl + Shift + J 클릭해서 Setting 에서 MCP 탭에 들어간 뒤 [Add new global MCP server] 추가

아래와 같이 sse 스트림 주소와 환경변수(Figma API Key)를 입력합니다.

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "url": "http://localhost:3333/sse",
      "env": {
        "FIGMA_API_KEY": "figd_로 시작하는 나의 토큰값"
      }
    }
  }
}