이 튜토리얼에서는 다음을 배울 수 있습니다:
- 커서가 무엇이며 왜 이렇게 인기를 얻었는지.
- Bright Data의 혁신적인 MCP 서버를 커서에 추가해야 하는 주요 이유.
- 커서를 Bright Data 웹 MCP에 연결하는 방법.
- Visual Studio Code에서 동일한 결과를 얻는 방법.
자, 시작해 보겠습니다!
커서란 무엇인가?
커서는 Visual Studio Code의 포크로 구축된 AI 기반 코드 편집기입니다. 다른 텍스트 편집기와 마찬가지로 핵심 기능은 코드 작성을 위한 인터페이스를 제공하는 것입니다. 그러나 커서를 특별하게 만드는 것은 내장된 심층 AI 통합입니다.
기본적인 자동 완성 대신 커서는 대규모 언어 모델(LLM)을 활용하여 전체 코드베이스와 컨텍스트를 이해합니다. 이를 통해 다음과 같은 스마트 기능을 제공합니다:
- 대화형 프롬프트: 원하는 내용을 평이한 영어로 설명하면 커서가 코드를 작성하거나 수정해 줍니다.
- 다중 줄 자동 완성: 단일 줄이 아닌 전체 코드 블록을 제안하고 완성합니다.
- AI 기반 리팩토링: 프로젝트 전체 컨텍스트를 기반으로 코드를 지능적으로 최적화, 정리 및 수정합니다.
- 디버깅 지원: AI에게 코드 내 버그를 찾아 설명해 달라고 요청하세요.
커서는 일반적인 코드 편집기를 능동적이고 지능적인 페어 프로그래밍 파트너로 변모시킵니다. 다양한 공급자의 다중 LLM을 지원하며 MCP를 통한 도구 내장 지원 기능을 포함합니다.
Cursor에 Bright Data의 Web MCP를 추가해야 하는 이유
배경에서 커서는 알려진 LLM 모델에 의존합니다. 대부분의 도구보다 통합이 깊고 정교하지만, 여전히 모든 LLM과 동일한 핵심 한계에 직면합니다: AI 지식은 정적입니다!
결국 AI 훈련 데이터는 특정 시점의 스냅샷을 반영합니다. 특히 소프트웨어 개발처럼 빠르게 진화하는 분야에서는 이 데이터가 금방 구식이 됩니다. 이제 커서 AI 에이전트에게 다음과 같은 능력을 부여한다고 상상해 보세요:
- RAG 워크플로우를 위한 최신 튜토리얼과 문서를 가져오고,
- 코드를 작성하는 동안 실시간 가이드를 참조하고,
- 로컬 파일을 탐색하듯 실시간 웹사이트를 손쉽게 검색하는 능력입니다.
바로 이것이 커서를 Bright Data의 Web MCP에 연결함으로써 가능해지는 것입니다!
Web MCP는 실시간 웹 상호작용 및 데이터 수집을 위해 구축된 60개 이상의 AI 지원 도구에 대한 접근을 제공합니다. 이 모든 것은 풍부한 Bright Data AI 인프라로 구동됩니다.
무료 계정에서도 커서 에이전트는 이미 두 가지 강력한 도구에 접근할 수 있습니다:
| 도구 | 설명 |
|---|---|
search_engine |
Google, Bing 또는 Yandex에서 JSON 또는 Markdown 형식의 검색 결과를 가져옵니다. |
scrape_as_markdown |
봇 탐지 및 CAPTCHA를 우회하여 모든 웹 페이지를 깔끔한 마크다운 형식으로 스크랩합니다. |
이 외에도 Web MCP에는 클라우드 브라우저 자동화 및 Amazon, YouTube, LinkedIn, TikTok, Google Maps 등 다양한 플랫폼에서 구조화된 데이터를 검색하는 도구가 포함되어 있습니다.
Bright Data의 Web MCP로 Cursor를 확장하면 다음과 같은 작업이 가능해집니다.
- 최신 API 참조 또는 프레임워크 튜토리얼을 검색한 후, 작동하는 코드 또는 프로젝트 스캐폴드를 자동 생성합니다.
- 최신 검색 엔진 결과를 즉시 가져와 문서나 코드 주석에 삽입합니다.
- 실시간 웹 데이터를 수집하여 현실적인 테스트 모의 환경, 분석 대시보드 또는 자동화된 콘텐츠 파이프라인을 생성합니다.
모든 기능을 살펴보려면 Bright Data MCP 문서를 참조하세요.
향상된 AI 코딩 경험을 위해 Web MCP를 Cursor에 통합하는 방법
이 단계별 섹션에서는 Bright Data Web MCP 로컬 서버 인스턴스를 Cursor에 연결하는 방법을 살펴보겠습니다. 이 설정은 IDE에서 직접 사용할 수 있는 60개 이상의 도구를 통해 강력한 AI 경험을 제공합니다.
자세한 내용으로, Web MCP 도구를 사용하여 Amazon의 실제 데이터를 반환하는 모의 API가 있는 Express 백엔드를 생성할 것입니다. 이는 이 통합이 지원하는 수많은 사용 사례 중 하나의 예에 불과합니다.
아래 지침을 따르세요!
필수 조건
이 튜토리얼을 따라하려면 다음이 필요합니다:
- Cursor 계정 (무료 플랜으로도 충분합니다).
- 활성 API 키가 있는 Bright Data 계정.
지금 당장 Bright Data 설정을 걱정하지 마세요. 글을 진행하면서 단계별로 안내해 드리겠습니다!
MCP의 작동 방식, 커서(Cursor)의 기능, 웹 MCP에서 제공하는 도구에 대한 기본적인 이해도 도움이 될 것입니다.
1단계: 커서 시작하기
사용 중인 운영 체제에 맞는 커서 버전을 설치하고 실행한 후 계정으로 로그인하세요.
애플리케이션을 처음 실행하는 경우 설정 마법사를 완료하세요.
그러면 다음과 같은 화면이 표시됩니다:
좋습니다! 이제 프로젝트 폴더를 열고 Web MCP로 확장된 내장형 AI 코딩 에이전트를 사용할 준비를 하세요.
단계 #2: LLM 구성하기
현재 커서는 기본적으로 Claude 4.5 모델을 사용합니다( “자동” 모드). 이 모델로 충분하다면 다음 섹션으로 넘어가도 됩니다. Claude 역시 Web MCP와 통합 가능하다는 점을 기억하세요.
기본 모델을 변경하려면 “커서 설정”을 검색하고 해당 옵션을 선택하세요:
열린 탭에서 “모델” 탭으로 이동하세요:
여기서 커서 AI 에이전트가 사용할 LLM을 설정할 수 있습니다. 무료 사용자는 프리미엄 모델로 GPT-4.1과 “자동” 중에서만 선택할 수 있다는 점을 유의하세요.
모델을 GPT 4.1로 변경하려면 “gpt”를 검색하여 “gpt-4.1” 모델을 찾아 활성화하세요:
Pro 또는 Business 구독자라면 지원되는 다른 LLM도 활성화할 수 있습니다. 또한 선택한 제공업체에 대한 자체 API 키를 입력할 수도 있습니다.
다음으로 오른쪽의 “새 채팅” 패널을 엽니다. “자동” 드롭다운을 클릭하여 비활성화한 후 “gpt-4.1” 옵션을 선택하세요:
잘하셨습니다! 이제 커서가 설정하신 LLM을 통해 작동합니다.
3단계: 본인의 머신에서 Bright Data의 웹 MCP 테스트하기
Cursor를 Bright Data 웹 MCP에 연결하기 전에, 서버를 로컬에서 실제로 실행할 수 있는지 확인하세요. MCP 서버는 STDIO를 통해 구성되므로 이 과정이 필수적입니다.
먼저 Bright Data에 가입하세요. 이미 계정이 있다면 로그인만 하면 됩니다. 빠른 설정을 위해 대시보드의 “MCP” 섹션에 있는 지침을 따르세요:
자세한 안내는 아래 지침을 참조하세요.
먼저 Bright Data API 키를 생성하고 안전한 곳에 보관하세요. 다음 단계에서 필요합니다. Web MCP 통합을 단순화하기 위해 API 키에 관리자 권한이 있다고 가정하겠습니다.
이제 다음 npm 명령어로 컴퓨터에 Web MCP를 전역 설치하세요:
npm install -g @brightdata/mcpMCP 서버가 작동하는지 확인하려면 다음 명령어로 실행하세요:
API_TOKEN="<YOUR_BRIGHT_DATA_API_KEY>" npx -y @brightdata/mcp또는 PowerShell에서 동일하게 실행:
$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API_KEY>"; npx -y @brightdata/mcp<YOUR_BRIGHT_DATA_API> 자리 표시자를 Bright Data API 토큰으로 대체하세요. 이 명령어는 필수 API_TOKEN 환경 변수를 설정하고 @brightdata/mcp 패키지를 통해 로컬에서 웹 MCP를 실행합니다.
성공하면 다음과 같은 출력이 표시됩니다:
첫 실행 시 Web MCP는 Bright Data 계정에 두 개의 기본 영역을 생성합니다:
mcp_unlocker: 웹 언락커용 영역.mcp_browser: 브라우저 API용 영역.
Web MCP는 60개 이상의 도구를 구동하기 위해 이 두 Bright Data 서비스에 의존합니다.
존이 설정되었는지 확인하려면 Bright Data 계정의 “프록시 및 스크래핑 인프라”페이지로 이동하세요. 테이블에서 두 존을 확인할 수 있습니다:
참고: API 토큰에 관리자 권한이 없는 경우 두 영역이 자동 생성되지 않습니다. 이 경우 GitHub 설명대로 수동으로 정의하고 환경 변수를 통해 설정하세요.
무료 티어에서는 Web MCP가 search_engine 및 scrape_as_markdown 도구(및 해당 배치 버전)만 노출한다는 점을 기억하세요. 다른 모든 도구를 사용하려면 PRO_MODE="true" 환경 변수를 설정하여 Pro 모드를 활성화하세요:
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 서버가 로컬에서 작동하는지 확인했습니다. 커서를 통해 서버를 자동으로 시작하고 연결하도록 설정할 예정이므로 MCP 프로세스를 종료하세요.
4단계: 커서에서 웹 MCP 구성
먼저 “>mcp”를 검색하고 “보기: MCP 설정 열기” 옵션을 선택하세요:
“도구 및 MCP” 섹션에서 “사용자 지정 MCP 추가” 버튼을 클릭하세요:
그러면 다음과 같은 mcp.json 구성 파일이 열립니다:
보시다시피 기본값은 비어 있습니다. Bright Data의 웹 MCP 통합을 위해 아래와 같이 입력하세요:
{
"mcpServers": {
"Bright Data": {
"command": "npx",
"args": ["-y", "@brightdata/mcp"],
"env": {
"API_TOKEN": "<YOUR_BRIGHT_DATA_API_KEY>",
"PRO_MODE": "true"
}
}
}
}다음으로 Ctrl + S (macOS에서는 Cmd + S )를 눌러 파일을 저장하세요:
위의 구성은 환경 변수를 사용하여 자격 증명과 설정을 전달하는 방식으로, 앞서 테스트한 npx 명령어를 재현합니다:
API_TOKEN은필수입니다. 이전에 생성한 Bright Data API 키로 설정하세요.PRO_MODE는선택 사항입니다. Pro 모드를 활성화하지 않을 경우 제거하세요.
다시 말해, 커서는 mcp.json의 구성을 사용하여 앞서 본 npx 명령어를 실행합니다. 로컬에서 Web MCP 프로세스를 실행하고, 이에 연결하여 노출된 도구에 접근할 수 있게 합니다.
Cursor + Bright Data Web MCP 통합이 완료되었으므로 mcp.json 탭을 닫으세요!
참고: STDIO를 사용하지 않고 SSE 또는 스트리밍 가능한 HTTP를 사용하려는 경우, Bright Data의 Web MCP가 원격 서버 옵션도 제공한다는 점을 기억하세요.
단계 #5: MCP 통합을 통한 도구 사용 가능성 확인
이제 커서가 웹 MCP 서버에 성공적으로 연결되었는지, 그리고 모든 도구에 접근할 수 있는지 확인할 차례입니다.
이를 위해 “Cursor 설정” 탭의 “도구 및 MCP” 섹션으로 돌아가세요. 이제 구성된 “Bright Data” 옵션이 표시되며 사용 가능한 모든 도구가 나열됩니다:
“N개 도구 활성화됨” 드롭다운(N은 활성화된 도구 수)을 확장하여 사용 가능한 모든 도구를 확인하세요:
커서는 서버에 자동으로 연결되어 60개 이상의 도구를 가져옵니다.
프로 모드가 비활성화된 경우, 4/5개의 무료 도구만 표시됩니다. 여기서 원하는 대로 도구를 활성화하거나 비활성화할 수도 있습니다. 기본적으로 모든 도구는 활성화되어 있습니다.
확인 후 “커서 설정” 탭을 닫으세요. 확장된 AI 기반 코딩 경험을 위해 이 도구들을 활용할 준비를 하세요!
6단계: 향상된 AI 코딩 에이전트로 작업 실행하기
커서 코딩 에이전트의 기능을 테스트하려면 새로 구성한 웹 데이터 검색 기능을 활용하는 프롬프트가 필요합니다.
예를 들어, 전자상거래 애플리케이션을 위한 Express.js 백엔드를 구축 중이라고 가정해 보겠습니다. 실제 아마존 제품 데이터를 반환하는 API를 모의 테스트하고 싶습니다.
다음과 같은 프롬프트로 이를 달성할 수 있습니다:
다음 아마존 제품의 데이터를 스크래핑하세요:
1. https://www.amazon.com/Clean-Skin-Club-Disposable-Sensitive/dp/B07PBXXNCY/
2. https://www.amazon.com/Neutrogena-Cleansing-Towelettes-Waterproof-Alcohol-Free/dp/B00U2VQZDS/
3. https://www.amazon.com/Medicube-Zero-Pore-Pads-Dual-Textured/dp/B09V7Z4TJG/
스크랩한 데이터를 로컬 JSON 파일에 저장하세요. 다음으로, ASIN(아마존 상품을 나타냄)을 받아들이고 JSON 파일에서 읽은 해당 데이터를 반환하는 엔드포인트를 가진 간단한 Express.js 프로젝트를 생성하세요.프로 모드에서 작업한다고 가정합니다. 커서에서 위 프롬프트를 실행하세요.
이후 단계별 진행 과정은 다음과 같습니다:
- 커서에 설정된 LLM은 아마존 제품 데이터 검색 도구로
web_data_amazon_product를식별합니다. - 프롬프트에 포함된 세 개의 아마존 상품 각각에 대해, 데이터를 가져오기 위해
web_data_amazon_product실행 권한을 요청받습니다. - 각 도구에 대한 권한을 부여하면 비동기 데이터 수집 작업이 트리거됩니다(내부적으로는 Bright Data Amazon Scraper를 호출함).
- 각 제품에 대해 검색된 데이터는 JSON 형식으로 표시됩니다.
- GPT-4.1은 검색된 데이터를 처리하여
products.json파일에 채웁니다. - Cursor는
package.json을정의하고 Express 서버 로직이 포함된index.js파일을 사용하여 npm 프로젝트 구조를 생성합니다. npm install을통해 프로젝트 종속성을 설치할 수 있는 권한을 요청받습니다. 그러면package.json파일과node_modules/폴더가 생성됩니다.npm start로 서버 실행을 허락할지 묻습니다.
참고: 프롬프트에 명시적으로 언급되지 않았음에도 GPT-4.1은 프로젝트 의존성 설치와 서버 설정을 요청하기로 결정했습니다. 이는 유용한 추가 기능이었습니다!
이 예시에서 최종 출력은 다음과 같은 프로젝트 구조를 생성합니다:
your-project/
├── node_modules/
├── index.js
├── package.json
├── package-lock.json
└── products.json완벽합니다! 의도한 목표를 달성했는지 결과를 확인해 보겠습니다.
7단계: 출력 프로젝트 살펴보기
AI 코딩 에이전트가 파일을 생성하자, 해당 파일들이 커서(Cursor)의 왼쪽 열에 나타났습니다.
참고: AI 실행마다 결과가 다를 수 있으므로 아래와 다를 수 있습니다.
products.json 파일을 먼저 살펴보겠습니다:
보시다시피, 이 파일은 web_data_amazon_product 도구가 반환한 스크랩된 데이터의 간소화된 버전을 포함합니다:
중요: web_data_amazon_product는 아마존 페이지의 모든 제품 데이터를 반환하며, 일부 필드만 추출하지 않습니다. 다만 AI는 가장 관련성 높은 필드만 포함하도록 결정했습니다. 프롬프트를 최적화하면 필요 시 모든 필드를 포함하도록 AI에 지시할 수 있습니다.
다음으로 index.js를 열어 Express.js 서버 로직을 확인하세요:
특히, 제품 데이터 검색을 위한 모의 엔드포인트는 /product/:asin 경로를 사용합니다.
다른 파일들도 계속 살펴보되, 모두 정상적으로 작동할 것입니다. 따라서 “모두 유지” 버튼을 눌러 AI가 생성한 출력을 확인하고 프로젝트 테스트 준비를 완료하세요!
8단계: 생성된 프로젝트 테스트
GPT-4.1이 npm start 실행 권한을 요청했으므로 Express.js 애플리케이션은 이미 실행 중일 것입니다. 실행되지 않았다면 다음 명령어로 수동으로 시작하세요:
npm start이제 Express.js 백엔드가 http://localhost에서 실행 중일 것입니다.
다음으로, GET /product/:asin 엔드포인트를 테스트하기 위해 다음 cURL 명령을 실행하세요:
curl "http://localhost/ product/B07PBXXNCY여기서 B07PBXXNCY는 프롬프트에 언급된 아마존 상품 중 하나의 ASIN입니다.
다음과 같은 결과가 표시되어야 합니다:
훌륭합니다! 해당 데이터가 생성된 products.json 파일에 올바르게 가져왔습니다. 결과는 원본 아마존 페이지의 데이터(간소화된 버전)와 일치합니다.
아마존에서 제품 데이터를 스크래핑해 본 적이 있다면, 악명 높은 아마존 CAPTCHA 및 기타 봇 방지 조치로 인해 얼마나 어려운지 잘 알 것입니다. 물론 기본 GPT-4.1만으로는 아마존에서 실시간으로 데이터를 가져올 수 없습니다.
이것이 Web MCP와 커서를 결합했을 때의 힘을 보여줍니다. 지금은 아주 간단한 예시였지만, 60개 이상의 도구와 적절한 프롬프트를 활용하면 IDE 내에서 직접 더 복잡한 시나리오도 처리할 수 있습니다!
자, 이제 Cursor와 Bright Data Web MCP 통합 덕분에 모의 API 엔드포인트를 갖춘 Express 백엔드가 성공적으로 생성되었습니다.
[추가] Visual Studio Code에서의 대체 접근법
Visual Studio Code에서 커서와 유사한 경험을 원한다면 Cline이나 Roo Code 같은 확장 프로그램을 사용하세요.
특히 Web MCP를 VS Code에 통합하려면 다음 가이드를 참조하세요:
결론
이 블로그 글에서는 커서(Cursor)의 MCP 통합 기능을 최대한 활용하는 방법을 알아보았습니다. IDE에 내장된 AI 코딩 에이전트만으로도 유용하지만, Bright Data의 웹 MCP에 연결하면 훨씬 더 강력하고 다재다능해집니다.
이 통합을 통해 커서는 실시간 웹 검색 수행, 구조화된 데이터 추출, 동적 데이터 피드 활용, 심지어 브라우저 상호작용 자동화까지 가능해집니다. 이 모든 작업이 코딩 환경 내에서 직접 이루어집니다.
더 진보된 AI 기반 워크플로를 구축하려면 Bright Data의 AI 생태계에서 제공하는 완전한 서비스 및 데이터 솔루션 제품군을 살펴보세요.
지금 바로 무료 Bright Data 계정을 생성하고 AI 지원 웹 데이터 도구로 실험을 시작하세요!
