Google WebMCP — 웹사이트가 AI 에이전트에게 '메뉴판'을 건네는 시대

AI 에이전트가 웹사이트를 이용하는 방식은 지금까지 "사람이 보는 화면을 캡처해서 해석"하는 수준이었다. 버튼을 클릭하려면 스크린샷을 찍고, 좌표를 추론하고, 클릭 이벤트를 흉내 낸다. 비유하면 외국인이 한글 메뉴판 없이 음식 사진만 보고 주문하는 것과 같다. Google이 Chrome 146에 탑재한 WebMCP는 이 상황을 근본적으로 바꾼다. 웹사이트가 AI 에이전트에게 "여기 우리가 할 수 있는 일 목록이야"라고 구조화된 메뉴판을 직접 건네는 프로토콜이다.

[💡 잠깐! 이 용어는?] MCP(Model Context Protocol): AI 에이전트가 외부 도구(파일 시스템, API, 데이터베이스 등)와 표준화된 방식으로 통신하는 오픈 프로토콜. Anthropic이 주도하고 있다. WebMCP는 이 개념을 웹 브라우저 환경으로 확장한 것이다.

WebMCP가 뭔가

WebMCP는 웹사이트가 AI 에이전트에게 **사용 가능한 기능(Tool)**을 선언적으로 공개하는 브라우저 API다. 핵심은 navigator.modelContext라는 새로운 브라우저 API를 통해 사이트가 "Tool Contract"를 발행하는 것이다.

포인트: 기존에는 에이전트가 DOM을 크롤링해서 "이게 버튼인 것 같다"고 추론했다면, WebMCP에서는 사이트가 "이건 buyTicket(destination, date) 함수야"라고 명시적으로 알려준다.

예를 들어 항공권 예약 사이트가 WebMCP를 지원하면, 에이전트는 스크린샷 해석 없이 searchFlights({ from: 'ICN', to: 'NRT', date: '2026-04-01' }) 같은 구조화된 호출을 할 수 있다. 비유하면 음식점이 외국인 손님에게 QR 코드를 주고, QR을 찍으면 다국어 메뉴와 주문 API가 뜨는 것과 같다.

두 가지 API 모드

WebMCP는 두 가지 API를 제공한다. 하나는 HTML 폼 기반의 단순한 액션용이고, 다른 하나는 JavaScript가 필요한 복잡한 인터랙션용이다.

Declarative API

기존 HTML 폼에 메타데이터를 추가하는 방식이다. 폼의 action, method, input 필드를 에이전트가 이해할 수 있는 구조로 노출한다. 이미 서버사이드 렌더링을 하고 있는 사이트라면 최소한의 변경으로 WebMCP를 지원할 수 있다.

Imperative API

navigator.modelContext를 통해 Tool 목록을 프로그래밍 방식으로 등록한다. SPA처럼 페이지 전환 없이 동적으로 상태가 바뀌는 애플리케이션에 적합하다.

navigator.modelContext.addTool({
  name: 'searchFlights',
  description: '출발지, 목적지, 날짜로 항공편을 검색한다',
  parameters: {
    type: 'object',
    properties: {
      from: { type: 'string', description: '출발 공항 코드 (예: ICN)' },
      to: { type: 'string', description: '도착 공항 코드 (예: NRT)' },
      date: { type: 'string', description: '출발 날짜 (YYYY-MM-DD)' }
    },
    required: ['from', 'to', 'date']
  },
  handler: async ({ from, to, date }) => {
    const results = await flightAPI.search({ from, to, date })
    return { flights: results }
  }
})

에이전트가 이 Tool을 호출하면 handler 함수가 실행되고, 결과가 구조화된 데이터로 반환된다. DOM 탐색, 클릭 시뮬레이션, 스크린샷 해석 같은 불안정한 과정이 전부 사라진다.

[💡 잠깐! 이 용어는?] Tool Contract: 에이전트가 호출할 수 있는 함수의 이름, 설명, 파라미터 스키마, 반환값을 정의한 명세. OpenAPI 스펙과 유사하지만, 브라우저 내에서 실시간으로 등록·해제할 수 있다는 점이 다르다.

기존 방식과 뭐가 다른가

