WebMCP (Web Model Context Protocol) 공개

• WebMCP는 웹사이트가 브라우저 내 AI 에이전트에게 구조화된 도구를 직접 노출하도록 설계된 제안 표준
• 기존의 화면 스크래핑이나 DOM 추론 대신, 웹이 스스로 “이 페이지에서 무엇을 할 수 있는지” 기능과 입력·출력을 명시적 계약 형태로 제공
• 선언적 API와 명령형 API를 통해 HTML 폼 기반 작업부터 복잡한 JavaScript 상호작용까지 지원
• 에이전트가 페이지의 도구를 탐색(Discovery) 하고, JSON Schema로 입출력을 명시하며, 현재 페이지 상태(State)를 공유하는 계약(contract) 구조
• 크롬 146 버전에 얼리 프리뷰 버전으로 포함됨. 사전 체험을 위해서는 Chrome built-in AI Early Preview Program 에 가입 필요
• 기존 MCP가 서버 사이드 프로토콜인 반면 WebMCP는 클라이언트 사이드 브라우저 내 AI 에이전트를 위한 프로토콜이라는 점에서 차별화됨

스펙 드래프트 문서: WebMCP Early Preview

WebMCP의 등장 배경

• 에이전트 웹 환경에서는 AI가 사용자를 대신해 예약, 제출, 설정 변경, 탐색 같은 실제 작업을 수행하는 비중이 증가 중
• 기존 웹은 인간 사용자를 전제로 설계되어 있어, 에이전트는 버튼 의미나 폼 구조를 추론해야 했음
• 이로 인해 입력 오류, 잘못된 필드 매핑, UI 변경에 따른 취약성이 반복적으로 발생
• WebMCP는 이러한 문제를 해결하기 위해 웹과 에이전트 사이에 명시적 상호작용 계약(contract) 을 도입함
• 에이전트가 버튼의 목적이나 폼의 구조를 추측하는 대신, 웹사이트가 자체 인터페이스를 명시적으로 공개하는 방식
• 이 계약은 세 가지 핵심 요소로 구성:
  • Discovery: 페이지가 지원하는 도구(예: checkout, filter_results)를 에이전트가 표준화된 방식으로 조회
  • JSON Schema: 입력과 예상 출력의 명시적 정의로 환각(hallucination)이나 오해 감소
  • State: 현재 페이지 컨텍스트에 대한 공유된 이해로, 에이전트가 실시간으로 사용 가능한 리소스 파악

WebMCP의 핵심 개념

• 구조화된 도구 노출

  • 웹사이트는 자신이 제공하는 기능을 도구(tool) 형태로 선언
  • 각 도구는 이름, 설명, 입력 스키마(JSON Schema), 실행 결과를 명확히 정의
  • 에이전트는 DOM을 해석하지 않고도 “무엇을 호출해야 하는지”를 정확히 인지 가능

• 추론 대신 계약

  • 버튼 의미 추측이나 캘린더 UI 분석 대신, 웹이 직접 의도와 규칙을 공개
  • 입력·출력 형식이 고정되어 있어 환각(hallucination)과 오작동 감소
  • UI 변경에도 도구 계약이 유지되면 에이전트 동작은 안정적으로 유지됨

두 가지 API 모델

• 선언적 API (Declarative API)

  • HTML <form> 요소에 속성만 추가해 도구로 변환
  • toolname, tooldescription 속성으로 도구의 의미를 선언
  • 폼 필드가 곧 도구의 입력 파라미터가 됨
  • 브라우저가 이를 자동으로 JSON Schema로 변환
  • 단순하고 반복적인 작업, 기존 폼 기반 UI에 적합

• 명령형 API (Imperative API)

  • JavaScript로 직접 도구를 등록
  • registerTool, provideContext, unregisterTool 등의 API 제공
  • 복잡한 로직, 조건 분기, 비동기 처리, 상태 기반 동작에 적합
  • SPA나 고급 웹 애플리케이션에서 활용도 높음

브라우저와 에이전트의 상호작용 방식

• 에이전트가 도구를 호출하면 브라우저는 해당 UI를 자동으로 포커스 및 입력
• 폼이 에이전트에 의해 호출되었는지 여부를 agentInvoked 플래그로 구분
• 성공·취소 시 toolactivated, toolcancel 이벤트 발생
• CSS pseudo-class(:tool-form-active, :tool-submit-active)를 통해 시각적 피드백 제공
• 인간 사용자와 에이전트 사용 흐름을 동일한 UI 상태 모델로 통합 가능

대표적인 활용 시나리오

• 항공사 사이트에서 book_flight 도구 제공 시, 에이전트가 캘린더 UI를 해석하지 않고 구조화된 승객 정보 직접 제출
• 의료·법률 포털에서 submit_application 도구를 통해 필드 의미를 명확히 전달
• 개발자 설정 페이지에서 run_diagnostics 같은 도구를 노출해 숨겨진 메뉴 자동 실행
• 고객 지원, 전자상거래, 여행 서비스 등 고신뢰 입력이 필요한 영역에서 특히 효과적

WebMCP와 MCP의 차이

• MCP(Model Context Protocol)는 서버 측 프로토콜로, 별도의 서버 배포 필요
• WebMCP는 브라우저 내부에서 동작하며 기존 웹 애플리케이션에 직접 통합
• 서버 없이도 클라이언트 사이드 기능을 에이전트에게 제공 가능
• 에이전트 브라우저를 전제로 한 프런트엔드 중심 접근이라는 점이 핵심 차이점

현재 상태와 한계

• Chrome 146 이상에서 플래그 활성화 시 사용 가능
• 헤드리스 환경에서는 동작하지 않으며 가시적인 브라우징 컨텍스트 필요
• 도구를 제공하는 사이트를 자동으로 발견하는 메커니즘은 아직 없음
• UI 상태 동기화를 개발자가 책임져야 하는 구조
• 초기 프리뷰 단계로, API 변경 가능성과 구현 마찰 존재