WebMCP

Alexandra Klepper
Alexandra Klepper
GitHub Bluesky

게시일: 2026년 5월 18일

WebMCP는 AI 에이전트를 위한 구조화된 도구를 빌드하고 노출하는 데 도움이 되는 제안된 웹 표준 입니다. WebMCP는 JavaScript를 제공하고 HTML 양식 요소를 주석 처리하여 에이전트가 사용자 환경을 지원하기 위해 페이지 기능과 상호작용하는 방법을 정확히 알 수 있도록 합니다. 이렇게 하면 에이전트 작동의 성능과 안정성이 크게 개선될 수 있습니다.

AI 에이전트는 새로운 기술입니다. AI 에이전트는 인간 사용자가 매우 복잡하고 기술적인 작업을 더 잘 완료할 수 있도록 도와줍니다. WebMCP는 에이전트형 작업 완료에 더 높은 정확도를 제공하며 점진적 개선으로 추가할 수 있습니다.

WebMCP를 사용하는 이유

WebMCP는 상호작용 규칙을 제공하여 웹 애플리케이션과 에이전트 간의 격차를 해소하고 효율성, 안정성, 작업 완료를 개선하는 데 도움이 됩니다. 에이전트가 버튼이나 필드와 같은 요소를 검토하여 목적을 이해하는 대신 웹사이트에서 요소의 목적을 선언하므로 올바르게 사용됩니다.

이는 여러 단계가 있을 수 있고 각 단계를 에이전트가 해석할 수 있는 작동보다 더 안정적입니다.

웹사이트는 tool을 정의하여 검색 또는 구매와 같은 명시적 목적을 공유할 수 있습니다. 도구는 웹페이지에서 눈에 띄게 실행되므로 사용자는 작업이 예상대로 완료된다는 신뢰를 얻습니다. 또한 브랜드와 인간 중심 디자인 선택을 그대로 유지합니다.

WebMCP는 다음을 지원합니다.

  • 탐색: 페이지에서 checkout 또는 filter_results와 같은 도구를 에이전트에 등록하는 표준 방법입니다.
  • JSON 스키마: 환각 또는 오해를 줄이기 위한 입력 및 예상 출력의 명시적 정의입니다.
  • 상태: 현재 페이지 컨텍스트에 대한 공유 이해로, 에이전트가 실시간으로 작업할 수 있는 리소스를 알 수 있습니다.

Google의 목표는 에이전트 기능을 갖춘 모든 브라우저가 구현하고 활용할 수 있는 API를 빌드하여 사용자가 작업을 더 쉽게 완료할 수 있도록 하는 것입니다. GitHub에서 이 프로세스를 따라갈 수 있습니다 GitHub.

사용 사례

웹에서 WebMCP를 사용하는 방법은 다양합니다. 예를 들면 다음과 같습니다.

  • 고객 지원을 받도록 돕습니다. 고객에게 소프트웨어를 제공하는 경우 다양한 질문에 답변하기 위한 복잡한 지원 흐름이 있을 수 있습니다. WebMCP를 사용하면 상담사가 올바른 양식으로 더 빠르게 이동하고 사용자가 제공한 정보로 필드를 채울 수 있습니다.
  • 여행 예약 개선. 상담사가 더 적은 단계로 복잡한 다구간 및 다중 승객 여행을 예약하도록 돕습니다.

구매와 같은 일부 작업은 민감할 수 있습니다. 확인 대화상자와 사용자 상호작용을 요청하는 명령어를 포함할 수 있습니다.

실제로 도구는 다음 작업을 수행할 수 있습니다.

  • 구조화된 양식 작성: 에이전트가 사용자와의 대화에서 수집한 데이터를 양식 필드에 올바르게 매핑하도록 돕는 submit_application 도구를 빌드합니다. 예를 들어 필드에 전체 이름이 필요한지 아니면 이름과 성을 별도로 입력해야 하는지 구분할 수 있습니다.
  • 인간 우선 인터페이스에서 에이전트 상호작용 지원: 특정 필드는 인간 사용자를 위해 설계되었지만 에이전트가 이해하지 못할 수 있습니다. 예약 또는 이벤트 예약에서 복잡한 날짜 및 시간 선택을 허용하는 date_pick 도구를 빌드할 수 있습니다.
  • 더 빠른 애플리케이션 디버깅: 개발자 설정 페이지에서 run_diagnostics 도구를 빌드하여 에이전트가 중첩된 메뉴 뒤에 숨겨진 수정사항을 트리거할 수 있습니다.

