Claude Code를 Bright Data 웹 MCP 서버에 연결하는 방법

이 튜토리얼에서는 다음을 배웁니다:

클로드 코드(Claude Code)가 무엇이며, 왜 가장 인기 있고 강력한 CLI 코딩 에이전트 중 하나로 여겨지는지.
웹 상호작용 및 데이터 추출 기능을 추가하면 어떻게 더욱 효과적으로 활용할 수 있는지.
Claude Code를 Bright Data Web MCP 서버와 연결하여 향상된 AI 코딩 에이전트를 만드는 방법.

자, 시작해 보겠습니다!

Claude Code란 무엇인가요?

Claude Code는 Anthropic에서 개발한 명령줄 인터페이스 도구로, 터미널 내에서 Claude 모델에 직접 접근할 수 있게 해줍니다. 이를 통해 복잡한 코딩 작업을 위임하고, 워크플로를 자동화하며, 다른 도구와 통합할 수 있습니다.

즉, AI 페어 프로그래머이자 코딩 에이전트 역할을 합니다. Claude Code는 프로젝트 컨텍스트 이해, 코드 생성, 테스트, 디버깅, Git 작업 수행 능력으로 두각을 나타냅니다. 주요 핵심 기능은 다음과 같습니다:

에이전트형 코딩: 복잡한 코딩 작업을 이해하고, 해결책을 모색하며, 워크플로우 내에서 직접 실행합니다.
워크플로 통합: MCP를 통해 다양한 도구 및 API와 연동합니다.
코드베이스 이해: 더 많은 컨텍스트를 반영한 코드 생성을 위해 코드베이스의 구조와 논리를 분석하고 이해합니다.
코드 생성 및 편집: 지시에 따라 새 코드 생성, 기존 코드 리팩토링, 버그 수정 수행.
테스트 및 린팅: 테스트 및 린팅 명령어를 실행하여 코드의 문제점을 식별하고 해결합니다.
Git 통합: 커밋, 푸시, 풀 리퀘스트 생성 등 Git 작업을 간소화합니다.

GitHub에서 3만 개 이상의 스타와 주간 500만 건 이상의 다운로드를 기록한 Claude Code는 가장 인기 있는 AI 페어 프로그래밍 솔루션 중 하나입니다. Claude 모델이 현재 코딩에 활용 가능한 최고의 대규모 언어 모델(LLM)로 평가받고 있다는 점을 고려하면 이는 놀라운 일이 아닙니다.

웹 접근성과 최신 데이터로 Claude Code를 확장해야 하는 이유

클로드 코드는 고급 클로드 모델로 구동되지만, 모든 LLM과 동일한 한계에 직면합니다: 지식은 정적입니다. 훈련 데이터는 특정 시점의 스냅샷을 나타내며, 이는 빠르게 구식이 됩니다. 소프트웨어 개발과 같이 빠르게 변화하는 분야에서는 특히 그렇습니다!

이제 Claude Code CLI 어시스턴트에게 다음과 같은 능력을 부여한다고 상상해 보세요:

최신 튜토리얼과 문서를 가져오고,
코드를 작성하는 동안 실시간 가이드를 참조하고,
로컬 파일을 탐색하듯 동적 웹사이트를 손쉽게 검색하는 능력.

바로 이것이 Bright Data의 Web MCP에 연결함으로써 가능해지는 기능입니다.

Bright Data의 Web MCP는 실시간 웹 상호작용 및 데이터 수집을 위해 구축된 60개 이상의 AI 지원 도구에 대한 접근을 제공합니다. 이 모든 것은 풍부한 Bright Data AI 인프라로 구동됩니다.

Bright Data의 Web MCP로 Claude Code를 확장할 때 가능한 몇 가지 기능은 다음과 같습니다:

최신 검색 엔진 결과를 가져와 노트나 문서에 직접 삽입하세요.
최신 튜토리얼이나 API 문서를 가져온 다음, 이를 바탕으로 작동하는 코드를 생성하거나 프로젝트 스캐폴딩을 수행하세요.
테스트, 모킹 또는 심층 분석을 위한 실시간 웹사이트 데이터를 수집합니다.

