07. MCP (Model Context Protocol)

1. MCP란 무엇인가?

한 줄 정의

MCP(Model Context Protocol) 는 AI 모델이 외부 프로그램, 서비스, 데이터 소스와 소통할 수 있게 해주는 표준 통신 프로토콜이다. Anthropic에서 설계하고 공개했다.

핵심 구분

용어	의미
MCP	소통 규칙 그 자체. "이렇게 요청하고, 이렇게 응답하라"는 프로토콜(약속)
MCP 서버	그 규칙에 따라 실제로 구현된 프로그램. 각 서비스마다 별도의 MCP 서버가 존재

쉽게 말하면 MCP는 USB 규격이고, MCP 서버는 USB 케이블이다. 규격이 있어야 어떤 기기든 연결할 수 있듯이, MCP라는 프로토콜이 있어야 어떤 외부 서비스든 Claude Code에 연결할 수 있다.

아키텍처 다이어그램

비유로 이해하기

MCP가 없을 때와 있을 때를 비교해 보자.

MCP가 없을 때:

사용자: "내 노션 워크스페이스에 있는 논문 분석해줘"
Claude: "죄송합니다. 노션에 직접 접근할 수 없습니다."

Claude Code는 아무리 똑똑해도 외부 서비스에 직접 접근하는 능력이 없다. 터미널 명령어 실행, 파일 읽기/쓰기는 가능하지만, 노션 API를 호출하거나 유튜브 데이터를 가져오는 것은 불가능하다.

MCP 서버를 설치한 후:

사용자: "내 노션 워크스페이스에 있는 논문 분석해줘"
Claude: (Notion MCP 서버를 통해 워크스페이스에 접근)
Claude: "논문의 핵심 내용을 분석하겠습니다..."

Notion MCP 서버를 설치하면, Claude Code는 MCP 프로토콜을 통해 노션 API를 호출할 수 있게 된다. 마치 스마트폰에 앱을 설치하면 새로운 기능이 생기는 것과 같다.

핵심 포인트: MCP 서버를 설치하는 것은 Claude Code에게 새로운 도구(tool)를 추가하는 것이다. Claude Code가 사용할 수 있는 도구 목록에 MCP 서버가 제공하는 도구들이 추가된다.

2. MCP 서버의 역할

MCP 서버는 각각 특정 외부 서비스와의 연동을 담당한다. 아래는 대표적인 MCP 서버들과 그 역할이다.

대표 MCP 서버 목록

MCP 서버	역할	제공하는 도구 예시
Context7	최신 라이브러리 문서 제공	`resolve-library-id`, `query-docs`
Playwright	브라우저 자동화	`browser_navigate`, `browser_click`, `browser_snapshot`
Notion	노션 워크스페이스 읽기/쓰기	페이지 조회, 블록 생성, 데이터베이스 쿼리
YouTube	유튜브 영상 분석	자막 추출, 영상 메타데이터 조회
Database	DB 쿼리 실행	SQL 실행, 스키마 조회, 데이터 조회
GitHub	GitHub API 연동	이슈 관리, PR 생성, 코드 검색
Slack	Slack 메시지 관리	채널 조회, 메시지 전송, 검색

MCP 서버 역할 다이어그램

각 MCP 서버 상세

Context7 MCP - 코드 할루시네이션 방지

Claude Code는 학습 데이터 기준으로 코드를 생성한다. 문제는 라이브러리가 빠르게 업데이트되면서 이미 deprecated된 API나 존재하지 않는 함수를 생성할 수 있다는 점이다.

# Context7 없이
사용자: "Next.js 15에서 서버 컴포넌트 만들어줘"
Claude: (학습 데이터가 Next.js 13 기준이라면 잘못된 코드를 생성할 수 있음)

# Context7 있으면
사용자: "Next.js 15에서 서버 컴포넌트 만들어줘 use context7"
Claude: (Context7을 통해 최신 Next.js 15 문서를 참조하여 정확한 코드 생성)

