Model Context Protocol (MCP)
Anthropic이 발표한 지능형 에이전트용 개방형 프로토콜. Model Context Protocol (MCP)을 통해 수천 개의 외부 도구와 데이터 소스에 연결할 수 있음
MCP 서버는 Claude Code가 도구, 데이터베이스, API에 액세스할 수 있게 함
현재 기준으로 수천 개의 MCP Server가 공개되어 있어, Claude와 다양한 외부 서비스 간의 연동이 가능. 여기는 Figma만 적어 놓았고, MCP Server별로 설정 방법이 다르므로, 다른 MCP Server 사용시 방법 확인 필요.
ChatGPT는 MCP Server를 지원하지 않고, 에이전트 모드라고 만들었는데 유료 버전 부터 사용 가능
- MCP 호스트 : 데이터에 액세스하기 위해 MCP를 사용하는 AI LLM 애플리케이션.
- MCP 클라이언트 : 호스트 애플리케이션 내부에서 MCP 서버와의 일대일 개별 연결을 유지하는 시스템
- MCP 서버 : 표준화된 프로토콜을 통해 컨텍스트, 도구, 프롬프트 등 특정 기능과 정보 소스를 제공하며, 데이터와 기능을 MCP 클라이언트에 노출하는 프로그램
- 로컬 데이터 소스 : 관련 정보를 포함하는 데이터베이스, 파일 및 로컬 서비스
- 원격 서비스 : MCP 서버가 기능을 확장하기 위해 연결할 수 있는 외부 API 또는 서비스
https://docs.anthropic.com/ko/docs/claude-code/mcp
MCP를 통해 Claude Code를 도구에 연결하기 - Anthropic
”—” 매개변수 이해하기: -- (이중 대시)는 Claude 자체의 CLI 플래그와 MCP 서버에 전달되는 명령 및 인수를 구분합니다. -- 앞의 모든 것은 Claude의 옵션(--env, --scope 등)이고, -- 뒤의 모든 것은 MCP
docs.anthropic.com
A. Claude + Figma (직접 통합)
- 기능 : Figma에서 직접 디자인 생성
- 작업 방식 : Figma 플랫폼 내에서 Claude의 도움을 받아 디자인 작업 수행
- 특징 : 실시간 디자인 생성 및 편집 가능
명령어 예시
사용자 :
"우리 모바일 앱 프로젝트 Figma 파일에서 로그인 화면 컴포넌트를 찾아서, 그 디자인을 분석하고 HTML/CSS로 구현해줘."
Claude :
"죄송하지만 Figma 파일에 직접 접근할 수 없습니다. 대신 다음과 같은 방법으로 도움을 드릴 수 있습니다: 1. Figma에서 로그인 화면을 스크린샷으로 찍어서 공유해 주세요
2. 또는 Figma의 "Copy as CSS" 기능을 사용한 코드를 붙여넣어 주세요
3. 디자인 스펙(색상, 폰트, 크기 등)을 텍스트로 알려주세요 그러면 그 정보를 바탕으로 HTML/CSS 코드를 작성해드리겠습니다."
B. Claude + Figma MCP Server (서버 기반 통합)
- 기능 : Claude에서 Figma 관련 작업 요청 및 처리
- 작업 방식 : Claude 인터페이스에서 "Figma로 안내문 작성해줘"와 같은 자연어 명령으로 Figma 작업 수행
- 특징:
- Claude 환경에서 직접 Figma 파일 데이터 조회
- Figma 이미지 및 에셋 다운로드
- 자연어를 통한 직관적인 디자인 작업 지시
명령어 예시
사용자 :
"우리 모바일 앱 프로젝트 Figma 파일에서 로그인 화면 컴포넌트를 찾아서, 그 디자인을 분석하고 HTML/CSS로 구현해줘."
와 같이 가능해짐.
Claude(클로드)에 Figma MCP Server 연결
0. 사전 준비 사항 : Claude Desktop 설치
https://claude.ai/download
1. 코드 복사 : 다음 링크에서 Mac 또는 Windows용 코드를 복사
https://github.com/GLips/Figma-Context-MCP/blob/main/README.ko.md
Figma-Context-MCP/README.ko.md at main · GLips/Figma-Context-MCP
MCP server to provide Figma layout information to AI coding agents like Cursor - GLips/Figma-Context-MCP
github.com
2. Figma Web : 개인 토큰 생성
Profile - Settings - Security 탭 - Generate new tokens
3. Figma Web : 개인 토큰 생성 및 복사
(절대 남에게 공개 하면 안됨)
4. Claude Desktop : json 파일 편집
설정 - 개발자 - 로컬 MCP 서버 - 구성 편집
5. Claude Desktop : claude_desktop_config.json 파일 편집
3번에서 생성한 개인 토큰을 아래 편집 파일의 YOUR-KEY에 대체
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
6. Claude Desktop 완전 종료 후 재실행
running 되었음 확인 가능
