상담사 친화적인 웹사이트 구축

Kasper Kulikowski

Omkar More

웹사이트에 새로운 유형의 방문자가 있습니다. 일부 인간 사용자는 수동 탐색에서 목표 지향 여정을 AI 에이전트에게 위임하는 방식으로 전환하고 있습니다. 이러한 자율 시스템은 입력을 해석하고, 계획하고, 사용자를 대신하여 작업을 실행할 수 있습니다.

하지만 많은 웹사이트는 복잡한 마우스 오버 상태, 이동하는 레이아웃, 유연한 모션 등 인간을 위해 아름답게 설계되어 있습니다. 이 기능은 상담사에게 작동하지 않습니다.

에이전트가 사이트를 보는 방식

상담사는 모니터에서 웹사이트를 보지 않습니다. 사이트의 머신 리더블 표현에서 작동합니다. 이 표현의 품질에 따라 성능이 결정됩니다.

상담사는 스크린샷, 원시 HTML, 접근성 트리의 세 가지 기본 방식으로 웹사이트를 볼 수 있습니다.

스크린샷

에이전트는 렌더링된 페이지의 스냅샷을 찍고 비전 모델을 사용하여 요소를 식별합니다. 스크린샷을 보면 상담사는 오른쪽 상단의 검색창이 전역 검색이고 가운데의 상자는 양식 필드일 가능성이 높다는 것을 알 수 있습니다. 상담사가 색상, 크기, 근접성을 사용하여 중요도를 판단할 수 있으므로 시각적 단서가 유용할 수 있습니다. 큰 삭제 버튼은 작은 '도움말' 링크보다 더 신중하게 해석될 수 있습니다. 하지만 스크린샷을 분석하는 것은 느리고 비용이 많이 들 수 있으므로 (사용된 토큰 측면에서) 구조가 혼동스러운 경우 백업으로 사용하는 것이 좋습니다.

HTML

에이전트가 DOM을 분석하고 HTML을 읽습니다. 요소가 중첩되는 방식, DOM 트리의 논리적 계층 구조, 구조를 정의하는 ID 및 클래스와 같은 속성, 사이트의 정보 백본을 형성하는 원시 데이터 문자열을 이해합니다. 이를 통해 에이전트는 요소 간의 관계를 이해할 수 있습니다.

지금 구매 버튼이 제품 컨테이너 내에 있으면 에이전트는 해당 버튼이 해당 특정 제품에 속한다고 가정합니다.

접근성 트리

접근성 트리는 브라우저 네이티브 API로, DOM을 가장 중요한 요소인 상호작용 요소의 역할, 이름, 상태로 추출합니다. 보조 기술에서 사용하는 페이지의 시맨틱 요약입니다. AI 에이전트의 경우 순수한 유틸리티에 집중하기 위해 CSS의 시각적 '노이즈'를 무시하는 고화질 지도 역할을 합니다. 이 트리를 해석하면 에이전트가 모든 전환 버튼, 슬라이더, 입력 필드의 기능적 의도를 학습할 수 있습니다.

WebMCP 도구

WebMCP는 웹사이트와 에이전트 간의 격차를 해소하고 명시적인 목적과 작업을 에이전트와 공유하기 위해 제안된 웹 표준입니다. 이는 JavaScript 또는 HTML 주석인 도구를 정의하여 이루어집니다. 에이전트는 표준 작동보다 이러한 도구를 더 빠르고 정확하게 해석합니다.

WebMCP 도구는 고객 지원, 전자상거래, 검색 등에 사용할 수 있습니다. 구매와 같은 일부 작업은 민감합니다. 확인 대화상자와의 사용자 상호작용을 요청하는 명령어를 포함할 수 있습니다.

WebMCP 사용 사례와 효과적인 도구를 빌드하는 방법을 알아보세요.

결합된 모달리티

단일 입력에 의존하면 의미론적 격차가 발생합니다. 예를 들어 DOM에서 에이전트는 CSS와 JavaScript로 이를 기능 버튼으로 실제로 구성했는지 알지 못한 채 <div>를 볼 수 있습니다. 스크린샷을 사용하면 상담사가 화면에서 버튼의 위치를 파악할 수 있지만 버튼의 의도된 대상이나 트리거하도록 설계된 작업은 여전히 알 수 없습니다.

따라서 최신 에이전트는 여러 모달리티를 결합합니다. DOM과 접근성 트리를 사용하여 대화형 요소의 깔끔하고 구조화된 목록을 가져온 다음 시각적 렌더링과 교차 참조하여 레이아웃, 그룹화, 시각적 신호를 파악합니다.

Google의 역할은 이러한 모든 채널에서 정리된 신호를 제공하는 것입니다.