본문으로 건너뛰기

© 2026 Molayo

Dev.to헤드라인2026. 06. 02. 19:12

WebMCP를 통해 우리 사이트를 에이전트 친화적으로 만든 방법 (그리고 그 결과)

요약

WebMCP(navigator.modelContext) API를 사용하여 웹사이트의 기존 기능을 AI 에이전트용 도구로 노출하는 구현 방법을 소개합니다. 기존 함수를 재사용하여 비용 효율적으로 에이전트 친화적인 환경을 구축하고 Lighthouse의 에이전트 브라우징 지표를 확보하는 과정을 다룹니다.

핵심 포인트

  • WebMCP는 브라우저 API를 통해 에이전트용 도구를 등록하는 기술임
  • 기존 웹 페이지의 함수를 재사용하여 구현 비용을 최소화할 수 있음
  • Lighthouse 13.3부터 에이전트 브라우징 감사 항목이 추가됨
  • 현재는 초기 단계이나 에이전트 친화적 웹 구축의 선제적 대응 사례임

요약(TL;DR): 우리는 automatelab.tech의 모든 도구와 검색창을 WebMCP — navigator.modelContext 브라우저 API — 를 사용하여 AI 에이전트(AI agents)에 연결했습니다. 이 과정에서 페이지 내 버튼들이 이미 호출하고 있는 함수들을 재사용했습니다. 이제 이 기능은 Lighthouse의 새로운 에이전트 브라우징(Agentic Browsing) 감사 항목에 나타납니다. 어떻게 구현했는지, 그리고 2026년에 이것이 시간을 들일 가치가 있는지에 대한 솔직한 분석을 공유합니다.

WebMCP란 무엇인가

WebMCP는 페이지가 브라우저 내 AI 에이전트(AI agent)를 위한 도구(tools)를 등록하기 위해 호출하는 브라우저 API(navigator.modelContext)입니다. 각 도구는 이름, 자연어 설명, JSON 입력 스키마(JSON input schema), 그리고 에이전트가 호출할 때 실행되는 핸들러(handler)를 포함합니다. 이는 서버 측 통합에서 이미 사용 중인 모델 컨텍스트 프로토콜(Model Context Protocol)의 브라우저 측 사촌 격입니다. 이 사양은 Web Machine Learning 그룹의 W3C 초안입니다.

솔직한 부분: WebMCP는 기능 플래그(feature flag) 뒤에서 Chrome 146 버전에서만 제공되며, 실제 도입 사례는 거의 제로에 가깝고, 오늘날 대부분의 에이전트(agents)는 여전히 가공되지 않은 DOM을 읽습니다. 이것은 깃발을 꽂는(plant-the-flag) 행보입니다. 그럼에도 불구하고 이를 수행하는 두 가지 이유는 다음과 같습니다: 페이지에 이미 작동하는 액션(actions)이 있다면 비용이 저렴하며, Google이 막 이를 측정하기 시작했기 때문입니다.

도구 등록하기

두 가지 경로가 있습니다. 선언적(declarative) 방식은 기존 <form>toolnametooldescription 속성을 추가하며, 브라우저가 입력 스키마를 대신 구축해 줍니다. 명령형(imperative) 방식은 registerTool()을 호출합니다. 우리는 모든 도구에 이미 연산 함수(compute function)가 있었기 때문에 명령형 경로를 선택했습니다:

if (navigator.modelContext) {
  navigator.modelContext.registerTool({
    name: "audit_ai_seo",
...

핵심은: 새로운 도구를 작성하는 것이 아니라, 이미 출시한 도구들을 노출하는 것입니다. 전체 통합 과정은 navigator.modelContext를 기능 감지(feature-detects)하고, 해당 기능이 없는 모든 브라우저에서는 아무 작업도 수행하지 않는(no-ops) 약 40줄 정도의 헬퍼(helper) 함수로 이루어져 있어 일반 방문자에게는 영향을 주지 않습니다.

우리가 노출한 것들

페이지 내 버튼 뒤에 있는 함수를 재사용하여 총 10개의 접점(surfaces)을 마련했습니다:

접점WebMCP 도구
AI SEO Checkeraudit_ai_seo
...

Lighthouse 관점

Lighthouse 관점

Lighthouse 13.3에 에이전트 브라우징 (Agentic Browsing) 카테고리가 추가되었습니다. WebMCP 체크는 정보 제공용일 뿐입니다. 즉, 페이지가 등록한 도구 목록을 나열할 뿐, 도구가 없다고 해서 검사를 실패 처리하지는 않습니다. 나머지 세 가지 체크 항목(llms.txt, 접근성 트리 (accessibility-tree) 무결성, 레이아웃 안정성 (layout stability))은 WebMCP 채택 여부와 관계없이 현재 시점에서 충분한 가치가 있습니다. 이 항목들은 스크린 리더 (screen readers), 검색 크롤러 (retrieval crawlers), 그리고 실제 사용자들에게 도움이 됩니다.

2026년에 그만한 가치가 있을까요?

지금 바로 얻을 수 있는 이득을 위해 에이전트 준비 (agent-readiness)의 기초를 다지세요. llms.txt를 배포하고, 접근성 트리 (accessibility tree)를 수정하며, 레이아웃 이동 (layout shift)을 제거하십시오. 그리고 WebMCP 등록은 1년 뒤에 중요해질 수도 있는 표준에 대한 저렴한 옵션으로 취급하십시오. 진지하게 고려해야 할 주의사항이 하나 있습니다. WebMCP 보안 모델은 아직 불완전하므로, 사용자 확인 단계 없이 파괴적이거나 계정 정보를 변경하는 동작을 절대 노출하지 마십시오. 읽기 전용 감사 (audits), 계산기, 검색 기능은 안전한 첫 번째 후보가 될 수 있지만, "내 계정 삭제"는 아닙니다.

단계별 상세 내용이 담긴 전체 글: https://automatelab.tech/blog/al-products/how-we-made-automatelab-tech-agent-ready-webmcp/

AI 자동 생성 콘텐츠

본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0