[Claude] Claude Code MCP 완벽 가이드

MCP Browser와 Figma 설치부터 VS Code 병행 사용까지

Claude Code는 터미널에서 AI의 힘을 빌려 코딩 작업을 수행할 수 있는 강력한 도구이며, MCP(Model Context Protocol)를 통해 브라우저 자동화, Figma 디자인 변환 등 외부 도구와 연결하면 그 가능성이 무한히 확장됩니다. 이 가이드에서는 MCP Browser(Puppeteer, Playwright)와 MCP Figma를 설치하고 설정하는 방법부터, VS Code와 Claude Code를 병행 사용할 때 알아야 할 설정 파일의 차이점까지 모든 것을 다룹니다.

초보 개발자도 따라할 수 있도록 모든 명령어와 설정 예시를 단계별로 상세히 설명하며, 실전에서 바로 활용할 수 있는 사용 사례와 문제 해결 가이드도 함께 제공합니다. MCP를 처음 접하는 분부터 이미 사용 중이지만 더 깊이 이해하고 싶은 분까지, 이 가이드 하나로 Claude Code의 MCP 활용법을 완벽하게 마스터할 수 있습니다.

MCP는 AI와 외부 도구를 연결하는 표준 프로토콜입니다.

[ 차례 ]

1. MCP란 무엇인가?

MCP(Model Context Protocol)는 Anthropic이 개발한 오픈소스 표준으로, AI 어시스턴트가 외부 도구 및 데이터 소스와 통신할 수 있도록 하는 프로토콜입니다. 쉽게 말해, Claude가 브라우저를 제어하거나 Figma 디자인을 읽을 수 있도록 만드는 '다리' 역할을 한다고 생각하면 됩니다. 이 프로토콜을 통해 개발자들은 Claude를 단순한 대화형 AI에서 실제 작업을 수행할 수 있는 강력한 도구로 확장할 수 있습니다.

MCP의 가장 큰 장점은 표준화입니다.

과거에는 각 AI 도구마다 다른 방식으로 외부 서비스와 연결해야 했지만, MCP를 사용하면 한 번 작성한 서버를 여러 AI 도구에서 재사용할 수 있습니다. 이는 마치 USB-C가 다양한 기기를 하나의 표준으로 연결하는 것과 같은 개념입니다. GitHub, Figma, 데이터베이스, 브라우저 등 수백 개의 MCP 서버가 이미 개발되어 있으며, 커뮤니티는 계속해서 성장하고 있습니다.

Claude Code는 터미널에서 Claude를 사용할 수 있는 명령줄 도구로, MCP 서버를 연결하면 코딩 작업부터 웹 자동화까지 다양한 작업을 수행할 수 있습니다. 특히 MCP Browser(Puppeteer)와 MCP Figma를 연결하면, 브라우저 자동화와 디자인을 코드로 변환하는 작업을 자연어로 지시할 수 있어 개발 생산성이 크게 향상됩니다. 이 가이드에서는 이러한 MCP 서버들을 설치하고 설정하는 모든 과정을 처음 사용하는 분들도 이해할 수 있도록 상세히 설명하겠습니다.

2. 사전 준비사항

MCP를 사용하기 위해서는 몇 가지 필수 도구들이 설치되어 있어야 합니다.

Node.js 설치

가장 중요한 것은 Node.js로, MCP 서버의 대부분이 Node.js 환경에서 실행되기 때문입니다. Node.js는 자바스크립트를 브라우저 밖에서도 실행할 수 있게 해주는 런타임 환경으로, npm(Node Package Manager)이라는 패키지 관리 도구를 함께 제공합니다. Node.js 공식 웹사이트(https://nodejs.org)에서 LTS(Long Term Support) 버전을 다운로드하여 설치하면 됩니다.

설치가 완료되었는지 확인하려면 터미널(Windows의 경우 명령 프롬프트 또는 PowerShell)을 열고 다음 명령어를 입력해보세요. node --version과 npm --version명령어를 실행했을 때 버전 번호가 표시되면 정상적으로 설치된 것입니다. Node.js는 v18 이상 버전을 권장하며, 이보다 낮은 버전을 사용하는 경우 일부 MCP 서버가 제대로 작동하지 않을 수 있습니다.

Cluade Code 설치

Claude Code도 미리 설치되어 있어야 합니다. Claude Code는 Anthropic에서 제공하는 CLI(Command Line Interface) 도구로, 터미널에서 claude 명령어로 실행할 수 있습니다. 설치되어 있지 않다면 Anthropic 공식 문서를 참고하여 설치를 진행하세요. 설치 후에는 claude --version 명령어로 정상 설치 여부를 확인할 수 있습니다. 또한 Anthropic 계정에 로그인되어 있어야 하므로, 처음 실행 시 인증 절차를 거쳐야 합니다.

텍스트 에디터 준비

마지막으로, 텍스트 에디터도 준비해야 합니다. 설정 파일을 편집할 때 사용하므로 VS Code, Sublime Text, 또는 nano 같은 터미널 에디터 중 편한 것을 선택하면 됩니다. VS Code를 사용하는 경우 JSON 파일 편집 시 자동 완성 기능과 문법 검사를 제공하므로 초보자에게 특히 유용합니다. 이제 모든 준비가 완료되었다면 본격적으로 MCP 서버 설치를 시작해보겠습니다.

3. MCP Browser설치 및 설정

MCP Browser는 Claude가 웹 브라우저를 직접 제어할 수 있게 해주는 도구입니다. Claude Code에서 사용 가능한 MCP 브라우저 모듈을 정리해보면 아래와 같습니다.

MCP Browser 비교표

MCP서버	개발사	특징	난이도	비용	추천 용도
Playwright MCP	Microsoft	DOM 기반, 빠름, 멀티브라우저	★★	무료	일반 자동화, 테스팅
Puppeteer MCP	Anthropic	안정적, 공식 지원	★	무료	초보자, 간단한 작업
Browserbase	Browserbase	클라우드, Stagehand 통합	★★★	유료	대규모 자동화
Hyperbrowser	Hyperbrowser	90% 성공률, 스텔스 모드	★★★	무료+유료	봇 차단 우회
Bright Data	Bright Data	100% 성공률, 엔터프라이즈	★★★★	유료	기업용 스크래핑
Steel.dev	Steel	오픈소스, 엔터프라이즈급	★★★	유료	복잡한 워크플로우

Playwright MCP (Microsoft 공식) - 가장 추천!

Playwright를 사용하여 브라우저 자동화 기능을 제공하는 MCP 서버입니다. 이 서버는 구조화된 접근성 스냅샷을 통해 LLM이 웹 페이지와 상호작용할 수 있게 하며, 스크린샷이나 비전 모델 없이도 작동합니다. 빠르고 가볍습니다.

claude mcp add playwright -s user -- npx -y @playwright/mcp@latest

playwright의 주요 특징을 살펴보면 다음과 같습니다.

Playwright의 접근성 트리를 사용하여 픽셀 기반 입력이 필요 없습니다
비전 모델이 필요 없이 순수하게 구조화된 데이터로 작동합니다
Microsoft가 2025년 3월에 출시했으며, "스냅샷 기반" 접근 방식으로 주목받고 있습니다
Chrome, Firefox, Safari(WebKit), Edge 모두 지원

playwright의 장점은 DOM 기반이라 매우 빠르고, 멀티 브라우저를 지원하며, 개발사인 Microsoft에 의해 공식 지원된다는 점입니다.

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

Puppeteer MCP (Anthropic 공식)

Puppeteer를 사용하여 브라우저 자동화 기능을 제공하는 포괄적인 MCP 서버입니다. 로컬 및 Docker 배포와 Cloudflare Workers를 지원합니다.

claude mcp add puppeteer -s user -- npx -y @modelcontextprotocol/server-puppeteer

Puppeteer의 주요 특징을 살펴보면 다음과 같습니다.

LLM이 웹 페이지와 상호작용하고, 스크린샷을 찍고, 로컬 및 클라우드 환경 모두에서 JavaScript를 실행할 수 있습니다
Anthropic 공식 서버로 Claude와 호환성 우수
초보자에게 가장 쉬움

puppeteer MCP 브라우저는 설정이 매우 간단하며, 문서와 예제가 풍부하고 Docker를 지원한다는 장점이 있습니다.

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"],
      "env": {
        "PUPPETEER_LAUNCH_OPTIONS": "{\"headless\": false}",
        "ALLOW_DANGEROUS": "true"
      }
    }
  }
}

