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

Kilo Code가 무엇이며, 왜 VS Code용 강력한 AI 코딩 어시스턴트인지.
웹 데이터 기능(Bright Data의 Web MCP를 통해)을 통합하면 Kilo Code가 더욱 유용해지는 이유.
실시간 웹 접근이 가능한 향상된 AI 코딩 에이전트를 만들기 위해 Kilo Code를 Bright Data의 Web MCP와 단계별로 연결하는 방법.

시작해 보세요!

필수 준비 사항

다음과 같은 환경이 필요합니다:

컴퓨터에 설치된Visual Studio Code (최신 버전 권장).
Node.js 및 npm 설치 (Bright Data Web MCP는 npm 패키지로 배포됨).
Bright Data 계정 및 API 키.
LLM 공급자용 API 키. Kilo Code는 다양한 공급자(OpenAI, Anthropic 등)를 지원합니다.
(선택 사항) 컴퓨터에 설치된 Python. Kilo Code가 테스트 중 생성하는 예제 Python 스크립트를 실행하려는 경우에만 필요합니다.

아직 Bright Data API 키가 없더라도 걱정하지 마세요. 생성 방법을 안내해 드리겠습니다. 하지만 그 전에 Kilo Code가 정확히 무엇인지 살펴보겠습니다.

Kilo Code(및 Kilo Code가 탑재된 VS Code)란 무엇인가요?

Kilo Code는 VS Code 확장 프로그램으로 작동하는 오픈소스 AI 코딩 어시스턴트로, Cline 및 Roo Code와 같은 인기 도구의 최고의 기능을 결합하고 독특한 향상 기능을 추가합니다.

편집기 내에서 마치 AI 개발 팀 전체가 함께 일하는 것처럼, 자연어 사용으로 코드 생성, 리팩토링, 디버깅, 심지어 작업 자동화까지 지원합니다. 핵심적으로 다음과 같은 기능을 수행합니다:

평범한 영어로 대화하며 코드 계획이나 작성을 돕는 AI 페어 프로그래머 역할을 수행합니다.
프로젝트 파일을 읽고 변경하며, 필요 시 새 파일을 생성하거나 터미널 명령을 실행합니다.
다중 모드(예: 설계자, 코더, 디버거 모드)를 통해 AI의 “성격”을 조정할 수 있습니다. 각 모드는 계획, 코딩, 문제 해결을 위한 AI의 행동을 안내합니다.
다양한 AI 모델 제공업체(OpenAI, Anthropic, OpenRouter, Ollama 같은 로컬 LLM 등)와 통합되어 기본 모델을 선택할 수 있습니다.
모델 컨텍스트 프로토콜(MCP)을 통해 외부 도구와 연결하여 Kilo Code가 웹 API 및 맞춤형 서비스를 활용해 확장된 기능을 사용할 수 있도록 합니다.

Kilo Code는 다른 오픈소스 프로젝트( Roo Code 및 Cline 에이전트에서 진화)를 기반으로 구축되었지만, 지금까지 독자적인 길을 성공적으로 개척해 왔습니다. Gemini 2.5 Pro, Claude 4 Sonnet & Opus, GPT-5를 포함한 400개 이상의 AI 모델을 지원하며, 외부 API 및 데이터 소스와의 연결도 가능해 웹 데이터 통합에 완벽한 플랫폼입니다.

웹 MCP를 Kilo Code에 통합해야 하는 이유는?

모든 AI 코딩 어시스턴트와 마찬가지로 Kilo Code의 기반이 되는 대규모 언어 모델(LLM)은 지식의 시의성 문제점을 안고 있습니다.

LLM은 훈련된 정적 데이터(본질적으로 과거의 스냅샷)를 기반으로만 답변을 생성할 수 있습니다. 이는 AI가 최신 프레임워크를 놓치거나, 폐기된 함수를 제안하거나, 최신 모범 사례를 따르지 않는 코드를 생성할 수 있음을 의미합니다.

이제 Kilo Code 에이전트에게 웹에서 최신 튜토리얼, 문서, 예제를 실시간으로 가져와 학습할 수 있는 능력을 부여한다고 상상해 보십시오. 웹 검색과 실시간 데이터 추출을 통합함으로써 Kilo Code는 최신 정보로 문제를 해결할 수 있습니다. 예를 들어 새로 출시된 라이브러리의 문서나 특정 오류 메시지에 대한 최신 Stack Overflow 답변을 가져오는 식입니다.

바로 이것이 Bright Data의 Web MCP 서버가 가능하게 하는 것입니다.