Playwright MCP - 브라우저 자동화

개발한 웹 애플리케이션을 Claude Code가 직접 브라우저로 열어서 테스트할 수 있게 해준다.

사용자: "로그인 페이지가 제대로 동작하는지 확인해줘"
Claude: (Playwright MCP를 통해)
  1. 브라우저 열기
  2. 로그인 페이지 접속
  3. ID/PW 입력
  4. 로그인 버튼 클릭
  5. 결과 확인 & 스크린샷 캡처
  6. 버그 발견 시 코드 수정까지 자동화

Notion MCP - 워크스페이스 연동

노션에 저장된 문서, 데이터베이스, 프로젝트 관리 보드를 Claude Code가 직접 읽고 쓸 수 있다.

YouTube MCP - 영상 분석

유튜브 Data API를 활용하여 영상의 자막을 추출하고, 내용을 요약하거나 분석할 수 있다.

Database MCP - 데이터베이스 쿼리

PostgreSQL, MySQL 등의 데이터베이스에 직접 쿼리를 실행하여 데이터를 조회하고 분석할 수 있다.

3. MCP 서버 설치 방법

기본 설치 문법

bash

claude mcp add [--scope <scope>] <server-name> <command> [args...]

각 부분의 의미:

부분	설명	예시
`claude mcp add`	MCP 서버 추가 명령어	-
`--scope <scope>`	설치 범위 (local, project, user)	`--scope project`
`<server-name>`	서버를 식별하는 이름 (자유 지정)	`context7`
`<command>`	서버를 실행하는 명령어	`npx`
`[args...]`	명령어에 전달할 인자들	`-y @upstash/context7-mcp@latest`

설치 플로우차트

실전 설치 예시

Context7 설치 (프로젝트 스코프)

bash

claude mcp add --scope project context7 -- npx -y @upstash/context7-mcp@latest

이 명령어를 분해하면:

--scope project: 프로젝트 팀원 전체가 사용하도록 .mcp.json에 저장
context7: 서버 이름 (자유 지정, 나중에 권한 설정 시 이 이름을 사용)
--: 이후의 인자를 Claude Code 옵션이 아닌 서버 실행 명령어로 전달
npx -y @upstash/context7-mcp@latest: Context7 MCP 서버를 npx로 실행

Playwright 설치 (프로젝트 스코프)

bash

claude mcp add --scope project playwright -- npx @anthropic-ai/playwright-mcp

환경 변수가 필요한 경우

일부 MCP 서버는 API 키 등의 환경 변수를 요구한다:

bash

claude mcp add --scope project my-server \
  -e API_KEY=your-api-key \
  -- npx -y @some/mcp-server

-e 플래그로 환경 변수를 전달할 수 있다.

4. 설치 스코프 3가지

MCP 서버를 설치할 때 가장 중요한 결정 중 하나가 스코프(scope) 선택이다. 스코프에 따라 저장 위치와 영향 범위가 달라진다.

스코프 비교표

스코프	플래그	저장 위치	영향 범위	Git 관리	용도
local	`--scope local` (기본값)	`.claude/settings.local.json`	이 프로젝트, 나만	.gitignore 권장	개인 API 키가 필요한 서버
project	`--scope project`	`.mcp.json`	이 프로젝트, 팀 전체	Git 커밋 가능	팀 공용 도구
user	`--scope user`	`~/.claude/settings.json`	내 PC 모든 프로젝트	불가	어디서든 쓰는 범용 도구

스코프별 설정 파일 구조

local 스코프 (`.claude/settings.local.json`)

json

{
  "mcpServers": {
    "my-private-server": {
      "command": "npx",
      "args": ["-y", "@some/private-mcp"],
      "env": {
        "API_KEY": "my-secret-key"
      }
    }
  }
}

이 파일은 .gitignore에 추가하여 개인 비밀 정보가 Git에 올라가지 않도록 해야 한다.

project 스코프 (`.mcp.json`)

json

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    },
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/playwright-mcp"]
    }
  }
}