4. MCP Figma 설치 및 설정

Figma MCP는 Claude가 Figma 디자인 파일을 직접 읽고 분석할 수 있게 해주는 도구입니다.

이를 통해 디자이너가 만든 UI 디자인을 보고 Claude가 자동으로 HTML, CSS, React 컴포넌트 등을 생성할 수 있습니다. 디자인 토큰, 컴포넌트 구조, 레이아웃 정보, 색상 값, 타이포그래피 스타일 등 모든 디자인 정보를 추출하여 실제로 작동하는 코드로 변환합니다. 이는 디자인과 개발 사이의 간극을 크게 줄여주며, "이 Figma 프레임을 React 컴포넌트로 만들어줘"라고 말하는 것만으로 작업을 완료할 수 있습니다.

Figma MCP는 두 가지 방식으로 사용할 수 있습니다. 첫 번째는 리모트 서버 방식으로, Figma의 클라우드 서버에 직접 연결하는 방법입니다. 이 방식은 Figma 데스크톱 앱을 설치하지 않아도 되므로 가장 간편합니다. 터미널에서 claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp 명령어를 실행하면 됩니다. 이후 Claude Code를 실행하고 /mcp 명령어를 입력한 뒤 Figma 서버를 선택하고 "Authenticate"를 클릭하여 인증을 진행합니다. Figma 계정으로 로그인하고 권한을 승인하면 설정이 완료됩니다.

두 번째 방식은 로컬 서버를 사용하는 방법으로, Figma 데스크톱 앱을 통해 MCP 서버를 실행합니다. 이 방식은 더 빠른 응답 속도와 로컬 파일 접근이 필요한 경우에 유용합니다. 먼저 Figma 데스크톱 앱을 최신 버전으로 업데이트한 후, Figma 메뉴에서 Preferences → Enable local MCP server를 선택합니다. 서버가 활성화되면 하단에 "Server running at http://127.0.0.1:3845/mcp"라는 메시지가 표시됩니다. 이 주소를 기억해두었다가 다음 단계에서 사용합니다.

로컬 서버를 Claude Code에 연결하려면 ~/.claude.json 파일을 직접 편집해야 합니다. 텍스트 에디터로 파일을 열고 다음과 같이 설정을 추가합니다: "mcpServers" 객체 안에 "figma-desktop": {"url": "http://127.0.0.1:3845/mcp"}를 추가하면 됩니다. 파일을 저장한 후 Claude Code를 재시작하면 Figma MCP 서버가 자동으로 연결됩니다.

이제 Figma 파일의 URL을 Claude에게 제공하고 "이 디자인을 Tailwind CSS를 사용한 React 컴포넌트로 변환해줘"라고 요청할 수 있습니다. Claude는 디자인의 구조를 분석하고, 적절한 클래스명을 부여하며, 반응형 디자인까지 고려한 코드를 생성합니다.

Figma 사용 팁

Figma MCP를 효과적으로 사용하려면 몇 가지 팁이 있습니다.

첫째, Figma에서 디자인할 때 프레임과 컴포넌트에 명확한 이름을 부여하는 것이 중요합니다. "Frame 1" 대신 "LoginCard" 같은 의미 있는 이름을 사용하면 Claude가 더 정확한 코드를 생성합니다.
둘째, 디자인 토큰과 변수를 활용하면 일관된 스타일의 코드를 얻을 수 있습니다.
셋째, 복잡한 다중 화면 플로우의 경우 한 번에 모든 것을 변환하려 하지 말고, 화면별로 나누어 작업하는 것이 좋습니다.

이렇게 하면 각 컴포넌트를 더 세밀하게 제어할 수 있고, 오류 발생 시 디버깅도 쉬워집니다.

5. 설정 파일의 모든 것 | .vscode/mcp.json vs ~ / .claude.json

MCP 서버를 사용하다 보면 다양한 설정 파일을 접하게 됩니다. 특히 VS Code와 Claude Code를 함께 사용하는 경우 두 가지 다른 설정 파일 시스템을 이해해야 합니다. 이 두 시스템은 완전히 독립적으로 작동하며, 각각의 목적과 특성이 다릅니다. 많은 개발자들이 이 부분에서 혼란을 겪는데, 한 번 제대로 이해하면 두 도구를 효율적으로 병행 사용할 수 있습니다. 이 섹션에서는 두 설정 파일의 차이점과 각각의 사용 사례를 상세히 설명하겠습니다.

.vscode/mcp.json | 프로젝트별 팀 설정

.vscode/mcp.json 파일은 VS Code와 Cursor 같은 에디터에서 사용하는 프로젝트별 설정 파일입니다.

