MCP

Model Context Protocol

doworld

2025년 04월 30일 · 0 분 소요

들어가며

요즘 유행인 MCP에 대해 소개합니다.

MCP (모델 컨텍스트 프로토콜) 이란?

MCP(Model Context Protocol)는 AI 모델이 외부 데이터 소스 및 도구와 안전하게 통합될 수 있도록 하는 개방형 프로토콜입니다.
AI 시스템이 단순히 텍스트를 생성하는 것을 넘어 필요한 정보를 실시간으로 가져오고 다른 소프트웨어나 데이터 시스템과 협업할 수 있도록 지원하여 AI 모델의 성능과 실제 활용도를 높이는 데 기여합니다.
Anthropic에서 오픈 소스로 공개한 이 기술은 AI 모델이 다양한 데이터 소스 및 도구에 표준화된 방식으로 연결될 수 있도록 지원하며, AI 생태계에서 'USB-C 포트'와 같은 역할을 수행합니다.

https://www.anthropic.com/news/model-context-protocol

MCP의 주요 목표

컨텍스트 공유 표준화: LLM 애플리케이션과 데이터 소스 간의 상호 작용을 위한 표준 프로토콜을 제공하고, 구조화된 방식으로 컨텍스트 정보를 전달 및 관리하며, 일관된 인터페이스를 통해 데이터 접근을 보장한다.
도구와 기능 노출: AI 시스템에 로컬 또는 원격 도구들을 안전하게 노출하고, 표준화된 방식으로 기능을 정의 및 호출하며, 도구의 능력을 명확하게 기술하고 제어한다.
통합 워크플로우 구축: 여러 데이터 소스와 도구를 조합한 워크플로우를 생성하고, 재사용 가능한 프롬프트 템플릿을 제공하며, 모듈식 구성을 통해 유연한 확장을 가능하게 한다.

MCP의 필요성

LLM의 지식 한계 및 업데이트 문제 해결:LLM은 훈련 데이터에 포함된 정보만 알고 있으며, 훈련에 많은 비용과 시간이 소요된다. MCP를 통해 최신 정보를 실시간으로 가져올 수 있다.
전문 도메인 지식 부족 해결: LLM은 일반 데이터를 사용해 훈련되므로 특정 비즈니스 시나리오에 대한 깊이 있는 데이터와 정보를 이해하기 어렵다. MCP를 통해 의료 기관의 내부 프로세스, 회사의 제품 카탈로그 또는 조직의 독점적인 지식과 같은 전문 데이터베이스에 접근할 수 있다.
외부 데이터 액세스를 위한 통일된 표준 제공: 현재 LLM에 추가 정보를 제공하는 방법이 다양하며, 시스템 간 통합 비용이 높다. MCP는 RAG(검색 기반 생성), 로컬 지식 기반, 인터넷 검색 등 다양한 데이터 소스에 대한 액세스를 표준화한다.

MCP의 주요 장점

AI 모델이 다양한 데이터 소스와 유연하게 연결 가능
실시간 상호 작용이 가능하여 반응 속도 향상
유지 보수가 간편하고 확장성이 뛰어남
개발자가 아닌 사람도 상대적으로 쉽게 활용 가능

MCP의 구조

MCP는 클라이언트-서버 아키텍처를 기반으로 하며, AI 도구와 필요한 데이터 소스 간에 안전한 양방향 연결을 구축할 수 있도록 설계되었습니다. MCP 연결에는 다음과 같은 세 가지 주요 구성 요소가 있습니다.

호스트 (Hosts): 클로드 데스크톱과 같은 LLM 애플리케이션으로, 연결을 시작한다.
클라이언트 (Clients): 호스트 애플리케이션 내에서 서버와 1:1 연결을 유지하는 시스템이다.
서버 (Servers): 클라이언트에 컨텍스트, 도구, 프롬프트를 제공하는 시스템이다.

Cursor에서의 MCP 활용 방법