이 파일은 프로젝트 루트에 생성되며, Git에 커밋하여 팀원 모두가 같은 MCP 서버를 사용할 수 있다.

user 스코프 (`~/.claude/settings.json`)

json

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

홈 디렉토리 아래에 저장되므로, 어떤 프로젝트에서든 해당 MCP 서버를 사용할 수 있다.

어떤 스코프를 선택해야 할까?

Q: API 키가 필요한 MCP 서버인가?
  Yes -> local (비밀 정보 보호)
  No  -> Q: 팀원도 함께 사용해야 하는가?
           Yes -> project (Git으로 공유)
           No  -> Q: 다른 프로젝트에서도 사용하는가?
                    Yes -> user (전역 설정)
                    No  -> local (기본값)

5. MCP 서버 관리

설치된 MCP 서버 확인

Claude Code 안에서 /mcp 슬래시 명령어를 입력하면 현재 설치된 MCP 서버의 목록과 상태를 확인할 수 있다.

> /mcp

MCP Servers:
  context7      Connected  (2 tools)
  playwright    Connected  (15 tools)

각 항목의 의미:

항목	설명
서버 이름	설치 시 지정한 이름
상태	`Connected` (정상), `Disconnected` (연결 실패), `Error` (오류)
도구 수	해당 MCP 서버가 제공하는 도구(tool)의 개수

MCP 서버 관리 명령어

bash

# 설치된 MCP 서버 목록 확인
claude mcp list

# MCP 서버 제거
claude mcp remove <server-name>

# MCP 서버 상세 정보 확인
claude mcp get <server-name>

중요: 재시작이 필요한 경우

MCP 서버를 새로 설치하거나 설정을 변경한 후에는 Claude Code를 재시작해야 한다:

bash

# Claude Code 안에서
/exit

# 터미널에서 다시 시작
claude

재시작하지 않으면 새로 설치한 MCP 서버가 인식되지 않는다.

보안 승인

MCP 서버를 처음 사용할 때, Claude Code는 해당 MCP 서버의 도구 사용에 대한 승인을 요청한다:

Claude wants to use a tool from context7 MCP server:
  Tool: resolve-library-id
  Description: Resolves a library name to its Context7 ID

Allow? (y/n/always)

y: 이번 한 번만 승인
n: 거부
always: 이 도구를 항상 승인 (설정 파일에 기록)

6. MCP 도구 권한 설정

MCP 서버를 설치하면 Claude Code의 도구 목록에 새로운 도구들이 추가된다. 매번 승인하는 것이 번거롭다면 설정 파일에서 자동 승인을 구성할 수 있다.

개별 도구 승인

첫 사용 시 y를 선택하면 해당 도구 하나만 승인된다:

Allow? (y/n/always) -> y

이 방식은 가장 안전하지만, 도구가 많은 MCP 서버의 경우 매번 승인해야 하는 번거로움이 있다.

MCP 서버 전체 도구 자동 승인

settings.json의 permissions.allow 배열에 mcp__서버명 형식으로 추가하면, 해당 MCP 서버의 모든 도구가 자동 승인된다.

json

{
  "permissions": {
    "allow": [
      "mcp__context7",
      "mcp__playwright"
    ]
  }
}

위 설정은:

mcp__context7: Context7 MCP 서버의 모든 도구 자동 승인
mcp__playwright: Playwright MCP 서버의 모든 도구 자동 승인

특정 도구만 자동 승인

특정 도구 하나만 승인하고 싶다면 mcp__서버명__도구명 형식을 사용한다:

json

{
  "permissions": {
    "allow": [
      "mcp__context7__resolve-library-id",
      "mcp__context7__query-docs"
    ]
  }
}

주의사항: 와일드카드(*) 사용 불가

MCP 도구 권한에는 와일드카드(*)를 사용할 수 없다. 반드시 MCP 서버 이름을 명시해야 한다.

json

// 잘못된 예 - 작동하지 않음
{
  "permissions": {
    "allow": ["mcp__*"]
  }
}