전체 도구 목록을 확인하려면 Bright Data MCP 문서를 살펴보세요.

이 통합 기능을 실제로 확인해 보려면 Claude Code 내에서 Web MCP가 어떻게 작동하는지 살펴보세요.

Claude Code를 Bright Data의 Web MCP에 연결하는 방법

로컬에 Claude Code를 설치 및 구성하고 Bright Data의 Web MCP와 통합하는 방법을 알아보세요. 결과적으로 확장된 코딩 에이전트는 다음을 수행하는 데 사용됩니다:

LinkedIn 프로필 페이지를 실시간으로 스크래핑합니다.
데이터를 로컬 JSON 파일에 저장합니다.
JSON 파일에서 읽은 모의 데이터를 반환하는 엔드포인트를 가진 Express 애플리케이션 생성.

아래 단계를 따라 진행하세요!

필수 조건

시작하기 전에 다음 사항을 확인하세요:

로컬에 Node.js 18 이상 설치 (최신 LTS 버전 권장).
Claude 구독 또는 크레딧이 있는 Anthropic 계정 (이 튜토리얼에서는 Anthropic 계정을 사용합니다).
API 키가 준비된 Bright Data 계정.

지금 당장 계정을 생성할 필요는 없습니다. 아래 단계에서 필요 시 설정을 안내해 드립니다.

다음은 선택 사항이지만 도움이 되는 배경 지식입니다:

MCP 작동 방식에 대한 일반적인 이해.
Bright Data 웹 MCP 서버 및 관련 도구에 대한 기본적인 이해.

1단계: Claude Code 설치 및 구성

Claude Code 사용을 시작하려면 먼저 Claude 구독 또는 일부 자금이 있는 Anthropic 계정이 필요합니다.

Claude/Anthropic Console 계정 준비가 완료되면 공식 @anthropic-ai/claude-code npm 패키지를 통해 Claude Code를 전역 설치하세요:

npm install -g @anthropic-ai/claude-code

다음으로 Claude Code를 실행할 프로젝트 폴더로 이동하여 다음 명령어로 시작합니다:

claude

기본 Claude 모델 또는 기타 설정을 구성하려면 공식 문서를 참조하세요.

CLI 에이전트를 처음 실행하는 경우 초기 설정 화면이 표시됩니다:

테마를 선택하고 Enter를 눌러 인증 화면으로 이동하세요:

사용할 인증 유형 (“구독이 있는 Claude 계정” 또는 “Anthropic Console 계정”) 을 선택하세요. 본 예시에서는 두 옵션 모두 절차가 유사하지만, 2번 옵션을 선택한 것으로 가정합니다.

다음 페이지에서 Claude Code를 Anthropic Console 계정에 연결하라는 안내가 표시됩니다:

Authorizing Claude Code in your Anthropic Console account

“Authorize” 버튼을 누르고 터미널로 돌아가세요. Anthropic Console 계정에서 새 API 키가 생성됩니다:

Claude Code는 해당 API 키를 구성 파일에 자동 저장하므로, 이후부터는 계속 로그인된 상태로 유지됩니다.

이제 현재 디렉토리에서 Claude Code 실행을 신뢰할지 묻는 프롬프트가 표시됩니다:

Trusting Claude Code in the current directory

긍정적인 옵션을 선택하면 Claude Code CLI에 대한 전체 접근 권한을 얻게 됩니다:

"refactor <파일 경로>" 시도 사각형에 코드 에이전트에 전달할 프롬프트를 작성할 수 있습니다.

훌륭합니다! Claude Code 설정이 완료되어 사용 준비가 되었습니다.

2단계: Bright Data의 웹 MCP 시작하기

아직 계정이 없다면 Bright Data 계정을 생성하세요. 이미 계정이 있다면 로그인하세요.

다음으로 공식 지침에 따라 Bright Data API 키를 생성하세요. 간편함을 위해 본 튜토리얼에서는 관리자 권한이 부여된 API 키를 사용한다고 가정합니다.

