byteforce

CPN 한국어 자습서 · Claude Code in Action

2 · 직접 해보기

Claude Code의 MCP 서버

MCP servers with Claude Code

MCP 서버로 Claude Code에 새 도구와 능력을 더할 수 있습니다. 서버는 원격이나 내 컴퓨터에서 로컬로 돕니다. 인기 서버인 Playwright는 Claude Code에 브라우저 제어 능력을 줍니다. 터미널에서 claude mcp add 로 붙이고, 권한을 한 번 열어 두면, Claude가 직접 브라우저를 열어 우리 앱을 보고 프롬프트까지 손봅니다.

전체 내레이션영상 나레이션 한국어 번역 (전체)›

Stephen Grider · Anthropic 기술 스태프

MCP 서버를 사용하면 Claude Code에 새 도구와 능력을 더할 수 있습니다. 이 MCP 서버들은 원격에서 돌거나, 내 컴퓨터에서 로컬로 돕니다. Playwright라는 아주 인기 있는 MCP 서버는 Claude Code에게 브라우저를 제어하는 능력을 줍니다. 이걸 Claude Code에 추가하는 법을 보여 드리고, 그걸로 우리 앱을 좀 더 발전시켜 보겠습니다.

서버를 설치하려면, Claude Code 안이 아니라 터미널에서 claude mcp add를 실행합니다. 그다음 이 MCP 서버의 이름을 붙입니다 — 저는 playwright라고 짓겠습니다. 이름 뒤에는 이 서버를 내 컴퓨터에서 로컬로 띄우는 명령을 적습니다.

그러면 Claude Code를 시작하고, 브라우저를 열어 localhost 3000의 우리 애플리케이션으로 이동하라고 요청할 수 있습니다. 브라우저가 열리기 전에, 그 도구를 실행할 권한을 달라는 요청이 뜨는 걸 볼 수 있습니다.

그 권한 팝업이 매번 뜨는 게 번거롭다면, .claude 디렉터리 안의 settings.local.json을 엽니다. 그리고 allow 배열 안에 mcp__playwright 문자열을 추가합니다 — 밑줄이 두 개인 점에 주의하세요. 이렇게 하면 Claude Code가 이 MCP 서버와 그 안의 도구들을 매번 권한을 묻지 않고 마음껏 쓸 수 있게 됩니다. Claude Code를 재시작하고 다시 브라우저를 열라고 하면, 이번에는 권한을 묻지 않고 바로 엽니다.

Playwright MCP 서버를 쓰는 방법은 정말 무수히 많습니다. 지금 우리가 작업 중인 프로젝트에 딱 들어맞는 예 하나를 보여 드리죠. 에디터에서 src/lib/prompts/generation.tsx 파일을 찾습니다. 이건 우리 앱에서 사용자가 요청한 컴포넌트를 실제로 생성하는 데 쓰이는 프롬프트입니다.

그래서 저는 Claude Code가 브라우저를 직접 써서 스스로 컴포넌트를 하나 생성하고, 그 결과물을 보고 이 프롬프트를 스스로 다듬게 하고 싶습니다. 그러면 우리 앱이 더 보기 좋은 컴포넌트를 만들어 내기를 기대할 수 있죠.

그래서 Claude Code에게 이렇게 요청합니다 — localhost 3000으로 이동해, 컴포넌트를 하나 생성해 보고, 생성된 소스 코드를 살펴 스타일을 평가한 뒤, generation.tsx 파일 안의 프롬프트를 업데이트하라고요. 그러면 결국 생성되는 컴포넌트의 스타일이 더 나아지길 기대합니다.

어떻게 하는지 보죠. Claude는 먼저 브라우저를 열고 컴포넌트를 생성하려 합니다. Claude의 코멘트를 보면 결과가 그리 마음에 들지 않는 모양입니다. 이런 앱에서 흔히 쓰이는 스타일 — 보라색에서 파란색으로 가는 그러데이션 — 에 대해 불평하는 걸 볼 수 있을 겁니다. 그런 다음 Claude는 프롬프트를 업데이트하고 새 컴포넌트를 다시 생성하려 합니다.

솔직히 말하면, 이건 제가 기대했던 것보다 훨씬 더 좋은 결과를 냈습니다. 이 후기(testimonial) 카드는 정말, 정말 멋져 보입니다. 이 결과만 봐도 MCP 서버가 정말 흥미로운 사용처의 문을 활짝 연다는 감이 옵니다. 여러분이 개인적으로 작업하는 프로젝트가 무엇이든, Claude를 도와줄 만한 MCP 서버를 한번 찾아보길 적극 권합니다.

이 장에서 배우는 것What you'll learn

약 3분

MCP 서버 = Claude Code에 더하는 도구·능력(원격 또는 로컬)

Playwright MCP 서버 = Claude에게 브라우저 제어 능력

터미널에서 claude mcp add <이름> <명령> 으로 설치

권한 팝업이 번거로우면 settings.local.json 의 allow 에 mcp__playwright