Bright Data의 Web MCP 서버는 강력한 모델 컨텍스트 프로토콜 구현체로, 공개 웹 접근을 위한 올인원 솔루션을 제공하며 현재 월 5,000건의 무료 요청 티어를 지원합니다.

다시 말해, Kilo Code의 AI가 프로그래밍 방식으로 제어할 수 있는 “웹 브라우저 + 데이터 스크레이퍼” 와 같습니다. MCP 서버는 인터넷 검색, 웹사이트 탐색, 구조화된 데이터 추출을 위한 도구를 노출하며, AI 에이전트가 호출할 수 있는 간단한 API를 통해 모두 수행됩니다. 가장 일반적으로 사용되는 MCP 도구 몇 가지는 다음과 같습니다:

search_engine: 실시간 웹 검색(Google, Bing, Yandex)을 수행하고 검색 결과(제목, 스니펫, URL)를 JSON/Markdown 형식으로 반환합니다. 이를 통해 AI가 실시간으로 관련 웹 페이지나 답변을 찾을 수 있습니다. 모든 사용 사례에 대해 최적의 SERP API 도구 선택 방법은 여기에서 확인하세요.
scrape_as_markdown: 주어진 웹페이지의 콘텐츠를 추출하며, 봇 및 CAPTCHA 우회 옵션이 제공되고 텍스트를 깔끔한 마크다운 형식으로 반환합니다. 이를 통해 AI가 기사나 문서 페이지를 읽고 해당 정보를 활용하여 작업을 지원할 수 있습니다.

Kilo Code를 Bright Data의 MCP에 연결하면 AI 코더가 웹에서 직접 보고 조작할 수 있는 능력을 부여합니다. 검색, 클릭, 스크래핑을 워크플로우의 일부로 수행할 수 있어 훨씬 더 능동적이고 정확해집니다. 다음으로 이 통합 설정 방법을 단계별로 안내하겠습니다.

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

1단계: VS Code에 Kilo Code 설치

VS Code 확장 프로그램 마켓플레이스를 통해 Kilo Code를 간단히 설치할 수 있습니다. Visual Studio Code를 열고 확장 프로그램 패널에 접근하세요. 설치 완료 후 확장 프로그램 활성화를 위해 VS Code 재시작을 요청받을 수 있습니다. 이제 VS Code 사이드바(일반적으로 인터페이스 왼쪽)에 표시되는 Kilo Code 아이콘을 찾으세요.

2단계: LLM 공급자 구성

Kilo Code 설치 후 사이드바의 Kilo Code 아이콘을 클릭하여 메인 패널을 엽니다. VS Code 창 왼쪽에 인터페이스가 표시되며, Kilo Code의 모든 기능과 설정 옵션에 접근할 수 있습니다.

Kilo Code는 다양한 선호도와 예산을 가진 사용자에게 유연성을 제공하기 위해 AI 모델에 접근할 수 있는 여러 경로를 제공합니다.

신규 사용자에게 가장 편리한 방법은 내장된 크레딧 시스템을 이용하는 것입니다. Kilo Code 패널에서 “Google로 연결”을 클릭하여 계정을 인증하세요. 이 과정은 계정에 $20 상당의 무료 크레딧을 자동으로 적용하여 별도의 API 키 없이도 400개 이상의 AI 모델을 즉시 이용할 수 있게 합니다.
대신 자체 API 키 사용을 선호하는 경우, Kilo Code 사이드바의 톱니바퀴 아이콘을 클릭하고 ‘모델 제공자’ 섹션으로 이동하세요. 여기에서 Anthropic (Claude 모델용), OpenAI (GPT 모델용), Google (Gemini 모델용) 또는 OpenRouter 호환 서비스를 포함한 다양한 제공자의 API 키를 추가할 수 있습니다.

모델 제공업체 설정이 완료되면 사용 가능한 옵션 중 선호하는 모델을 선택하세요. 복잡한 추론 작업에는 GPT-4, 상세한 코드 분석에는 Claude-3, 다중 모달 기능에는 Gemini를 선택할 수 있습니다.

모든 것이 정상적으로 작동하는지 확인하려면 “안녕하세요, 코딩을 도와줄 수 있나요?” 와 같은 간단한 테스트 메시지를 보내보세요. AI가 즉시 응답하여 모델 연결이 제대로 작동함을 확인시켜 줄 것입니다.

3단계: Bright Data의 웹 MCP 설치

