게시일: 2026년 6월 22일
AI 에이전트가 텍스트 생성에서 웹사이트 탐색, 상호작용, 복잡한 작업 완료로 진화함에 따라 개발자는 이러한 비인간 사용자를 위한 고품질 환경을 보장하기 위한 전용 도구가 필요합니다. Chrome DevTools의 개선사항과 결합된 새로운 Lighthouse 에이전트형 탐색 카테고리는 에이전트 지원 웹사이트를 빌드하는 데 도움이 되는 결정론적 감사 및 테스트 프레임워크를 제공합니다.
에이전트형 웹으로의 전환에는 두 가지 주요 단계가 있습니다. 웹을 검색 하는 에이전트와 웹을 사용 하는 에이전트입니다.
에이전트가 웹사이트를 검색할 때도 검색엔진 최적화 (SEO) 원칙이 적용됩니다. 이 블로그 게시물에서는 에이전트가 웹사이트와 직접 상호작용할 때 개발자가 할 수 있는 작업에 중점을 둡니다.
에이전트 지원 웹사이트 감사, 개선, 디버그
AI 에이전트가 예약 또는 주문과 같은 사이트의 흐름을 안정적으로 완료하려면 예측 가능한 머신 리더블 신호가 필요합니다. 다음은 이러한 준비 상태를 평가하고 개선하는 데 도움이 되는 도구입니다.
웹사이트 에이전트 지원 준비 상태 감사
Lighthouse의 새로운 에이전트형 탐색 카테고리 는 M150부터 제공되며 개발자에게 웹사이트가 에이전트 친화적인지 평가하기 위한 결정론적 감사 세트 를 제공하여 새로운 업계 표준의 채택을 장려합니다.
감사에서 확인하는 항목: 감사는 머신 상호작용에 중요한 세 가지 주요 영역에 중점을 둡니다.
- 접근성: 접근성은 인간을 위한 것입니다. 에이전트는 보조 기술 (AT)을 위해 DOM에서 파생된 접근성 트리를 기본 데이터 모델로 사용합니다. 에이전트형 탐색 감사는 머신 상호작용에 중요한 접근성 감사의 카테고리 하위 집합을 확인합니다. 예를 들어 두 감사 모두 모든 상호작용 요소에 프로그래매틱 이름이 있는지 확인합니다. 올바르게 구성된 접근성 트리는 AI 에이전트가 페이지를 이해하는 기본 방법입니다.
- 안정성: 누적 레이아웃 이동 (CLS)을 사용하여 시각적 안정성을 측정하여 요소가 예기치 않게 이동하지 않도록 하고 에이전트의 잘못된 클릭을 방지합니다.
- WebMCP 통합: 등록된 WebMCP 도구의 사용 가능 여부, 선언적 WebMCP가 누락된 양식, 스키마 유효성을 확인합니다. WebMCP를 채택하면 에이전트가 사이트의 로직과 양식을 명시적으로 노출하여 상호작용을 안정적으로 만들 수 있습니다.
점수: 다른 Lighthouse 카테고리와 달리 게시 시점에 에이전트형 탐색은 정보 제공용이며 벤치마크되지 않습니다. 결정적인 순위보다는 실행 가능한 신호 (통과 또는 실패 상태 및 경고)를 제공하는 데 중점을 둡니다.
특정 감사 확인사항과 개선을 위해 할 수 있는 작업에 관해 자세히 알아보려면 Lighthouse의 에이전트 탐색 감사 문서를 참고하세요.
에이전트와 웹사이트 간의 상호작용을 더 빠르고 안정적으로 만들기
WebMCP는 기존 웹사이트의 AI 에이전트에 구조 도구를 노출하여 에이전트 상호작용을 가속화하고 간소화하는 것을 목표로 하는 제안된 표준입니다. 구현에 관한 자세한 내용은 WebMCP에 관해 읽어보세요 를 참고하세요.
선호하는 코딩 에이전트를 사용하여 최신 기능 구현
Modern Web Guidance는 개발자가 에이전트 지원 웹사이트를 빌드하는 데 도움이 되는 권장사항 및 기술 모음을 제공합니다. 여기에는 WebMCP 도구의 구현을 코딩 에이전트에 위임할 수 있는 webmcp 스킬이 포함됩니다.
Modern Web Guidance를 개발 워크플로에 통합하면 애플리케이션이 최신 에이전트 친화적인 표준으로 처음부터 빌드되도록 할 수 있습니다. 자세한 내용은 Modern Web Guidance
문서를 참고하세요.
에이전트용 Chrome DevTools로 웹사이트 테스트 및 디버그
심층 디버깅 및 반복 개발을 위해 에이전트용 Chrome DevTools는 고유한 테스트 페르소나를 제공합니다. 이를 통해 자체 AI 지원 IDE 또는 코딩 에이전트를 탐색 에이전트로 변환하여 높은 수준의 제어 기능을 제공할 수 있습니다.
에이전트용 DevTools를 사용하면 다음 작업을 할 수 있습니다.
- 에이전트 상호작용 시뮬레이션: 에이전트가 취하는 정확한 단계를 시뮬레이션하여 효과적으로 '사용자'(또는 에이전트)가 되어 실패를 재현하고 웹사이트의 흐름이 결정론적인지 확인할 수 있습니다.
- 직접 Lighthouse 호출: 테스트 환경에서 활성 탭에서
lighthouse_audit도구를 직접 호출할 수 있습니다. 이렇게 하면 페이지의 현재 상태를 기반으로 즉각적인 다중 카테고리 상태 점검이 제공되므로 에이전트형 탐색 표준에 대해 반복적으로 수정사항을 확인할 수 있습니다. - 스크린캐스트 및 디버그: 이 도구는 상세 로깅 및 스크린캐스트 기능을 제공하므로 에이전트가 페이지를 인식하고 상호작용하는 방식을 정확하게 확인할 수 있습니다. 이렇게 하면 에이전트를 혼동할 수 있는 접근성 트리와 같은 머신 리더블 신호가 노출됩니다.
이렇게 하면 배포 전에 비인간 사용자를 위한 고품질 환경을 보장할 수 있습니다.
에이전트용 Chrome DevTools의 기능 및 구성에 관해 자세히 알아보려면 GitHub 저장소를 참고하세요.
다음은 에이전트용 Chrome DevTools의 구성 예시입니다(AntigravityCLI의 경우 ~/.gemini/config/mcp_config.json 또는 Antigravity에서 구성됨). Chrome Canary에 연결됩니다.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--autoConnect",
"--categoryExperimentalWebmcp",
"--channel=canary"
]
}
}
}
예시 쿼리: "Chrome DevTools MCP를 사용하여 https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ 로 이동하여 버섯 10개와 피망 2개가 들어간 피자를 만들어 주세요. 수행한 작업과 호출한 도구에 관한 요약을 제공해 주세요."를 사용합니다.
에이전트용 DevTools를 사용하여 에이전트 지원 준비 상태 Lighthouse 감사를 실행할 수도 있습니다.
"Chrome DevTools MCP를 사용하여 https://googlechromelabs.github.io/webmcp-tools/demos/french-bistro/?notoolname 에서 에이전트형 Lighthouse 감사를 실행하고 전체 요약을 제공해 주세요."
다음 단계
참여하고 토론에 참여하려면 공식 Lighthouse 저장소를 참고하세요.
WebMCP에 관한 자세한 내용은 WebMCP 문서를 참고하세요. Modern Web Guidance에 관한 자세한 내용은 Modern Web Guidance 문서를 참고하세요. 생성형 AI에 맞게 웹사이트를 최적화하는 방법에 관한 자세한 내용은 Google 검색의 생성형 AI 기능에 맞게 웹사이트 최적화하기를 참고하세요.