Bright Data MCP를 통한 웹 스크래핑으로 Cline AI 에이전트 성능 향상

이 블로그 글에서 여러분은 다음을 배우게 됩니다:

Cline이 무엇이며 코딩 커뮤니티에서 인기를 얻고 있는 이유.
AI 코딩 에이전트 통합으로 개발 경험을 한 단계 업그레이드하는 방법.
웹 데이터 검색 도구를 활용한 AI 코딩 에이전트 구축을 위해 Cline을 Bright Data Web MCP 서버에 연결하는 방법.

자, 시작해 보겠습니다!

Cline이란 무엇인가요?

Cline은 자율적인 AI 기반 코딩 어시스턴트 역할을 하는 Visual Studio Code 확장 프로그램입니다. 명령줄과 코드 편집기 모두와 통합되어 개발 과정 전반에 걸쳐 사용자를 지원합니다.

Cline VS Code 확장 프로그램은 기본적인 코드 완성 기능을 넘어섭니다. 프로젝트 구조 분석, 코드 생성 및 편집, 터미널 명령 실행, 심지어 웹 애플리케이션 디버깅까지 지원합니다.

Cline은 다양한 AI API를 지원하여 서로 다른 모델 및 공급자에 연결할 수 있습니다. 또한 MCP(Model Context Protocol)를 통해 맞춤형 AI 기반 도구를 추가하여 기능을 확장할 수 있습니다.

현재 Cline 확장 프로그램은 GitHub에서 48,000개 이상의 스타를 획득했으며, Visual Studio 마켓플레이스에서 190만 회 이상 다운로드되었습니다.

클라인 에이전트가 웹에서 데이터를 추출할 수 있어야 하는 이유는 무엇인가요?

Cline에 통합된 LLM이 아무리 강력하더라도, 모든 언어 모델이 공유하는 공통적인 한계인 ‘지식이 오래되었다’는 문제에 직면합니다. LLM은 훈련된 정적 데이터, 즉 과거의 스냅샷을 기반으로만 답변할 수 있습니다.

기술 세계가 얼마나 빠르게 진화하는지 고려하면 이는 더욱 큰 문제입니다. 그래서 LLM이 구식 코딩 접근법이나 폐기된 메서드를 제안하거나 최근 도입된 기능을 완전히 놓치는 경우가 드물지 않습니다.

이제 Cline AI 코딩 어시스턴트에게 최신 튜토리얼, 문서 페이지, 가이드를 가져와 학습할 수 있는 능력을 부여한다고 상상해 보십시오. 이는 웹 검색 및 데이터 접근 기능을 LLM에 확장하는 솔루션과 Cline을 통합함으로써 가능해집니다.

바로 이것이 Bright Data Web MCP 서버가 제공하는 기능입니다. 이 서버는 Bright Data의 AI 데이터 인프라를 기반으로 실시간 웹 데이터 수집을 위한 60개 이상의 AI 지원 도구 모음을 제공합니다.

Bright Data Web MCP 서버가 제공하는 전체 도구 목록은 문서를 참조하십시오.

기타 가능한 사용 사례는 다음과 같습니다:

텍스트 편집기로 VS Code를 사용할 때 실시간 SERP 데이터를 가져와 Markdown 보고서에 컨텍스트 링크를 삽입하기.
작성 중인 코드에 기반한 튜토리얼이나 문서를 요청하는 것.
모의 테스트나 추가 분석을 위해 실제 사이트에서 데이터를 즉석에서 스크래핑하여 로컬에 저장하기

이제 Cline 내에서 Bright Data Web MCP 서버가 실제로 작동하는 모습을 살펴보겠습니다. 위 사용 사례 중 하나를 통해 이 통합이 실제로 무엇을 가능하게 하는지 이해해 보겠습니다!

Cline에서 AI 코딩 에이전트에 데이터 검색 기능 추가하기

Visual Studio Code에 Cline을 추가하고 Bright Data Web MCP 서버와 통합하는 방법을 알아보세요. 이 단계별 섹션의 결과는 웹에서 데이터를 가져와 상호작용할 수 있는 AI 코딩 에이전트가 될 것입니다. 이를 통해 에이전트는 더 정확한 결과와 더 스마트한 작업 결과를 제공할 수 있게 됩니다.

특히, 데이터 검색 기능을 갖춘 향상된 Cline AI 에이전트를 구축하고 이를 활용하여 다음을 수행할 수 있습니다:

아마존 제품 페이지 스크래핑
데이터를 로컬에 저장합니다.
해당 데이터를 불러와 처리하는 Node.js 스크립트 생성

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

필수 조건

이 튜토리얼을 따라하려면 다음이 필요합니다:

로컬에 설치된 Node.js ( 최신 LTS 버전을 권장합니다)
Cline 계정
Bright Data API 키
(선택 사항) 선호하는 LLM용 API 키 (예: Google Gemini API 키)

Bright Data API 키나 Cline 계정이 아직 없더라도 걱정하지 마세요. 다음 단계에서 설정하는 방법을 안내해 드리겠습니다.

1단계: Visual Studio Code에 Cline 설치

Visual Studio Code를 열고 왼쪽 사이드바의 확장 프로그램 아이콘을 클릭한 후 “cline”을 검색하세요. 목록에서 Cline 확장 프로그램을 선택한 후 Cline 확장 프로그램 탭에서 “설치” 버튼을 클릭하세요:

Clicking the “Install” button to install Cline in VS Code

Cline에서 확장 프로그램을 처음 설치하는 경우 게시자를 신뢰하라는 메시지가 표시됩니다. “게시자 신뢰 및 설치”를 클릭하여 진행하세요:

설치가 완료되면 왼쪽 사이드바에 Cline 아이콘이 표시됩니다. 클릭하여 Cline 패널을 엽니다:

참고: Cline 아이콘이 표시되지 않으면 Visual Studio Code를 다시 로드해 보세요. 기타 문제 발생 시 공식 설치 문서 페이지를 참조하세요.

잘하셨습니다! Cline이 VS Code에 설치되었습니다.

2단계: Cline 연결 설정

이제 설치된 확장 프로그램에 Cline 계정을 연결해야 합니다. 이를 위해 “무료로 시작하기” 버튼을 클릭하세요:

Clicking the “Get Started for Free” button

브라우저에서 다음 페이지로 이동됩니다:

가입(또는 기존 계정이 있다면 로그인)하면 VS Code 창으로 다시 이동됩니다:

Cline's redirection page back to VS Code

Visual Studio Code에서 다음과 같은 모달 창이 표시됩니다. “열기”를 클릭하여 Cline 확장 프로그램 인증을 진행하세요:

Clicking “Open” to authenticate the Cline extension

이제 Cline 확장 프로그램은 다음과 같이 표시됩니다:

브라우저에서 Cline 계정으로 돌아가면 기본적으로 $0.50의 무료 크레딧이 제공되는 것을 확인할 수 있습니다:

Cline을 통해 프리미엄 LLM을 사용할 계획이라면 크레딧 추가를 고려하세요. (기본 잔액으로는 제한된 테스트만 가능하기 때문입니다.)

대안으로 비용 지출을 피하거나 자체 LLM 공급자를 선호하는 경우 API 키를 직접 연결할 수 있습니다. 이를 위해 Cline 패널의 톱니바퀴 아이콘을 클릭하세요. 다음으로 “API 구성”을 선택하고 API 키를 붙여넣어 LLM 통합을 설정하세요:

위 예시에서는 API를 통해 무료로 사용 가능한 gemini-2.5-flash 모델과 Cline을 통합했습니다.

훌륭합니다! 이제 Cline이 VS Code에 완전히 설정되어 웹 스크래핑 기능을 갖춘 AI 코딩 에이전트를 구축할 준비가 되었습니다.

3단계: Bright Data MCP 서버 설치

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

그런 다음 공식 지침에 따라 Bright Data API를 가져옵니다. 간편함을 위해 아래 지침은 관리자 권한이 있는 API 토큰을 사용한다고 가정합니다.

이제 Node.js 환경에서 Bright Data 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> 자리 표시자를 앞서 획득한 실제 Bright Data API로 대체하세요. 이 명령어는 필수 API_TOKEN 환경 변수를 설정하고 @brightdata/mcp npm 패키지를 사용하여 MCP 서버를 시작합니다.

모든 설정이 올바르게 완료되면 터미널에 다음과 유사한 내용이 표시됩니다:

The Bright Data Web MCP server startup logs

보시다시피, 명령어를 처음 실행할 때 @brightdata/mcp 패키지는 계정에 필요한 Bright Data 영역을 초기화합니다. 구체적으로, Web Unlocker용 영역 하나와 Scraping Browser API용 영역 하나를 생성합니다. 이 두 영역은 MCP 서버가 제공하는 모든 도구를 실행할 수 있게 합니다.

이를 확인하려면 Bright Data 대시보드에 로그인하여 “프록시 및 스크래핑 인프라” 페이지로 이동하세요. 다음과 같이 자동 생성된 존을 확인할 수 있습니다:

New zones created in Bright Data's dashboard

참고: 관리자 권한이 있는 API 토큰을 사용하지 않는 경우, 존을 수동으로 생성해야 합니다. 자세한 안내는 공식 문서를 참조하세요.

