WebMCP
mcp2everything · 코딩
WebMCP(Web Model Context Protocol)는 AI 에이전트의 웹 통합을 위해 제안된 웹 표준이다. 사이트가 구조화된 도구를 브라우저 안에서 실행되는 AI 에이전트에 직접 노출할 수 있게 한다. 에이전트가 스크린샷을 찍고 버튼이 어디 있는지 추측하는 대신, 사이트가 이름과 설명, 매개변수 스키마를 갖춘 자바스크립트 함수를 등록하면 에이전트가 곧바로 호출한다. 가벼운 오픈소스 라이브러리와 브라우저 수준 API를 합친 것이며, 자기 페이지를 AI 어시스턴트와 깔끔하게 연동하려는 프런트엔드 개발자를 겨냥한다.
WebMCP 소개
WebMCP란 무엇인가
WebMCP는 AI 에이전트를 위한 개방형 웹 표준이다. 흔한 브라우저 자동화 모델을 통째로 뒤집는다. 에이전트가 DOM을 분석하거나 스크린샷을 읽어 페이지가 무엇을 할 수 있는지 알아내는 대신, 페이지 스스로 자신의 능력을 구조화된 도구로 선언한다. 그러면 브라우저가 그 도구를 연결된 모든 AI 에이전트에 넘기고, 에이전트는 로컬 함수처럼 호출한다.
핵심 발상은 단일 전역 객체인 navigator.modelContext 위에 서 있다. 개발자는 이름, 쉬운 설명, 인자용 JSON Schema, 처리 함수를 담아 registerTool을 호출한다. 에이전트는 도구를 자동으로 발견하고 실제 매개변수로 호출한다. 도구가 실행 중인 페이지 안에서 돌기 때문에 사용자의 세션과 쿠키, 현재 앱 상태를 이미 갖고 있다. 별도의 인증 배선이 필요 없다.
일찍 알아 둘 실제 한계가 있다. WebMCP는 브라우저 탭과 운명을 같이한다. 탭을 닫으면 도구도 사라진다. 도구만 다루며, 완전한 MCP 서버가 실어 나르는 리소스와 프롬프트는 포함하지 않는다. 그리고 작동을 승인할 사람이 있다고 전제한다. 안전 기능이지만 완전히 무인인 백그라운드 작업은 배제한다.
시작하기
- 사이트의 프런트엔드 코드를 열고 WebMCP 스크립트 태그를 추가한다(또는
npm install webmcp실행). 그러면 라이브러리가 페이지에 로드된다. WebMCP인스턴스를 만든다. 떠 있는 도우미 위젯의 버튼 색상, 위치, 크기 같은 UI 옵션을 넘길 수 있다.- 첫 도구를
mcp.registerTool(name, description, schema, handler)로 등록한다. 처리 함수는 앱이 이미 실행하는 로직을 가리키게 한다. - 스크립트가 로드된 직후 모든 도구를 등록한다. MCP 클라이언트는 새로 쓸 수 있게 된 도구를 인식하려고 재시작이 필요한 경우가 많다.
- MCP 클라이언트를 연결한 지원 브라우저에서 테스트하고 배포한다. 공개되면 에이전트가 도구를 호출할 수 있다.
이게 전부다. 백엔드도, 인증 서버도, 다시 짜는 일도 없다.
제품 정보
WebMCP의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 프런트엔드 개발자
- 개인 사이트 운영자와 소규모 팀
- AI 트래픽을 준비하는 제품 팀
작업
- 검색 도구를 노출해, 에이전트가 화면의 목록을 읽는 대신 키워드로 콘텐츠를 조회하고 구조화된 결과를 돌려받게 한다.
- 양식 입력과 제출 동작을 등록해, 어시스턴트가 세션을 이미 쥔 채 사용자를 대신해 주문이나 예약을 끝내게 한다.
- 기존 자바스크립트 업무 로직을 에이전트가 호출할 함수로 감싼다. AI만을 위해 만드는 별도 API 계층을 피할 수 있다.
활용 상황
- 계속 바뀌는 레이아웃을 클릭해 다니는 대신 에이전트가 장바구니 담기 도구를 호출하는 쇼핑 흐름.
- 사용자가 물을 때 어시스턴트가 페이지 내용을 곧바로 꺼낼 수 있는 문서 사이트.
- 어시스턴트가 DOM을 다시 해석하는 대신 등록된 리소스로 실시간 위젯을 읽는 대시보드.
주요 기능
JSON Schema를 통한 도구 등록
registerTool은 이 AI 에이전트용 웹 표준의 심장이다. 이름, 자연어 설명, 인자 스키마, 처리 함수를 넘기면 도구가 연결된 모든 에이전트에 보이게 된다. 스키마는 모델에 보낼 수 있는 입력을 정확히 알려 주어 잘못된 호출과 추측을 줄인다.
공유 세션과 페이지 맥락
도구는 페이지 안에서 돌기 때문에 사용자가 이미 가진 로그인 상태와 쿠키, 메모리 안의 데이터를 물려받는다. 에이전트는 인증을 다시 세울 필요도, 교차 출처 장벽을 걱정할 필요도 없다. AI 동작마다 별도 백엔드 프록시를 세우는 것과 비교하면 큰 단순화다.
도구와 나란히 있는 프롬프트와 리소스
동작뿐 아니라 WebMCP는 프롬프트 템플릿과 URI로 식별되는 읽기 가능한 리소스도 등록할 수 있다. 프롬프트는 흔한 질의를 틀로 잡고 호출마다 바뀌는 인자를 받을 수 있다. 리소스는 페이지 내용을 맥락으로 노출할 수 있다. 둘을 합치면 에이전트에게 누를 버튼 이상을 준다.
프레임워크와 백엔드에 의존하지 않음
라이브러리는 Chrome, Firefox, Safari, Edge에서 도는 작은 순수 자바스크립트 추가분이며 React, Vue, Angular와도 잘 어울린다. 새 서버도, 새 데이터베이스도, 아키텍처 재작성도 필요 없다. 페이지 프런트엔드를 고칠 수 있다면 WebMCP를 넣을 수 있다.
UI 변경에 대한 내성
에이전트는 화면 요소를 찾는 대신 의미 있는 도구를 호출하므로, CSS 클래스 이름이 바뀌거나 레이아웃이 뒤섞여도 통합은 깨지지 않는다. 스크린샷과 DOM 스크래핑에 기대는 에이전트는 디자이너가 페이지를 건드리는 순간 낡아 버린다. WebMCP는 그런 부류의 고장을 통째로 비껴 간다.
장단점
장점
- 백엔드 변경이 없고 스크립트 태그로 끝나는 간단한 설정이라, 작은 팀도 통합 비용이 낮다.
- MIT 라이선스에 무료이며, AI 트래픽을 흘려보내는 데 필요한 공급자 계정도 호출당 요금도 없다.
- 기존 프런트엔드 로직을 재사용하므로, 사람 사용자를 처리하는 코드가 에이전트도 처리한다.
- 사용자 세션을 자동으로 물려받아 AI 경로에서 인증 배선을 거의 없앤다.
- 주요 브라우저와 프런트엔드 프레임워크에서 돌아 한 스택에 묶이지 않는다.
단점
- 탭을 닫으면 도구가 사라져, 지속적이거나 헤드리스인 백그라운드 자동화는 떠맡을 수 없다.
- 완전한 MCP 서버가 제공하는 리소스와 프롬프트 지원이 함께 오지 않아, 일부 에이전트가 할 수 있는 일이 제한된다.
- 설계상 사용자 승인을 요구한다. 더 안전하지만 에이전트가 움직이기 전에 한 단계가 늘어난다.
- 주변 도구 생태계가 아직 이르다. 거친 부분과 적은 수의 동작 예제를 만날 수 있다.
자주 묻는 질문
사이트가 구조화된 도구를 브라우저 안의 AI 에이전트에 넘기게 한다. 에이전트는 그 도구를 직접 호출하므로, 페이지를 긁거나 클릭할 곳을 추측하지 않고도 검색하고, 양식을 채우고, 동작을 일으킬 수 있다.
관련 콘텐츠
WebMCP와 관련된 도구, 스킬, 아티클을 살펴보세요.
WebMCP 대안
Forefront
Forefront · 코딩Forefront는 오픈소스 AI로 무언가를 만드는 웹 플랫폼이다. 대표적인 오픈소스 언어 모델을 자신의 데이터로 미세 조정하고, 성능을 평가하고, API로 실행하거나 내보내 직접 호스팅할 수 있다. 폐쇄형 플랫폼의 편의를 원하면서도 모델과 데이터의 소유권은 놓지 않으려는 개발자가 대상이다.
Startkit
StartKit.AI · 코딩Startkit은 AI SaaS와 AI 래퍼 제품을 만들기 위한 보일러플레이트다. 지루한 부분을 미리 연결해 둔 AI 스타트업 보일러플레이트라고 생각하면 된다. 인증, Stripe와 Lemon Squeezy 결제, 사용량 제한, 트랜잭션 이메일, 그리고 OpenAI, Anthropic, Groq, Llama와 통신하는 AI API 스타터 키트가 포함된다. 저장소를 복제하고 가격을 정한 뒤 사용자가 실제로 돈을 내는 부분에 착수하면 된다. React와 Tailwind 위의 Next.js로 만들어졌기 때문에 보일러플레이트 코드의 상당 부분이 이미 익숙하게 느껴진다.
Testim
Tricentis · 코딩Testim은 웹, 모바일, Salesforce 애플리케이션 전반에 걸쳐 엔드투엔드 테스트를 만들고 실행하는 AI 기반 테스트 자동화 플랫폼이다. 머신러닝에 기대어 인터페이스가 바뀌어도 테스트를 안정적으로 유지하므로, 팀은 깨진 셀렉터를 고치는 데 쓰는 시간을 줄인다. 오늘부터 쓸 수 있는 자동화 테스트 도구치고 나쁘지 않다. 브라우저에서 동작을 녹화해 테스트를 만들고, 더 세밀한 제어가 필요하면 JavaScript를 더한다. 바쁜 QA 팀에게 탄탄한 선택이다.