Kilo Code에 AI 모델이 설정되었으므로 웹 브라우징 및 데이터 추출 기능을 확장할 수 있습니다.

MCP 서버 설치 전 Bright Data API 토큰을 획득해야 합니다. brightdata.com으로 이동하여 무료 계정을 생성하세요. 첫 3개월 동안 월 5,000건의 무료 요청이 제공됩니다. 계정 생성 후 안내에 따라 이메일 주소를 인증하세요.
로그인 후 계정 설정에서 API 토큰을 찾아 복사하세요. 이 토큰은 MCP 서버 인증 자격 증명 역할을 하며 다음 구성 단계에서 필요합니다. 설정 과정에서 참조해야 하므로 토큰을 안전하게 보관하고 쉽게 접근할 수 있도록 하세요.
API 토큰을 안전하게 보관한 후 터미널 또는 명령 프롬프트를 열어 시스템에 Bright Data Web MCP 패키지를 전역적으로 설치하세요. 다음 명령어를 실행하십시오:

npm install -g @brightdata/mcp

이 전역 설치로 MCP 서버가 시스템 전체에서 사용 가능해지며, 현재 프로젝트 디렉터리와 무관하게 Kilo Code에서 접근할 수 있습니다.

설치가 성공했는지 확인하려면 다음을 실행하세요:

npx @brightdata/mcp --version

버전 2.5.0 이상이 표시되면 최신 버전의 MCP 서버가 정상적으로 설치되어 사용 준비가 완료된 것입니다.

4단계: Kilo Code를 웹 MCP에 연결하기

이제 새로 설치한 Bright Data 웹 MCP 서버에 Kilo Code를 연결하는 중요한 단계입니다. Kilo Code는 MCP 서버 연결에 STDIO 및 SSE 전송 방식을 모두 지원하지만, 최적의 로컬 성능과 안정성을 위해 STDIO 방식을 사용할 것입니다.

Kilo Code 패널에서 톱니바퀴 아이콘을 클릭하고 MCP 서버 섹션으로 이동하세요. “글로벌 MCP 편집” 옵션을 찾아 서버 연결을 정의할 구성 파일을 엽니다. 이 파일은 JSON 형식을 사용하며 필요 시 여러 MCP 서버를 지정할 수 있습니다.

Bright Data의 웹 MCP에 연결하려면 다음 구성을 추가하세요:

{
  "mcpServers": {
    "Bright Data Web": {
      "command": "npx",
      "args": ["@brightdata/mcp"],
      "env": {
        "API_TOKEN": "YOUR_BRIGHT_DATA_API_TOKEN_HERE"
      },
      "disabled": false,
      "alwaysAllow": ["search_engine", "scrape_as_markdown"],
      "timeout": 180
    }
  }
}

"YOUR_BRIGHT_DATA_API_TOKEN_HERE"를 Bright Data 계정에서 복사한 실제 API 토큰으로 대체하세요. "alwaysAllow" 배열은 기본 검색 및 스크래핑 도구를 사전 승인하여 일반 사용 시 마찰을 줄이고, 180초의 타임아웃 설정은 느린 웹 스크래핑 작업 중 조기 타임아웃을 방지합니다.

MCP 서버 동작을 더 세밀하게 제어해야 하는 사용자를 위해 Bright Data는 여러 고급 구성 옵션을 제공합니다. 이 확장된 구성은 기업 사용자나 특정 요구 사항이 있는 사용자에게 추가적인 유연성을 제공합니다:

{
  "mcpServers": {
    "Bright Data Web": {
      "command": "npx",
      "args": ["@brightdata/mcp"],
      "env": {
        "API_TOKEN": "YOUR_BRIGHT_DATA_API_TOKEN_HERE",
        "RATE_LIMIT": "100/1h",
        "PRO_MODE": "false",
        "WEB_UNLOCKER_ZONE": "optional_custom_zone",
        "BROWSER_ZONE": "optional_custom_browser_zone"
      },
      "disabled": false,
      "timeout": 180
    }
  }
}

속도 제한 기능을 사용하면 "100/1h" (시간당 100회 요청), "50/30m" (30분당 50회 요청), "10/5s" (5초당 10회 요청)와 같은 형식으로 요청 빈도를 제어할 수 있습니다. PRO_MODE를 "true" 로 설정하면 60가지 고급 도구 전체에 대한 접근 권한이 해제되지만, 무료 티어를 초과하는 추가 요금이 발생할 수 있습니다. 영역 구성은 선택 사항이며 주로 맞춤형 프록시 요구 사항이 있는 기업 고객에게 유용합니다.

