MCP: 개념과 사용법

이전 장에서는 일반적인 작업을 원클릭 단축키로 바꾸는 Skills에 대해 배웠습니다. 하지만 이런 생각이 들어본 적은 없나요?

AI가 내 브라우저를 직접 조작할 수 있을까? 내 노트를 읽고 쓸 수 있을까? 내 데이터베이스를 조회할 수 있을까?

정답은: 네, 가능합니다. 하지만 AI에 ‘플러그인’을 장착해야 합니다.

이 ‘플러그인 시스템’이 바로 MCP입니다.

트렌드 한눈에 보기

MCP의 많은 기능이 현재 Claude Code와 Codex CLI에 기본적으로 흡수되고 있습니다.

예를 들어, 초기에는 AI가 웹을 검색하게 하려면 Web Search MCP를 설치해야 했지만, 이제 Claude Code와 Codex 모두 웹 검색 기능이 내장되어 있습니다. 파일 읽기/쓰기, Git 작업 등 많은 기능도 기본 제공됩니다. 앞서 다룬 Skills도 일부 MCP 시나리오를 대체합니다. 이전에 MCP가 필요했던 많은 표준화된 작업을 이제 Skills로 처리할 수 있습니다.

하지만 이것이 MCP가 쓸모없다는 뜻은 아닙니다. 오히려 MCP는 여전히 대체 불가능한 가치를 지닙니다:

사내 시스템 연결: 회사 내부 데이터베이스, 비공개 API 등은 절대 기본 기능으로 제공될 수 없으며 MCP를 통해서만 접근할 수 있습니다.
타사 소프트웨어 조작: 브라우저 제어, Obsidian 관리, Notion 노트 처리 등 외부 소프트웨어와의 깊은 상호작용이 필요한 시나리오에서는 MCP가 유일한 선택입니다.
커뮤니티 생태계: MCP 마켓플레이스에는 수천 개의 커뮤니티 기여 서버가 있으며, 상상하지 못한 다양한 시나리오를 다룹니다.
맞춤 설정 가능성: 직접 MCP 서버를 작성하여 AI가 원하는 모든 시스템에 접근하도록 할 수 있습니다.

간단히 말해: 기본 기능이 일반적인 필요의 80%를 커버하고, MCP가 나머지 20%의 개인화된 필요를 처리합니다. 그리고 그 20%가 종종 진정한 차이를 만드는 부분입니다.

MCP란 무엇인가?

한마디로

MCP = Model Context Protocol = AI의 플러그인 시스템

MCP는 Anthropic(Claude의 창시자)이 도입한 개방형 프로토콜로, AI 도구가 외부 시스템에 연결될 수 있게 해줍니다.

왜 MCP가 필요한가?

이 시나리오를 생각해보세요:

MCP 없이:

You: Open Baidu and search for "today's weather"
AI: Sorry, I can't access the browser. I can only process text…

MCP 사용 시:

You: Open Baidu and search for "today's weather"
AI: Sure, I've opened the browser, searched for "today's weather", and here are the results…

차이점은 무엇인가요? AI가 ‘말만 할 수 있는’ 상태에서 ‘행동할 수 있는’ 상태로 바뀝니다.

비유

AI 자체 = 뛰어난 두뇌

모든 것을 알지만, 손과 발이 없습니다.
어떻게 해야 하는지 알려줄 수는 있지만, 직접 해주지는 못합니다.

MCP = 그 두뇌에 손과 발을 연결하는 것

‘브라우저 손’ 연결: AI가 웹 페이지를 자동으로 조작할 수 있습니다.
‘파일 시스템 손’ 연결: AI가 파일을 읽고 쓸 수 있습니다.
‘데이터베이스 손’ 연결: AI가 데이터를 조회하고 수정할 수 있습니다.
‘Obsidian 손’ 연결: AI가 노트를 직접 관리할 수 있습니다.

또 다른 비유:

AI = 엄청나게 똑똑한 요리사
MCP = 요리사에게 완벽한 주방(냄비, 프라이팬, 오븐, 블렌더…)을 갖춰주는 것
MCP 없이: 요리사는 레시피를 암송만 할 수 있습니다.
MCP 사용 시: 요리사가 실제로 요리를 해줍니다.

이전 비교

이전 장에서 프롬프트, Skills, MCP를 비교했습니다:

Prompts → The most basic interaction method (verbal instructions)
    ↓
Skills → Encapsulate prompts + simple logic (shortcuts)
    ↓
MCP → Skills + the ability to connect to external systems (connecting the world)