다음 명령어를 사용하여 @brightdata/mcp 패키지를 통해 Web MCP를 전역으로 설치하세요:

npm install -g @brightdata/mcp

그런 다음 다음 Bash 명령어로 서버가 작동하는지 테스트하세요:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcp

Windows PowerShell에서는 다음 명령어가 동일합니다:

$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; npx -y @brightdata/mcp

<YOUR_BRIGHT_DATA_API> 를 앞서 생성한 실제 API 토큰으로 반드시 교체하세요. 두 명령어 모두 필수 API_TOKEN 환경 변수를 설정하고 @brightdata/mcp npm 패키지를 통해 MCP 서버를 실행합니다.

모든 것이 정상적으로 작동하면 다음과 유사한 로그를 확인할 수 있습니다:

처음 실행 시 MCP 서버는 Bright Data 계정에 두 개의 기본 영역을 자동으로 생성합니다:

mcp_unlocker: 웹 언락커용 영역.
mcp_browser: 브라우저 API용 영역.

이 영역들은 MCP 서버 도구의 전체 기능을 이용하기 위해 필수적입니다.

존이 생성되었는지 확인하려면 Bright Data 대시보드에 로그인한 후 “프록시 및 스크래핑 인프라” 페이지로 이동하세요. 두 존이 모두 표시되어야 합니다:

The mcp_unlocker and mcp_browser zones created by the MCP server at startup

참고: API 토큰에 관리자 권한이 없는 경우, 해당 영역이 자동으로 생성되지 않을 수 있습니다. 이 경우 공식 문서에 설명된 대로 환경 변수를 사용하여 영역 이름을 지정하고 수동으로 생성할 수 있습니다.

기본적으로 MCP 서버는 search_engine 및 scrape_as_markdown 도구만 노출하며, 이 도구들은 무료로도 사용할 수 있습니다.

브라우저 자동화 및 구조화된 데이터 추출과 같은 고급 기능을 사용하려면 프로 모드를 활성화해야 합니다. 이를 위해 MCP 서버 실행 전에 PRO_MODE=true 환경 변수를 설정하세요:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcp

또는 Windows의 경우:

$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; $Env:PRO_MODE="true"; npx -y @brightdata/mcp

중요: 프로 모드를 선택하면 60개 이상의 모든 도구를 이용할 수 있습니다. 동시에 프로 모드는 무료 요금제에 포함되지 않으며 추가 요금이 부과됩니다.

훌륭합니다! 웹 MCP 서버가 컴퓨터에서 정상적으로 실행되는지 확인했습니다. 다음 단계에서 Claude Code가 서버를 자동으로 실행하도록 구성할 예정이므로, 이제 서버를 중지해도 됩니다.

3단계: Claude Code에서 웹 MCP 구성

Claude Code는 MCP 서버에 연결하는 여러 방법을 지원합니다. 이 튜토리얼에서는 두 가지 방법을 다룹니다:

mcp add 명령어 사용
MCP .json 구성 파일 사용.

Claude Code 설치 환경에서 웹 MCP 서버를 전역적으로 구성하려면 다음 명령을 실행하세요:

claude mcp add brightData 
  --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> 
  --env PRO_MODE=true 
  -- npx -y @brightdata/mcp

또는 Windows PowerShell에서 동등하게 실행:

claude mcp add brightData --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> --env PRO_MODE=true -- -- npx -y @brightdata/mcp

두 명령어 모두 Claude Code에 brightData라는 사용자 정의 MCP 서버를 추가하도록 지시합니다. 이는 지정된 npx 명령어와 환경 변수를 통해 실행됩니다. 즉, Claude Code가 이제 Bright Data 웹 MCP 서버에 자동으로 연결할 수 있게 됩니다. ( PRO_MODE 환경 변수 활성화는 필수가 아님을 기억하세요.)

명령 실행 후 다음과 유사한 출력이 표시됩니다:

The output produced by the mcp add command

