VS Code에서 Roo Code를 Bright Data Web MCP에 연결하기

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

Roo Code가 무엇이며 현재 IDE용 AI 코딩 에이전트 중 가장 널리 사용되는 이유
웹 상호작용 및 데이터 추출 기능을 추가하여 더욱 유용하게 활용하는 방법.
Visual Studio Code에서 Roo Code를 Bright Data Web MCP 서버와 연결하여 향상된 AI 코딩 에이전트를 만드는 방법.

시작해 보겠습니다!

Roo Code란 무엇인가요?

Roo Code는 편집기 내에 직접 상주하는 AI 기반 자율 코딩 에이전트입니다. 구체적으로 다음과 같은 기능을 수행합니다:

자연어로 소통할 수 있는 AI 기반 페어 프로그래머로 작동합니다.
작업 공간에서 직접 파일을 읽고 쓸 수 있습니다.
터미널 명령어를 실행합니다.
내장된 브라우저 통합 기능을 통해 브라우저 작업을 자동화합니다.
다양한 OpenAI 호환 또는 맞춤형 API/모델과 통합됩니다.
다양한 모드를 통해 “성격”과 기능을 조정합니다.
MCP 통합을 통해 타사 공급자와 연결하세요.

Roo Code는 Cline의 포크로 탄생했으며 오픈 소스 Visual Studio Code 확장 프로그램으로 제공됩니다. VS Code 내에서 직접 AI를 사용하여 코딩 작업을 자동화하고 개발 워크플로를 향상시킬 수 있습니다.

Cline과 달리 Roo Code는 작동에 계정이 필요하지 않습니다(기업용 추가 기능을 제공하는 Roo Cloud 플랫폼은 별도로 이용 가능). 자세한 내용은 Cline과 Bright Data의 Web MCP 서버 통합 가이드를 참조하세요.

현재 Roo Code 프로젝트는 GitHub에서 18,000개 이상의 스타를 보유하고 있으며, Visual Studio Code 마켓플레이스에서 750,000회 이상 설치되었습니다. 이는 IDE용 AI 코딩 에이전트 중 가장 널리 사용되는 솔루션 중 하나임을 의미합니다.

Web MCP를 Roo Code VS Code 확장 프로그램에 통합해야 하는 이유

Roo Code에서 구성하는 LLM은 모든 언어 모델의 공통적 한계인 ‘지식의 시의성’ 문제를 안고 있습니다. LLM은 훈련된 정적 데이터(과거의 스냅샷에 불과함)를 기반으로만 답변을 생성할 수 있습니다.

기술 세계가 얼마나 빠르게 진화하는지 고려할 때, 이 한계를 무시할 수 없습니다. LLM은 쉽게 구식 코딩 접근법이나 폐기된 메서드를 제안하거나 새로 도입된 기능을 완전히 놓칠 수 있습니다.

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

바로 이것이 Bright Data의 Web MCP 서버에서 찾을 수 있는 기능입니다. 이 오픈소스(현재 무료 티어 제공) MCP 서버는 실시간 웹 상호작용 및 데이터 수집을 위한 60개 이상의 AI 지원 도구를 제공합니다.

MCP 서버에서 가장 널리 사용되는 두 가지 도구는 다음과 같습니다:

도구	설명
`scrape_as_markdown`	단일 웹페이지 URL에서 고급 추출 옵션으로 콘텐츠를 스크랩하여 결과를 마크다운 형식으로 반환합니다. 봇 탐지 및 CAPTCHA를 우회할 수 있습니다.
`search_engine`	Google, Bing 또는 Yandex에서 검색 결과를 추출하여 JSON 또는 마크다운 형식의 SERP 데이터를 반환합니다.

또한, 웹 페이지와 상호 작용하고(예: scraping_browser_click) Amazon, Yahoo Finance, TikTok, LinkedIn 등 다양한 웹사이트에서 구조화된 데이터를 수집할 수 있는 55개 이상의 전문 도구가 있습니다. 예를 들어, web_data_amazon_product 도구는 유효한 제품 URL을 입력으로 받아 Amazon에서 상세하고 구조화된 제품 정보를 검색합니다.

Bright Data Web MCP + Roo Code의 활용 사례는 다음과 같습니다:

실시간 SERP 데이터를 가져와 VS Code 내에서 직접 마크다운 보고서에 컨텍스트 링크를 삽입하기.
작성 중인 코드에 기반한 튜토리얼 또는 문서 요청.
웹사이트에서 최신 공개 데이터를 스크래핑하여 모킹, 분석 또는 추가 처리를 위해 로컬에 저장.

이제 Roo Code 내에서 Web MCP가 작동하는 모습을 살펴보겠습니다!

Visual Studio Code에서 Roo Code를 Bright Data의 Web MCP에 연결하는 방법