이 파일은 프로젝트 루트 디렉토리의 .vscode 폴더 안에 위치하며, Git으로 버전 관리를 할 수 있어 팀원들과 설정을 공유할 수 있습니다. 예를 들어 팀 전체가 동일한 Figma MCP 서버를 사용해야 하는 경우, 이 파일에 설정을 추가하고 Git에 커밋하면 모든 팀원이 동일한 환경에서 작업할 수 있습니다. 이는 "설정 공유"와 "팀 일관성"이 중요한 협업 환경에서 매우 유용합니다.

이 파일의 구조는 servers 객체 안에 각 서버 정보를 정의하는 형태입니다. 각 서버는 type(연결 방식), command(실행 명령), args(인자), env(환경 변수) 등의 속성을 가질 수 있습니다. 예를 들어 Puppeteer 서버를 추가하려면 다음과 같이 작성합니다: "type": "stdio"는 표준 입출력을 통한 통신을 의미하며, "command": "npx"는 npm 패키지를 실행하는 도구를 지정합니다. 또한 inputs 섹션을 통해 API 키 같은 민감한 정보를 안전하게 관리할 수 있는데, 사용자에게 실행 시 입력을 요청하거나 환경 변수를 참조하도록 설정할 수 있습니다.

.vscode/mcp.json 파일의 가장 큰 장점은 프로젝트와 함께 이동한다는 점입니다. 새로운 팀원이 프로젝트를 클론하면 자동으로 모든 MCP 설정이 포함되어 있어 별도의 설정 작업이 필요 없습니다. VS Code는 이 파일을 자동으로 인식하고 GitHub Copilot이 정의된 MCP 서버들을 사용할 수 있게 합니다. 또한 VS Code의 IntelliSense 기능이 작동하여 설정 파일을 작성할 때 자동 완성과 검증을 제공하므로, 오타나 구문 오류를 미리 방지할 수 있습니다.

~/.claude.json | 개인 전역 설정

반면 ~/.claude.json 파일은 Claude Code 전용 설정 파일로, 사용자의 홈 디렉토리에 위치합니다.

이 파일은 개인적인 설정을 저장하는 곳으로, Git으로 관리되지 않으며 다른 사람과 공유되지 않습니다. 여기에는 MCP 서버 설정뿐만 아니라 Claude Code의 테마, 온보딩 상태, OAuth 계정 정보, 프로젝트별 설정 등 다양한 정보가 함께 저장됩니다. 이 파일은 Claude Code가 시작될 때마다 자동으로 읽혀지며, 사용자의 작업 환경을 구성하는 데 사용됩니다.

~/.claude.json의 구조는 .vscode/mcp.json보다 복잡합니다. 최상위 레벨에서 mcpServers 객체는 모든 프로젝트에서 사용할 전역 MCP 서버를 정의합니다. 그 아래 projects 객체는 특정 프로젝트 경로를 키로 사용하여 프로젝트별 설정을 저장합니다. 예를 들어 /Users/john/projects/my-app 경로에 해당하는 프로젝트에서만 사용할 MCP 서버를 따로 정의할 수 있습니다. 이는 프로젝트마다 다른 도구나 API를 사용하는 경우에 매우 유용합니다.

설정 형식도 .vscode/mcp.json과 약간 다릅니다. Claude Code 설정에서는 type 속성이 필요 없으며, command와 args만 지정하면 됩니다. 또한 환경 변수는 env 객체에 직접 정의하거나, 시스템 환경 변수를 참조할 수 있습니다. 이러한 차이는 두 시스템이 서로 다른 MCP 클라이언트 구현을 사용하기 때문이며, 각각의 방식이 해당 도구의 사용 패턴에 최적화되어 있습니다.

MCP 서버 설정 스코프

MCP 서버를 User Scope로 이동하는 것은 불가능합니다.
- Claude Code는 현재 MCP 서버를 ~/.claude.json에만 저장합니다.
- settings.json에는 mcpServers 필드가 지원되지 않습니다.

~/.claude.json (Claude Code 내부 상태 파일)

## 직접 편집 금지 - Claude Code가 자동 관리

  {
    "numStartups": 10,                    // 실행 횟수
    "installMethod": "global",            // 설치 방법
    "autoUpdates": true,                  // 자동 업데이트
    "tipsHistory": { ... },               // 팁 표시 이력
    "firstStartTime": "2025-06-30...",   // 첫 시작 시간
    "userID": "...",                      // 사용자 ID

    "projects": {                         // 프로젝트별 설정
      "/Users/denny/Gaia/30_Share/33_DEVELOPMENT/BTS": {
        "allowedTools": [],               // 승인된 도구
        "history": [ ... ],               // 채팅 히스토리 (20개로 정리됨)

        // MCP 서버 설정 (현재 여기에만 저장 가능)
        "mcpServers": {
          "puppeteer": {
            "command": "/Users/denny/.nvm/versions/node/v22.17.0/bin/mcp-server-puppeteer"
          },
          "figma": {
            "command": "/Users/denny/.nvm/versions/node/v22.17.0/bin/figma-developer-mcp",
            "env": {
              "FIGMA_PERSONAL_ACCESS_TOKEN": "figd_Kb8-..."
            }
          }
        },

        "enabledMcpjsonServers": [],      // .mcp.json의 활성화된 서버
        "disabledMcpjsonServers": [],     // .mcp.json의 비활성화된 서버
        "hasTrustDialogAccepted": true,   // 프로젝트 신뢰 여부
        "exampleFiles": [ ... ],          // 예제 파일 목록
        "hasCompletedProjectOnboarding": true
      }
    },

    "oauthAccount": {                     // OAuth 계정 정보
      "accountUuid": "...",
      "emailAddress": "woosul@gmail.com",
      "organizationName": "...",
      "displayName": "Denny"
    },

    "cachedStatsigGates": { ... },       // 기능 플래그 캐시
    "cachedChangelog": "...",            // 변경 로그 캐시
    "lastReleaseNotesSeen": "2.0.14"    // 마지막 본 릴리스 노트
  }

 ## 주요 역할:
  - 프로젝트별 채팅 히스토리
  - MCP 서버 설정 (Puppeteer, Figma)
  - 사용자 인증 정보
  - 앱 상태 및 캐시
  - 직접 편집 불가 (Claude Code가 자동 관리)

~/.claude/settings.json (사용자 전역 설정)

## 사용자가 직접 편집 가능

  {
    "statusLine": {                       // 상태 라인 커스터마이징
      "type": "command",
      "command": "input=$(cat); cwd=..."  // 터미널 프롬프트 스타일
    },
    "alwaysThinkingEnabled": false       // 항상 생각 모드 비활성화
  }

## 주요 역할:
  - 상태 라인 커스터마이징
  - 모델 기본값 설정
  - 환경변수 설정
  - 권한 설정 (permissions)
  - 훅(hooks) 설정
  - MCP 서버는 설정 불가 (스키마에서 지원 안 함)

