WebMCP를 사용하면 React 앱이 구조화된 도구(tool) API를 AI 에이전트에게 직접 노출할 수 있어, 취약한 UI 스크래핑 대신 신뢰할 수 있고 UI에 의존하지 않는 호출 방식으로 대체할 수 있습니다. 이 기능은 Chrome 149 이상 버전에서 origin trial로 제공되며, chrome://flags/#enable-webmcp-testing을 통해 활성화할 수 있습니다.

에이전트에게 클릭을 가르칠 때 발생하는 문제

현재 AI 에이전트가 웹 페이지와 상호작용하도록 만드는 대부분의 시도는 시각적 단서에 의존합니다. 에이전트는 DOM을 파싱하고, 어떤 요소가 버튼인지 추측하며, 클릭을 시뮬레이션하고, 스크롤하고, 양식 필드를 채웁니다. 버튼이 이동하거나, 레이블이 바뀌거나, 레이아웃이 조금만 수정되어도 스크립트는 실패합니다. 또한 브라우저가 각 단계를 렌더링할 때까지 기다려야 하므로 속도가 느리며, 일상적인 디자인 변경만으로도 전체 자동화 파이프라인이 망가질 수 있습니다.

WebMCP가 모델을 뒤집다

WebMCP는 Google Chrome에서 도입한 새로운 웹 표준입니다. 에이전트가 탐색할 시각적 표면을 노출하는 대신, 페이지는 자신이 수행할 수 있는 이름이 지정되고 타입이 정의된 작업 세트인 *도구(tools)*를 광고합니다. AI 에이전트는 먼저 "어떤 도구를 사용할 수 있나요?"라고 묻고, 페이지는 "searchProducts" 또는 "checkout"과 같은 목록으로 응답합니다. 그런 다음 에이전트는 도구에 선언된 입력 스키마와 일치하는 JSON 페이로드를 전송하여 도구를 호출합니다(예: searchProducts(query: "jacket")). 브라우저는 이 요청을 페이지의 JavaScript로 직접 라우팅하며, JavaScript는 UI 개입 없이 내부 로직을 실행합니다.

그 결과, 즉각적인 상호작용이 가능해지며, CSS 변경과 관계없이 작동하고, 도구 정의가 안정적으로 유지되는 한 기능이 지속됩니다.

개발자에게 중요한 이점

  • 속도 – 통신이 브라우저의 메시징 시스템 내부에서 이루어지므로, 클릭을 렌더링하고 페이지 업데이트를 기다리는 왕복 과정이 생략됩니다.
  • 신뢰성 – 도구는 사이트가 자체 UI를 위해 이미 사용 중인 함수를 호출하므로, 디자인을 변경해도 API가 깨지지 않습니다.
  • 제어권 – 개발자가 어떤 작업을 노출할지, 어떤 매개변수를 허용할지, 에이전트가 응답에서 무엇을 볼 수 있을지를 결정합니다.
  • UI 독립성 – 스타일링, 레이아웃 또는 컴포넌트 리팩토링이 더 이상 에이전트의 기능 호출 능력에 영향을 미치지 않습니다.

WebMCP는 서버 측에서 사용되는 기존 MCP(Message-Channel-Protocol)를 대체하지 않습니다. MCP는 대규모 데이터 페칭과 백엔드 오케스트레이션을 계속 담당하고, WebMCP는 탭 내의 실시간 상호작용을 담당합니다.

React 개발자가 시작하는 방법

React 코드는 명령형 JavaScript API 또는 선언형 HTML 폼 기반 API를 사용하여 도구를 등록할 수 있습니다. 일반적인 패턴은 등록 과정을 커스텀 훅(custom hook)으로 감싸는 것입니다.

  1. 도구의 이름과 짧은 설명을 포함하여 등록 함수를 호출합니다.
  2. 입력 스키마(예: 필수 필드를 설명하는 JSON 스키마)를 제공합니다.
  3. 기존 비즈니스 로직을 실행하는 execute 콜백을 제공합니다. 이는 종종 버튼 클릭 시 트리거되는 함수와 동일합니다.

훅이 실행되면 브라우저는 페이지의 WebMCP 매니페스트(manifest)에 해당 도구를 추가합니다. 매니페스트를 발견한 AI 에이전트는 DOM을 전혀 건드리지 않고도 도구를 호출할 수 있습니다.

등록은 컴포넌트 마운트 시점에 이루어지므로, 도구를 특정 라우트나 피처 플래그(feature flag)에 맞게 범위를 지정할 수 있습니다. 이를 통해 팀은 프로덕션 환경과 테스트 환경에서 AI가 수행할 수 있는 작업에 대해 세밀한 제어권을 가질 수 있습니다.

주의 사항 및 확인해야 할 점

WebMCP는 아직 origin trial 단계입니다. Chrome 149 이상 버전에서만 작동하며, 플래그를 통해 수동으로 활성화해야 합니다.

다음 단계

Google은 AI 네이티브 웹 경험을 실험하고자 하는 개발자들에게 이 트라이얼을 공개했습니다. 관심 있는 분들을 위한 다음 단계는 다음과 같습니다.

  • Chrome에서 플래그를 활성화하고 대상 사이트를 새로고침합니다.
  • React 컴포넌트에 간단한 도구 등록을 추가하고 브라우저 개발자 도구(devtools)에 매니페스트가 나타나는지 확인합니다.
  • AI 클라이언트(예: WebMCP 프로토콜을 따르는 로컬 스크립트)를 테스트하여 도구를 호출하고 응답을 확인합니다.
  • 안정적인 정식 출시(stable shipping)에 대한 업데이트를 확인하기 위해 트라이얼 상태 페이지를 추적합니다.

핵심 요약: WebMCP는 React 개발자가 자신의 앱을 AI 에이전트가 직접 호출할 수 있도록 만드는 방법을 제공하며, UI 요소를 안정적이고 타입이 지정된 서비스로 변환합니다. 이러한 변화는 스크린 스크래핑의 유지보수 지옥을 제거하고, 팀이 실험적인 Chrome 환경에서 작업하는 데 거부감이 없다면 진정한 AI 네이티브 웹 애플리케이션으로 나아가는 길을 열어줍니다.