훌륭합니다! Bright Data 웹 MCP 서버가 완벽하게 작동합니다.

4단계: Cline을 Bright Data MCP 서버에 연결하기

이제 Cline 확장 프로그램을 로컬에서 실행 중인 Bright Data 웹 MCP 서버와 통합할 차례입니다. Cline 패널에서 “MCP 서버” 버튼을 클릭하여 시작하세요:

Clicking on "MCP Servers" in the upper right menu on Cline

Cline MCP 서버 구성 섹션으로 이동합니다. “설치됨” 탭으로 전환한 후 “MCP 서버 구성” 버튼을 클릭하세요:

Clicking on the "Configure MCP Servers" button

Visual Studio Code에서 cline_mcp_setting.json 파일이 열립니다. 여기서 Cline 확장 프로그램이 연결할 MCP 서버를 정의할 수 있습니다. Bright Data 웹 MCP 서버와 통합하려면 다음과 같이 구성하세요:

{
  "mcpServers": {
    "Bright Data": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 300,
      "type": "stdio",
      "command": "npx",
      "args": [
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API>"
      }
    }
  }
}

참고: 자세한 내용은 공식 GitHub 이슈를 참조하세요.

즉, mcpServers 필드 안에 “Bright Data” 구성을 추가하세요. <YOUR_BRIGHT_DATA_API> 를 실제 Bright Data API 토큰으로 반드시 교체해야 합니다.

다음과 같은 내용이 표시됩니다:

The JSON code for the MCP server connection

완벽합니다! 이제 “설치됨” 탭으로 이동하면 Bright Data Web MCP 서버 항목이 표시됩니다. 확장하여 지원하는 모든 도구를 확인하세요:

The Bright Data Web MCP server connected

여기서 Bright Data 웹 MCP 서버와 해당 도구를 구성할 수 있습니다. 이 워크플로에서는 기본 설정으로도 충분합니다.

자세한 내용은 공식 문서를 참고하세요.

좋습니다! 이제 Cline 확장 프로그램이 Bright Data Web MCP 서버에 연결하여 해당 도구를 활용할 수 있습니다.

5단계: Cline AI 에이전트 활용

이제 Visual Studio Code에서 Bright Data Web MCP 서버에 연결된 Cline AI 코딩 에이전트를 테스트할 준비가 되었습니다.

먼저 Cline을 엽니다. 그런 다음 오른쪽의 화살표를 클릭하여 “자동 승인 설정” 메뉴에 접근하세요. 메뉴에서 “MCP 서버 사용” 옵션을 선택하여 구성된 MCP 서버에 자동 연결을 허용합니다:

Turning on MCP Server usage in the settings

이 설정이 활성화되면 Cline은 권한 요청 없이 MCP 서버에 자동 연결됩니다. 도구 사용 전에는 여전히 확인 메시지가 표시되므로 이 정도면 충분합니다.

AI 코딩 에이전트의 데이터 접근 기능을 다음과 같은 프롬프트로 테스트해 보세요:

"https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/"에서 데이터를 스크래핑하여 로컬 data.json 파일에 저장하고, 해당 내용을 불러와 출력하는 Node.js index.js 스크립트를 생성하세요.

이는 분석, 모킹 또는 테스트를 위한 데이터 수집에 유용한 실제 시나리오를 보여줍니다.

Cline에서 프롬프트를 실행하면 다음과 같은 상호작용을 확인할 수 있습니다:

위 GIF는 속도를 높인 것이지만, 실제 발생 과정은 다음과 같습니다:

Cline 확장 프로그램이 프롬프트를 설정된 LLM(예: gemini-2.5-flash)으로 전송합니다.
LLM은 작업에 적합한 MCP 도구인 web_data_amazon_product를 식별합니다.
프로ンプ트에서 제공된 아마존 제품 URL( https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/)을 사용하여 Bright Data MCP를 통해 해당 도구를 실행할 수 있는 권한을 요청합니다.
사용자가 승인하면 Bright Data 서버에서 스크래핑 작업이 시작됩니다.
그런 다음 Cline은 작업 결과에 대한 접근 권한을 요청합니다.
백그라운드에서 Bright Data는 스크래핑 작업을 수행하고, Cline은 JSON 형식의 실제 제품 데이터를 수신합니다. 이것이 MCP 도구의 출력 결과이며, Cline이 이를 표시합니다.
데이터를 data.json 파일에 저장할 수 있는 권한을 요청받습니다.
승인 후 파일이 생성되고 데이터가 채워집니다.
JSON 내용을 읽고 출력하기 위한 index.js 스크립트를 생성하라는 메시지가 표시됩니다.
승인하면 파일이 생성됩니다.