## 가능한 추가 설정 예시:
  {
    "statusLine": { ... },
    "env": {                             // 환경변수
      "MY_API_KEY": "${MY_API_KEY}"
    },
    "permissions": {                     // 도구 권한 관리
      "allow": ["Bash(git:*)", "Read(**/*.py)"],
      "deny": ["Bash(rm:*)"]
    },
    "hooks": {                           // 이벤트 훅
      "PreToolUse": [ ... ]
    },
    "model": "claude-sonnet-4-5-20250929"  // 기본 모델
  }

~/.claude/.env (환경변수 파일)

## 민감정보 보관용 (새로 생성됨)

  # Claude Code Environment Variables
  # This file contains sensitive API tokens and credentials
  # DO NOT commit this file to version control

  # Figma API Token
  FIGMA_PERSONAL_ACCESS_TOKEN=figd_Kb8-YG1koEv8bybPLdFWjrJ9yx78mR0zKkG05-bd

  주요 역할:
  - API 키/토큰 보관
  - 민감정보 분리
  - 현재 Claude Code에서 자동 로드 안 됨 (수동 참조 필요)

  사용 방법:
  - settings.json의 env 필드에서 참조 가능 (향후)
  - 또는 프로젝트별 .mcp.json에서 ${ENV_VAR} 형식으로 참조

mcp.json (프로젝트별 MCP 서버 설정)

## 현재 존재하지 않음 - 필요시 생성 가능

## 만약 팀과 공유할 MCP 서버가 있다면:

  {
    "mcpServers": {
      "upbit-api": {
        "command": "node",
        "args": ["./mcp-servers/upbit-server.js"],
        "env": {
          "UPBIT_ACCESS_KEY": "${UPBIT_ACCESS_KEY}",
          "UPBIT_SECRET_KEY": "${UPBIT_SECRET_KEY}"
        }
      }
    }
  }

###  위치: /Users/denny/Gaia/30_Share/33_DEVELOPMENT/BTS/.mcp.json

##  주요 역할:
  - 프로젝트 전용 MCP 서버
  - Git으로 버전 관리 가능
  - 팀원과 공유 가능
  - 환경변수는 .env에 분리

권장 파일 구조

  ~/.claude/
  ├── settings.json          # 전역 설정 (편집 가능)
  ├── .env                   # 환경변수/API 키 (새로 생성됨)
  └── ...

  ~/.claude.json            # 내부 상태 (자동 관리, 편집 금지)
  └── projects/
      └── BTS/
          ├── history        # 채팅 히스토리 (20개로 정리됨)
          └── mcpServers     # MCP 서버 (Puppeteer, Figma)

  ~/.claude-backups/        # 백업 (새로 생성됨)
  ├── claude.json.backup
  └── settings.json.backup

두 시스템의 독립성

중요한 점은 이 두 설정 파일이 완전히 독립적이라는 것입니다. VS Code는 .vscode/mcp.json만 읽고, Claude Code는 ~/.claude.json만 읽습니다. 즉, 한 파일에 설정을 추가해도 다른 도구에는 영향을 주지 않습니다. 따라서 두 도구를 함께 사용하려면 각각의 설정 파일에 MCP 서버를 추가해야 합니다. 이는 번거로워 보일 수 있지만, 실제로는 각 도구에 맞는 최적의 설정을 유지할 수 있다는 장점이 있습니다. 예를 들어 VS Code에서는 팀 공유 설정만 유지하고, Claude Code에서는 개인적인 실험용 서버를 추가로 사용할 수 있습니다.

6. claude mcp add 명령어의 진실

많은 사용자들이 claude mcp add 명령어를 실행할 때 "지금 무언가가 설치되고 있는 건가?"라고 궁금해합니다. 이 명령어의 동작 원리를 정확히 이해하면 MCP 시스템이 어떻게 작동하는지 더 명확하게 파악할 수 있습니다. 결론부터 말하자면, claude mcp add명령어는 실제로 아무것도 설치하지 않습니다. 이 명령어는 단순히 ~/.claude.json 파일에 "나중에 이 서버를 사용할 거야"라는 정보를 기록하는 역할만 합니다. 실제 다운로드와 설치는 Claude Code를 실행할 때 처음으로 일어나며, 이는 매우 효율적인 설계입니다.

명령어 실행 시 일어나는 일

claude mcp add puppeteer -s user -- npx -y @modelcontextprotocol/server-puppeteer 명령어를 실행하면 어떤 일이 일어날까요? 먼저 Claude Code는 홈 디렉토리의 ~/.claude.json 파일을 엽니다. 파일이 없다면 새로 생성하고, 있다면 기존 내용을 읽습니다. 그리고 mcpServers 객체 안에 다음과 같은 새로운 항목을 추가합니다:

서버 이름 : "puppeteer",
실행 명령 : "npx",
인자 : "-y"와 "@modelcontextprotocol/server-puppeteer"

이 정보는 JSON 형식으로 파일에 저장되며, 파일을 닫고 "Successfully added MCP server"라는 메시지를 출력합니다. 이 과정은 보통 1초도 걸리지 않으며, 네트워크 연결도 필요 없습니다.

이 시점에서 컴퓨터에는 Puppeteer 패키지가 다운로드되어 있지 않습니다. ~/.npm 캐시 디렉토리를 확인해보면 아무것도 없을 것입니다. 즉, 명령어는 "설정 추가"만 했을 뿐 "설치"는 하지 않은 것입니다. 이는 마치 음식 배달 앱에서 장바구니에 상품을 담는 것과 같습니다. 장바구니에 담았다고 해서 음식이 바로 만들어지는 것은 아니며, 주문 버튼을 눌러야 실제로 요리가 시작되는 것과 같은 원리입니다. 이러한 지연 설치 방식은 불필요한 다운로드를 방지하고, 사용자가 원하는 시점에만 리소스를 사용하도록 합니다.

Claude Code 실행 시 일어나는 일

실제 설치는 claude 명령어로 Claude Code를 실행할 때 일어납니다. Claude Code가 시작되면 가장 먼저 ~/.claude.json 파일을 읽어 설정된 MCP 서버 목록을 확인합니다. Puppeteer가 목록에 있는 것을 발견하면, 설정에 지정된 명령어(npx -y @modelcontextprotocol/server-puppeteer)를 실행하려고 시도합니다. 이때 npx가 작동하기 시작하는데, npx는 npm 패키지를 임시로 다운로드하여 실행하는 도구입니다. Puppeteer 패키지가 로컬에 없다면 npm 레지스트리에서 자동으로 다운로드하고, 다운로드가 완료되면 즉시 실행합니다.

