Chrome, 코딩 에이전트용 웹 지침에 기존 코드 점검 절차 추가

Chrome for Developers 블로그의 Philip Walton은 2026년 11월 10일 웹 개발 지침 도구 Modern Web Guidance 1.0 안정판을 발표했습니다. 이 도구는 웹 플랫폼 지식과 모범 사례, 브라우저 호환성 자료를 코딩 에이전트가 참고하도록 제공하는 스킬 모음입니다. 1.0에는 기존 웹 프로젝트에서 낡은 패턴을 찾아 에이전트의 현대화 작업을 돕는 절차가 추가됐습니다.

새 기능이나 화면을 만드는 작업에서는 웹 기능을 고를 때 프로젝트의 브라우저 지원 조건을 고려하도록 지침을 제공합니다. 예를 들어 팝오버를 여는 JavaScript 이벤트 처리를 HTML의 popover·popovertarget 속성으로 바꾸거나, 입력할 때마다 JavaScript로 textarea 높이를 재던 코드를 CSS의 field-sizing: content로 대체할 수 있습니다.

기존 저장소를 점검하려면 프로젝트에 npx modern-web-guidance@latest install로 설치한 뒤 에이전트에 저장소나 특정 폴더의 레거시 패턴을 찾아 현대화해 달라고 요청합니다. 이미 설치한 구버전은 npx modern-web-guidance@latest update로 갱신할 수 있습니다. 이때 legacy-scan은 HTML, CSS, JavaScript와 TypeScript, 프레임워크 구성요소, package.json 등을 대상으로 정해진 패턴을 찾습니다. Chrome 문서에 따르면 AST, DOM, CSS 파서를 로컬에서 실행하며 스캔 단계에서는 LLM을 호출하지 않습니다.

스캐너의 발견 항목이 곧바로 수정 대상으로 확정되지는 않습니다. 각 규칙에는 주변 코드를 살펴 유지하거나 제외할 조건이 적혀 있습니다. 에이전트는 해당 기준에 따라 발견 항목을 확인합니다. 예를 들어 scrollHeight를 읽는 코드가 textarea 크기 조절용인지 가상 스크롤 구현용인지 살피고, CSS의 @supports가 새 기능을 이미 보호한다면 해당 항목을 제외합니다. 검토한 결과를 보고하며, 요청받은 경우 수정 계획도 제시합니다.

현대화를 요청받으면 에이전트는 관련 가이드를 불러와 코드를 수정하고, 변경한 경로를 다시 스캔한 뒤 프로젝트 테스트도 실행합니다. 따라서 이 절차는 검사기가 발견한 코드를 일괄 치환하는 방식이 아니라, 에이전트가 주변 맥락을 확인하고 수정 후 재검사하는 흐름입니다.

스캐너가 다루는 범위는 전체 가이드 카탈로그보다 좁습니다. Chrome 문서에 따르면 전체 카탈로그는 약 200개 가이드이며, 정적 규칙으로 판별하는 스캔은 그중 약 20%를 다룹니다. 코드에서 결정적으로 찾을 수 있는 레거시 패턴을 스캔하고, 나머지 가이드는 새 작업을 만들거나 진행할 때 에이전트가 찾아 참고합니다. 자동 CI/CD 통합은 개발 중입니다.

정적 스캔은 실제 브라우저에서 기능이 제대로 작동하는지 측정하지 않습니다. Chrome은 이와 Chrome DevTools for agents의 역할을 나눠 설명합니다. Modern Web Guidance가 긴 JavaScript 작업을 나누는 방법을 안내하면, DevTools for agents는 페이지를 실행하고 저사양 CPU를 흉내 낸 성능 추적을 통해 메인 스레드가 실제로 얼마나 오래 막히는지 살펴봅니다. 애니메이션을 기록해 화면에 어떻게 표시되는지 확인하고, 사용자의 prefers-reduced-motion 설정에 따른 동작도 점검할 수 있습니다.

1.0에서는 Firefox와 Edge도 Chrome과 함께 크로스브라우저 호환성 작업에 참여합니다. Chrome은 가이드 데이터베이스를 확대하고 분야별 기술 책임자의 검토를 거쳤다고 밝혔습니다. 사용자 대상 접근성 가이드는 보조 기술을 일상적으로 사용하는 접근성 전문가가 실제 도구로 검토하고 시험했습니다.