밑줄이 두 개(mcp__)인 점에 주의

데모 — 브라우저로 컴포넌트 생성 → 스타일 평가 → generation.tsx 프롬프트 개선

먼저 짚고 갈 용어

MCP 서버: Claude Code에 새 도구·능력을 더하는 외부 프로그램. 원격이나 로컬에서 동작한다.
Playwright MCP: Claude에게 실제 브라우저를 열고 조작하는 능력을 주는 인기 MCP 서버.
claude mcp add: 터미널(Claude Code 밖)에서 MCP 서버를 등록하는 명령 — 이름과 실행 명령을 함께.
settings.local.json: .claude 폴더의 로컬 설정 파일. allow 배열로 도구 사용을 미리 허용한다.
mcp__<이름>: allow에 넣는 권한 문자열. 밑줄 두 개로 시작 — 해당 서버 도구를 매번 묻지 않고 허용.

도구를 더하는 MCP 서버

Add tools to Claude Code

MCP 서버는 Claude Code에 새 도구와 능력을 더합니다. 원격에서 돌 수도, 내 컴퓨터에서 로컬로 돌 수도 있습니다. 대표 예가 Playwright — Claude에게 브라우저를 제어하는 능력을 주는 서버입니다. 아래 3단계로 붙여 봅니다.

MCP 연결 3단계 · 단계를 눌러 보세요

서버는 터미널에서 한 번 추가하고, 권한은 settings.local.json 의 allow 에 mcp__playwright 로 열어 둡니다(밑줄 두 개). 그다음부터 Claude가 직접 브라우저를 열어 일합니다.

터미널에서 서버 추가

claude mcp add

서버 설치는 Claude Code 안이 아니라 터미널에서 합니다. claude mcp add 뒤에 서버 이름(여기서는 playwright)과, 그 서버를 로컬로 띄우는 명령을 적습니다.

터미널 · Claude Code 밖에서 실행

# claude mcp add <이름> <서버를 띄우는 명령>
claude mcp add playwright npx @playwright/mcp@latest

이제 Claude Code를 켜고 "브라우저를 열어 localhost 3000으로 이동하라"고 요청하면, 처음엔 도구 실행 권한을 묻는 팝업이 뜹니다.

Claude Code · 첫 요청 (권한 팝업이 뜸)

> 브라우저를 열어 http://localhost:3000 으로 이동해 줘
  Allow playwright to run? (도구 실행 권한 요청)

권한을 미리 열고, 실제로 쓰기

allow array · the demo

권한 팝업이 번거로우면 .claude/settings.local.json 의 allow 배열에 mcp__playwright 를 넣습니다 — 밑줄 두 개에 주의하세요. 그러면 이 서버의 도구를 매번 묻지 않고 씁니다.

.claude/settings.local.json

{
  "permissions": {
    "allow": [
      "mcp__playwright"     // 밑줄 두 개(mcp__) — 매번 권한 묻지 않음
    ]
  }
}

재시작하면 권한을 묻지 않고 바로 브라우저를 엽니다. 강사의 데모는 이렇게 흘러갑니다 — Claude가 스스로 브라우저로 컴포넌트를 생성하고, 스타일을 평가한 뒤, src/lib/prompts/generation.tsx 의 프롬프트를 직접 손봅니다.

Claude Code · 셀프 개선 루프 요청

> localhost:3000 으로 이동해 컴포넌트를 하나 생성하고,
   생성된 소스의 스타일을 평가한 뒤,
   src/lib/prompts/generation.tsx 의 프롬프트를 개선해 줘

결과

Claude는 흔한 보라→파랑 그러데이션 스타일을 지적하고 프롬프트를 고쳐 다시 생성합니다. 강사도 기대 이상이라 평한 후기 카드가 나옵니다 — MCP 서버가 여는 사용처가 그만큼 넓다는 신호입니다.

정리 & 점검

Recap & check

핵심 정리

MCP 서버는 Claude Code에 도구·능력을 더한다(원격/로컬). 예: Playwright = 브라우저 제어.
설치는 터미널에서 claude mcp add <이름> <명령>.
권한 팝업은 settings.local.json 의 allow 에 mcp__playwright(밑줄 두 개)로 해제.
데모 — 브라우저로 컴포넌트 생성 → 스타일 평가 → generation.tsx 프롬프트 개선.

Q1Playwright MCP 서버는 어디서 추가하나요?

Q2권한 팝업 없이 도구를 쓰려면 무엇을 추가하나요?

Q3강사의 데모에서 Claude가 손본 파일은?

다음 장

로컬 도구를 붙였으니, 이제 Claude Code를 GitHub로 끌어올려 PR을 자동 리뷰하게 해 봅니다. → GitHub 통합

도구를 더하는 MCP 서버

터미널에서 서버 추가

권한을 미리 열고, 실제로 쓰기

정리 & 점검

여기부터는 등록한 분에게 열립니다.