에이전트용 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 감사를 실행하고 다양한 감사의 점수를 개선할 수 있는 변경사항을 제안합니다. 에이전트가 소스 코드에 관한 전체 컨텍스트 지식을 보유하고 있다면 수정사항을 직접 제안할 수 있습니다. 올바른 컨텍스트에 액세스할 수 있는 경우 서버 구성 또는 기타 백엔드 구성을 개선하는 방법을 제안할 수도 있습니다.