에이전트용 Chrome DevTools의 Lighthouse를 사용하면 코딩 에이전트가 접근성, SEO, 권장사항, 에이전트 브라우징에 대한 실시간 상태 점검을 실행하여 웹사이트 품질을 평가할 수 있습니다.
에이전트 워크플로에서 코딩 에이전트는 Lighthouse 감사를 사용하여 일반적인 개선사항을 위해 코드베이스를 무작위로 검색하는 대신 구체적이고 측정 가능한 런타임 문제를 식별합니다.
이 타겟팅된 접근 방식은 에이전트의 컨텍스트 내에서 직접 실행 가능한 조언을 제공하므로 코딩 에이전트가 코드베이스 전반의 광범위하고 정적인 검색보다 더 정확하게 버그를 찾고 수정할 수 있습니다.
Lighthouse 감사는 다음 주요 카테고리에 중점을 둡니다.
- 접근성 (a11y): 스크린 리더를 사용하는 사용자를 비롯한 모든 사용자가 사이트를 사용할 수 있도록 합니다.
- SEO: 검색엔진이 콘텐츠를 찾고 이해할 수 있도록 기술 검사를 실행합니다.
- 권장사항: 사이트가 최신 웹 개발 표준을 준수하는지 확인합니다.
- 에이전트 브라우징: AI 어시스턴트가 웹사이트를 얼마나 이해하고 상호작용할 수 있는지 측정합니다.
Lighthouse를 사용할 때는 다음 사항에 유의하세요.
- 로컬 및 스테이징 지원: 에이전트는 로컬 개발 서버 및
file://프로토콜을 통해 액세스하는 로컬 HTML 파일을 비롯하여 Chrome에 표시되는 모든 페이지를 감사할 수 있습니다. - 브라우저 동작: 감사가 뷰를 일시적으로 중단할 수 있습니다. 도구가 다양한 기기를 시뮬레이션할 때 페이지 크기가 조정되거나 다시 로드될 수 있습니다.
웹 품질 감사
다음 워크플로와 예를 사용하여 Lighthouse를 개발 프로세스에 통합하세요.
접근성 확인
UI를 변경할 때 페이지에 계속 액세스할 수 있는지 확인하도록 에이전트에 요청합니다.
프롬프트 예:
How can I improve accessibility on this page as measured by Lighthouse?
에이전트 실행 예: 에이전트가 formFactor가 mobile로 설정된 Lighthouse 감사를 트리거합니다. 색상 대비 부족 또는 ARIA
라벨 누락과 같은 결과를 분석하고 특정 코드 수정을 제안합니다.
검색 공개 상태를 위한 SEO 감사
기술 SEO 요구사항은 개발 주기에서 너무 늦게 발견되는 경우가 많습니다. 빌드하는 동안 에이전트에게 기술 차단기를 찾아 수정하도록 요청할 수 있습니다.
프롬프트 예:
According to Lighthouse audit, how can I improve this page for better discoverability in search?
에이전트 실행 예: 에이전트가 SEO 감사를 실행하고 누락된 메타 태그, 표준 링크 또는 설명 텍스트를 식별합니다. 그런 다음 소스 코드를 업데이트하여 감사 실패를 해결할 수 있습니다.
권장사항 검증
로컬 서버 또는 스테이징 사이트가 보안 및 기술 권장사항을 준수하는지 확인합니다.
프롬프트 예:
Does my site follow best practices as measured by Lighthouse?
에이전트 실행 예: 에이전트가 Lighthouse에서 보고한 HTTPS 사용, 콘솔 오류, 지원 중단된 API 호출과 같은 기술적 측면을 검토합니다.
일반적인 사이트 개선
사이트의 전체 Lighthouse 감사를 실행하고 개발 초기 단계에서 개선 영역을 정의하는 데 도움이 될 수 있습니다.
프롬프트 예:
Run a full Lighthouse audit of my site, in mobile and desktop, and suggest improvement areas and possible fixes for any problems you find.
에이전트 실행 예: 에이전트가 모바일과 데스크톱 모두에서 사이트의 전체 Lighthouse 감사를 실행하고 다양한 감사의 점수를 개선할 수 있는 변경사항을 제안합니다. 에이전트가 소스 코드에 관한 전체 컨텍스트 지식을 보유하고 있는 경우 수정을 직접 제안할 수 있습니다. 올바른 컨텍스트에 액세스할 수 있는 경우 서버 구성 또는 기타 백엔드 구성을 개선하는 방법도 제안할 수 있습니다.