처음 실행 시에는 패키지 다운로드 시간이 필요하므로 "puppeteer: connecting..." 메시지가 몇 초간 표시됩니다. 네트워크 속도에 따라 다르지만 보통 3-5초 정도 소요됩니다. 다운로드가 완료되면 "puppeteer: connected ✓"라는 메시지가 표시되고, 이제 Claude가 Puppeteer MCP 서버를 사용할 수 있게 됩니다. 다운로드된 패키지는 ~/.npm/_npx/ 디렉토리에 캐시되어 저장되므로, 다음 번 실행부터는 다운로드 없이 바로 실행됩니다. 두 번째 실행부터는 1초 이내에 서버가 연결되는 것을 확인할 수 있습니다.

npx의 역할과 이점

npx의 이러한 동작 방식은 여러 가지 이점을 제공합니다.

첫째, 전역 설치가 필요 없으므로 시스템을 깨끗하게 유지할 수 있습니다. npm install -g 명령어로 전역 설치하면 시스템 전체에 영향을 주지만, npx는 필요할 때만 임시로 사용하고 정리할 수 있습니다.
둘째, 항상 최신 버전을 사용할 수 있습니다. 전역 설치된 패키지는 수동으로 업데이트해야 하지만, npx는 매번 실행 시 최신 버전을 확인하고 필요하면 업데이트합니다.
셋째, 여러 버전을 동시에 사용할 수 있습니다. 프로젝트마다 다른 버전의 도구가 필요한 경우에도 충돌 없이 사용할 수 있습니다.

7. VS Code와 Claude Code 병행 사용 전략

많은 개발자들이 VS Code에서 GitHub Copilot을 사용하면서 동시에 터미널에서 Claude Code도 활용하고 싶어 합니다. 이는 매우 합리적인 선택인데, GitHub Copilot은 코드 자동 완성과 인라인 제안에 강점이 있고, Claude Code는 복잡한 리팩토링과 대화형 문제 해결에 뛰어나기 때문입니다. 두 도구를 병행 사용할 때 가장 많이 받는 질문은 "MCP 설정을 어떻게 해야 하나요? 한 번만 설정하면 되나요?"입니다. 앞서 설명했듯이 두 도구는 독립적인 설정 시스템을 사용하므로, 각각에 MCP 서버를 설정해야 합니다.

설정 전략 1 : 역할 분담

가장 효율적인 전략은 각 도구의 강점에 맞게 MCP 서버를 배치하는 것입니다. VS Code의 .vscode/mcp.json에는 팀 전체가 사용해야 하는 공통 MCP 서버만 추가합니다. 예를 들어 프로젝트에서 사용하는 Figma 디자인 시스템이나, 공통 데이터베이스 접근 MCP 등이 여기에 해당합니다. 이 파일은 Git에 커밋되어 모든 팀원이 동일한 도구를 사용하게 됩니다. 반면 Claude Code의 ~/.claude.json에는 개인적인 생산성 도구나 실험용 MCP 서버를 추가합니다. Puppeteer 같은 브라우저 자동화 도구나, 개인 API 키가 필요한 서비스 등이 여기에 적합합니다.

예를 들어 다음과 같은 구성을 생각해볼 수 있습니다. .vscode/mcp.json에는 Figma 로컬 서버를 설정하여 팀 전체가 동일한 디자인 파일에 접근할 수 있게 합니다. 이 파일에는 민감한 정보 없이 로컬호스트 주소만 포함되므로 Git에 올려도 안전합니다. 한편 ~/.claude.json에는 Puppeteer, 개인 Brave Search API 키, GitHub 개인 액세스 토큰 등을 설정합니다. 이렇게 하면 팀 협업에 필요한 도구는 공유하면서도, 개인의 작업 스타일에 맞는 도구는 독립적으로 관리할 수 있습니다.

설정 전략 2 : 프로젝트별 맞춤

Claude Code의 강력한 기능 중 하나는 프로젝트별 MCP 설정을 지원한다는 것입니다. ~/.claude.json의 projects 객체를 활용하면, 특정 프로젝트 디렉토리에서 작업할 때만 활성화되는 MCP 서버를 정의할 수 있습니다. 예를 들어 프론트엔드 프로젝트에서는 Figma MCP를 활성화하고, 백엔드 프로젝트에서는 PostgreSQL MCP를 활성화하는 식입니다. 이는 각 프로젝트의 성격에 맞는 도구만 로드하여 리소스를 절약하고, 불필요한 MCP 서버로 인한 혼란을 방지합니다.

프로젝트별 설정을 위해서는 먼저 프로젝트의 절대 경로를 확인해야 합니다. 프로젝트 디렉토리로 이동한 후 pwd 명령어(Windows에서는 cd)를 실행하면 전체 경로가 표시됩니다. 예를 들어 /Users/john/projects/ecommerce-frontend라는 경로가 나왔다면, 이를 ~/.claude.json의 projects 객체의 키로 사용합니다. 해당 키 아래에 mcpServers 객체를 추가하고, 이 프로젝트에서만 사용할 MCP 서버들을 정의하면 됩니다. Claude Code는 현재 작업 디렉토리를 확인하고, 일치하는 프로젝트 설정이 있으면 자동으로 해당 MCP 서버들을 로드합니다.

실전 예시 : 풀스택 개발 환경

구체적인 예시로 풀스택 웹 애플리케이션 개발 환경을 구성해보겠습니다.

.vscode/mcp.json에는 팀 공통 도구들을 설정합니다: Figma 로컬 서버(디자인 시스템 접근), Linear MCP(이슈 트래킹), Slack MCP(팀 커뮤니케이션). 이 파일은 Git에 커밋되어 새로 합류하는 팀원도 즉시 동일한 환경을 구성할 수 있습니다.
~/.claude.json의 전역 mcpServers에는 개인 도구들을 추가합니다: Puppeteer(브라우저 테스팅), Brave Search(최신 문서 검색), Sequential Thinking(복잡한 문제 분석). 마지막으로 프로젝트별 설정에서 프론트엔드 디렉토리에는 Storybook MCP를, 백엔드 디렉토리에는 PostgreSQL MCP를 추가합니다.

이렇게 구성하면 VS Code에서 코드를 작성할 때는 Copilot이 팀 공통 MCP 서버들을 활용하여 Figma 디자인을 참조하고, Linear 이슈를 확인하고, Slack에서 대화 내용을 가져올 수 있습니다. 한편 터미널에서 Claude Code를 실행하면 개인 도구들을 사용하여 "Puppeteer로 이 기능 테스트해줘", "최신 Next.js 문서 검색해서 이 문제 해결해줘" 같은 작업을 수행할 수 있습니다. 또한 프론트엔드 디렉토리에서 작업할 때는 자동으로 Storybook 접근이 활성화되어 컴포넌트 문서를 참조할 수 있습니다. 이처럼 계층적 설정 구조를 활용하면 상황에 맞는 최적의 도구 조합을 자동으로 사용할 수 있습니다.

