Zed의 AI 네이티브 에디터를 Bright Data의 Web MCP에 연결하여 개발 환경 내에서 실시간 웹 접근, 깨끗한 데이터 추출, 웹 인식 AI 워크플로를 활성화하는 방법을 알아보세요.
이 튜토리얼에서 배우게 될 내용:
- Zed의 정의와 현대식 코드 에디터 내에서 AI 네이티브 에이전트 기반 편집 모델의 작동 방식.
- 정확한 AI 지원 개발을 위해 실시간 웹 상호작용 및 데이터 추출 기능으로 Zed를 확장하는 것이 필수적인 이유.
- Zed를 Bright Data의 Web MCP에 연결하여 에디터 내에서 실시간 공개 웹 데이터를 직접 가져와 활용할 수 있는 웹 인식 AI 에이전트를 구현하는 방법.
자, 시작해 보겠습니다!
Zed란 무엇인가?
Zed는 속도, 협업, AI 지원 개발을 위해 설계된 현대적이고 고성능의 코드 에디터입니다. 반응성과 낮은 지연 시간에 중점을 두고 처음부터 구축되어 대규모 코드베이스에서도 코딩이 즉각적이고 유동적으로 느껴지도록 합니다.
Zed는 전적으로 Rust로 작성되었으며, 다중 CPU 코어와 GPU 가속을 효율적으로 활용하도록 설계되었습니다. 이러한 설계 선택 덕분에 Zed는 빠른 시작 시간, 부드러운 UI 상호작용, 최소한의 타이핑 지연 시간을 제공하며, 이는 개발자 경험의 핵심 요소입니다.
Zed는 macOS, Linux, Windows에서 사용 가능하며 플랫폼 전반에 걸쳐 일관된 네이티브 경험을 제공합니다.
기본적으로 Zed에는 다음과 같은 다양한 핵심 개발자 기능이 포함되어 있습니다:
- 스테이징, 커밋, 풀, 푸시 및 차이점 확인을 위한 네이티브 Git 지원.
- DAP(Debug Adapter Protocol) 기반 디버깅 지원.
- 여러 프로그래밍 언어를 위한 언어 서버 프로토콜(LSP) 지원.
- 단일 뷰에서 여러 파일의 콘텐츠를 작성하고 편집할 수 있는 멀티버퍼 편집 기능.
- 공유 편집, 채팅, 화면 공유와 같은 내장 협업 기능.
- 모달 워크플로를 선호하는 개발자를 위한 Vim 스타일 모달 편집.
Bright Data Web MCP로 Zed의 성능을 극대화하는 이유
Zed 내에서 어떤 AI 모델을 사용하든, LLM은 웹에 실시간으로 접근할 수 없다는 중요한 한계가 있습니다. LLM의 응답은 특정 시점의 스냅샷을 나타내는 훈련 데이터를 기반으로 하므로, 빠르게 구식이 될 수 있습니다.
이 한계는 진화하는 문서, 도구 또는 프레임워크를 다룰 때 분명해집니다. 에디터 내 AI 어시스턴트는 최신 정보를 확인하거나 웹사이트를 탐색하거나 실제 콘텐츠를 자체적으로 추출할 수 없습니다.
이제 Zed의 AI 에이전트에 다음과 같은 기능을 추가한다고 상상해 보세요:
- 실시간 문서 페이지 읽기
- 최신 가이드 및 참조 자료 가져오기
- 실제 웹사이트 탐색 및 콘텐츠 추출
이러한 기능은 Zed를 Bright Data Web MCP에 연결함으로써 활성화됩니다. Bright Data의 Web MCP는 Bright Data의 AI 인프라를 기반으로 60개 이상의 AI 지원 도구를 제공하여 AI 에이전트를 위한 실시간 웹 상호작용 및 데이터 검색을 가능하게 합니다.
무료 티어에서도 이용 가능한 가장 흔히 사용되는 두 가지 도구는 다음과 같습니다:
| 도구 | 설명 |
|---|---|
scrape_as_markdown |
웹 페이지에서 콘텐츠를 추출하여 깨끗한 마크다운으로 반환하며, 봇 방지 및 CAPTCHA를 처리합니다. |
search_engine |
Google, Bing 또는 Yandex에서 JSON 또는 마크다운 형식의 검색 결과를 가져옵니다. |
핵심 도구 외에도 Web MCP에는 브라우저 상호 작용 및 구조화된 데이터 추출을 위한 다양한 고급 옵션이 포함되어 있습니다. 무료 계정에서는 기본 도구를 이용할 수 있으며, Pro 모드를 활성화하면 더 고급 사용 사례를 위한 전체 도구 세트를 사용할 수 있습니다.
Bright Data Web MCP를 Zed에 연결하면 AI 에이전트가 정적 지식이 아닌 실시간 웹 콘텐츠를 활용하여 편집기 내에서 직접 더 정확하고 신뢰할 수 있는 지원을 제공할 수 있습니다.
Bright Data Web MCP를 Zed에 통합하는 방법
이 섹션에서는 다음을 수행합니다:
- Zed 내에서 Bright Data Web MCP를 MCP 서버로 구성하기
- Bright Data API 토큰을 사용한 MCP 서버 인증
- Zed의 AI 에이전트가 MCP를 통해 실시간 웹 콘텐츠에 접근할 수 있도록 설정
- 통합이 정상적으로 작동하는지 확인하기
시작하려면 아래 단계를 따르세요!
필수 조건
시작하기 전에 다음 사항을 확인하세요:
- 지원되는 운영 체제(macOS, Linux 또는 Windows)
- Zed 설치 및 실행 상태
- Node.js 설치 (최신 LTS 권장)
- API 토큰이 있는Bright Data 계정
Bright Data를 미리 설정할 필요는 없습니다. 필요한 구성은 다음 섹션에서 단계별로 설명됩니다.
필수 사항은 아니지만, 다음과 같은 사전 이해가 도움이 될 수 있습니다:
- 모델 컨텍스트 프로토콜(MCP) 작동 방식에 대한 기본적인 이해
- Bright Data Web MCP 및 사용 가능한 도구에 대한 일반적인 이해
1단계: Zed 설치 및 실행
공식 웹사이트에서 Zed를 다운로드하여 사용 중인 운영 체제(macOS, Linux 또는 Windows)에 맞게 설치하십시오.
설치가 완료되면 애플리케이션 메뉴에서 Zed를 실행하고 에디터가 오류 없이 시작되는지 확인하세요.
메인 에디터 인터페이스가 표시되고 설정 패널을 열 수 있어야 합니다. Zed가 성공적으로 시작되면 다음 단계로 진행할 준비가 된 것입니다.
단계 2: Zed에서 AI 및 에이전트 편집 활성화
Zed에서 설정을 열고 LLM 공급자 섹션으로 이동하세요.
Zed AI에 로그인하거나 Anthropic, Google AI, Amazon Bedrock 등 지원되는 제공자를 구성하여 AI 기반 기능을 활성화하세요.
프로바이더가 활성화되면 편집기로 돌아가 AI 또는 채팅 패널을 열어 프롬프트가 수락되고 응답이 생성되는지 확인하세요. AI가 편집기 내에서 응답하면 에이전트 편집이 성공적으로 활성화된 것입니다.
3단계: Bright Data Web MCP 로컬 설정
Zed AI 에이전트의 실시간 웹 액세스를 활성화하려면 로컬 머신에 Bright Data Web MCP를 설정해야 합니다. 이 MCP 서버는 AI 에이전트와 실시간 웹 데이터 간의 가교 역할을 합니다.
Bright Data 대시보드에서 Bright Data 계정을 생성하세요. 기존 계정이 있다면 로그인하세요.
빠른 설정을 위해 계정의 “MCP” 페이지를 열고 안내를 따르세요:
그렇지 않은 경우 아래 단계를 따르세요:
Bright Data 대시보드에서 API 토큰을 생성하고 안전하게 보관하세요. 이 토큰은 웹 MCP 서버가 요청을 인증하고 Bright Data의 웹 도구에 접근하는 데 사용됩니다.
이 튜토리얼에서는 API 토큰이 유일하게 필요한 인증 정보입니다.
Bright Data Web MCP는 Node.js를 사용하는 로컬 서버로 실행됩니다. 터미널에서 다음 명령어를 실행하여 전역 설치하세요:
npm install -g @brightdata/mcp이렇게 하면 Zed가 나중에 연결할 Web MCP 패키지가 설치됩니다.
다음 명령을 실행하여 Web MCP 서버를 시작하세요:
API_TOKEN="YOUR_BRIGHT_DATA_API_TOKEN" npx -y @brightdata/mcpYOUR_BRIGHT_DATA_API_TOKEN을 실제 API 토큰으로 대체하세요.
서버가 성공적으로 시작되면 MCP 서버가 실행 중이며 요청을 수신할 준비가 되었음을 나타내는 로그 메시지가 표시됩니다.
처음 실행 시 Bright Data 웹 MCP 서버는 Bright Data 계정에 필요한 두 개의 영역을 자동으로 생성합니다: 하나는 웹 언락커용이고 다른 하나는 브라우저 API용입니다. 이 영역들은 웹 MCP가 제공하는 도구를 지원하기 위해 내부적으로 사용됩니다.
Bright Data 대시보드의 ‘프록시 및 스크래핑 인프라’ 섹션을 방문하여 생성 여부를 확인할 수 있습니다. API 토큰에 관리자 권한이 없는 경우, 영역을 수동으로 생성하고 환경 변수를 통해 참조해야 할 수 있습니다.
기본적으로 Web MCP는 무료 계층에서 사용 가능한 search_engine 및 scrape_as_markdown 도구만 노출합니다. Pro 모드를 활성화하면 고급 브라우저 자동화를 포함한 전체 도구 세트가 잠금 해제되며 추가 요금이 발생할 수 있습니다.
브라우저 자동화 및 구조화된 데이터 추출과 같은 고급 기능을 이용하려면 Web MCP 서버 시작 전에 PRO_MODE=true를 설정하여 Pro 모드를 활성화하십시오.
API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcp서버가 정상적으로 실행되는 것을 확인한 후, 당분간 중지하세요. 다음 단계에서 Zed가 Web MCP 서버에 자동으로 시작 및 연결되도록 구성됩니다.
4단계: Zed에서 Bright Data 웹 MCP 구성
Zed에서 설정을 열고 모델 컨텍스트 프로토콜(MCP) 서버 섹션으로 이동합니다. 새 로컬 MCP 서버를 등록하려면 서버 추가를 클릭합니다.
프롬프트가 표시되면 Bright Data MCP 서버를 정의하세요. 웹 MCP 패키지를 실행하는 명령어(npx @brightdata/mcp)를 설정하고 인증에 필요한 환경 변수(API_TOKEN)를 추가합니다. 구성을 저장하면 Zed의 AI 에이전트가 MCP 서버를 사용할 수 있게 됩니다.
추가 완료 시 Bright Data가 MCP 서버 목록에 표시되며, 이는 Zed가 AI 지원 워크플로우 중 웹 MCP에 연결할 준비가 되었음을 의미합니다.
MCP 서버가 활성화되면 Zed의 AI 에이전트는 이제 에디터 내 AI 지원 워크플로에서 Bright Data의 웹 도구를 사용할 준비가 되었습니다.
6단계: Zed에서 실제 작업 실행
이 단계에서는 Zed의 AI 에이전트와 Bright Data Web MCP를 함께 사용하여 실시간 웹 콘텐츠를 가져오고, 로컬에 저장하고, 실제 데이터를 기반으로 작은 스크립트를 생성합니다.
Zed의 AI 또는 채팅 패널을 엽니다(앞서 AI 응답을 테스트할 때 사용한 것과 동일함).
- 프롬프트를 입력할 곳입니다.
- 지금은 코드를 작성하는 것이 아니라 Zed의 AI 에이전트와 대화하는 중입니다.
다음 프롬프트를 정확히 복사하여 Zed에 붙여넣으세요:
실시간 문서 페이지를 가져옵니다:
https://nodejs.org/en/docs
Bright Data MCP를 사용하여 주요 문서 콘텐츠를 추출하고 깔끔한 마크다운으로 변환하세요. 추출된 콘텐츠를 docs.md로 저장합니다. 그런 다음 문서의 간단한 요약을 생성하여 summary.md로 저장하세요. 마지막으로 docs.md를 로드하고 처음 몇 줄을 출력하는 readDocs.js라는 간단한 Node.js 스크립트를 생성하세요.프롬프트를 제출한 후, 어떤 일이 일어나는지 지켜보세요:
- AI 에이전트가 수행할 단계를 설명하거나 계획합니다
- 웹 접근이 필요함을 식별합니다
- Bright Data MCP 도구(일반적으로 scrape_as_markdown)를 선택합니다
- Zed가 도구 실행 승인을 요청할 수 있습니다
작업 완료 후 생성된 파일이 프로젝트 디렉토리에 존재하는지 확인하세요. 마크다운 파일을 열어 라이브 문서 페이지에서 추출된 내용이 포함되었는지 확인합니다.
생성된 스크립트를 실행하면 스크랩된 콘텐츠의 데이터가 출력되어 워크플로가 성공적으로 실행되었는지 확인할 수 있습니다.
결론
이 튜토리얼에서는 Zed를 Bright Data 웹 MCP와 통합하여 AI 네이티브 에디터 내에서 실시간 웹 상호작용을 가능하게 하는 방법을 배웠습니다. Zed의 에이전트 기반 편집 모델과 Bright Data의 웹 도구를 결합함으로써, AI가 실시간 콘텐츠를 가져와 로컬에 저장하고 실제 데이터를 기반으로 사용 가능한 코드와 파일을 생성하는 워크플로를 구축했습니다.
Bright Data의 Web MCP는 구조화되고 최신 웹 데이터에 대한 접근을 제공함으로써, 보다 신뢰할 수 있고 컨텍스트를 인식하는 AI 지원 개발 워크플로우 구축의 문을 열어줍니다. 이러한 접근 방식은 정적 지식에 대한 의존도를 줄이고 AI 생성 출력의 정확성을 향상시키는 데 도움이 됩니다.
보다 진보된 에이전트 활용 사례를 탐색하려면 광범위한 Bright Data 플랫폼과 AI 지원 웹 데이터 솔루션을 살펴보세요.
무료 Bright Data 계정으로 시작하여 Web MCP를 통해 실험을 확장하고, 자체 AI 기반 개발 워크플로우를 구축해 보세요.
