MCP(Model Context Protocol)란?

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

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

Figma MCP 적용 방법

1. Figma에서 Personal AccessToken 발급받기

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

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

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

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

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

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

PoC(Proof of Concept) 결과

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

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

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

결론

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

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