8. 실전 활용 예시

이제 이론은 충분히 다루었으니 실제로 MCP를 어떻게 활용하는지 구체적인 예시를 살펴보겠습니다. 다음 시나리오들은 실제 개발 현장에서 자주 마주치는 상황들로, MCP를 활용하면 이러한 작업들을 대폭 간소화할 수 있습니다. 각 예시에서는 명령어 하나로 복잡한 작업을 자동화하는 방법과, 여러 MCP 서버를 조합하여 시너지를 내는 방법을 보여드리겠습니다. 이러한 패턴들을 익혀두면 자신만의 워크플로우를 구축하는 데 큰 도움이 될 것입니다.

예시 1 : 웹사이트 데이터 자동 수집

첫 번째 예시는 경쟁사 웹사이트에서 가격 정보를 수집하는 작업입니다.

과거에는 이를 위해 Selenium 스크립트를 작성하고, CSS 선택자를 찾고, 에러 처리를 구현하는 등 많은 코드를 작성해야 했습니다. 하지만 Puppeteer MCP를 사용하면 자연어로 지시하는 것만으로 충분합니다. Claude Code를 실행하고 다음과 같이 말해보세요.

"Puppeteer를 사용해서 amazon.com에서 'wireless mouse'를 검색하고, 첫 페이지의 모든 상품 이름과 가격을 추출해서 CSV 파일로 저장해줘."

Claude는 브라우저를 열고, 검색을 수행하고, 결과를 파싱하고, 파일로 저장하는 모든 과정을 자동으로 처리합니다.

더 나아가 이 작업을 정기적으로 실행하고 싶다면, Claude에게 아래와 같이 요청해보세요.

"이 작업을 수행하는 Python 스크립트를 만들고, cron job으로 매일 오전 9시에 실행되도록 설정해줘"

Claude는 스크립트를 생성하고, 적절한 cron 표현식을 작성하고, 설치 방법까지 안내합니다. 이렇게 하면 경쟁사의 가격 변동을 자동으로 추적할 수 있는 시스템이 몇 분 만에 구축됩니다. 데이터가 수집되면 아래와 같이 추가적인 작업을 요청할 수 있습니다.

"수집된 데이터를 분석해서 평균 가격과 최저가 상품을 알려줘"

예시 2 : Figma에서 코드로 디자인 구현

두 번째 예시는 디자이너가 만든 Figma 디자인을 실제 코드로 변환하는 작업입니다. 디자이너가 새로운 대시보드 UI를 Figma에 업로드했다고 가정해봅시다. Figma 파일의 URL을 복사한 후 Claude Code에서 다음과 같이 요청합니다:

"이 Figma 파일의 'Dashboard' 프레임을 Next.js 14와 Tailwind CSS를 사용한 React 컴포넌트로 변환해줘.
파일 URL: https://www.figma.com/file/..."

Claude는 Figma MCP를 통해 디자인을 분석하고, 색상 값, 여백, 타이포그래피, 레이아웃 구조 등 모든 디자인 정보를 추출합니다. 그리고 이를 바탕으로 깔끔한 React 컴포넌트 코드를 생성합니다.

생성된 코드는 단순히 디자인을 복사한 것이 아니라, 실제로 작동하는 컴포넌트입니다. 예를 들어 버튼이 있다면 onClick 핸들러가 포함되고, 입력 필드가 있다면 상태 관리 로직이 포함됩니다. 또한

"이 컴포넌트를 반응형으로 만들고, 모바일에서는 레이아웃이 변경되도록 해줘"

라고 요청하면 적절한 미디어 쿼리와 반응형 클래스를 추가합니다. Figma에 디자인 토큰이 정의되어 있다면 이를 CSS 변수로 변환하여 일관된 스타일 시스템을 유지할 수도 있습니다. 디자인과 코드 사이의 불일치를 최소화하고, 디자이너와 개발자 간의 핸드오프 시간을 대폭 단축할 수 있습니다.

예시 3 : 브라우저와 Figma의 조합

세 번째이자 가장 고급 예시는 두 MCP 서버를 결합하여 디자인 QA를 자동화하는 것입니다.

새로운 UI 컴포넌트를 개발한 후, 실제 렌더링이 디자인과 얼마나 일치하는지 확인하고 싶을 때가 있습니다. Claude Code에 다음과 같이 요청해보세요:

"1) Figma에서 'ProductCard' 디자인을 가져와서 예상되는 색상 값들을 추출해줘.
2) Puppeteer로 localhost:3000/products를 열고 실제 렌더링된 ProductCard 컴포넌트의 색상 값들을 추출해줘.
3) 두 값을 비교해서 차이점을 보고해줘."

Claude는 두 MCP 서버를 순차적으로 사용하여 이 복잡한 작업을 수행합니다.

이 방법은 수동 비교보다 훨씬 정확하고 빠릅니다. 예를 들어 디자인에서는 #3B82F6 색상을 사용했는데 구현에서는 #3B83F6를 사용했다면(한 자리 차이), 육안으로는 구별하기 어렵지만 Claude는 즉시 발견합니다. 또한

"차이점이 발견된 요소들의 스크린샷을 찍어서 비교 리포트를 만들어줘"

라고 요청하면, 시각적 비교 자료까지 자동으로 생성됩니다. 이러한 자동화된 디자인 QA는 특히 대규모 리팩토링이나 디자인 시스템 업데이트 시에 매우 유용하며, 인간의 실수를 줄이고 일관성을 유지하는 데 큰 도움이 됩니다.

예시 4 : 종합 워크플로우

마지막 예시는 신규 기능 개발의 전체 워크플로우를 MCP로 자동화하는 것입니다.

Linear에서 새로운 이슈가 할당되었다고 가정해봅시다. Claude Code에서

요청 1 : "Linear MCP를 사용해서 내게 할당된 최신 이슈를 가져와줘"
답변 1 : 이슈가 "상품 비교 기능 추가"입니다.
요청 2 : "관련된 Figma 디자인을 찾아서 React 컴포넌트로 변환해줘"
답변 2 : 컴포넌트 생성
요청 3 : "이 컴포넌트를 위한 Storybook 스토리와 Jest 테스트를 작성해줘"
요청 4 : "GitHub MCP를 사용해서 feature 브랜치를 만들고, 변경사항을 커밋하고, PR을 생성해줘. PR 설명에는 Linear 이슈 링크를 포함해줘"

