MCP가 뭐예요?

Claude Code는 기본적으로 로컬 파일만 볼 수 있어요. 근데 MCP를 쓰면 외부 서비스를 직접 연결할 수 있어요.

Anthropic이 만든 오픈 프로토콜이라 써드파티 MCP 서버가 계속 늘어나고 있어요.

설치 방법

Claude Code 설정 파일(~/.claude/settings.json 또는 프로젝트 .claude/settings.json)에 추가하면 돼요.

토큰만 발급받으면 끝이에요.

Notion MCP 설정

1. Notion 토큰 발급

notion.so/my-integrations 에서:

New integration 클릭
이름 입력 (예: Claude Code)
권한: Read content, Update content, Insert content 체크
Internal Integration Secret 복사

2. 페이지 연결

토큰만 있어도 안 돼요. 사용할 페이지를 integration에 공유해야 해요.

노션 페이지 우측 상단 ··· → Connections → 방금 만든 integration 추가.

3. 사용 예시

연결하면 이런 게 가능해요:

저는 블로그 발행 계획 노션 페이지를 연결해두고, Claude Code가 직접 읽어서 오늘 쓸 글이 뭔지 파악하게 해요. 이 글도 그렇게 쓰고 있어요.

Figma MCP 설정

1. Figma 토큰 발급

figma.com/settings → Personal access tokens → Generate new token

2. 사용 예시

가장 유용한 건 디자인을 코드로 변환할 때예요. 피그마 URL만 던져주면 Claude가 직접 열어보고 코드를 짜요. 스크린샷 찍어서 붙여넣을 필요가 없어요.

실제 워크플로우

제가 HANUI 작업할 때 쓰는 방식이에요.

디자인 → 코드

이전에는:

피그마 열기 → 스펙 확인 → 수치 옮겨 적기 → 코드 작성

지금은:

URL 복붙 → 코드 완성

기획 → 구현

기획서를 복붙하거나 요약해서 전달할 필요가 없어요.

Claude Desktop MCP랑 다른 거예요

자주 헷갈리는 부분이에요.

Claude Desktop에는 UI로 MCP를 연결하는 Connect 기능이 있어요. 근데 거기서 연결한 MCP는 Claude Code에 적용 안 돼요.

둘은 완전히 별개예요. Claude Code에서 MCP를 쓰려면 반드시 JSON으로 따로 설정해야 해요.

프로젝트별 MCP 설정

팀 프로젝트라면 .claude/settings.json에 넣어두면 팀원 모두가 같은 MCP를 써요.

개인 설정은 ~/.claude/settings.json에, 프로젝트 설정은 .claude/settings.json에 분리하면 좋아요.

어떤 MCP가 있어요?

공식 목록은 github.com/modelcontextprotocol/servers 에서 볼 수 있어요.

프론트엔드 개발에 유용한 것들:

MCP	용도
Notion	기획서 읽기/쓰기, 태스크 관리
Figma	디자인 → 코드 변환
GitHub	이슈 생성, PR 리뷰
Vercel	배포 상태 확인
Google Calendar	일정 관리
Slack	팀 알림

직접 MCP 서버를 만들 수도 있어요. 사내 API나 디자인 시스템 문서를 MCP로 만들면 Claude가 직접 참조해요.

정리

MCP는 Claude Code를 로컬 파일 편집기에서 팀 전체 워크플로우 허브로 바꿔줘요.

노션 기획 → 피그마 디자인 → 코드 구현 → 배포까지, 각 단계를 왔다갔다 하지 않고 Claude Code 하나에서 흘러가요.

claude-settings에 MCP 설정 템플릿도 포함되어 있어요:

Claude Code 시리즈:

1편: CMS 프로젝트 하루만에 만들기

2편: 슬래시 커맨드 21종 설치

3편: CLAUDE.md 잘 쓰는 법

4편: 나만의 커맨드 만들기

5편: MCP로 노션·피그마 연동 ← 현재 글

6편: 백엔드도 Claude Code로 (3/17)

관련 프로젝트:

claude-settings — Claude Code 슬래시 커맨드, 에이전트, 훅 설정 모음

HANUI — KRDS 기반 React 디자인 시스템