Modern Web Guidance는 AI 지원 코딩 워크플로에 최신 권장사항을 적용하는 에이전트 기능입니다. 일반적인 웹 개발 문제에 대한 기존의 해결 방법을 코딩 에이전트가 사용하지 않도록 하고 대신 최신 웹 플랫폼 기능을 사용하는 솔루션을 사용하도록 안내합니다.
설치
Modern Web Guidance 스킬은 다양한 에이전트에 설치할 수 있으므로 제공되는 안내를 활용하면서 선호하는 워크플로를 유지할 수 있습니다.
modern-web-guidance CLI (권장)
권장되는 설치 방법은 Chrome팀에서 빌드한 modern-web-guidance CLI를 사용하는 것입니다. modern-web-guidance CLI를 통해 스킬을 설치하면 스킬이 자동으로 최신 상태로 유지됩니다. 다음과 같이 modern-web-guidance CLI에서 설치할 수 있습니다.
npx modern-web-guidance@latest install
선택적으로 Chrome 확장 프로그램을 개발하는 경우 다음 명령어를 사용하는 것이 좋습니다.
npx modern-web-guidance@latest install --choose
이렇게 하면 대화형 마법사가 실행되어 스킬을 환경설정에 따라 설치합니다.
modern-web-guidance CLI를 사용하지 않고 Modern Web Guidance 기능을 사용하려면 계속 읽고 선호하는 에이전트에 기능을 설치하는 방법을 알아보세요.
Antigravity
Antigravity를 다운로드하고 설치 흐름 중에 또는 설정 페이지의 맞춤설정에서 Google 플러그인으로 빌드를 통해 'modern-web-guidance'를 사용 설정합니다.
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Modern Web Guidance 기능은 스킬 관리자에서 찾을 수 있으며, 설정 > AI 어시스턴트 > 기능에서 사용할 수 있습니다. 기능을 선택하여 세부정보 페이지를 엽니다. 스킬을 설치하려면 설치 버튼을 클릭하여 현재 IDE 인스턴스에 적용합니다.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
Claude Code와 함께 사용할 Modern Web Guidance를 설치하려면 다음 세 단계를 따르세요.
1. 마켓플레이스를 추가합니다.
/plugin marketplace add GoogleChrome/modern-web-guidance
2. 마켓플레이스에서 플러그인을 설치합니다.
/plugin install modern-web-guidance@googlechrome
3. 플러그인을 다시 로드합니다.
/reload-plugins
Copilot CLI
Copilot과 함께 사용할 Modern Web Guidance를 설치하려면 다음 두 단계를 따르세요.
1. 마켓플레이스를 추가합니다.
/plugin marketplace add GoogleChrome/modern-web-guidance
2. 마켓플레이스에서 플러그인을 설치합니다.
/plugin install modern-web-guidance@googlechrome
거위
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
설치 전에 살펴보기
쿼리로 검색하거나 ID로 가이드를 검색하여 설치 전에 Modern Web Guidance 기능 가이드 라이브러리를 평가합니다. 이렇게 하려면 CLI의 search 명령어를 사용하여 프롬프트를 통해 사용 사례 ID를 찾습니다.
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
그러면 터미널에 JSON 객체가 출력됩니다.
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
description 값을 읽은 후 목표를 가장 잘 반영하는 id를 선택하고 retrieve 명령어를 사용합니다.
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
이 경우 사용 사례의 가이드 Markdown이 터미널에 표시됩니다.animate-to-from-top-layer 다른 사용 사례의 경우 animate-to-from-top-layer를 유효한 사용 사례 ID로 바꿉니다.
Modern Web Guidance를 사용하는 이유는 무엇인가요?
Modern Web Guidance 스킬은 세 가지 고유한 이유로 AI 모델을 지원하지 않는 웹 개발자에게 이점을 제공합니다.
- AI 코딩 에이전트는 최신 웹 개발 문제에 대한 오래된 솔루션을 기본적으로 사용합니다. 이러한 솔루션에는 최신 CSS 및 HTML API로 더 잘 해결되는 문제에 대한 기능을 제공하는 JavaScript가 포함되어 있는 경우가 많습니다.
- AI 모델은 이전에는 최신 웹 플랫폼 기능을 인식하지 못했거나 잘못된 정보를 가지고 있었습니다.
- 마지막으로 AI 모델은 특정 프로젝트의 기준 요구사항에 맞게 안내를 맞춤설정하는 대신 프로젝트 요구사항 또는 브라우저 지원 기준을 고려하지 않는 오래된 권장사항을 제시하는 경향이 있습니다.
Modern Web Guidance 스킬은 이러한 단점을 해결하고 AI 지원 코딩 워크플로에 최신 웹 플랫폼 기능을 먼저 채택할 수 있는 도구를 제공하며 대체 솔루션을 염두에 두고 있습니다.
Modern Web Guidance에는 무엇이 포함되어 있나요?
Modern Web Guidance에는 여러 핵심 분야에서 100개가 넘는 웹 개발 사용 사례에 대한 권장사항이 포함되어 있습니다. 내부적으로는 코딩 에이전트가 modern-web-guidance CLI를 호출하여 사용 사례에 가장 적합한 안내를 찾고 검색하는 방법을 알려주는 단일 에이전트 기능입니다.
- 사용자 환경: 뷰 전환, CSS
scrollbar-color스타일 지정, 진입 및 종료 애니메이션 - CSS: 컨테이너 쿼리,
oklch와 같은 최신 색상 공간, CSS 하위 그리드 레이아웃,text-wrap, 타이포그래피 줄높이 트리밍 - 성능: 다음 페인트에 대한 상호작용 (INP) 진단, 긴 작업을 분할하기 위한
scheduler.yield, 백그라운드 작업 예약, 이미지 로드 우선순위 지정 - 양식: 자동 크기 조절 입력란 (
field-sizing: content),:user-invalid를 사용한 정확한 유효성 검사 스타일 - 기본 제공 UI 구성요소: 대화상자 직접 제어, 툴팁용 CSS 앵커 포지셔닝,
popover - 접근성: 접근 가능한 오류 알림, 키보드 포커스 관리
- 기본 제공 AI: 로컬 기기별 클라이언트 모델 (기본 언어 감지, 요약, 번역 API) 사용
- 패스키: 패스키 등록, 인증, 관리
다음은 각 분야의 사용 사례 중 일부입니다. 모든 사용 사례를 보려면 사용 사례의 전체 목록을 확인하세요.
기준
기준은 주요 브라우저 엔진에서 상호 운용 가능한 웹 기능을 개발자에게 명확하게 알려줍니다. 웹 기능이 기준인 경우 브라우저 호환성 수준을 신뢰할 수 있습니다. 웹 기능은 기준에서 정의한 세 가지 카테고리 중 하나에 속합니다.
- 제한된 사용 가능성 은 기능이 상호 운용 가능하지 않음을 의미합니다.
- 새로 사용 가능 은 기능이 지난 30개월 이내에 상호 운용 가능하게 되었음을 의미합니다.
- 광범위하게 사용 가능 은 기능이 30개월 이상 상호 운용 가능했음을 의미합니다.
기준은 웹 기능 상호 운용 가능성에 대한 정의이지만 프로젝트의 구성 가능한 측면이기도 합니다. 기준 대상을 선택한 후 AGENTS.md 또는 CLAUDE.md 파일에 추가하여 프로젝트를 구성하여 사용할 수 있습니다(예:).
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance 및 기능 대체 솔루션
Modern Web Guidance는 다양한 최신 웹 기능을 사용합니다. 이러한 기능 중 일부는 기준 새로 또는 광범위하게 사용 가능일 수 있지만 일부는 제한된 사용 가능일 수 있습니다. 기능이 광범위하게 사용 가능하지 않은 경우 사용 사례 가이드는 기능을 지원하지 않는 브라우저에서 더 넓은 호환성을 보장하는 방법에 관한 구체적인 안내를 상담사에게 제공합니다. 대부분의 경우 대체 솔루션은 최신 기능을 지원되는 모든 곳에서 사용할 수 있는 점진적 개선사항으로 구현됩니다. 지원되지 않는 브라우저에 폴리필이 필요한 경우 에이전트는 필요한 경우에만 비용이 발생하도록 항상 조건부로 로드하도록 안내됩니다.
정확성은 어떻게 보장되나요?
Modern Web Guidance의 각 사용 사례에는 가이드가 포함되어 있으며 대부분의 사용 사례는 AI 에이전트가 고품질 출력을 생성하도록 지속적으로 보정됩니다.
보정된 사용 사례는 자동화된 QA 하네스를 사용하여 올바른 에이전트 동작을 테스트하며 Playwright가 중심적인 역할을 합니다.
- 각 가이드에 대해 가이드의 구현 세부정보가 준수되었는지 테스트하는 Playwright 스크립트가 개발됩니다(예:
@media (prefers-reduced-motion: reduce)가 요구사항인 경우 관찰되었는지). - 이러한 Playwright 스크립트는 100% 통과율을 예상하는 '올바른' 참조 데모 구현에 대해 지속적으로 보정됩니다. 반면에 스크립트는 0% 통과율을 예상하는 의도적으로 결함이 있는 구현에 대해 확인합니다.
- '올바른' 구현과 의도적으로 결함이 있는 구현 중 하나 또는 둘 다 각각 100% 및 0% 통과율을 생성하지 못하는 경우 생성기는 100% 보정이 달성될 때까지 컨텍스트를 사용하여 자동으로 재시도합니다.
- 마지막으로 기본 애플리케이션에 대한 엔드 투 엔드 평가가 적용됩니다. 이러한 평가 중 하나는 Modern Web Guidance 스킬을 호출하지 않고 기본 학습 데이터를 사용하여 작업을 완료하는 제어인 안내가 없는 평가입니다. 다른 평가 (실험)는 Modern Web Guidance 스킬을 사용하여 동일한 작업을 해결합니다.
Google의 평가는 최첨단 모델과 코딩 에이전트를 사용하여 매일 실행되므로 안내가 있는 경우와 없는 경우 에이전트의 성능을 명확하게 파악할 수 있습니다. 평균적으로 초기 결과에 따르면 에이전트에 Modern Web Guidance가 탑재된 경우 최신 권장사항 준수가 37% 개선되었습니다. 하지만 결과는 프로젝트 요구사항, 모델, 작성하는 프롬프트, 선호하는 에이전트 코딩 도구에 따라 달라질 수 있습니다.
다음 단계
이제 Modern Web Guidance에 대한 일반적인 개요와 AI 코딩 워크플로에서 최신 웹 권장사항을 더 쉽게 채택할 수 있는 잠재력을 알게 되었습니다. 이제 Modern Web Guidance에서 제공하는 스킬과 사용 사례를 살펴볼 수 있습니다.