이 모든 과정이 자연어 대화로 진행되며, 각 단계마다 Claude가 자동으로 적절한 MCP 서버를 선택하여 사용합니다. 개발자는 복잡한 명령어나 API를 외울 필요 없이, 하고 싶은 작업을 말하기만 하면 됩니다. 이는 특히 반복적인 작업이 많은 경우에 엄청난 시간 절약 효과를 가져옵니다. 또한 모든 작업 기록이 대화 로그로 남기 때문에, 나중에 동일한 작업을 다시 수행하거나 다른 팀원에게 설명할 때도 유용합니다. MCP는 단순히 개별 작업을 자동화하는 것을 넘어, 개발 워크플로우 전체를 지능적으로 연결하는 역할을 합니다.

9. 문제 해결 가이드

MCP를 사용하다 보면 가끔 문제가 발생할 수 있습니다. 이 섹션에서는 가장 자주 발생하는 문제들과 그 해결 방법을 정리했습니다. 대부분의 문제는 설정 오류나 환경 문제에서 비롯되며, 체계적으로 접근하면 쉽게 해결할 수 있습니다. 문제가 발생했을 때 당황하지 말고 다음 체크리스트를 순서대로 확인해보세요. 각 항목에는 문제 증상, 원인 분석, 그리고 구체적인 해결 방법이 포함되어 있습니다.

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

Claude Code를 실행했는데 MCP 서버가 "connecting..." 상태에서 멈춰있거나, "failed to connect" 에러가 표시되는 경우입니다.

이 문제의 주요 원인은 설정 파일 오류, 네트워크 문제, 또는 필수 의존성 누락입니다. 먼저 /mcp 명령어를 실행하여 서버 상태를 확인하세요. 서버가 목록에 나타나지만 연결되지 않는다면 설정 파일에 문법 오류가 있을 가능성이 큽니다. ~/.claude.json 파일을 열고 JSON 형식이 올바른지 확인하세요. 특히 중괄호, 대괄호, 쉼표, 따옴표가 정확히 닫혀있는지 주의깊게 살펴봐야 합니다.

JSON 문법이 올바른데도 연결되지 않는다면, 명령어 경로가 정확한지 확인하세요.

npx를 사용하는 경우 Node.js와 npm이 설치되어 있고 PATH 환경 변수에 등록되어 있어야 합니다. 터미널에서 which npx (Windows에서는 where npx) 명령어를 실행하여 npx가 발견되는지 확인하세요. 발견되지 않는다면 Node.js 재설치가 필요할 수 있습니다. 또한 방화벽이나 회사 프록시가 npm 레지스트리 접근을 차단하고 있을 수 있으므로, 네트워크 설정도 확인해야 합니다. npm ping 명령어로 npm 서버 연결을 테스트할 수 있습니다.

문제 2 : Figma MCP 인증 실패

Figma 리모트 MCP를 사용할 때 "Authentication failed" 또는 "No tools available" 메시지가 표시되는 경우입니다.

이는 대부분 Figma 계정 권한 문제나 OAuth 인증 흐름 오류에서 비롯됩니다. Figma MCP는 사용자의 Figma 계정에 접근하기 위해 OAuth 인증이 필요하며, Dev Mode 또는 Full 권한이 있는 Pro, Organization, Enterprise 플랜 계정이어야 합니다. 무료 플랜이나 Viewer 권한으로는 MCP 서버를 사용할 수 없으므로, 먼저 자신의 Figma 플랜과 권한을 확인하세요. Figma 웹사이트에서 Settings → Plan and billing 메뉴를 통해 확인할 수 있습니다.

권한이 충분한데도 인증이 실패한다면, 브라우저 쿠키나 캐시 문제일 수 있습니다.

Claude Code에서 /mcp 명령어를 실행하고 Figma 서버를 선택한 후 "Re-authenticate"를 시도해보세요. 이때 열리는 브라우저 창에서 Figma에 로그인되어 있는지 확인하고, "Allow Access" 버튼을 클릭해야 합니다. 만약 버튼이 나타나지 않거나 에러 페이지가 표시된다면, 브라우저를 완전히 종료하고 시크릿 모드로 다시 시도해보세요. 또한 회사 네트워크에서는 OAuth 리다이렉트가 차단될 수 있으므로, 가능하면 개인 네트워크에서 인증을 완료하는 것이 좋습니다.

문제 3 : Puppeteer 브라우저가 열리지 않음

Puppeteer MCP 서버는 연결되었다고 표시되지만, "브라우저를 열어줘"라고 요청했을 때 아무 일도 일어나지 않는 경우입니다.

이는 주로 Chrome 또는 Chromium 실행 파일을 찾을 수 없거나, 헤드리스 모드로 실행되고 있기 때문입니다. Puppeteer는 Chrome을 자동으로 다운로드하지만, 시스템에 따라 실행 권한 문제가 발생할 수 있습니다. macOS의 경우 "malicious software" 경고로 인해 첫 실행이 차단될 수 있으므로, System Preferences → Security & Privacy에서 차단된 앱을 수동으로 허용해야 할 수 있습니다. Linux에서는 필요한 시스템 라이브러리가 없을 수 있으므로, sudo apt-get install -y chromium-browser 같은 명령으로 Chromium을 별도로 설치하는 것이 도움이 됩니다.

또 다른 원인은 Claude가 Puppeteer를 헤드리스 모드로 실행하도록 지시하는 경우입니다.

이때는 브라우저가 백그라운드에서 실행되어 화면에 보이지 않습니다. Claude에게 "Puppeteer를 헤드풀(headful) 모드로 사용해줘" 또는 "브라우저 창을 보이게 해줘"라고 명시적으로 요청하세요. 또한 Docker나 WSL 환경에서 실행하는 경우 디스플레이 서버 설정이 필요할 수 있습니다. WSL2를 사용한다면 X server(VcXsrv 또는 Xming)를 설치하고 DISPLAY 환경 변수를 설정해야 GUI 애플리케이션을 실행할 수 있습니다.

문제 4 : 프로젝트별 설정이 작동하지 않음

~/.claude.json의 projects 객체에 설정을 추가했는데 해당 MCP 서버가 로드되지 않는 경우입니다.

가장 흔한 원인은 프로젝트 경로가 정확하지 않은 것입니다. Claude Code는 현재 작업 디렉토리와 설정 파일의 경로를 정확히 비교하므로, 한 글자라도 다르면 매칭되지 않습니다. 반드시 절대 경로를 사용해야 하며, 상대 경로나 ~ 기호는 작동하지 않습니다. 올바른 경로를 확인하려면 프로젝트 디렉토리에서 pwd 명령어를 실행하고, 그 결과를 그대로 복사하여 설정 파일에 붙여넣으세요. 예를 들어 /Users/john/projects/my-app은 작동하지만, ~/projects/my-app이나 /Users/john/projects/my-app/(끝에 슬래시)는 작동하지 않을 수 있습니다.

