# MCP(Model Context Protocol)란?

<a
  href="https://modelcontextprotocol.io/docs/concepts/"
  target="_blank"
  rel="noopener noreferrer"
>
  MCP Concept
</a>

![MCP 개념도](/assets/202504/20250403-063513.png)

MCP(Model Context Protocol)는 애플리케이션이 LLM(Large Language Model)에 컨텍스트를 제공하는 방식을 표준화하는 개방형 프로토콜입니다. MCP 서버는 표준화된 MCP를 통해 각각 특정 기능을 노출하는 경량 프로그램입니다.

이 프로토콜을 통해 Client(예: Cursor, Claude Desktop)가 MCP 서버와 통신하고, 해당 서버는 로컬 데이터 리소스나 API 요청을 통해 외부 데이터를 가져와 LLM에게 제공할 수 있습니다.

# Figma MCP 적용 방법

## 1. Figma에서 Personal AccessToken 발급받기

![Figma PersonalAccess Token](/assets/202504/20250403-063959.png)

Figma 계정 설정에서 개인 액세스 토큰을 발급받습니다. 이 토큰은 MCP 서버가 Figma API에 접근할 수 있는 권한을 부여합니다.

## 2. Figma MCP Server를 Cursor에 설정하기

![Cursor MCP 설정](/assets/202504/20250403-064050.png)

Cursor에 Figma MCP 서버를 설정하기 위해 [GitHub - GLips/Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP) 리포지토리를 참고하여 다음과 같이 설정합니다:

```json
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=${PersonalAccessToken}",
        "--stdio"
      ]
    }
  }
}
```

## 3. Cursor Agent에 Figma 링크 제공하기

![Figma 링크 제공](/assets/202504/20250403-064324.png)
![Figma 데이터 통신](/assets/202504/20250403-064309.png)

Cursor에서 AI 에이전트에 질문할 때 Figma 링크를 함께 제공합니다. Cursor는 Figma의 데이터를 가져와 JSON-RPC 2.0 형식의 데이터를 통해 LLM과 통신하게 됩니다. 이렇게 획득한 정보를 기반으로 코드를 생성합니다.

![생성된 코드 결과물](/assets/202504/20250403-064615.png)

# PoC(Proof of Concept) 결과

혁신TF에서 적용해본 결과, Anima나 이미지 캡쳐 파일을 LLM에 전달하는 방식보다 훨씬 좋은 결과물을 얻을 수 있었습니다.

개발자의 미세 조정이 필요하지만, 다음 가정이 충족된다면 상용 수준의 퀄리티를 얻을 수 있을 것으로 예상됩니다:

1. **디자인 시스템 준수**: Figma의 작성이 MUI/디자인시스템의 규칙을 잘 따르며 패턴화, 컴포넌트화가 되어 있어야 합니다.
2. **코드베이스 인덱싱**: AI에 프롬프트를 제공할 때 기존 코드베이스에 대한 인덱싱이 되어 있어야 합니다.
3. **컨텍스트 제공**: 프롬프트 시 적절한 컨텍스트를 함께 제공해야 합니다.

# 결론

Figma MCP Server를 도입함으로써 AI 기반 프론트엔드 개발 효율화에 크게 기여할 수 있었습니다. 디자인 시스템과 코드 생성 간 일관성 확보로 개발 생산성이 향상되었으며, 혁신TF의 검증을 통해 상용 수준의 코드 생성 워크플로우를 확립할 수 있었습니다.

이러한 방식을 통해 디자이너와 개발자 간의 협업이 더욱 원활해지고, 프론트엔드 개발 시간이 단축되어 전체적인 개발 생산성 향상에 기여할 것으로 기대됩니다.