웹사이트에 새로운 유형의 방문자가 있습니다. 일부 사용자는 수동 탐색에서 목표 지향적 여정을 AI 에이전트에 위임하는 방식으로 전환하고 있습니다. 이러한 자율 시스템은 사용자를 대신하여 입력을 해석하고, 계획하고, 작업을 실행할 수 있습니다.
하지만 많은 웹사이트는 복잡한 호버 상태, 이동하는 레이아웃, 유동적인 동작으로 인간에게 아름답게 보이도록 설계되어 있습니다. 이는 에이전트에게는 기능적으로 작동하지 않습니다.
에이전트가 사이트를 보는 방식
에이전트는 모니터에서 웹사이트를 보지 않습니다. 에이전트는 사이트의 머신 리더블 표현에서 작동합니다. 이 표현의 품질이 에이전트의 성능을 결정합니다.
에이전트는 스크린샷, 원시 HTML, 접근성 트리라는 세 가지 기본 방식으로 웹사이트를 볼 수 있습니다.
스크린샷
에이전트는 렌더링된 페이지의 스냅샷을 찍고 비전 모델을 사용하여 요소를 식별합니다. 스크린샷을 기반으로 에이전트는 오른쪽 상단의 검색창이 전역 검색이고 중간의 상자가 양식 필드일 가능성이 높다는 것을 인식할 수 있습니다. 에이전트는 색상, 크기, 근접성을 사용하여 중요도를 결정할 수 있으므로 시각적 신호가 유용할 수 있습니다. 큰 삭제 버튼은 작은 '도움말' 링크보다 더 신중하게 해석될 가능성이 높습니다. 하지만 스크린샷 분석은 느리고 비용이 많이 들 수 있으므로 (사용된 토큰 측면에서) 구조가 혼란스러울 때 백업으로 사용하는 것이 좋습니다.
HTML
에이전트는 DOM을 분석하고 HTML을 읽습니다. 에이전트는 요소가 중첩되는 방식, DOM 트리의 논리적 계층 구조, 구조를 정의하는 ID 및 클래스와 같은 속성, 사이트의 정보 백본을 형성하는 원시 데이터 문자열을 이해합니다. 이를 통해 에이전트는 요소 간의 관계를 이해할 수 있습니다. '지금 구매' 버튼이 제품 컨테이너 내부에 있는 경우 에이전트는 해당 버튼이 특정 제품에 속한다고 가정합니다.
접근성 트리
접근성 트리는 DOM을 가장 중요한 요소인 대화형 요소의 역할, 이름, 상태로 추출하는 브라우저 기본 API입니다. 보조 기술에서 사용하는 페이지의 시맨틱 요약입니다. AI 에이전트의 경우 CSS의 시각적 '노이즈'를 무시하고 순수한 유틸리티에 집중하는 고품질 지도 역할을 합니다. 이 트리를 해석하여 에이전트는 모든 전환 버튼, 슬라이더, 입력란의 기능적 의도를 파악할 수 있습니다.
결합된 모달리티
단일 입력에 의존하면 시맨틱 격차가 발생합니다. 예를 들어 DOM에서,
에이전트는 CSS 및 JavaScript로 이를
기능 버튼으로 실제로 구성했는지 알지 못한 채 <div>를 볼 수 있습니다. 스크린샷을 사용하면 에이전트가 화면에서 버튼이 있는 위치를 식별할 수 있지만 버튼의 의도된 대상 또는 트리거하도록 설계된 작업은 여전히 알 수 없습니다.
따라서 최신 에이전트는 여러 모달리티를 결합합니다. 에이전트는 DOM 및 접근성 트리를 사용하여 대화형 요소의 깔끔하고 구조화된 목록을 가져온 다음 이를 시각적 렌더링과 상호 참조하여 레이아웃, 그룹화, 시각적 신호를 파악합니다.
Google의 역할은 이러한 모든 채널에서 깔끔한 신호를 제공하는 것입니다.
에이전트 친화적인 웹사이트 구축
에이전트가 웹사이트를 탐색할 수 있도록 하려면 다음을 고려하세요.
- 사람 또는 에이전트가 취하는 모든 필수 작업은 인터페이스에 명확하게 반영되어야 합니다.
- 안정적인 레이아웃을 보장합니다. 스크린샷을 찍는 에이전트는 웹사이트 레이아웃이 계속 변경되는 경우 혼란스러울 수 있습니다. 예를 들어 제품 페이지의 장바구니에 추가 버튼이 제품 카테고리마다 다른 위치에 있는 경우입니다.
- 대화형 요소를 숨길 수 있는 '고스트' 요소 또는 투명한 오버레이를 피합니다. 에이전트가 수행하는 시각적 분석은 노드가 투명하게 표시되더라도 덮여 있는 노드를 삭제할 수 있습니다.
- 시맨틱 HTML로 실행 가능한 요소를 디자인합니다. 수정된
<div>및<span>요소보다<button>및<a>태그를 선호합니다. 에이전트는 이를 대화형으로 인식합니다.- 시맨틱 HTML을 사용할 수 없는 경우 항상 요소에 적절한
role및tabindex를 제공합니다. 예를 들어<div role="button">입니다.
- 시맨틱 HTML을 사용할 수 없는 경우 항상 요소에 적절한
- CSS에서
cursor: pointer를 설정합니다. 이는 실행 가능성을 나타내는 강력한 신호입니다. for태그에<label>속성을 추가하여 입력에 연결합니다. 이렇게 하면 AI 에이전트가 작업 문자열에 직접 연결된 라벨 텍스트를 표시하여 필드의 목적을 이해하는 데 도움이 됩니다.- 사용자 여정을 계속하는 데 필요한 대화형 요소가 시각적 분석에 의해 필터링되지 않도록 하려면 표시되는 영역이 8제곱픽셀보다 커야 합니다.
다음 단계
사이트를 '에이전트 지원'으로 만들기 위해 제안하는 모든 사항은 사이트를 사용자에게도 더 나은 사이트로 만듭니다.
웹사이트를 AI 에이전트 친화적으로 만드는 것은 잘 구조화되고, 접근성이 높고, 시맨틱 웹사이트를 구축하는 기본 원칙을 재확인하는 인센티브입니다.
- WebMCP에 관해 알아보고, 웹사이트가 에이전트와 상호작용할 수 있도록 제안된 웹 표준인 초기 미리보기 프로그램에 가입하여 실험을 시작하세요.
- A11y 트리 감사: 기존 도구를 사용하여 사이트의 계층 구조가 머신 리더블이고 안정적인지 확인합니다.