또 다른 함정은 심볼릭 링크입니다.

만약 프로젝트 디렉토리가 심볼릭 링크를 통해 다른 위치를 가리키고 있다면, 실제 물리적 경로와 링크 경로가 다를 수 있습니다. pwd -P 명령어를 사용하면 심볼릭 링크를 해제한 실제 경로를 확인할 수 있으므로, 이 경로를 설정 파일에 사용하세요. 또한 프로젝트 설정은 하위 디렉토리로 상속되지 않습니다. 예를 들어 /Users/john/projects에 설정을 추가해도, /Users/john/projects/my-app에서는 적용되지 않습니다. 각 프로젝트 루트 디렉토리별로 개별 설정이 필요합니다.

문제 5 : VS Code에서 MCP 도구가 보이지 않음

VS Code에서 GitHub Copilot을 사용할 때 MCP 도구가 활성화되지 않는 경우입니다.

먼저 GitHub Copilot Chat 확장이 최신 버전으로 업데이트되어 있는지 확인하세요. MCP 지원은 비교적 최근에 추가된 기능이므로 구버전에서는 작동하지 않습니다. Extensions 메뉴에서 "GitHub Copilot Chat"을 검색하고 업데이트 버튼이 있다면 클릭하세요. 또한 VS Code 설정에서 MCP 관련 옵션들이 활성화되어 있는지 확인해야 합니다. Settings에서 "mcp"를 검색하고, chat.mcp.discovery.enabled와 chat.mcp.autostart 옵션을 true로 설정하세요.

.vscode/mcp.json 파일의 형식도 확인해야 합니다.

VS Code는 servers 객체를 사용하며, 각 서버에 type 속성이 필수입니다. Claude Code의 설정 형식과 다르므로 혼동하지 않도록 주의하세요. 파일을 저장한 후에는 반드시 MCP 서버를 재시작해야 변경사항이 적용됩니다. Command Palette(Cmd+Shift+P)에서 "MCP: Restart Server"를 실행하거나, VS Code를 완전히 재시작하세요. 또한 Copilot Chat 패널을 열고 @ 기호를 입력했을 때 MCP 도구들이 목록에 나타나는지 확인하세요. 나타나지 않는다면 서버가 제대로 시작되지 않은 것이므로, Output 패널에서 MCP 서버 로그를 확인하여 에러 메시지를 찾아야 합니다.

MCP 생태계의 빠른 성장

이 가이드에서는 Claude Code에서 MCP Browser와 Figma를 설치하고 설정하는 방법부터, VS Code와 병행 사용하는 전략까지 모든 것을 다뤘습니다. MCP는 단순히 새로운 기술이 아니라, AI가 실제 세계와 상호작용하는 방식을 표준화하는 중요한 프로토콜입니다. 이를 통해 개발자는 반복적이고 시간이 많이 걸리는 작업을 자동화하고, 창의적이고 가치 있는 일에 집중할 수 있게 됩니다. Puppeteer MCP로 브라우저 작업을 자동화하고, Figma MCP로 디자인을 즉시 코드로 변환하며, 다양한 MCP 서버를 조합하여 복잡한 워크플로우를 구축할 수 있습니다.

처음 MCP를 접하는 분들에게는 다소 복잡해 보일 수 있지만, 한 번 익숙해지면 없어서는 안 될 도구가 될 것입니다. 이 가이드의 핵심 내용을 정리하면 다음과 같습니다:

첫째, claude mcp add 명령어는 설정만 추가하며 실제 설치는 Claude Code 실행 시 자동으로 일어납니다.
둘째, .vscode/mcp.json과 ~/.claude.json은 완전히 독립적인 시스템이므로 각각 설정해야 합니다.
셋째, 프로젝트별 설정을 활용하면 상황에 맞는 최적의 MCP 서버 조합을 자동으로 사용할 수 있습니다.
넷째, 문제가 발생하면 체계적으로 접근하여 설정, 권한, 네트워크를 순서대로 확인하세요.

MCP 생태계는 빠르게 성장하고 있으며, 매일 새로운 서버와 기능이 추가되고 있습니다. 공식 MCP 서버 디렉토리(mcp.so)를 정기적으로 확인하여 새로운 도구들을 발견하고, 커뮤니티와 경험을 공유하세요. 또한 자신만의 MCP 서버를 만들어 특정 워크플로우에 최적화할 수도 있습니다. MCP SDK를 사용하면 몇 줄의 코드만으로 커스텀 서버를 구축할 수 있으며, 이를 팀과 공유하거나 오픈소스로 공개할 수 있습니다. 앞으로 더 많은 AI 도구들이 MCP를 지원하게 되면, 한 번 작성한 서버를 여러 플랫폼에서 재사용할 수 있게 될 것입니다.

마지막으로, MCP는 도구일 뿐이라는 것을 기억하세요. 중요한 것은 이 도구를 어떻게 창의적으로 활용하여 실제 문제를 해결하느냐입니다. 처음에는 간단한 작업부터 시작하여 점차 복잡한 자동화로 확장해가세요. 예를 들어 처음에는 "웹페이지 스크린샷 찍기"부터 시작하고, 익숙해지면 "특정 요소의 변경사항 감지 및 알림", "자동화된 시각적 회귀 테스트" 같은 고급 작업으로 발전시킬 수 있습니다. 여러분의 개발 워크플로우를 관찰하고, 반복되는 패턴을 발견하면 그것을 MCP로 자동화할 수 있는지 고민해보세요. 이러한 작은 개선들이 모여 큰 생산성 향상으로 이어질 것입니다. 질문이나 피드백이 있다면 Anthropic 커뮤니티나 MCP 디스코드 채널에서 공유하세요. 함께 배우고 성장하는 커뮤니티가 여러분을 기다리고 있습니다.

저작자표시 비영리 변경금지 (새창열림)

'AI 코딩' 카테고리의 다른 글

Mac Mini를 라우터 외부에서 SSH로 로그인하는 방법 (0)	2025.12.18
Synology NAS Docker Compose 설치에서 운영까지 (1)	2025.12.03
[Claude] CLAUDE.md 완전 해부 - 프로젝트 관리 기반 실전 가이드 (3)	2025.11.21
파이썬 코딩에서 추천하는 네이밍 규칙 정리 (0)	2025.11.18
[개발환경] pyenv - Python 버전을 전환하면서 사용하기 (6)	2025.11.05