// 올바른 예
{
  "permissions": {
    "allow": ["mcp__context7", "mcp__playwright"]
  }
}

이는 보안을 위한 설계다. 새로운 MCP 서버가 추가될 때 의도치 않게 모든 권한이 자동 승인되는 것을 방지한다.

권한 설정 위치별 영향

설정 파일 위치	영향 범위
`.claude/settings.local.json`	이 프로젝트, 나만
`.claude/settings.json`	이 프로젝트, 팀 전체
`~/.claude/settings.json`	내 PC 모든 프로젝트

7. Context7 MCP 실전 사용

왜 Context7이 중요한가?

Claude Code가 코드를 생성할 때 가장 흔한 문제 중 하나가 코드 할루시네이션(hallucination) 이다.

문제 유형	예시
존재하지 않는 API 사용	`next/router`의 `useTransition()` (실제로 없음)
deprecated된 API 사용	React의 `componentWillMount()` (더 이상 권장되지 않음)
구 버전 문법 사용	Next.js 12의 `getServerSideProps`를 15에서 사용
잘못된 파라미터	함수의 인자 순서나 타입이 틀림

이런 문제가 발생하는 근본 원인은 Claude의 학습 데이터에 시간 제한이 있기 때문이다. 학습 데이터 이후에 변경된 API는 Claude가 알 수 없다.

Context7 MCP는 이 문제를 해결한다. Claude가 코드를 생성하기 전에 최신 공식 문서를 실시간으로 참조하게 해준다.

Context7 설치

bash

claude mcp add --scope project context7 -- npx -y @upstash/context7-mcp@latest

Context7 사용법

프롬프트 끝에 "use context7" 을 추가하면, Claude Code가 자동으로 Context7을 통해 최신 문서를 참조한다.

# Context7 사용 예시
"Next.js 15의 App Router로 동적 라우팅 구현해줘 use context7"
"Prisma ORM으로 many-to-many 관계 설정해줘 use context7"
"Tailwind CSS v4의 새로운 설정 방식 알려줘 use context7"

Context7의 동작 과정

1. 사용자가 "React 19의 use() 훅 사용법 알려줘 use context7" 입력
2. Claude Code가 Context7 MCP 서버의 resolve-library-id 도구 호출
   -> "React" 라이브러리 ID 확인
3. Claude Code가 Context7 MCP 서버의 query-docs 도구 호출
   -> React 19 공식 문서에서 use() 훅 관련 내용 검색
4. Context7이 최신 문서 내용을 반환
5. Claude Code가 반환된 최신 문서를 기반으로 정확한 코드 생성

Context7 API 키

Context7은 API 키 없이도 무료로 사용 가능하다. 다만, 사용량이 많거나 더 높은 성능이 필요한 경우 API 키를 발급받아 설정할 수 있다.

bash

# API 키 없이 설치 (무료)
claude mcp add --scope project context7 -- npx -y @upstash/context7-mcp@latest

# API 키와 함께 설치 (선택사항)
claude mcp add --scope local context7 \
  -e CONTEXT7_API_KEY=your-api-key \
  -- npx -y @upstash/context7-mcp@latest

API 키를 사용하는 경우 --scope local로 설치하여 키가 Git에 노출되지 않도록 해야 한다.

8. Playwright MCP 실전 사용

Playwright MCP란?

Playwright MCP는 Claude Code가 실제 웹 브라우저를 제어할 수 있게 해주는 도구다. Microsoft가 만든 Playwright 브라우저 자동화 프레임워크를 MCP 서버로 감싼 것으로, Anthropic에서 공식으로 제공한다.

설치

bash

claude mcp add --scope project playwright -- npx @anthropic-ai/playwright-mcp

Playwright MCP가 제공하는 주요 도구들