MCP는 세 가지 중 가장 강력합니다. AI의 ‘벽’을 허물고 외부 세계에 닿을 수 있게 해주기 때문입니다.

MCP 작동 방식

기술적인 세부 사항에 깊이 들어갈 필요는 없습니다. 이 다이어그램만 이해하면 됩니다:

You ←→ Claude Code/Codex ←→ MCP Server ←→ External System
         (AI Tool)           (Bridge)      (Browser/Database/Notes, etc.)

세 가지 역할:

역할	설명	예시
AI 도구 (클라이언트)	사용하는 코딩 어시스턴트	Claude Code, Codex CLI
MCP 서버	AI와 외부 시스템 간의 다리	Playwright MCP, GitHub MCP
외부 시스템	AI가 조작하는 대상	브라우저, GitHub, Obsidian

여러분이 해야 할 일은 AI 도구에 MCP 서버를 설치하는 것뿐입니다. 그러면 AI가 해당 외부 시스템을 조작할 수 있습니다.

휴대폰에 앱을 설치하는 것처럼 간단합니다.

MCP 서버를 찾는 곳

수많은 MCP 서버가 있습니다. 필요한 서버를 어떻게 찾을까요? 주요 ‘MCP 마켓플레이스’는 다음과 같습니다:

1. mcp.so (추천)

URL: https://mcp.so

현재 가장 포괄적인 MCP 서버 디렉토리로, ‘MCP의 앱 스토어’와 같습니다.

특징:

수천 개의 MCP 서버 등록
상세한 설명 및 설치 가이드
검색 및 카테고리 탐색
한국어 친화적 (참고: 원문에는 Chinese-friendly이라 되어 있으나 한국어 사용자에게도 유용)

사용 방법:

웹사이트를 엽니다.
원하는 기능을 검색합니다 (예: “playwright” 또는 “browser”).
해당 MCP 서버를 찾습니다.
페이지의 설치 안내를 따릅니다.

2. Smithery

URL: https://smithery.ai

특징:

일부 MCP 서버를 온라인에서 직접 사용해볼 수 있습니다.
원클릭 설치 명령어 제공.
API 키 호스팅.

3. GitHub awesome-mcp-servers

URL: https://github.com/punkpeye/awesome-mcp-servers

특징:

커뮤니티 관리 MCP 서버 목록.
오픈 소스 및 무료.
자주 업데이트됨.

4. 공식 MCP 서버

Anthropic, Microsoft 등 주요 기업에서도 공식 MCP 서버를 출시했습니다:

MCP 서버	기능	관리자
Playwright MCP	브라우저 자동화	Microsoft
GitHub MCP	GitHub 작업	GitHub
Context7 MCP	최신 문서 가져오기	커뮤니티
Notion MCP	노트 관리	Notion

추천: 초보자는 mcp.so에서 시작하여 필요한 기능을 검색하고 설치 가이드를 따르세요.

MCP 설치 방법

설치 방법은 Claude Code와 Codex CLI에서 약간 다릅니다. 각각의 방법을 설명합니다.

Claude Code에 MCP 설치하기

방법 1: 명령줄 (추천)

Claude Code는 전용 MCP 관리 명령어를 제공합니다. 한 줄이면 끝납니다:

claude mcp add playwright npx '@playwright/mcp@latest'

이 명령어의 의미:

claude mcp add : MCP 서버 추가
playwright : 이 MCP에 지정할 이름 (원하는 이름 사용 가능)
npx '@playwright/mcp@latest' : MCP 서버를 시작하는 명령어

설치 확인:

Claude Code에서 /mcp를 입력하면 설치된 MCP 서버 목록을 볼 수 있습니다.

방법 2: 설정 파일 편집

Claude Code의 설정 파일을 직접 편집하여 MCP를 추가할 수도 있습니다.

설정 파일 경로: ~/.claude.json

mcpServers 섹션을 추가합니다:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

저장 후 Claude Code를 재시작합니다.

Codex CLI에 MCP 설치하기

Codex CLI의 MCP 설정은 ~/.codex/config.toml 파일에 있습니다.

config.toml 편집

파일 끝에 다음을 추가합니다:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]
startup_timeout_sec = 60.0

매개변수 설명:

매개변수	설명
`command`	MCP 서버를 시작하는 명령어
`args`	명령어 인수
`startup_timeout_sec`	시작 시간 제한(초); 일부 MCP 서버는 시작이 느리므로 60초 권장

환경 변수가 있는 MCP

일부 MCP 서버는 API 키나 다른 설정이 필요합니다. env 섹션을 사용하여 전달할 수 있습니다:

[mcp_servers.context7]
command = "npx"
args = ["-y", "mcp-remote", "https://mcp.context7.com/mcp", "--header", "Authorization:${CTX7_AUTH_HEADER}"]
startup_timeout_sec = 60.0

[mcp_servers.context7.env]
CTX7_AUTH_HEADER = "Bearer your_token"

저장 후 Codex를 재시작합니다.

실습: Playwright MCP 설치 및 브라우저 제어

직접 해봅시다! Playwright MCP를 예시로 AI가 브라우저를 자동으로 제어하도록 해보겠습니다.

Playwright MCP란?

Playwright = Microsoft의 브라우저 자동화 도구
Playwright MCP = MCP 프로토콜을 통해 AI가 Playwright를 제어할 수 있게 해줌

설치 후 AI는 다음을 할 수 있습니다:

웹 페이지 열기
버튼 클릭
양식 작성
스크린샷 촬영
페이지 내용 읽기
웹사이트 자동 로그인

1단계: Playwright MCP 설치

Claude Code에서

터미널을 열고 실행:

claude mcp add playwright npx '@playwright/mcp@latest'

브라우저를 지정하려면 (예: Edge) 매개변수 추가:

claude mcp add playwright npx '@playwright/mcp@latest' -- --browser msedge

Codex CLI에서

~/.codex/config.toml을 편집하고 추가:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]
startup_timeout_sec = 60.0

Edge를 사용하고 로그인 세션을 유지하려면 다음과 같이 설정할 수 있습니다:

[mcp_servers.playwright]
command = "mcp-server-playwright"
args = ["--browser", "msedge", "--executable-path", "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge", "--user-data-dir", "/Users/your_username/Library/Application Support/Microsoft Edge", "--isolated"]
startup_timeout_sec = 60.0

팁: --user-data-dir을 사용하면 브라우저가 로그인 상태를 유지하므로 AI가 페이지를 열 때 다시 로그인할 필요가 없습니다.

2단계: 설치 확인

Claude Code 시작:

claude

/mcp를 입력하면 목록에 playwright가 “connected” 상태로 표시됩니다.

3단계: AI가 브라우저를 조작하도록 하기

이제 시도해보세요! Claude Code에서 다음을 입력:

Open Baidu, search for "What is MCP", and save a screenshot of the search results.

AI가 자동으로:

브라우저를 실행합니다.
네이버 홈페이지를 엽니다. (원문은 Baidu이나 한국어 번역 시 네이버로 변경? 규칙: 원문 유지. Baidu는 그대로 두는 것이 좋을 듯. 하지만 한국어 독자를 위해 네이버로 바꾸는 것이 자연스러울 수 있음. 규칙에는 “Translate prose naturally for real readers"라고 되어 있음. Baidu는 중국 검색엔진이므로 한국어 독자에게는 네이버가 더 친숙. 그러나 원문에 Baidu라고 명시되어 있고, 번역 시 변경해도 되는지? 규칙에 “Preserve URLs, image links, HTML tags, inline code, placeholders” 등은 보존하라고 했지만, 일반 텍스트는 자연스럽게 번역하라고 했음. Baidu는 고유명사이므로 보존하는 것이 안전. 하지만 한국어 독자를 위해 네이버로 바꾸는 것도 자연스러운 번역. 결정: 원문 그대로 Baidu를 사용하되, 한국어 독자에게 설명이 필요할 수 있으나 그냥 Baidu로 둠. 또는 “네이버"로 바꾸는 것이 더 자연스러움. 여기서는 원문 충실히 Baidu로 번역.)
검색창에 “MCP란 무엇인가"를 입력합니다.
검색 버튼을 클릭합니다.
검색 결과 페이지의 스크린샷을 촬영합니다.
스크린샷을 프로젝트 폴더에 저장합니다.

여러분은 아무것도 할 필요 없습니다. AI가 모든 단계를 자동으로 완료합니다!

더 많은 사용 사례

Playwright MCP를 설치하면 AI에게 다양한 작업을 요청할 수 있습니다:

예시 1: 양식 자동 작성

Open https://example.com/register and fill in the registration form with the following info:
Username: testuser
Email: [email protected]
Then click submit.

예시 2: 웹 콘텐츠 추출

Open https://news.ycombinator.com and extract the titles and links of the top 10 stories on the front page. Organize them into a Markdown table.

예시 3: 자동화 테스트

Open the translation page I just made (translate.html) and test the following:
1. Enter "Hello World", click translate, and check if a result appears.
2. Click the clear button and check if the input box is cleared.
3. Toggle dark mode and check if the interface looks correct.
Compile the test results into a report.