이 가이드 섹션에서는 Visual Studio Code에 Roo Code를 추가하고 Bright Data의 Web MCP와 통합하는 방법을 배웁니다. 최종 결과는 웹에 접근하고 상호작용할 수 있는 AI 코딩 에이전트가 될 것입니다. 이러한 기능은 에이전트를 더욱 유능하고 정확하게 만들 것입니다.

구체적으로, 데이터 검색 기능을 갖춘 향상된 Roo Code AI 에이전트를 구축하고 이를 활용하여 다음을 수행할 것입니다:

실시간으로 아마존 제품 페이지를 스크래핑합니다.
데이터를 로컬에 저장합니다.
수집된 데이터를 불러와 처리하는 Python 스크립트 생성.

시작하려면 아래 단계를 따르세요!

필수 조건

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

Bright Data API 키
지원되는 LLM 제공업체 중 하나의 API 키 (이 가이드에서는 OpenRouter API 키를 사용합니다)

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

생성된 출력을 실행하려면 로컬에 Python이 설치되어 있어야 합니다.

1단계: Visual Studio Code에 Roo Code 설치

Visual Studio Code를 실행합니다. 왼쪽 사이드바의 “확장 프로그램” 아이콘을 클릭한 후 “Roo Code”를 검색하여 Roo Code 확장 프로그램을 선택합니다. Roo Code 확장 프로그램 탭에서 “설치” 버튼을 누릅니다:

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

Roo Code 제공자의 확장 프로그램을 처음 설치하는 경우 게시자를 신뢰하라는 메시지가 표시됩니다. 계속하려면 “게시자 신뢰 및 설치”를 클릭하세요.

설치가 완료되면 왼쪽 사이드바에 Roo Code 아이콘이 표시됩니다. 클릭하여 확장 프로그램을 엽니다:

Accessing the Roo Code extension section in VS Code

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

완료! 이제 VS Code에서 Roo Code를 사용할 수 있습니다.

2단계: OpenRouter 연결 설정

Roo Code 설치가 완료되었으므로 다음 단계는 LLM 제공자와 연결하는 것입니다. Roo Code는 Anthropic, Claude Code, AWS Bedrock, DeepSeek, Google Gemini, Groq, Hugging Face, LiteLLM, Mistral AI, Ollama, OpenAI, OpenRouter, Requesty, xAI (Grok) 등 다양한 제공자를 지원합니다.

이 가이드에서는 Roo Code를 OpenRouter에 연결하고 qwen/qwen3-coder:free 모델을 사용할 것입니다. 이 설정은 완전히 무료이므로 자금이나 크레딧이 필요하지 않습니다.

참고: 다른 공급자를 선호하거나 이미 다른 API 키를 보유하고 있다면, Roo Code 문서의 특정 통합 가이드를 따르세요.

OpenRouter 계정을 생성하고 API 키를 발급받으세요. 이 과정이 익숙하지 않다면 Qwen-Agent 튜토리얼에서 진행한 내용을 참고하세요.

Roo Code 확장 프로그램 패널에서 “OpenRouter” 버튼이 보일 때까지 아래로 스크롤하세요. 클릭하세요:

브라우저 창이 열리며 OpenRouter 계정에 로그인하고 Roo Code를 승인하라는 메시지가 표시됩니다. “Authorize”를 눌러 진행하세요:

Clicking “Authorize” to authorize the OpenRouter connection in Roo Code

VS Code로 돌아오면 연결 확인을 요청받게 됩니다. “열기”를 클릭하여 인증 절차를 완료하세요:

이제 Visual Studio Code에 다음과 같은 화면이 표시됩니다:

보시다시피 인증이 정상적으로 완료되었으며, Roo Code를 사용할 준비가 되었습니다!

기본적으로 Roo Code는 Claude Opus 4 모델을 사용합니다(이 모델을 사용하려면 유료 OpenRouter 계정이 필요합니다). 무료 모델(또는 다른 모델)로 전환하려면 상단 메뉴의 톱니바퀴 아이콘을 클릭하세요:

“설정” 탭에서 “모델” 드롭다운까지 아래로 스크롤한 후 구성할 모델을 선택하세요:

Integrating a different model in Roo Code

예를 들어, 코딩 시나리오에 최적화된 무료 사용 모델인 qwen/qwen3-coder:free를 선택하세요. 완료 후 “완료” 버튼을 클릭하여 변경 사항을 확인합니다.

훌륭합니다! 이제 VS Code에 Roo Code가 완전히 설정되었습니다. MCP 통합을 통해 웹 데이터 검색 및 상호작용 기능을 갖춘 코딩 에이전트로 만들어 보세요.

3단계: Bright Data의 웹 MCP 설치

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