보안 강화 및 관리 편의성을 위해 API 토큰을 설정 파일에 하드코딩하지 말고 환경 변수로 저장하는 것을 고려하십시오. 프로젝트 루트에 다음 내용을 포함한 .env 파일을 생성하세요:

API_TOKEN=your_actual_api_token_here
RATE_LIMIT=100/1h
PRO_MODE=false

그런 다음 MCP 구성에서 ${VARIABLE_NAME} 형식으로 이러한 변수를 참조하세요. 이 접근 방식은 민감한 자격 증명을 구성 파일에서 제외하고 개발, 스테이징, 프로덕션 환경 전반에 걸쳐 서로 다른 토큰을 더 쉽게 관리할 수 있게 합니다.

팀 협업이나 로컬 MCP 서버 설치가 어려운 원격 개발 환경을 위해 Bright Data는 원격 SSE 전송 옵션도 제공합니다:

{
  "mcpServers": {
    "Bright Data Remote": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.brightdata.com/mcp?token=YOUR_API_TOKEN_HERE"
      ],
      "disabled": false,
      "timeout": 300
    }
  }
}

이 구성은 Bright Data의 호스팅된 MCP 엔드포인트에 직접 연결하여 로컬 서버 설치 없이 동일한 기능을 제공합니다.

기본 구성은 Bright Data의 무료 계층을 사용하며, search_engine 및 scrape_as_markdown과 같은 기본 도구에 대한 액세스를 포함합니다. 이러한 도구는 대부분의 웹 데이터 통합 요구 사항에 충분하며 월 5,000건의 요청 허용량 내에서 탁월한 가치를 제공합니다.

PRO_MODE를 활성화하면 고급 브라우저 자동화 및 구조화된 데이터 추출 기능을 포함한 60개의 전문 도구 전체를 이용할 수 있지만, 무료 티어 한도를 초과할 경우 추가 요금이 부과될 수 있습니다.

Ctrl+S 또는 Cmd+S로 구성 파일을 저장한 후, 새 MCP 서버가 제대로 로드되도록 VS Code를 완전히 재시작하세요. 재시작 후 Kilo Code MCP 설정 패널을 확인하면 “Bright Data Web”이 “실행 중” 상태로 표시되어 연결이 성공했음을 알 수 있습니다.

단계 #5: 향상된 Kilo Code 에이전트 테스트

Kilo Code와 Bright Data Web MCP 통합이 완료되었으므로 모든 것이 정상적으로 작동하는지 확인할 차례입니다.

Kilo Code 패널을 열고 MCP 서버 연결이 활성화되었는지 확인하세요. Bright Data Web 서버가 정상적으로 실행 중임을 확인하는 연결 표시기나 상태 메시지를 찾으세요.

스크래핑 기능에 대한 고급 테스트를 위해 다음 요청을 시도해 보세요: “CoinGecko에서 비트코인의 현재 가격 가져오기” 및 요청 라이브러리를 위한 빠른 참조 가이드 생성. 이 테스트는 scrape_as_markdown 도구를 실행하고 실시간 문서 액세스의 힘을 보여줍니다.

스크래핑 기능에 대한 도구 승인 프롬프트가 표시된 후, 실시간 CoinGecko 웹사이트에서 콘텐츠가 추출되고, 마지막으로 최신 예제와 함수 시그니처가 포함된 빠른 참조 가이드가 생성되는 것을 확인할 수 있습니다.

고급 사용 사례 및 예시

이 통합은 AI 어시스턴트가 Stack Overflow의 최신 해결책, 실시간 API 문서, 최근 GitHub 토론을 가져올 수 있도록 하여 동적 문제 해결을 가능하게 합니다. Kilo Code와 Bright Data의 조합을 활용하여 다음과 같은 작업을 수행할 수 있습니다:

동적 API 문서 통합
실시간 시장 데이터 분석
경쟁사 분석 자동화

기업 팀은 강력한 데이터 통합을 통해 비즈니스 인텔리전스를 자동화할 수 있습니다. 금융 서비스는 “주요 거래소별 암호화폐 가격 추적 및 거래 대시보드 생성” 과 같은 요청으로 실시간 시장 데이터를 모니터링할 수 있습니다. 마케팅 팀은 “경쟁사 가격 페이지 모니터링 및 변경 시 알림”을 요청하여 경쟁사 분석을 자동화할 수 있습니다.

이러한 애플리케이션은 일상적인 비즈니스 작업을 실행 가능한 인사이트를 제공하는 자동화된 AI 기반 프로세스로 전환합니다.