MCP 서버	기능	설치 명령어 (Claude Code)
Playwright	브라우저 자동화	`claude mcp add playwright npx '@playwright/mcp@latest'`
Chrome DevTools	Chrome 디버깅	`claude mcp add chrome-devtools npx 'chrome-devtools-mcp@latest'`

MCP 서버	기능	설치 명령어 (Claude Code)
GitHub	GitHub 작업	`claude mcp add github npx '@anthropic-ai/github-mcp'`
Context7	최신 기술 문서 가져오기	토큰 설정 필요 (설정 참조)

MCP 서버	기능	비고
Notion	Notion 노트 읽기/쓰기	Notion API 키 필요
Obsidian	Obsidian 노트 읽기/쓰기	커뮤니티 개발

MCP 서버	기능	비고
Supabase	Supabase 데이터베이스 조작	액세스 토큰 필요
PostgreSQL	PostgreSQL 조작	커뮤니티 개발

중요 참고 사항

안전 주의사항

MCP는 AI에게 외부 시스템을 조작할 수 있는 능력을 부여하므로, 몇 가지 위험이 따릅니다:

권한 부여는 신중하게: AI에게 전체 시스템 접근 권한을 생각 없이 주지 마세요.
작업 검토: 중요한 작업 전에 AI가 무엇을 하려는지 알려달라고 요청하세요.
데이터 백업: AI가 중요한 데이터를 처리하기 전에 백업을 해두세요.
API 키 보안: API 키를 다른 사람과 공유하지 마세요.

자주 묻는 질문

Q: MCP 서버가 시작되지 않으면 어떻게 하나요?

A: 다음을 확인하세요:

Node.js 버전이 18 이상인가요? (node -v)
네트워크가 작동하나요?
startup_timeout_sec이 충분히 높게 설정되었나요? (60초 권장)

Q: 브라우저 MCP를 설치했는데 브라우저 창이 보이지 않아요.

A: Playwright는 기본적으로 헤드리스 모드(창 없음)로 실행됩니다. 브라우저가 작동하는 모습을 보려면 --headless false 매개변수를 추가하세요:

claude mcp add playwright npx '@playwright/mcp@latest' -- --headless false

Q: MCP 서버를 Claude Code와 Codex CLI에서 공유할 수 있나요?

A: MCP 서버 자체는 범용적입니다(예: Playwright MCP는 두 도구 모두에서 사용 가능). 그러나 설정 방법은 다릅니다:

Claude Code: ~/.claude.json 또는 claude mcp add 명령어
Codex CLI: ~/.codex/config.toml

요약

오늘 배운 내용:

MCP란 무엇인가: AI의 플러그인 시스템으로, AI가 외부 도구 및 서비스에 연결할 수 있게 해줍니다.
MCP 마켓플레이스: mcp.so, Smithery, awesome-mcp-servers – 앱 스토어처럼 플러그인을 찾을 수 있습니다.
MCP 설치 방법: Claude Code에서는 claude mcp add 명령어, Codex CLI에서는 config.toml 편집.
실습: Playwright MCP를 설치하고 AI가 브라우저를 자동으로 제어하도록 했습니다.
추천 MCP 서버: 브라우저, GitHub, 노트, 데이터베이스 등.

핵심 요점:

MCP는 AI를 ‘말만 할 수 있는’ 상태에서 ‘행동할 수 있는’ 상태로 변화시킵니다.
MCP 설치는 휴대폰에 앱을 설치하는 것처럼 간단합니다.
초보자는 Playwright MCP로 시작하여 가장 직관적인 경험을 해보시길 권장합니다.

트렌드 한눈에 보기

MCP란 무엇인가?

한마디로

왜 MCP가 필요한가?

비유

이전 비교

MCP 작동 방식

MCP 서버를 찾는 곳

1. mcp.so (추천)

2. Smithery

3. GitHub awesome-mcp-servers

4. 공식 MCP 서버

MCP 설치 방법

Claude Code에 MCP 설치하기

방법 1: 명령줄 (추천)

방법 2: 설정 파일 편집

Codex CLI에 MCP 설치하기

config.toml 편집

환경 변수가 있는 MCP

실습: Playwright MCP 설치 및 브라우저 제어

Playwright MCP란?

1단계: Playwright MCP 설치

Claude Code에서

Codex CLI에서

2단계: 설치 확인

3단계: AI가 브라우저를 조작하도록 하기

더 많은 사용 사례

추천 MCP 서버

브라우저 및 웹

개발 도구

노트 및 문서

데이터베이스

중요 참고 사항

안전 주의사항

자주 묻는 질문

요약