구글과 마이크로소프트가 함께 만든 WebMCP, AI 에이전트가 DOM을 더듬지 않아도 되는 이유

AI 에이전트가 웹사이트에서 항공권을 검색하려면 어떻게 해야 할까요? 지금까지는 사람처럼 DOM 요소를 찾아서 클릭하고 텍스트를 입력하는 수밖에 없었어요. Playwright MCP 같은 도구로 자동화할 수는 있지만, 웹 페이지 구조가 조금만 바뀌면 에이전트가 길을 잃죠. 2026년 2월, 구글과 마이크로소프트가 이 문제에 대해 완전히 다른 접근법을 내놓았어요.

"나한테는 이런 도구들이 있어." 웹사이트가 AI 에이전트에게 직접 말하게 하자는 발상이에요. 이게 바로 WebMCP의 핵심이죠. W3C Web Machine Learning 커뮤니티 그룹에서 관리하고 있고, 도구 구조도 MCP와 동일한 형태(name, description, inputSchema)를 따라요.

HTML 폼에 속성 세 개만 추가하면 AI가 쓸 수 있는 도구가 된다

WebMCP는 두 가지 API를 제공해요. 선언적(Declarative) API는 기존 HTML form 요소에 `toolname`, `tooldescription`, `toolparamdescription` 속성만 추가하면 자바스크립트 한 줄 없이도 AI 에이전트용 도구로 변환돼요. 브라우저가 폼의 필드 정보를 자동으로 JSON Schema로 변환해서 에이전트에게 넘기는 구조죠.

SPA처럼 동적 UI를 다루거나 페이지 이동 없이 처리해야 하는 작업에는 명령적(Imperative) API를 써요. `navigator.modelContext` 객체를 통해 도구를 등록하고 관리할 수 있어요. `registerTool()`로 등록하고 `unregisterTool()`로 빼거나 `provideContext()`로 전체 도구셋을 한꺼번에 갈아치울 수 있죠.

통제권이 에이전트가 아닌 사이트 운영자에게 있다

이전 방식과 가장 큰 차이는 통제권의 위치예요. 에이전트가 제멋대로 버튼을 클릭하는 게 아니라, 사이트 측에서 "에이전트는 이렇게 상호작용해라"를 명확하게 정의하는 거거든요. "상품 검색", "장바구니 담기" 같은 도구를 선언해두면 에이전트는 DOM을 뒤지지 않고 바로 호출할 수 있어요. UI가 바뀌어도 괜찮은 이유는 WebMCP 도구가 HTML 구조가 아니라 애플리케이션 로직에 묶여 있기 때문이에요.

MCP가 AI 모델과 백엔드 서비스를 잇는 표준이라면, WebMCP는 AI 에이전트와 브라우저 속 웹사이트를 잇는 표준이에요. 브라우저가 중간에서 WebMCP 도구를 MCP 포맷으로 변환해서 에이전트에게 넘겨주는 구조인데, 이건 웹과 AI의 관계를 근본적으로 바꿀 수 있는 움직임이에요. 크롤링과 스크래핑에 의존하던 시대가 끝나고, 웹사이트가 자발적으로 AI와 소통하는 시대가 열리는 셈이죠.