게시일: 2026년 5월 18일
WebMCP는 다양한 용도로 사용할 수 있습니다. 이 문서에서는 사용자와 사용자의 에이전트를 지원하기 위해 WebMCP를 구현하는 방법을 알아봅니다. 중요한 사용자 여정 (CUJ)을 지원하기 위해 제공할 수 있는 도구에 대한 권장사항과 함께 사용자 및 에이전트의 관점에서 이 프로세스를 읽어봅니다.
사용자의 구매 지원
소매점 개발자는 WebMCP에 적합한 후보입니다. 사용자가 컬렉션의 누락된 부분을 찾는 것과 같이 항목을 직접 선택하려는 경우가 있는 반면, 작업을 완료해야 하는 경우도 있습니다. 예를 들어 주간 식료품 목록, 파티 계획, 즐겨찾는 구매 재주문 등이 있습니다.
이러한 쇼핑 CUJ의 사용자는 제시입니다. 제시는 원하는 것을 정확히 찾기 위해 카테고리를 검색하는 데 시간을 보내고 싶어 하지 않습니다. 대신 브라우저 에이전트를 사용하여 쇼핑 요구사항을 지원하므로 원하는 것을 더 빠르게 찾고 더 빠르게 결제할 수 있습니다.
쇼핑 여정 지원
제시는 아이의 10번째 생일 파티에 필요한 물품을 구매하기로 했습니다. 파티의 테마는 우주이며 제시는 이미 쇼핑 목록을 작성했습니다. 일부 용품은 전문 식료품점에서, 다른 용품은 대형 매장에서, 일부는 전문 파티 용품점에서 구매해야 할 수 있습니다.
제시는 브라우저 에이전트에게 다음과 같이 요청합니다. '두세 개의 지역 매장에서 쇼핑 목록에 있는 제품의 최적 가격을 찾아줘. 결제를 완료할 수 있도록 위시리스트를 만들어 줘. 찾을 수 없는 제품이 있으면 알려줘.'
제시는 이 질문을 할 때 몇 가지 가정을 했습니다. 여기에는 에이전트가 여러 장바구니에 동일한 항목을 추가하지 않는다는 가정이 포함됩니다. 두 매장에 항목이 있는 경우 에이전트는 비용이 더 낮은 항목을 결정하여 해당 장바구니에 추가합니다. 제시는 또한 지역 매장이 스프링필드에 있는 매장이라고 가정합니다.
아동용 파티 용품을 대량으로 추천하는 지역 비즈니스인 Space Shoppe의 개발자이든 대규모 식료품 체인의 개발자이든 제시의 에이전트를 지원하는 도구를 빌드할 수 있습니다.
- 제시가 쇼핑 목록의 기대치를 충족하는 카테고리의 가능한 항목을 찾을 수 있는
search_products()예:productType="wall-decorations",category="planets",age="child". - 제시가 장바구니에 추가하기 전에 모든 항목을 검토할 수 있는
add_to_wishlist() - 제시가 모든 제품의 가격이 특정 금액 미만이어야 한다고 요청하는 경우
검색을 구체화하는 도구를 제공할 수 있습니다.
refine_search(priceRange = "0-49.99")
재구매 지원
제시는 Example Grocery Company의 치즈 스틱을 좋아했지만 브랜드가 무엇인지 정확히 기억하지 못합니다. 제시는 에이전트에게 '지난달에 구매한 치즈 스틱을 재주문해 줘'라고 요청합니다.
정기 결제 서비스를 제공하지 않더라도 고객이 에이전트를 사용하여 동일한 제품을 다시 주문하도록 도울 수 있습니다. Example Grocery Company의 개발자는 다음과 같은 도구를 제공할 수 있습니다.
get_order_history(startdate="",enddate="",)주문 날짜 및 배송 상태와 함께 제품 세부정보를 반환하는add_to_wishlist(productId="XYZ", quantity = 1)제시가 장바구니에 추가하기 전에 모든 항목을 검토할 수 있는delivery(method="pickup")
에이전트는 제시에게 '3월 7일에 주문한 체다 치즈 스틱을 찾았습니다. 장바구니에 패키지 하나를 추가했습니다. 결제를 진행하시겠어요?'라고 응답합니다. 그러면 제시는 Example Grocery Company에서 체다 치즈 스틱만 주문하거나 계속 탐색하고 다른 제품을 구매할 수 있습니다.
사용자의 양식 작성 지원
자동 완성은 올바르게 배포하면 양식 이탈률을 75%낮출 수 있는 매우 유용한 브라우저 기능입니다. 자동 완성으로 양식을 빌드하는 것이 좋지만 WebMCP를 사용하면 완료율을 더욱 개선할 수 있습니다.
WebMCP는 사용자의 에이전트가 긴 양식을 빠르고 정확하게 작성하도록 지원합니다. 다음 섹션에서는 찰리가 다양한 복잡한 양식을 작성하도록 안내합니다.
작업 관리
찰리는 로펌의 IT 부서에서 일하며 로펌의 새 웹사이트를 디자인할 계약자를 고용했습니다. 특히 변호사의 타임시트와 기대치가 다르기 때문에 비용과 타임시트를 관리하는 것이 매우 어려웠습니다.
작업 관리 소프트웨어 회사에서 일하는 찰리는 모든 공급업체와 변호사가 올바른 컨텍스트로 타임시트를 더 쉽게 입력할 수 있도록 하여 회사가 올바른 금액을 올바른 부서에 청구하도록 하고 싶습니다. WebMCP 도구를 추가하여 찰리의 계약자와 변호사가 에이전트를 사용하여 일일 타임시트 작업을 입력하도록 지원할 수 있습니다.
<form toolname="add-to-timesheet"
tooldescription="Report billing task and time to add to the timesheet."
toolautosubmit>
<fieldset>
<label for="date">Date</label>
<input name="date" type="datetime-local" toolparamdescription="Date of work.">
<label for="task_category">Task category</label>
<select id="task_category" name="task_category"
toolparamdescription="Type of task completed per time block">
<option value="admin">Admin</option>
<option value="billing">Billing</option>
<option value="client">Client meetings or communication</option>
<option value="development">Development</option>
</select>
<label for="minutes_worked">Minutes working on the task</label>
<input type="number" id="minutes_worked" name="minutes_worked" min="30" max="600"
toolparamdescription="Minutes worked on this date and task, with a minimum of 30 and maximum of 600."
placeholder="60">
<label for="work_details">Details</label>
<input name="work_details"
toolparamdescription="Additional details of work completed, for managerial review.">
</fieldset>
<button type="submit">Update timesheet</button>
</form>
자동차 구매
찰리는 중고차를 구매하려고 합니다. 자동차 유형, 좌석 수, 선호하는 연료와 같이 찰리가 중요하게 생각하는 기능이 있습니다. 자동차 색상, 백업 카메라와 같은 편의시설과 같은 다른 기능은 덜 중요합니다. 찰리는 에이전트에게 '가족용 자동차를 찾아줘. 좌석이 7개 있어야 하고 일반 휘발유를 사용하며 지난 10년 동안 출시된 모델이어야 해'라고 요청합니다.
웹사이트에 이미 필수 필드와 선택적 필드가 있는 양식이 있는 경우 양식을 WebMCP 도구로 변환하는 데는 두 단계만 필요합니다.
HTML
<form toolname="search_cars"
tooldescription="Search for cars based on various criteria such as type, seats, year, fuel, and features."
toolautosubmit>
<fieldset>
<label for="car_type">Car Type</label>
<select id="car_type" name="car_type" toolparamdescription="Type of car">
<option value="">Any</option>
<option value="family">Family Car</option>
<option value="suv">SUV</option>
<option value="sedan">Sedan</option>
</select>
<label for="seats">Min Seats</label>
<input type="number" id="seats" name="seats" min="1" max="9"
toolparamdescription="Minimum number of seats required"
placeholder="7">
<label for="min_year">Minimum Year</label>
<input type="number" id="min_year" name="min_year" min="1900" max="2026"
toolparamdescription="Find cars made after a specific year"
placeholder="2016">
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="fuel_type">Fuel Type</label>
<select id="fuel_type" name="fuel_type" toolparamdescription="Preferred fuel type">
<option value="">Unleaded regular</option>
<option value="">Unleaded premium</option>
<option value="diesel">Diesel</option>
...
</select>
<div>
<input type="checkbox" id="has_ac" name="has_ac" value="true"
toolparamdescription="Check if air conditioning is required">
<label for="has_ac">Air Conditioning (AC)</label>
</div>
</fieldset>
<button type="submit">Search Cars</button>
</form>
JavaScript
search_cars({car_type, seats, min_year, fuel_type, has_ac, ... })
보증 청구
찰리는 TV에 대한 보증 청구를 제출하려고 합니다. TV를 주문한 웹사이트의 기본 페이지로 이동합니다. 즉시 에이전트에게 의도를 밝힙니다.
'지원 페이지로 이동하여 TV에 대한 보증 청구를 제출해 줘. 화면이 켜지지 않아. 일련번호는 XYZ-987이야. 나머지는 저장된 세부정보를 사용해 줘.'
WebMCP 도구를 사용하는 에이전트는 청구 절차를 시작하고 필요한 모든 정보를 입력합니다. 에이전트에게 추가 정보가 필요한 경우 사용자에게 에이전트에게 정보를 제공하거나 양식을 수동으로 작성하여 제출하도록 요청할 수 있습니다.
- 올바른 양식으로 이동하는
start_claim_process() - 특정 제품 및 날짜 정보를 입력하는
populate_product_details(serial_number, purchase_date) - 사용자 프롬프트의 오류 설명으로 긴 텍스트 필드를 채우는
describe_issue(issue_description) populate_contact_info(name, email, phone)
이 경우 WebMCP 도구를 제공하면 사용자가 보증 청구 양식을 찾을 위치를 이해하지 않고도 에이전트를 사용하여 웹사이트를 탐색할 수 있습니다. 찰리는 웹사이트 구조를 자세히 이해하지 않고도 사용자 여정을 성공적으로 완료할 수 있었습니다.
이벤트 서비스 요청
찰리와 제시가 9월에 결혼하며 케이터링 업체를 고용하려고 합니다. 이 지역에는 수십 개의 케이터링 업체가 있으며 각 요청에 필요한 정보가 있고 동일한 유형의 서비스를 요청하는지 확인하려고 합니다.
찰리는 에이전트에게 다음과 같이 요청합니다.
'2026년 9월 8일에 열리는 결혼식에 스프링필드에 있는 케이터링 업체에 문의해 줘. 하객 100명을 위한 채식 메뉴를 원해. 하객 두 명은 식이 제한이 있으며 코셔 식사와 글루텐 프리 식사를 포함한 특별한 식사가 필요해. 맥주와 와인만 포함하고 싶어.'
다음 도구를 추가하여 찰리의 에이전트가 케이터링 회사에 문의를 제출하도록 지원합니다.
start_event_request()create_wedding_reception(guests=100,date="September 8, 2026")add_dietary_restrictions(restrictions=["kosher","gluten-free"], guests = 2)select_drink_package(package = "Light")submit_event_request()
사용자의 정보 필터링 지원
복잡한 필터가 있는 대규모 항목 컬렉션이 있는 사이트에는 여러 유형이 있습니다. 수백 또는 수천 개의 목록이 있을 수 있으며 각 목록에는 사용자가 찾을 수 있는 고유한 기능 조합이 있습니다. 예를 들어 주택 임대 웹사이트, 호텔 예약 소스, 티켓팅 사이트 등이 있습니다.
이 섹션에서는 다나가 특정 환경설정에 맞는 관련 옵션을 찾도록 지원합니다.
관련 주택 목록 찾기
다나는 가족과 함께 새 도시로 이사하며 아파트를 찾아야 합니다. 모든 주택 사이트에는 서로 다른 정보가 나열되어 있으며 일부에는 사진이 있고 일부에는 가격, 침실, 욕실, 기타 기능을 포함한 여러 가지 유형의 필터가 있습니다. 일부 등록정보에는 정확한 위치가 표시되는 반면 다른 등록정보에는 주변 지역만 표시될 수 있습니다.
다나는 에이전트에게 다음과 같이 요청합니다.
브루클린에서 임대할 수 있는 아파트를 보여 줘. A 트레인 역에서 도보 10분 이내, 트라이베카까지 1시간 이내 거리에 있는 아파트. A 기차역에서 도보로 10분 미만, 트라이베카까지 1시간 미만이어야 해. 아파트에는 침실이 3개 이상 있어야 하고 식기세척기가 있어야 해. 아파트 내 또는 건물에 세탁기와 건조기가 있으면 좋겠어.
Dana의 에이전트가 에이전트 친화적인 필터링을 등록정보 사이트에 추가하여 적합하고 관련성 있는 임대 정보를 찾도록 도울 수 있습니다.
목록 사이트에 에이전트 친화적인 필터링을 추가하여 다나의 에이전트가 적합하고 관련성 높은 임대 주택을 찾도록 도울 수 있습니다.
search(
max-price=4500,
location="Brooklyn",
features=["dishwasher"],
rooms=3,
optionalFeatures=["washer-dryer"]
)
필터 적용
apply_filters(
transit="train",
max_time="1 hour",
destination="Tribeca"
)
에이전트는 이러한 함수를 사용하여 숙박 시설 메타데이터를 파싱하고 결과가 모든 요구사항 (침실 3개, 식기세척기 포함)을 충족하는지 확인합니다. 이에 따라 에이전트는 특정 목록에 연결되는 핀이 있는 지도와 트라이베카에서 총 거리를 반환합니다. 목록에 세탁기 및 건조기와 같은 선택적 기능이 있는 경우 핀은 다른 색상으로 표시됩니다.
여행 예약
다나와 아내 로사리오는 독일 베를린으로 휴가를 계획하고 있습니다. 다나는 감당할 수 있는 비용으로 편안한 숙박을 제공하는 기준을 충족하는 호텔 옵션을 찾고 싶어 합니다. 다나는 에이전트에게 '독일 베를린에서 1박에 300달러 미만이고 수영장과 조식이 포함된 호텔을 몇 군데 찾아줘'라고 요청합니다.
훌륭한 여행 상품을 찾는 여행 예약 서비스의 개발자입니다.
검색
search_hotels(location = "Berlin", guests = 2)
필터 적용
filter_search_results(max_price=300,amenities=["pool","restaurant"])
다나의 에이전트는 기준을 충족하는 호텔 3곳을 반환하고 '옵션을 더 보여 드릴까요? 아니면 고려해야 할 추가 기준이 있나요?'라고 묻습니다.
의견 공유
WebMCP의 이점을 누릴 수 있는 사용자 여정 유형은 무엇이라고 생각하시나요? 기대를 충족하기 위해 API에 추가할 수 있는 추가 기능이 있나요? 이러한 API를 사용해 보고 의견이 있으면 언제든지 알려주세요.
- WebMCP 설명자를 읽고, 질문을 하고 토론에 참여하세요.
- Chrome 상태에서 Chrome 구현을 검토하세요.
- 새로운 API를 미리 살펴보고 메일링 리스트에 액세스하려면 사전 체험 프로그램에 가입하세요.
- Chrome 구현에 관한 의견이 있으면 Chromium 버그를 신고하세요.