사용 사례가 누락되었나요? 아니면 WebMCP에 관해 공유하고 싶은 아이디어가 있나요? 사전 체험 프로그램에 참여하고 의견을 공유하세요.

시작하기

WebMCP는 로컬 개발을 위한 Chrome 신고로 제공됩니다. Chrome 149의 오리진 트라이얼 에서 사용할 수 있습니다.

WebMCP를 로컬에서 사용 설정하려면 다음 단계를 따르세요.

  1. Chrome을 열고 chrome://flags/#enable-webmcp-testing으로 이동합니다.
  2. 플래그를 사용 설정 으로 설정합니다.
  3. Chrome을 다시 시작하여 변경사항을 적용합니다.

WebMCP API 사용

웹사이트 도구를 설정하는 데 사용할 수 있는 API는 두 가지입니다.

  • 명령형 API: 양식 입력, 탐색 도구, 상태 관리 또는 기타 함수와 같은 표준 JavaScript로 다양한 유형의 도구를 정의합니다.
  • 선언형 API: 표준 HTML 양식에 주석을 추가하여 WebMCP 도구를 만듭니다.

제한사항

WebMCP는 에이전트와 인간을 위해 복잡한 작업을 더 간단하게 만드는 것을 목표로 하지만 몇 가지 제한사항이 있습니다.

  • 브라우징 컨텍스트 필요: 도구 호출은 JavaScript에서 처리되므로 표시되는 인터페이스와 브라우저 컨텍스트를 제공하려면 브라우저 탭 또는 웹 뷰를 열어야 합니다. 즉, 에이전트 또는 보조 도구가 헤드리스 상태에서 도구를 호출하는 것은 지원되지 않습니다.
  • 복잡한 인터페이스의 오버헤드 증가: 사이트가 매우 복잡한 경우 애플리케이션 및 인터페이스 상태를 처리하기 위해 JavaScript를 리팩터링하거나 추가해야 할 수 있습니다.
  • 도구 검색 가능성: 클라이언트와 브라우저는 호출 가능한 도구가 있는지 확인하기 위해 사이트를 직접 방문해야 합니다.

권한 정책

두 API 모두 tools 권한 정책에 의해 보호됩니다. 정책은 기본적으로 self로 설정되어 최상위 및 동일 출처 컨텍스트에서 도구 등록을 허용하고 교차 출처 iframe에서는 사용 중지합니다.

교차 출처 iframe에서 WebMCP 도구를 허용하려면 iframe에 allow="tools" 속성을 추가합니다.

데모

명령형 및 선언형 구현을 모두 다루는 데모의 예는 다음과 같습니다.

GitHub에서 데모 소스 코드를 검토하고 살펴볼 수도 있습니다. GitHub.

검사기 확장 프로그램으로 에이전트 채팅 모방

모델 컨텍스트 도구 검사기 확장 프로그램 을 설치하여 에이전트를 실험하고 WebMCP 도구가 라이브 데모 또는 자체 애플리케이션에서 어떻게 작동하는지 확인합니다. 자연어 프롬프트를 사용하여 에이전트가 WebMCP 도구와 예상대로 상호작용하는지 확인합니다.

확장 프로그램을 사용하면 다음 작업을 할 수 있습니다.

  • navigator.modelContext API를 모니터링하여 페이지에 등록된 도구를 확인합니다.
  • 도구를 수동으로 호출하고 함수를 실행합니다.
  • JSON 스키마가 올바르게 정의되어 있고 브라우저가 도구가 예상하는 대로 데이터를 파싱할 수 있는지 확인합니다.
  • 도구에서 반환된 구조화된 출력 또는 오류 메시지를 확인하여 명확하게 작성되고 올바르게 형식이 지정되어 에이전트가 이해할 수 있도록 합니다.

자연어를 사용하여 에이전트와 대화하여 적절한 WebMCP 도구를 올바르게 식별하고 호출할 수 있는지 확인합니다. 프롬프트는 기본적으로 gemini-3-flash-preview 모델로 전송됩니다.

참여 및 의견 공유

WebMCP는 현재 논의 중이며 향후 변경될 수 있습니다. 이러한 API를 사용해 보고 의견이 있으면 알려주세요.