이는 MCP 서버가 Claude Code의 글로벌 구성 파일에 추가되었음을 확인해 줍니다.

대신 MCP 구성을 프로젝트에 로컬로 유지하려면 아래 내용으로 mcp_servers.json 파일을 생성하세요:

{
  "mcpServers": {
    "brightData": {
      "command": "npx",
      "args": [
        "-y",
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API_KEY>",
        "PRO_MODE": "true"
      }
    }
  }
}

이 구성에서:

mcpServers 객체는 Claude Code에 외부 MCP 서버를 시작하는 방법을 알려줍니다.
brightData 항목은 웹 MCP 실행에 필요한 명령어와 환경 변수를 정의합니다. PRO_MODE 설정은 선택 사항이지만 권장됩니다.

그런 다음 --mcp-config 플래그를 사용하여 Claude Code에 위 구성 파일을 로드하도록 지시합니다:

claude --mcp-config mcp_servers.json

중요: 인증을 활성화하려면 <YOUR_BRIGHT_DATA_API_KEY> 를 실제 Bright Data API 토큰으로 대체하세요.

완벽합니다! 이제 Claude Code 내에서 MCP 통합을 테스트할 준비가 되었습니다.

4단계: MCP 연결 확인

mcp add 또는 --mcp-config를 사용하여 MCP 통합을 구성했는지 여부에 관계없이 Claude Code가 Bright Data 웹 MCP 서버에 실제로 연결할 수 있는지 확인해야 합니다.

연결을 확인하려면 Claude Code CLI를 실행하고 /mcp 명령어를 입력하세요. 모든 것이 정상적으로 작동한다면 다음과 같은 출력이 표시됩니다:

Claude Code successfully connected to the brightData MCP

보시다시피, 로컬 CLI 인스턴스가 구성된 brightData MCP 서버에 성공적으로 연결되었습니다. 잘하셨습니다!

단계 #5: Claude Code에서 작업 실행하기

Claude Code 코딩 에이전트의 기능을 테스트하려면 다음과 같은 프롬프트를 실행하세요:

"https://it.linkedin.com/in/antonello-zanini"에서 데이터를 스크래핑하고 출력을 "profile.json"이라는 로컬 파일에 JSON 형식으로 저장합니다. 그런 다음 LinkedIn 프로필을 나타내는 슬러그를 받아 "profile.json"의 내용을 반환하는 엔드포인트가 있는 간단한 Express.js 프로젝트를 생성합니다.

이는 실제 데이터를 수집하여 Express API를 모의 테스트하는 실제 사용 사례를 나타냅니다.

프롬프트를 Claude Code에 붙여넣고 Enter를 눌러 실행하세요. 다음과 유사한 동작을 확인할 수 있습니다:

GIF는 속도를 높였지만, 단계별로 진행되는 과정은 다음과 같습니다:

Claude Code는 프롬프트를 4단계 작업으로 분해합니다.
LLM은 프롬프트에서 추출한 올바른 인자(url: "https://it.linkedin.com/in/antonello-zanini")를 사용하여 적절한 MCP 도구(web_data_linkedin_person_profile)를 선택합니다.
도구 실행을 수락하라는 메시지가 표시됩니다.
승인되면 MCP 통합을 통해 스크래핑 작업이 시작됩니다.
결과 데이터는 원시 형식(즉, JSON)으로 표시됩니다.
Claude Code는 데이터를 profile.json이라는 로컬 파일에 저장할 수 있는 권한을 요청합니다.
승인 후 파일이 생성되고 데이터가 채워집니다.
Node.js Express 프로젝트용 package.json 파일을 생성하라는 메시지가 표시됩니다.
승인 후 package.json 파일이 현재 디렉터리에 추가됩니다.
필요한 API 엔드포인트로 Express 서버를 정의하는 server.js의 코드가 표시되고, 이를 생성할 수 있는 권한을 요청합니다.
승인하면 server.js 파일이 생성됩니다.
프로젝트의 종속성을 설치하고 Express 서버를 시작하는 명령어가 표시됩니다.

