Claude Code와 MCP 서버

MCP 서버로 Claude Code 확장하기

MCP(Model Context Protocol) 서버를 추가하면 Claude Code의 능력을 확장할 수 있습니다. MCP 서버는 원격에서 실행되거나 여러분의 머신에서 로컬로 실행되며, Claude에게 기본적으로는 갖고 있지 않은 새로운 도구와 능력을 제공합니다. 가장 인기 있는 MCP 서버 중 하나는 Playwright로, Claude에게 웹 브라우저를 제어하는 능력을 부여합니다. Playwright MCP는 웹 개발과 브라우저 기반 워크플로우 자동화에서 강력한 가능성을 열어줍니다.

---

1. Playwright MCP 서버 설치하기

Playwright 서버를 Claude Code에 추가하려면, 터미널에서 (Claude Code 내부가 아닙니다) 다음 명령을 실행합니다. claude mcp add playwright npx @playwright/mcp@latest 이 명령은 두 가지 일을 합니다.

1. 이 MCP 서버에 "playwright"라는 이름을 부여
2. 머신에서 서버를 로컬로 시작하는 명령어를 등록

설치 후 Claude Code를 시작하고, "브라우저를 열어 localhost:3000의 애플리케이션으로 이동해줘"라고 요청해 봅시다.

---

2. 권한(Permission) 관리하기

MCP 서버에 있는 tool 을 처음 사용할 때마다 Claude는 여러분에게 권한을 요청합니다. 매번 뜨는 권한 팝업이 번거롭다면, 해당 MCP 서버를 사전 승인하도록 설정하면 됩니다. .claude/settings.local.json 파일을 열어 allow 배열에 서버를 추가합니다.

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

💡 주의: mcp__playwright의 밑줄은 두 개(__) 입니다. 이렇게 설정하면 Claude가 매번 권한을 묻지 않고도 Playwright의 도구들을 자유롭게 사용할 수 있습니다.

Claude Code를 재시작한 뒤 브라우저를 열어달라고 요청하면, 더 이상 권한 요청 없이 바로 동작합니다.

---

3. 실전 예시: 컴포넌트 생성 품질 개선하기

Playwright MCP 서버로 개발 워크플로우를 어떻게 향상시킬 수 있는지 실제 예시를 보여드리겠습니다. 우리가 작업하던 프로젝트에는 사용자가 요청한 컴포넌트를 실제로 생성하게 도와주는 프롬프트 파일(src/lib/prompts/generation.tsx)이 있습니다.

여기서 우리가 수동으로 채팅창에 컴포넌트를 만들어 달라 요청 후, 결과물을 직접 보고 프롬프트를 조정하는 대신, Claude가 다음 작업을 직접 수행하도록 할 수 있습니다.

Claude에게 이런 프롬프트를 입력하면 됩니다.

너의 목표는 @src/lib/prompts/generation.tsx에 있는 프롬프트를 가지고 만든 컴포넌트를 개선하는거야. 작업 순서는 다음과 같아.
1. 브라우저를 열고 localhost:3000으로 이동
2. 컴포넌트 생성을 요청
3. 실제 생산된 컴포넌트의 시각적 스타일링과 코드 품질을 분석
4. 관찰한 내용을 바탕으로 생성 프롬프트를 업데이트
5. 개선된 프롬프트로 새 컴포넌트를 다시 생성해 검증

요청 예시

"localhost:3000으로 이동해서 기본 컴포넌트를 하나 생성해줘. 그리고 스타일링을 검토한 뒤, 앞으로 더 나은 컴포넌트가 생성되도록 @src/lib/prompts/generation.tsx의 생성 프롬프트를 업데이트해줘."

Claude는 브라우저 도구로 앱과 상호작용하고, 생성된 결과물을 살펴본 뒤, 더 독창적이고 창의적인 디자인이 나오도록 프롬프트 파일을 수정합니다.

개선 후

---

4. 결과와 이점

이 접근 방식은 실제로 훨씬 더 나은 결과를 가져올 수 있습니다. 흔하디 흔한 보라색-파란색 그라데이션이나 기본 Tailwind 패턴 대신, Claude에게 프롬프트를 업데이트하라고 시키면 다음 예시 같은 개선도 가능해집니다.

• 따뜻한 노을 그라데이션 (오렌지 → 핑크 → 보라)
• 깊은 바다 테마 (틸 → 에메랄드 → 시안)
• 비대칭 디자인과 겹치는 요소
• 창의적인 간격과 비관습적인 레이아웃

MCP 서버, 특히 Playwright MCP의 핵심 강점은 Claude가 코드뿐만 아니라 실제 시각적 출력을 볼 수 있다는 점입니다. Claude는 Playwright MCP가 제공해주는 출력물을 통해 더 많은 정보에 기반한 스타일링 개선 결정을 내릴 수 있습니다. 영상의 데모에서도, 예상보다 훨씬 좋은 결과가 나왔고 testimonial 카드가 정말 인상적으로 만들어졌습니다. 이 결과만 봐도 MCP 서버가 흥미로운 활용 사례의 문을 활짝 열어준다는 점을 바로 체감할 수 있습니다.

---

5. 다른 MCP 서버 탐색하기

Playwright MCP 관련 예시는 MCP 서버로 가능한 것의 한 예일 뿐입니다. MCP 생태계에는 다음과 같은 다양한 MCP 서버가 있습니다.

여러분이 작업하는 프로젝트에 맞는 MCP 서버를 찾아보시기를 강력히 권장합니다. MCP 서버들은 Claude를 단순한 코드 어시스턴트에서 여러분의 전체 툴체인과 상호작용할 수 있는 종합적인 개발 파트너로 변모시켜 줍니다.

---

핵심 요약