Modern Web Guidance는 웹 플랫폼 전문 지식, 권장사항, 브라우저 호환성 데이터를 코딩 에이전트에 직접 삽입하는 일련의 기술입니다. 코딩 에이전트가 기존 패턴에서 벗어나 최신 웹 플랫폼의 강력한 기능과 역량을 활용하는 솔루션을 지향하도록 유도하는 데 도움이 됩니다.
설치
Modern Web Guidance는 기술을 지원하는 모든 코딩 에이전트와 함께 설치하고 사용할 수 있습니다.
modern-web-guidance CLI (권장)
권장되는 설치 방법은 Chrome팀에서 빌드한 modern-web-guidance CLI를 사용하는 것입니다. modern-web-guidance CLI를 통해 Modern Web Guidance를 설치하면 자동 업데이트가 사용 설정됩니다. 다음과 같이 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를 다운로드하고 설치 과정에서 또는 설정 페이지의 맞춤설정 > Build with 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 plugin install modern-web-guidance@claude-plugins-official
Claude Code CLI
Claude Code CLI와 함께 사용하기 위해 Modern Web Guidance를 설치하는 단계는 다음과 같습니다.
1. 마켓플레이스를 추가합니다.
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Marketplace에서 플러그인을 설치합니다.
/plugin install modern-web-guidance@googlechrome
3. 플러그인을 새로고침합니다.
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
Copilot CLI
Copilot에서 사용할 Modern Web Guidance를 설치하려면 다음 두 단계를 거쳐야 합니다.
1. 마켓플레이스를 추가합니다.
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Marketplace에서 플러그인을 설치합니다.
/plugin install modern-web-guidance@googlechrome
거위
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
설치 전에 살펴보기
쿼리로 검색하거나 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":"ui-behaviors","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":"ui-behaviors","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":"ui-behaviors","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"
이 경우 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)을 사용합니다.
- 패스키: 패스키 등록, 인증, 관리
다음은 각 카테고리의 가이드 중 일부입니다. 모든 가이드를 보려면 전체 가이드 목록을 확인하세요.
기준
Baseline은 주요 브라우저 엔진에서 상호 운용 가능한 웹 기능을 개발자에게 명확하게 알려줍니다. 웹 기능이 Baseline인 경우 브라우저 호환성 수준을 신뢰할 수 있습니다. 웹 기능은 Baseline에서 정의한 세 가지 카테고리 중 하나에 속합니다.
- 제한된 사용 가능 여부는 기능이 상호 운용되지 않음을 의미합니다.
- 새로 사용 가능은 최근 30개월 이내에 상호 운용이 가능해진 기능을 의미합니다.
- 널리 사용 가능은 기능이 최소 30개월 이상 상호 운용 가능함을 의미합니다.
Baseline은 웹 기능 상호 운용성에 관한 정의이지만 프로젝트의 구성 가능한 측면이기도 합니다. 기준 타겟을 선택한 다음 AGENTS.md 또는 CLAUDE.md 파일에 추가하여 이를 사용하도록 프로젝트를 구성할 수 있습니다. 예를 들면 다음과 같습니다.
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance 및 기능 대체
Modern Web Guidance는 다양한 최신 웹 기능을 사용합니다. 이 중 일부는 Baseline Newly 또는 Widely available일 수 있지만 일부는 한정 재고 수량일 수 있습니다. 기능이 널리 제공되지 않는 경우 사용 사례 가이드는 상담사에게 해당 기능을 지원하지 않는 브라우저에서 더 광범위한 호환성을 보장하는 방법에 관한 구체적인 안내를 제공합니다. 대부분의 경우 대체는 지원되는 모든 곳에서 최신 기능을 사용할 수 있는 점진적 개선으로 구현됩니다. 지원되지 않는 브라우저에 폴리필이 필요한 경우 에이전트는 항상 조건부로 로드하도록 지시받으므로 필요한 경우에만 비용이 발생합니다.
정확성은 어떻게 보장되나요?
Modern Web Guidance의 각 사용 사례에는 고품질 출력을 보장하기 위해 지속적으로 보정되는 평가 세트가 포함되어 있습니다.
사용 사례 평가는 자동화된 QA 하네스를 실행하여 올바른 에이전트 동작을 테스트하며, 이때 Playwright가 핵심적인 역할을 합니다.
- 각 가이드에 대해 가이드의 구현 세부정보를 따랐는지 테스트하는 Playwright 스크립트가 개발됩니다. 예를 들어
@media (prefers-reduced-motion: reduce)가 필수인 경우 관찰되었는지 테스트합니다. - 이러한 Playwright 스크립트는 100% 통과율을 예상하는 '올바른' 참조 데모 구현에 대해 지속적으로 보정합니다. 반면, 스크립트는 0% 통과율을 예상하는 의도적으로 결함이 있는 구현을 확인합니다.
- '정답' 구현과 의도적으로 결함이 있는 구현 중 하나 또는 둘 다에서 각각 100% 및 0% 의 통과율을 달성하지 못하면 생성기는 100% 보정이 달성될 때까지 컨텍스트를 사용하여 자동으로 다시 시도합니다.
- 마지막으로 기본 애플리케이션에 대한 엔드 투 엔드 평가가 적용됩니다. 이 중 하나는 Modern Web Guidance를 호출하지 않고 기본 학습 데이터를 사용하여 작업을 완료하는 비안내형 평가입니다. 또 다른 평가 (실험)에서는 Modern Web Guidance를 사용하여 동일한 작업을 처리합니다.
Google의 평가는 현존 최고 수준(SOTA) 모델과 코딩 에이전트를 사용하여 일주일에 여러 번 실행되며, 이를 통해 Google의 가이드가 있을 때와 없을 때 에이전트가 얼마나 잘 작동하는지 명확하게 파악할 수 있습니다. 초기 결과에 따르면 에이전트가 Modern Web Guidance를 사용할 경우 최신 권장사항을 준수하는 비율이 평균 37%포인트 개선되는 것으로 나타났습니다. 하지만 결과는 프로젝트 요구사항, 모델, 작성하는 프롬프트, 선호하는 에이전트 코딩 도구에 따라 달라질 수 있습니다.
다음 단계
이제 Modern Web Guidance에 대한 전반적인 개요와 AI 코딩 워크플로에 최신 웹 권장사항을 더 쉽게 도입할 수 있는 잠재력을 이해하셨습니다. 이제 Modern Web Guidance에서 제공하는 가이드를 살펴볼 수 있습니다.