공식 지침에 따라 Bright Data API 키를 생성하세요. 반드시 안전한 장소에 보관하십시오. 통합을 용이하게 하기 위해 관리자 권한이 있는 API 키를 사용한다고 가정하겠습니다.

터미널을 열고 @brightdata/mcp 패키지를 통해 웹 MCP를 전역으로 설치하세요:

npm install -g @brightdata/mcp

다음 Bash 명령어로 로컬 MCP 서버가 작동하는지 확인하세요:

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 서버를 실행합니다.

성공 시 아래 이미지와 같은 로그가 표시됩니다:

첫 실행 시 패키지는 Bright Data 계정에 두 개의 기본 영역을 자동으로 설정합니다:

mcp_unlocker: 웹 언로커용 영역.
mcp_browser: 브라우저 API용 영역입니다.

이 두 영역은 Web MCP가 제공하는 모든 도구에 접근하기 위해 필수적입니다.

위 영역이 생성되었는지 확인하려면 Bright Data 대시보드에 로그인하세요. “프록시 및 스크래핑 인프라” 페이지로 이동하면 두 영역이 나열되어 있어야 합니다:

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

참고: API 토큰에 관리자 권한이 없는 경우, 이 영역들이 자동으로 설정되지 않을 수 있습니다. 이 경우, 패키지의 GitHub 페이지에 문서화된 대로 대시보드에서 수동으로 생성하고 환경 변수를 통해 이름을 지정할 수 있습니다.

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

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

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

또는 PowerShell에서:

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

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

완벽합니다! 웹 MCP 서버가 여러분의 컴퓨터에서 작동함을 확인했습니다. 이제 Roo Code가 자동으로 서버를 실행하고 연결하도록 구성할 예정이므로 서버 프로세스를 종료하세요.

4단계: Roo Code를 Web MCP에 연결하기

이제 Roo Code 확장 프로그램을 Bright Data 웹 MCP에 연결할 차례입니다. Roo Code 패널 상단 메뉴에서 “MCP 서버” 옵션을 선택하세요:

“MCP 서버” 구성 섹션으로 이동합니다. 여기에서 글로벌 MCP 서버 (모든 프로젝트에서 사용 가능) 또는 로컬 MCP 서버 (현재 프로젝트에서만 사용 가능) 를 구성할 수 있습니다.

구성 절차는 거의 동일하므로 “글로벌 MCP 편집” 버튼을 클릭하세요. 그러면 빈 mcpServers 항목이 포함된 mcp_settings.json 파일이 열립니다:

이 구성 파일에서 Bright Data 웹 MCP에 연결하기 위한 세부 정보를 지정해야 합니다. 다음 코드가 포함되어 있는지 확인하세요:

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

이 구성에서:

mcpServers 객체는 Roo Code에 외부 MCP 서버를 시작하는 방법을 알려줍니다.
brightData 항목은 Web MCP를 실행하는 데 필요한 명령어(npx)와 환경 변수를 정의합니다. PRO_MODE는 선택 사항이지만, 활성화하면 사용 가능한 모든 도구를 사용할 수 있습니다.

다음과 같은 내용을 확인해야 합니다:

The populated mcp_settings.json file in VS Code

<YOUR_BRIGHT_DATA_API_KEY> 자리 표시자를 앞서 가져온 Bright Data API 키로 대체하세요.

이 구성은 Roo Code가 이전 단계에서 확인한 환경 변수와 함께 동일한 npx 명령을 실행하도록 지시합니다. 즉, Roo Code가 이제 Bright Data 웹 MCP 서버를 실행하고 연결할 수 있습니다. ( PRO_MODE 활성화는 선택 사항이지만 권장됩니다.)

mcpServers에 brightData 항목을 추가하면 Roo Code가 즉시 Web MCP 서버에 연결되어 사용 가능한 도구를 표시합니다:

The available tools in Roo Code from the Web MCP

PRO_MODE 환경 변수를 true로 설정했으므로 Roo Code는 이제 60개 이상의 도구에 대한 액세스를 제공합니다. PRO_MODE가 없으면 scrape_as_markdown 및 search_engine 두 도구만 사용할 수 있습니다.

“완료” 버튼을 클릭하면 웹 MCP를 Roo Code에 성공적으로 통합한 것입니다. 훌륭합니다!

단계 #5: Roo Code 에이전트 테스트

기본적으로 Roo Code는 Architect 모드로 실행되며, 이는 “시스템 설계 및 구현 계획 수립을 지원하는 숙련된 기술 리더이자 기획자” 역할을 합니다.

대부분의 경우 AI 페어 프로그래머로 활용하는 것이 좋습니다. 이를 위해 아래와 같이 Roo Code를 코드 모드로 전환하세요:

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