도구 이름	역할
`browser_navigate`	URL로 페이지 이동
`browser_click`	요소 클릭
`browser_fill_form`	폼 필드에 값 입력
`browser_type`	텍스트 입력
`browser_press_key`	키보드 키 입력
`browser_snapshot`	현재 페이지의 접근성 스냅샷 캡처
`browser_take_screenshot`	스크린샷 이미지 캡처
`browser_hover`	요소 위에 마우스 올리기
`browser_select_option`	드롭다운 옵션 선택
`browser_wait_for`	특정 조건이 충족될 때까지 대기
`browser_tabs`	열린 탭 목록 확인
`browser_close`	브라우저 닫기

실전 활용 시나리오

시나리오 1: 개발 중인 웹앱 테스트

사용자: "로컬에서 실행 중인 http://localhost:3000의 로그인 기능을 테스트해줘"

Claude Code의 동작:
1. browser_navigate -> http://localhost:3000/login 접속
2. browser_snapshot -> 현재 페이지 구조 파악
3. browser_fill_form -> 이메일, 비밀번호 입력
4. browser_click -> 로그인 버튼 클릭
5. browser_snapshot -> 로그인 후 페이지 확인
6. 결과 보고: "로그인 성공, 대시보드 페이지로 이동 확인"

시나리오 2: 버그 발견 및 자동 수정

사용자: "내 웹사이트의 모든 페이지를 돌아보면서 깨진 부분이 있는지 확인해줘"

Claude Code의 동작:
1. 각 페이지를 순회하며 스크린샷 & 스냅샷 캡처
2. 레이아웃 깨짐, 에러 메시지, 콘솔 에러 확인
3. 문제 발견 시 소스 코드를 분석하여 원인 파악
4. 코드 수정 제안 또는 직접 수정

시나리오 3: E2E 테스트 자동 생성

사용자: "회원가입 플로우에 대한 E2E 테스트를 Playwright로 작성해줘"

Claude Code의 동작:
1. 실제 회원가입 플로우를 브라우저로 실행하며 동작 확인
2. 각 단계의 셀렉터와 동작을 기록
3. Playwright 테스트 코드(.spec.ts) 자동 생성
4. 생성된 테스트를 실행하여 통과 여부 확인

개발 - 테스트 - 수정 자동화 사이클

Playwright MCP의 가장 큰 가치는 개발 -> 테스트 -> 수정의 사이클을 Claude Code 안에서 모두 처리할 수 있다는 점이다.

기존 워크플로우:
  코드 작성 -> 브라우저에서 수동 확인 -> 버그 발견 -> 코드 수정 -> 다시 확인

Playwright MCP 워크플로우:
  코드 작성 -> Claude가 브라우저 테스트 -> 버그 자동 발견 -> 코드 자동 수정 -> 재테스트

9. MCP 설치 트러블슈팅

흔한 문제와 해결 방법

문제 1: MCP 서버가 Connected되지 않음

> /mcp

MCP Servers:
  context7      Disconnected

원인 및 해결:

원인	해결 방법
npx 캐시 문제	`npx -y` 옵션으로 재설치 (자동 yes)
Node.js 미설치	`node -v`로 확인 후 설치
네트워크 문제	VPN, 프록시 설정 확인
패키지 이름 오타	공식 문서에서 정확한 패키지명 확인

문제 2: 원격 서버 방식 실패

일부 MCP 서버는 원격(remote) 방식과 로컬(local) 방식 두 가지를 제공한다. 원격 방식이 실패하면 로컬 서버(npx) 방식으로 전환하면 대부분 해결된다.

bash

# 원격 방식 (실패할 수 있음)
claude mcp add context7 https://context7.com/api/mcp

# 로컬 방식 (안정적)
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

문제 3: Claude Code 재시작 미실행

MCP 서버를 설치한 후 반드시 Claude Code를 재시작해야 한다. 재시작 없이는 새 MCP 서버가 인식되지 않는다.

bash

# Claude Code 안에서 나가기
/exit

# 다시 시작
claude

문제 4: API 키 관련 오류

API 키가 필요한 MCP 서버에서 키가 누락된 경우:

bash

