원문: A developer toolkit to make your website agent-ready

— Chrome Developers 원문은 CC-BY-4.0

라이선스로 제공되며, 이 글은 한국어로 번역한 2차 저작물입니다.

에이전트 준비 상태 웹사이트 감사, 개선 및 디버깅

웹사이트 에이전트 준비 상태 감사

• 감사 내용: 감사는 기계 상호작용에 중요한 세 가지 주요 영역에 중점을 둡니다.
  • 접근성: 접근성은 인간을 우선합니다. 에이전트는 보조 기술(AT)을 위한 DOM에서 파생된 accessibility tree
    에 주요 데이터 모델로 의존합니다. Agentic Browsing 감사는 기계 상호작용에 중요한 Accessibility audit
    의 일부 카테고리를 확인합니다. 예를 들어, 두 감사 모두 모든 상호작용 가능한 요소에 프로그래밍 가능한 이름이 있는지 확인합니다. 잘 구성된 접근성 트리는 AI 에이전트가 페이지를 이해하는 주요 방법입니다.
  • 안정성: 누적 레이아웃 이동(CLS)을 사용하여 시각적 안정성을 측정하여 요소가 예기치 않게 이동하여 에이전트의 오 클릭을 방지합니다.
  • WebMCP 통합: 등록된 WebMCP 도구의 가용성, 선언적 WebMCP가 누락된 양식 및 스키마 유효성을 확인합니다. WebMCP를 채택하면 에이전트가 웹사이트의 로직과 양식을 명시적으로 노출하여 상호작용을 안정적으로 만들 수 있습니다.
• 점수: 다른 Lighthouse 카테고리와 달리 게시 시점에는 Agentic Browsing이 정보 제공용이며 벤치마크되지 않았습니다. 정의된 순위보다는 실행 가능한 신호(통과 또는 실패 상태 및 경고)를 제공하는 데 중점을 둡니다.

에이전트와 웹사이트 간의 상호작용을 더 빠르고 안정적으로 만들기

선호하는 코딩 에이전트를 사용하여 최신 기능 구현

webmcp

에이전트를 위한 Chrome DevTools로 웹사이트 테스트 및 디버깅

• 에이전트 상호작용 시뮬레이션: 에이전트가 수행할 정확한 단계를 시뮬레이션하여 효과적으로 "사용자(또는 에이전트)가 되어" 실패를 재현하고 웹사이트의 흐름이 결정론적인지 확인할 수 있습니다.
• Lighthouse 직접 호출: 테스트 환경에서 활성 탭에서

  lighthouse_audit

  도구를 직접 호출할 수 있습니다. 이를 통해 페이지의 현재 상태를 기반으로 즉각적인 다중 카테고리 상태 검사를 제공하여 Agentic Browsing 표준에 대해 반복적으로 수정을 확인할 수 있습니다.
• 스크린캐스트 및 디버깅: 이 도구는 상세한 로깅 및 스크린캐스트 기능을 제공하므로 에이전트가 페이지를 인식하고 상호작용하는 방식을 정확하게 볼 수 있습니다. 이를 통해 접근성 트리와 같이 에이전트를 혼란스럽게 할 수 있는 기계 판독 가능한 신호가 노출됩니다.

~/.gemini/config/mcp_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--categoryExperimentalWebmcp",
        "--channel=canary"
      ]
    }
  }
}

다음 단계