이 예시에서 작업이 생성하는 최종 출력은 다음과 같습니다:

The final instructions produced by Claude Code

작업이 완료되면 작업 디렉터리에는 다음 세 개의 파일이 포함되어야 합니다:

├── package.json
├── profile.json
└── server.js

훌륭합니다! 이제 생성된 파일이 예상대로 작동하는지 확인해 보겠습니다.

6단계: 출력 결과 살펴보기

Visual Studio Code에서 프로젝트 디렉터리를 열고 profile.json 파일을 먼저 살펴보세요:

이 파일에는 Claude LLM이 생성한 허구적 내용이 아닌 실제 LinkedIn 데이터가 포함되어 있습니다. 구체적으로, 이 데이터는 Bright Data가 다음 공개 LinkedIn 프로필 페이지에서 web_data_linkedin_person_profile 도구(내부적으로 LinkedIn Scraper를 호출함)를 사용하여 수집한 것입니다:

참고: LinkedIn은 강력한 봇 방지 기능으로 인해 스크래핑이 매우 어렵습니다. 일반적인 LLM은 이 작업을 안정적으로 수행할 수 없으며, 이는 Bright Data Web MCP 통합 덕분에 여러분의 코딩 에이전트가 얼마나 강력해졌는지 증명합니다.

다음으로 package.json 파일을 살펴보세요:

이 파일은 Node.js 프로젝트를 정의하는 데 필요한 종속성(예: express)을 나열합니다.

마지막으로 server.js 파일을 검토하세요:

프롬프트에 명시된 대로 필요한 API 엔드포인트가 코드에 정의되어 있음을 확인하세요. 구체적으로, /profile/:slug 엔드포인트는 profile.json 에서 LinkedIn 프로필 데이터를 불러오고 LinkedIn ID(여기서는 슬러그로 사용됨)를 기반으로 올바른 프로필을 반환합니다.

대단합니다! 생성된 파일들이 견고해 보입니다. 마지막 단계는 Express 애플리케이션이 원하는 대로 동작하는지 테스트하는 것입니다.

7단계: 생성된 프로젝트 테스트

출력된 Claude Code의 지침을 따르세요. 먼저 프로젝트 종속성을 설치합니다:

npm install

그런 다음 다음 명령어로 Express 서버를 시작하세요:

npm start

이제 서버가 localhost에서 대기 중입니다. curl을 사용하여 /profile/:slug API 엔드포인트를 테스트하세요:

curl http://localhost/profile/antonello-zanini

또는 Postman과 같은 시각적 HTTP 클라이언트에서:

Testing the target API endpoint in Postman

참고: 결과에는 profile.json에서 읽은 올바른 LinkedIn 데이터가 포함되어야 합니다.

자, 이제 완료되었습니다! Claude Code와 Bright Data Web MCP 통합 덕분에 API 모킹이 성공적으로 수행되었습니다.

이 예시는 Claude Code와 Web MCP를 결합한 강력한 기능을 보여줍니다. 이제 다양한 프롬프트로 실험해보고 CLI에서 직접 고급 LLM 기반 데이터 워크플로를 탐색해 보세요!

결론

이 글에서는 Claude Code를 Bright Data Web MCP 서버(이제 무료 티어가 제공됩니다!)에 연결하는 방법을 배웠습니다. 그 결과 웹에 접근하고 상호작용할 수 있는 강력한 AI 코딩 에이전트가 탄생했습니다.

이 통합은 Claude Code의 내장된 MCP 지원 덕분에 가능했습니다. 더 고급 코딩 에이전트를 구축하려면 Bright Data AI 인프라에서 제공하는 모든 서비스를 살펴보세요. 이 도구들은 다양한 에이전트 시나리오를 지원할 수 있습니다.

지금 바로 Bright Data 계정을 무료로 생성하고 AI 지원 웹 도구로 실험을 시작해 보세요!

문의하기 무료 체험 시작하기

Bright Data의 Web MCP와 Claude Code 통합