# 환경 변수로 API 키 전달
claude mcp add --scope local my-server \
  -e API_KEY=your-key-here \
  -- npx -y @some/mcp-server

# 대부분의 MCP 서버는 API 키 없이도 기본 기능 사용 가능
# Context7의 경우 API 키는 선택사항

문제 5: 도구가 목록에 나타나지 않음

MCP 서버는 Connected인데 도구가 보이지 않는 경우:

/mcp로 도구 수 확인
도구 수가 0이면 MCP 서버 자체의 문제
MCP 서버를 제거 후 재설치

bash

claude mcp remove context7
claude mcp add --scope project context7 -- npx -y @upstash/context7-mcp@latest

트러블슈팅 체크리스트

[ ] Node.js가 설치되어 있는가? (node -v)
[ ] npx가 사용 가능한가? (npx -v)
[ ] 패키지 이름이 정확한가?
[ ] Claude Code를 재시작했는가?
[ ] /mcp에서 Connected 상태인가?
[ ] 네트워크 연결이 정상인가?
[ ] 원격 방식 실패 시 로컬(npx) 방식을 시도했는가?
[ ] API 키가 필요한 서버의 경우 키를 올바르게 설정했는가?

요약

핵심 명령어 정리

작업	명령어
MCP 서버 설치	`claude mcp add [--scope <scope>] <name> -- <command> [args]`
설치 목록 확인	`claude mcp list` 또는 Claude Code 내 `/mcp`
MCP 서버 제거	`claude mcp remove <name>`
Context7 설치	`claude mcp add --scope project context7 -- npx -y @upstash/context7-mcp@latest`
Playwright 설치	`claude mcp add --scope project playwright -- npx @anthropic-ai/playwright-mcp`

기억해야 할 것

MCP = AI에게 새로운 능력을 추가하는 방법. 스마트폰에 앱을 설치하듯, Claude Code에 MCP 서버를 설치하면 새로운 도구가 추가된다.
스코프를 신중하게 선택하라. API 키가 포함된 설정은 반드시 local로, 팀 공유가 필요한 설정은 project로 설치한다.
설치 후 반드시 재시작하라. 새 MCP 서버는 Claude Code 재시작 후에만 인식된다.
Context7은 코드 할루시네이션의 해결책이다. "use context7"만 추가하면 최신 문서를 자동으로 참조한다.
Playwright로 개발-테스트-수정 사이클을 자동화하라. 브라우저 테스트를 Claude Code 안에서 바로 실행할 수 있다.
트러블슈팅의 첫 단계는 항상 /mcp로 상태 확인이다. Connected가 아니면 재설치를 시도한다.

이전: 06. 설정 파일 | 목차 | 다음: 08. 서브에이전트 & 훅

07. MCP (Model Context Protocol) ​

목차 ​

1. MCP란 무엇인가? ​

한 줄 정의 ​

핵심 구분 ​

아키텍처 다이어그램 ​

비유로 이해하기 ​

2. MCP 서버의 역할 ​

대표 MCP 서버 목록 ​

MCP 서버 역할 다이어그램 ​

각 MCP 서버 상세 ​

Context7 MCP - 코드 할루시네이션 방지 ​

Playwright MCP - 브라우저 자동화 ​

Notion MCP - 워크스페이스 연동 ​

YouTube MCP - 영상 분석 ​

Database MCP - 데이터베이스 쿼리 ​

3. MCP 서버 설치 방법 ​

기본 설치 문법 ​

설치 플로우차트 ​

실전 설치 예시 ​

Context7 설치 (프로젝트 스코프) ​

Playwright 설치 (프로젝트 스코프) ​

환경 변수가 필요한 경우 ​

4. 설치 스코프 3가지 ​

스코프 비교표 ​

스코프별 설정 파일 구조 ​

local 스코프 (.claude/settings.local.json) ​

project 스코프 (.mcp.json) ​

user 스코프 (~/.claude/settings.json) ​

어떤 스코프를 선택해야 할까? ​

5. MCP 서버 관리 ​

