AI가 웹 브라우저를 자동화하는 방식이 근본적으로 바뀌고 있습니다. 기존의 스크린샷 기반 자동화 방식이 가진 한계를 극복하고, 웹사이트가 직접 AI와 소통할 수 있는 새로운 프로토콜인 MCP-B(Browser Model Context Protocol)가 등장했습니다.
현재 브라우저 자동화의 근본적인 문제
지금까지 AI가 온라인 쇼핑을 한다면 어떤 과정을 거쳤을까요? 놀랍게도 매우 비효율적인 방식이었습니다:
- 스크린샷 촬영 (또는 DOM 파싱)
- 모델에게 질문: “장바구니 버튼이 어디에 있나요?”
- 좌표나 요소 선택자로 응답 받기
- 버튼 클릭
- 페이지 업데이트 대기
- 다시 스크린샷 촬영
- 모델에게 질문: “성공했나요? 무슨 일이 일어났나요?”
- 모든 상호작용마다 반복
이는 마치 언어 모델을 “마우스를 든 OCR 엔진”으로 사용하는 것과 같습니다. 모델은 “이 버튼이 파란색인가 회색인가?”, “검색창이 어디에 있나?” 같은 질문에 토큰을 소모하며, 페이지가 변경될 때마다 처음부터 다시 화면을 이해해야 합니다.
MCP-B란 무엇인가?
MCP-B(Browser Model Context Protocol)는 이러한 근본적인 문제를 해결하기 위해 개발된 새로운 접근 방식입니다. 스크린샷을 통해 UI를 이해하는 대신, 웹사이트가 자신의 기능을 AI가 사용할 수 있는 도구(tool)로 직접 노출하는 방식입니다.
핵심 구성 요소
MCP-B는 브라우저 내 통신을 위한 두 가지 전송 방식을 제공합니다:
- 탭 전송(Tab Transports): 같은 탭 내에서 웹사이트의 MCP 서버와 클라이언트 간 통신
- 확장 프로그램 전송(Extension Transports): 브라우저 확장 프로그램 구성 요소 간 통신
작동 원리
- 웹사이트가 MCP 서버 역할: 자신의 기능을 도구로 노출
- 확장 프로그램이 클라이언트 역할: 탭에 클라이언트를 주입하고 도구들을 수집
- 도구 라우팅: 확장 프로그램이 적절한 URL과 탭으로 요청을 라우팅
- 제로 설정: 사용자는 웹사이트를 방문하고 확장 프로그램을 설치하기만 하면 됨
MCP-B의 혁신적인 장점
1. API 기반 확실성
기존 방식과 MCP-B 방식을 비교해보면 차이가 명확합니다:
- Computer Use: “이 픽셀들을 분석해서 클릭할 곳을 찾아라”
- Playwright MCP: “접근성 트리를 보고 클릭할 곳을 찾아라”
- MCP-B: “
addToCart()함수를 호출해라”
shop.addToCart({id: "abc123", quantity: 2})를 호출하면 성공하거나 구체적인 오류를 반환합니다. 버튼을 클릭하려고 시도할 때는 UI 변경, 요소 로딩, 뷰포트 위치 등 수많은 변수에 의존해야 합니다.
2. 크로스 사이트 도구 조합
MCP-B의 가장 강력한 기능 중 하나는 서로 다른 웹사이트의 도구들을 조합해서 사용할 수 있다는 점입니다.
예시 시나리오: 쇼핑몰 A에서 장바구니 정보를 가져와서 가격 비교 사이트 B에서 더 나은 가격을 찾는 경우
// 쇼핑몰 A: 장바구니 상태 노출
const { cart } = useCartContext();
server.tool('getCurrentCart', '현재 장바구니 내용 가져오기', {}, async () => {
return {
content: [{
type: 'text',
text: JSON.stringify({
items: cart.items.map(item => ({
name: item.name,
price: item.price,
quantity: item.quantity,
sku: item.sku
})),
total: cart.total,
itemCount: cart.items.length
})
}]
};
});
// 가격 비교 사이트 B: 기존 인증된 API 활용
server.tool('comparePrices', '여러 쇼핑몰의 상품 가격 비교', {
productName: z.string().describe('검색할 상품명'),
sku: z.string().optional().describe('정확한 매칭을 위한 상품 SKU')
}, async ({ productName, sku }) => {
// 기존 세션 쿠키를 사용한 인증된 API 호출
const response = await fetch('/api/products/search', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'same-origin',
body: JSON.stringify({
query: productName,
sku: sku,
includeShipping: true
})
});
const results = await response.json();
return {
content: [{
type: 'text',
text: JSON.stringify({
bestPrice: results.prices[0],
averagePrice: results.average,
retailers: results.retailers.slice(0, 5)
})
}]
};
});3. 컨텍스트 엔지니어링을 통한 효율성
MCP-B는 웹사이트가 “AI를 위한 UI”를 제공할 수 있게 합니다. 모든 도구를 한 번에 노출하는 대신, 현재 페이지와 사용자 상태에 따라 관련 도구만 선별적으로 제공할 수 있습니다.
// 장바구니 페이지에서만 장바구니 관련 도구 노출
function ShoppingCartTools({ cartId, items }) {
useEffect(() => {
const addToCartTool = server.registerTool("addToCart", {
title: "장바구니에 추가",
description: "상품을 장바구니에 추가합니다"
}, async ({ productId, quantity }) => {
await cartService.addItem(cartId, productId, quantity);
return {
content: [{ type: "text", text: `${productId} ${quantity}개를 장바구니에 추가했습니다` }]
};
});
// 장바구니에 상품이 있을 때만 결제 도구 노출
let checkoutTool;
if (items.length > 0) {
checkoutTool = server.registerTool("checkout", {
title: "결제 진행",
description: "현재 장바구니 상품들로 결제를 진행합니다"
}, async ({ paymentMethod }) => {
const order = await checkoutService.processCart(cartId, paymentMethod);
return {
content: [{ type: "text", text: `주문 ${order.id}가 성공적으로 생성되었습니다` }]
};
});
}
// 컴포넌트 언마운트 시 정리
return () => {
addToCartTool.remove();
checkoutTool?.remove();
};
}, [cartId, items.length]);
return null;
}5분만에 MCP-B 시작하기
실제로 MCP-B를 웹사이트에 적용하는 과정은 매우 간단합니다:
1단계: MCP-B 확장 프로그램 설치
Chrome 웹스토어에서 MCP-B 확장 프로그램을 설치합니다.
2단계: 웹사이트에 패키지 추가
npm install @mcp-b/transports @modelcontextprotocol/sdk zod3단계: 간단한 도구 노출
import { TabServerTransport } from '@mcp-b/transports';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
const server = new McpServer({
name: 'my-app',
version: '1.0.0'
});
server.tool('sayHello', '인사하기', {
name: z.string()
}, async ({ name }) => ({
content: [{ type: 'text', text: `안녕하세요 ${name}님!` }]
}));
await server.connect(new TabServerTransport({ allowedOrigins: ['*'] }));4단계: 테스트
웹사이트를 방문하고 MCP-B 확장 프로그램에서 MCP 서버 탭을 클릭하여 도구를 확인하고 테스트할 수 있습니다.
기존 솔루션과의 근본적인 차이점
현재 브라우저 자동화 분야에는 여러 경쟁 솔루션들이 있습니다:
- Playwright MCP: 접근성 트리를 사용하지만 여전히 “클릭할 곳 찾기” 방식
- BrowserMCP: 픽셀 기반 브라우저 제어
- Anthropic Computer Use: 스크린샷 기반 컴퓨터 제어
- Dia: 브라우저 자동화 도구
이들은 모두 같은 가정에 기반합니다: “모델이 결국 충분히 좋아져서 모든 UI를 이해하고 올바른 버튼을 클릭할 수 있을 것이다.”
하지만 이는 아직 실현되지 않은 AGI에 대한 환상입니다. 우리가 원하는 모델이 아닌, 현재 가지고 있는 모델을 위한 도구를 만들어야 합니다.
MCP-B는 AGI가 내일 일어나지 않을 것이라는 현실적인 인정에서 출발합니다. 화이트칼라 업무의 일부를 자동화하려면, 그에 맞는 인프라를 구축해야 합니다. LLM은 마우스를 흉내내는 인간이 아닌, 텍스트와 함수 호출에 최적화된 도구로 사용할 때 가장 효과적입니다.
보안과 신뢰 모델
MCP-B는 보안 위험이 있지만, 이는 잘 알려진 위험들입니다:
웹사이트 관점에서:
- 이미 버튼이나 폼으로 노출된 기능만 도구로 제공
- 기존 인증 컨텍스트에서 도구 실행
- 사용자 상태에 따른 도구 가용성 제어 가능
- 민감한 작업에 대한 MCP의 elicitation 프로토콜 지원
사용자 관점에서:
- 확장 프로그램 설치 시 이미 신뢰 관계 형성
- 모든 도구 호출이 명시적이고 감사 가능
- 어떤 사이트가 어떤 도구를 노출하는지 확인 가능
- 인간이 루프에 포함된 구조 (현재로서는)
개발자 관점에서:
// 도구를 컴포넌트 범위로 제한 가능
function AdminPanel({ user }) {
const { registerTool } = useMcpServer();
useEffect(() => {
if (!user.isAdmin) return;
const unregister = server.registerTool('deleteUser', {
description: '사용자 계정 삭제',
// 관리자 패널이 마운트된 동안에만 이 도구가 존재
});
return () => unregister();
}, [user.isAdmin]);
}실용적인 브라우저 자동화의 미래
MCP-B가 제시하는 미래는 명확합니다. AI가 브라우저를 자동화하는 방식이 근본적으로 바뀔 것입니다. 스크린샷을 분석하고 픽셀을 찾아 클릭하는 대신, 웹사이트가 직접 자신의 기능을 API로 노출하여 AI와 소통하는 시대가 올 것입니다.
이는 단순히 더 빠르고 정확한 자동화를 의미하는 것이 아닙니다. 웹사이트들 간의 진정한 상호 운용성과 복합 작업의 자동화가 가능해진다는 뜻입니다. 한 사이트에서 정보를 가져와 다른 사이트에서 작업하고, 그 결과를 또 다른 사이트로 전달하는 복잡한 워크플로우가 자연스럽게 구현될 수 있습니다.
현재 MCP-B 확장 프로그램은 오픈 소스로 제공되며, 웹사이트 개발자들에게 기능을 인터페이스로 요청하는 만큼 투명하게 공개되어야 한다는 철학을 가지고 있습니다. 이는 암호화폐 생태계의 dApp 확장 프로그램들이 겪었던 문제들을 피하고, 표준화된 오픈 프로토콜을 구축하기 위한 중요한 선택입니다.
브라우저 자동화의 미래는 AI가 인간처럼 행동하는 것이 아니라, 컴퓨터가 원래 설계된 방식대로 API를 통해 작동하는 것입니다. MCP-B는 그 미래를 위한 첫 번째 실용적인 단계를 제시하고 있습니다.
참고자료:
Comments