WebMCP 정리: AI 에이전트가 웹사이트를 스크래핑 없이 다루게 만드는 브라우저 API와 구글 데모

핵심 메시지

• WebMCP는 웹페이지 안에 에이전트용 도구를 직접 선언해, 별도 서버 없이 브라우저 API만으로 노출하는 방식이다.
• 에이전트는 HTML을 긁거나 추측하지 않고, 페이지가 정의한 이름·입력·출력이 명시된 도구 목록을 보고 호출한다.
• 도구는 페이지 맥락에 따라 달라진다. 홈에서는 상품 검색·분류 조회, 상품 페이지에서는 장바구니 담기 같은 식이다.
• 스크린샷 기반 조작과 비교해 탐색이 훨씬 빠르고 토큰 소모가 극히 적다는 점을 발표자는 강조했다.
• 원격 에이전트뿐 아니라 로컬 에이전트가 웹 UI를 다루는 흐름도 열려, 개발 과정의 시각적 확인 단계를 자동화할 수 있다.

쉽게 이해하기

구글 개발자 전문가 우고는 점점 더 많은 이용자가 상품 검색이나 비교, 주문 같은 일을 AI 에이전트에게 맡기고 있다는 관찰에서 이야기를 시작한다. 그렇다면 웹사이트는 사람이 읽을 수 있는 것만으로는 부족하고, 기계가 안정적으로 다룰 수 있어야 한다는 것이다. WebMCP는 바로 그 간극을 메우려는 기술로 소개된다.

동작 방식은 단순하다. 페이지가 로드될 때 그 페이지에 딸린 도구들이 함께 등록되어 에이전트에게 노출된다. MCP 표준처럼 동작하지만 별도의 서버에서 도는 것이 아니라 웹페이지 자체에 얹혀 브라우저 API로 드러난다는 점이 다르다. 도구를 만들려면 등록하고, 무슨 일을 하는지 설명하고, 입력과 출력을 선언한 뒤 필수 항목을 표시하면 끝이다.

발표자는 '해피 커피'라는 가상의 사내 데이터 개발자 포털을 리액트로 만들어 시연했다. 데이터 파이프라인과 품질 검사, 비용 모니터링을 한곳에서 관리하는, 많은 회사에 하나쯤 있는 종류의 도구다. 크롬 확장에서 제미나이에게 데이터셋을 찾고 품질 검사 결과를 분석해 요약해 달라고 요청하자, 페이지 맥락을 이해해야 가능한 일련의 작업을 빠르게 처리했다.

발표자가 특히 기대를 건 지점은 로컬 에이전트다. 데이터 파이프라인을 프로덕션에 병합하기 전에는 스테이징 실행으로 데이터셋이 제대로 만들어지는지 확인하는데, 요즘 개발자들은 이 개발 과정 자체를 CLI 위의 에이전트에게 맡긴다. 다만 결과를 확인할 때는 로그와 계보, 샘플 데이터를 보여 주는 웹 UI가 여전히 최선의 형식이다.

그래서 그는 웹 포털 안에 로컬 터미널을 띄우고, 포털 자체를 WebMCP로 제미나이에게 노출했다. 제미나이가 로컬에서 데이터 변환 코드를 작성하고, 완성되면 스테이징 실행을 걸고, 파이프라인 페이지로 이동해 실행 상황을 보여 준다. 사람은 그 화면에서 로그와 데이터 샘플을 직접 확인하면 된다. 원한다면 사람이 지켜보지 않고 전 과정을 자율적으로 흐르게 둘 수도 있다.

주요 인사이트

• 핵심은 새로운 서버가 아니라 '계약'이다. 도구 이름과 입력·출력 타입을 페이지가 선언하는 순간, 에이전트의 동작은 화면 인식이라는 불확실한 단계를 건너뛰고 명시적 호출로 바뀐다.
• 도구를 페이지 단위로 쪼개는 설계는 컨텍스트 관리 측면에서도 유리하다. 에이전트는 지금 보고 있는 페이지에 필요한 기능만 보게 되므로 선택지가 줄고 오작동 여지도 줄어든다.
• 토큰 비용은 부수 효과가 아니라 채택의 동기다. 스크린샷을 반복해서 읽는 방식은 같은 작업에 훨씬 많은 토큰을 쓰기 때문에, 비용 차이가 곧 에이전트 친화적 사이트를 만들 이유가 된다.
• 로컬 에이전트 사례는 웹 UI의 역할을 다시 정의한다. 코드 작성은 터미널의 에이전트가 하더라도, 결과를 사람이 납득하게 보여 주는 일은 여전히 화면의 몫이며 그 화면도 에이전트가 조작할 수 있게 된다.
• 사이트를 만드는 쪽에서 보면 이것은 통제권의 문제이기도 하다. 에이전트가 무엇을 할 수 있고 무엇을 할 수 없는지를 페이지 제작자가 명시적으로 정하게 되기 때문이다.

자주 묻는 질문

관련 AI 소식