Cursor는 AI 기반 코드 편집기로, MCP를 통해 AI 에이전트가 추가적인 도구나 컨텍스트에 접근할 수 있게 됩니다.
커서는 MCP 클라이언트를 구현하여 MCP 서버와의 통신을 지원합니다.

Cursor에 MCP 서버 추가하기

Cursor AI에서 MCP 기능을 사용하려면 외부 MCP 서버를 설정해 연결해야 합니다.

MCP 서버 선정: 공개된 MCP 서버 중 원하는 기능을 가진 것을 선택한다. GitHub와 연동하는 MCP나 코드 리뷰에 특화된 MCP 등을 고를 수 있다.
Cursor 설정 열기: Cursor 편집기의 설정(Settings) 메뉴로 이동하여 Features > MCP 섹션을 찾는다. 그곳에서 “Add new MCP server” 버튼을 클릭한다.
MCP 서버 정보 입력: MCP 서버의 이름과 유형, 실행 명령어(Command)를 입력한다. Type은 보통 stdio나 command 등을 선택하는데, 제공된 안내에 따라 설정하면 된다. 예를 들어, Node 기반 MCP 서버의 실행 파일 경로를 명령어로 입력할 수 있다.
연결 및 확인: 정보를 입력하고 Add를 눌러 추가하면 MCP 서버가 Cursor에 연결된다. 설정이 제대로 되었다면 Cursor의 MCP 목록에 새로운 서버가 나타나고, 해당 MCP에서 제공하는 도구(tools) 목록이 표시된다. 만약 바로 보이지 않으면 MCP 설정 화면의 새로고침 아이콘을 눌러 갱신한다.
동작 테스트: MCP가 추가되면 Cursor의 AI 챗/Composer 창을 통해 MCP 기능을 사용할 수 있다. 예를 들어, MCP 서버가 정상 동작하는지 확인하기 위해 간단한 질문이나 요청을 해볼 수 있다.

그래서 어떻게 하는건데?

Browser Tools MCP

Browser Tools MCP를 사용해보겠습니다.
Browser Tools MCP를 Cursor와 연동하면 다음과 같은 기능들을 활용할 수 있습니다.

콘솔 로그 및 오류 확인
XHR 네트워크 요청 및 응답 모니터링
스크린샷 캡처 (자동 붙여넣기 옵션)
선택된 DOM 요소 분석
SEO, 성능 및 코드 품질 스캔 (Lighthouse 활용)
Next.js 특정 SEO 감사
디버거 모드 및 감사 모드 실행

https://github.com/AgentDeskAI/browser-tools-mcp

설치 방법

Chrome 확장 프로그램 설치

BrowserToolsMCP Chrome Extension에서 확장 프로그램을 다운로드한 후, Chrome에서 '확장 프로그램 관리' 페이지를 열고 '개발자 모드'를 활성화한 다음 '압축 해제된 확장 프로그램 로드'를 클릭하여 확장 프로그램 폴더를 선택하여 설치합니다.

BrowserTools MCP 도구 설정

Cursor 설정에서 'Features' > 'MCP Servers'로 이동하여 'Add new MCP server'를 클릭합니다.

mcp.json 파일이 열리는데, 다음과 같이 추가합니다.

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": ["@agentdeskai/browser-tools-mcp@latest"]
    }
  }
}

다른 여러가지의 mcp를 추가할 경우 연속으로 추가하면 됩니다.

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": ["@agentdeskai/browser-tools-mcp@latest"]
    },
    "mcp 이름": {
      ......설정
    },
   .....
  }
}

그리고 mcp가 제대로 연결되었는지 확인합니다. 녹색으로 표시되면 제대로 된거에요.

BrowserTools 서버 실행

터미널을 열고 다음 명령어를 실행하여 BrowserTools 서버를 실행합니다.
npx @agentdeskai/browser-tools-server@latest

웹소켓으로 연결이 되었다고 나옵니다.

브라우저의 상단에 BrowserTools MCP로 브라우저 디버깅 중이라고 나옵니다.

마치며

이제 커서에서 AI와 함께 같은 브라우저를 바라보고 바이브 코딩을 할 수 있습니다.

감사합니다.