문제 해결 및 팁

설정 방법이 잘 문서화되어 있더라도 Kilo Code를 Bright Data의 Web MCP에 처음 연결할 때 사소한 문제가 발생하는 경우가 흔합니다. 다행히 대부분의 문제는 원인을 파악하면 진단과 해결이 간단합니다.

일반적인 설치 문제

설치 후 Kilo Code 패널이 표시되지 않으면, 먼저 Visual Studio Code를 재시작해 보세요. 구버전은 확장 프로그램 로딩을 차단할 수 있으므로 최신 버전의 VS Code를 실행 중인지 확인하세요.
또 다른 빈번한 장애물은 API 구성입니다. LLM 공급자 키를 잘못 붙여넣거나 접근 권한이 없는 모델을 선택하면 Kilo Code가 오류 없이 실패할 수 있습니다. 항상 API 키를 다시 확인하고 “Hello”와 같은 간단한 테스트 쿼리를 실행하여 모델이 응답하는지 확인하세요.
MCP 측면에서는 MCP 서버 연결 및 인증 문제로 인한 오류가 가장 빈번하게 발생합니다. 서버 상태가 “실패(Failed)” 로 표시될 경우, node --version 명령어로 Node.js 18 이상이 설치되었는지 확인한 후 다음 명령어로 MCP 서버를 재설치하세요:

npm uninstall -g @brightdata/mcp && npm install -g @brightdata/mcp

인증 오류는 일반적으로 잘못된 API 토큰에서 비롯됩니다. 복사 시 불필요한 공백이 없는지 확인하고 Bright Data 계정에 사용 가능한 할당량이 있는지 확인하세요.

Windows 사용자는 대체 구성이 필요할 수 있습니다: 명령어를 "cmd" 로, 인수를 ["/c", "npx", "-y", "@brightdata/mcp"]로 변경하세요.
복잡한 사이트에서 타임아웃 문제가 발생할 경우, 타임아웃을 300초로 늘리고 자바스크립트가 많은 페이지의 경우 프로 모드(Pro Mode )를 활성화하는 것을 고려하십시오.

성능 최적화

모든 것이 작동하면 성능을 미세 조정해야 합니다.

모든 MCP 호출은 웹과의 왕복 통신을 수반하므로, 여러 페이지 스크래핑과 같은 작업은 정적 코드 생성보다 시간이 더 오래 걸립니다. 신속한 처리를 위해 프롬프트를 구체적으로 작성하세요. Kilo Code에 “웹에서 파이썬 관련 모든 정보 검색”을 요청하는 대신 “웹에서 공식 Python 3.12 릴리스 노트 검색”으로 범위를 좁히세요.
일반적인 도구에 대해 선택적 자동 승인을 사용하면 설정을 더욱 최적화할 수 있습니다. 예를 들어, "alwaysAllow": ["search_engine", "scrape_as_markdown"] 을 설정하면 보안은 유지하면서 마찰을 줄일 수 있습니다.
또한 로컬 개발에는 STDIO 전송(더 빠름), 원격 환경에는 SSE 전송(더 안정적)을 선택하세요.
리소스 사용량을 주시하세요. MCP를 로컬에서 실행하면 컴퓨터가 모든 작업을 처리합니다. 대규모 스크래핑 작업 중 속도 저하가 느껴진다면, 처리를 클라우드로 오프로드하는 Bright Data의 호스팅 MCP 서비스로 전환할 수 있습니다.

Kilo Code 확장 프로그램과 MCP 패키지를모두 최신 상태로유지하는 것도 잊지 마세요. 개발자들은 안정성을 획기적으로 개선할 수 있는 개선 사항과 버그 수정을 자주 푸시합니다.

마무리

Kilo Code를 Bright Data의 Web MCP와 연결하면 VS Code 내에서 바로 실시간 웹 데이터에 접근할 수 있습니다. 이 설정은 최신 정보를 활용하여 더 나은 코딩과 문제 해결을 가능하게 합니다.

Bright Data는 또한 강력한 프록시 서비스, 즉시 사용 가능한 데이터셋 및 AI를 위한 다양한 솔루션을 제공합니다. 모든 Bright Data 솔루션을 살펴보고 여러분의 워크플로우에 가장 적합한 도구를 찾아보세요.

지금 바로 시작하여 웹 데이터 활용 역량을 한 단계 업그레이드하세요.

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

Bright Data Web MCP in VS Code and Kilo Code