가장 큰 차이는 주도권의 이동이다. 기존에는 에이전트가 사이트를 "역공학"해서 이해해야 했다. WebMCP에서는 사이트가 직접 "이건 이렇게 쓰는 거야"라고 알려준다. 비유하면 박물관 가이드 없이 전시물을 보는 것과, 오디오 가이드가 "이 작품은 ~이고, 다음 작품으로 가려면 오른쪽으로 가세요"라고 안내하는 것의 차이다.

실제 활용 시나리오

여행 예약

사용자가 에이전트에게 "4월 첫째 주 도쿄 왕복 항공편 찾아줘"라고 말하면, 에이전트는 항공사 사이트의 searchFlights Tool을 호출하고, 결과를 구조화된 JSON으로 받아 비교표를 만들어 준다. 가격 정렬, 경유 필터, 좌석 선택까지 모두 Tool 호출로 처리된다.

고객 지원

고객이 "배송 상태 확인해줘"라고 하면, 에이전트가 쇼핑몰의 trackOrder Tool을 호출해서 주문번호, 현재 위치, 예상 도착일을 즉시 가져온다. 기존에는 마이페이지 → 주문 내역 → 배송 조회 버튼 클릭이라는 3단계 UI 탐색이 필요했다.

이커머스

"검은색 러닝화, 270mm, 5만원 이하"라는 요청에 에이전트가 searchProducts Tool로 필터링된 결과를 받고, addToCart Tool로 장바구니에 담는다. 상품 목록 페이지의 레이아웃이 바뀌어도 Tool Contract만 유지되면 에이전트는 동일하게 동작한다.

브라우저 지원과 도입 시점

아직 Canary 단계이므로 프로덕션에 바로 적용할 수는 없다. 하지만 Google이 Chrome에 직접 탑재하고, MCP 생태계와 연동하는 방향으로 움직이고 있다는 점에서 웹 개발의 패러다임 변화가 시작됐다고 볼 수 있다.

[💡 잠깐! 이 용어는?] Chrome Canary: Chrome의 최신 실험 기능을 먼저 써볼 수 있는 개발자용 빌드. 안정성이 보장되지 않으며, 매일 업데이트된다. Stable 버전에 반영되기까지 보통 3~6개월이 걸린다.

웹 개발자가 준비할 것

WebMCP가 표준화되면 웹 개발에 새로운 레이어가 추가된다. 기존에는 사람을 위한 UI만 만들면 됐지만, 이제는 에이전트를 위한 Tool Contract도 함께 설계해야 한다.

• API 설계 사고방식: REST API를 설계하듯, 사이트의 핵심 기능을 Tool 단위로 추출하는 작업이 필요하다
• 보안 경계: 어떤 Tool을 공개하고, 어떤 Tool은 인증 후에만 허용할지 결정해야 한다
• 프로그레시브 인핸스먼트: WebMCP를 지원하지 않는 브라우저에서도 기존 UI가 정상 동작해야 한다

정리

• Google이 Chrome 146에 WebMCP를 Early Preview로 탑재했다
• navigator.modelContext API를 통해 웹사이트가 AI 에이전트에게 구조화된 Tool을 노출한다
• Declarative API(HTML 폼 기반)와 Imperative API(JavaScript 기반) 두 가지 모드를 제공한다
• 스크린샷 해석이나 DOM 크롤링 없이 직접 함수 호출 방식으로 동작한다
• 아직 Canary 단계이지만, 웹이 "사람을 위한 인터페이스"에서 **"사람 + 에이전트를 위한 인터페이스"**로 확장되는 시작점이다

웹사이트를 운영 중이라면 당장 WebMCP를 도입할 필요는 없다. 하지만 **"우리 사이트의 핵심 기능을 Tool 단위로 정리하면 어떤 목록이 나올까?"**라는 질문은 지금부터 던져볼 만하다. 그 목록이 곧 WebMCP Tool Contract의 초안이 된다.

참고:

• WebMCP Early Preview — Chrome Developers: https://developer.chrome.com/blog/webmcp-epp
• Google AI Introduces WebMCP — MarkTechPost: https://www.marktechpost.com/2026/02/14/google-ai-introduces-the-webmcp-to-enable-direct-and-structured-website-interactions-for-new-ai-agents/
• MCP (Model Context Protocol): https://modelcontextprotocol.io/