설치된 MCP 서버 확인 ​

MCP 서버 관리 명령어 ​

중요: 재시작이 필요한 경우 ​

보안 승인 ​

6. MCP 도구 권한 설정 ​

개별 도구 승인 ​

MCP 서버 전체 도구 자동 승인 ​

특정 도구만 자동 승인 ​

주의사항: 와일드카드(*) 사용 불가 ​

권한 설정 위치별 영향 ​

7. Context7 MCP 실전 사용 ​

왜 Context7이 중요한가? ​

Context7 설치 ​

Context7 사용법 ​

Context7의 동작 과정 ​

Context7 API 키 ​

8. Playwright MCP 실전 사용 ​

Playwright MCP란? ​

설치 ​

Playwright MCP가 제공하는 주요 도구들 ​

실전 활용 시나리오 ​

시나리오 1: 개발 중인 웹앱 테스트 ​

시나리오 2: 버그 발견 및 자동 수정 ​

시나리오 3: E2E 테스트 자동 생성 ​

개발 - 테스트 - 수정 자동화 사이클 ​

9. MCP 설치 트러블슈팅 ​

흔한 문제와 해결 방법 ​

문제 1: MCP 서버가 Connected되지 않음 ​

문제 2: 원격 서버 방식 실패 ​

문제 3: Claude Code 재시작 미실행 ​

문제 4: API 키 관련 오류 ​

문제 5: 도구가 목록에 나타나지 않음 ​

트러블슈팅 체크리스트 ​

요약 ​

핵심 명령어 정리 ​

기억해야 할 것 ​

07. MCP (Model Context Protocol)

목차

1. MCP란 무엇인가?

한 줄 정의

핵심 구분

아키텍처 다이어그램

비유로 이해하기

2. MCP 서버의 역할

대표 MCP 서버 목록

MCP 서버 역할 다이어그램

각 MCP 서버 상세

Context7 MCP - 코드 할루시네이션 방지

Playwright MCP - 브라우저 자동화

Notion MCP - 워크스페이스 연동

YouTube MCP - 영상 분석

Database MCP - 데이터베이스 쿼리

3. MCP 서버 설치 방법

기본 설치 문법

설치 플로우차트

실전 설치 예시

Context7 설치 (프로젝트 스코프)

Playwright 설치 (프로젝트 스코프)

환경 변수가 필요한 경우

4. 설치 스코프 3가지

스코프 비교표

스코프별 설정 파일 구조

local 스코프 (`.claude/settings.local.json`)

project 스코프 (`.mcp.json`)

user 스코프 (`~/.claude/settings.json`)

어떤 스코프를 선택해야 할까?

5. MCP 서버 관리

설치된 MCP 서버 확인

MCP 서버 관리 명령어

중요: 재시작이 필요한 경우

보안 승인

6. MCP 도구 권한 설정

개별 도구 승인

MCP 서버 전체 도구 자동 승인

특정 도구만 자동 승인

주의사항: 와일드카드(*) 사용 불가

권한 설정 위치별 영향

7. Context7 MCP 실전 사용

왜 Context7이 중요한가?

Context7 설치

Context7 사용법

Context7의 동작 과정

Context7 API 키

8. Playwright MCP 실전 사용

Playwright MCP란?

설치

Playwright MCP가 제공하는 주요 도구들

실전 활용 시나리오

시나리오 1: 개발 중인 웹앱 테스트

시나리오 2: 버그 발견 및 자동 수정

시나리오 3: E2E 테스트 자동 생성

개발 - 테스트 - 수정 자동화 사이클

9. MCP 설치 트러블슈팅

흔한 문제와 해결 방법

문제 1: MCP 서버가 Connected되지 않음

문제 2: 원격 서버 방식 실패

문제 3: Claude Code 재시작 미실행

문제 4: API 키 관련 오류

문제 5: 도구가 목록에 나타나지 않음

트러블슈팅 체크리스트

요약

핵심 명령어 정리

기억해야 할 것