"https://www.amazon.com/Owala-FreeSip-Insulated-Stainless-BPA-Free/dp/B0F354MWSL/"에서 데이터를 스크래핑하여 로컬 "product.json" 파일에 저장하고, 해당 내용을 불러와 출력하는 Python "script.py" 스크립트를 생성하세요.

이는 분석, 시각화, 모킹 또는 기타 워크플로우를 위한 데이터 검색과 같은 실제 사용 사례를 시뮬레이션합니다.

Roo Code에서 프롬프트를 실행하면 다음과 유사한 결과를 확인할 수 있습니다:

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

Roo Code는 작업을 3단계 계획으로 분할합니다.
Amazon 제품 데이터를 가져오는 최선의 방법은 Web MCP의 web_data_amazon_product 도구를 사용하는 것으로 판단합니다.
스크래핑 도구 실행을 승인하라는 메시지가 표시됩니다.
도구가 실행되어 Amazon 제품 데이터가 JSON 형식으로 가져옵니다.
데이터를 로컬 product.json 파일에 저장할지 묻습니다.
승인 후 JSON 파일이 생성되고 데이터가 채워집니다.
Roo Code는 product.json의 내용을 읽고 출력하는 script.py 파일을 생성할 수 있는 권한을 요청합니다.
생성된 Python 코드가 포함된 파일이 생성됩니다.
python script.py로 스크립트를 실행하라는 메시지가 표시됩니다.
인코딩 문제로 인해 스크립트가 실패합니다.
Roo Code는 UTF-8 처리를 통해 스크립트를 업데이트할 것을 제안합니다.
승인 후 업데이트된 스크립트가 정상적으로 실행되어 예상 결과를 출력합니다.

원래 프롬프트에서 명시적으로 요청하지 않았음에도 Roo Code가 사전에 스크립트 실행을 제안한 점을 주목하십시오. 이는 에이전트가 결함을 감지하고 자체 출력을 개선하는 데 도움이 되어 유용했습니다.

플로우 완료 후 작업 디렉토리에는 다음 두 파일이 포함되어야 합니다:

├── product.json
└── script.py

VS Code에서 product.json을 엽니다:

The product.json file in Visual Studio Code

이 파일에는 실제 아마존 제품 데이터가 포함되어 있습니다—허구적이거나 조작된 출력이 아닙니다. 특히, 이 데이터는 아래 대상 제품 페이지에서 Bright Data의 web_data_amazon_product 도구(내부적으로 Amazon Scraper를 활용)를 사용하여 수집되었습니다:

참고: 아마존은 엄격한 봇 방지 보호 장치(예: 악명 높은 아마존 CAPTCHA)로 인해 스크래핑이 매우 어렵습니다. 표준 LLM만으로는 이 작업을 안정적으로 처리할 수 없습니다. 따라서 Roo Code와 Bright Data의 Web MCP를 결합해야 코딩 에이전트가 독보적인 성능을 발휘합니다.

이 파일은 선택된 LLM이 생성한 허구적 또는 가공된 콘텐츠가 아닌 실제 아마존 데이터를 포함합니다. 구체적으로, 데이터는 Bright Data가 web_data_amazon_product 도구(내부적으로 Amazon Scraper를 호출함)를 사용하여 수집했습니다.

생성된 script.py 파일에는 JSON 제품 데이터를 읽고 출력하는 로직이 포함되어 있습니다:

The script.py file in Visual Studio Code

위의 Python 스크립트를 다음과 같이 실행하세요:

python script.py

결과는 product.json에서 로드된 제품 데이터가 됩니다:

The output produced by the generated Python script

이것이 바로 Bright Data와 Roo Code의 힘입니다. 위 예시는 단순한 사용 사례일 뿐이니, 더 다양한 프롬프트로 실험해 보세요. Visual Studio Code 내에서 바로 고급 LLM 기반 데이터 워크플로를 탐색해 보십시오.

자, 이제 Bright Data의 MCP 통합을 Roo Code에서 완료했습니다.

결론

이 블로그 포스트에서는 Visual Studio Code에서 Roo Code를 Bright Data 웹 MCP 서버( 이제 무료 티어가 제공됩니다!)에 연결하는 방법을 살펴보았습니다. 그 결과 웹에서 데이터를 가져와 지능적으로 상호작용할 수 있는 풍부한 기능을 갖춘 AI 코딩 에이전트가 탄생했습니다.

이 향상된 에이전트를 활용해 아마존 제품 데이터에 접근하는 간단한 Python 스크립트를 생성해 보았습니다. 더 복잡한 프로젝트나 영감을 얻으려면 Web MCP가 제공하는 도구들이 다양한 에이전트 워크플로와 시나리오를 지원할 수 있다는 점을 기억하세요.

강력한 AI 에이전트를 구축하려면 Bright Data AI 인프라에서 제공하는 모든 서비스를 살펴보세요.

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

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