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로 더 잘 해결되는 문제에 기능을 제공하는 자바스크립트가 포함되는 경우가 많습니다.
- 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개월 이상 상호 운용 가능함을 의미합니다.
기준은 웹 기능 상호 운용성에 대한 정의이지만 프로젝트의 구성 가능한 측면이기도 합니다. 기준 타겟을 선택한 다음 AGENTS.md 또는 CLAUDE.md 파일에 추가하여 이를 사용하도록 프로젝트를 구성할 수 있습니다. 예를 들면 다음과 같습니다.
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance 및 기능 대체
Modern Web Guidance에서는 다양한 최신 웹 기능을 사용합니다. 이 중 일부는 새로 제공되거나 폭넓게 제공되는 기준일 수 있지만 일부는 제한적으로 제공될 수 있습니다. 기능이 널리 제공되지 않는 경우 사용 사례 가이드는 상담사에게 해당 기능을 지원하지 않는 브라우저에서 더 광범위한 호환성을 보장하는 방법에 관한 구체적인 안내를 제공합니다. 대부분의 경우 대체는 최신 기능이 지원되는 모든 곳에서 사용할 수 있는 점진적 개선으로 구현됩니다. 지원되지 않는 브라우저에 폴리필이 필요한 경우 에이전트는 항상 조건부로 로드하도록 지시받으므로 필요한 경우에만 비용이 발생합니다.
정확성은 어떻게 보장되나요?
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%포인트 향상됩니다. 하지만 결과는 프로젝트 요구사항, 모델, 작성하는 프롬프트, 선호하는 에이전트 코딩 도구에 따라 달라질 수 있습니다.
휘발성 기능에 대한 안내 사용 설정
휘발성 기능은 하나의 브라우저 엔진에서만 구현되는 실험용 웹 기능이며 브레이킹 체인지가 적용될 수 있습니다. 이러한 기능에 대한 안내를 사용 설정하려면 프로젝트 루트에서 다음 명령어를 실행합니다.
npx modern-web-guidance@latest set-allow-volatile-features
오리진 트라이얼 기능에 대한 가이드 사용 설정
실험용 기능이 처음 출시되면 일반적으로 플래그 뒤에 숨겨지거나 오리진 트라이얼을 통해 프로덕션 웹사이트에서만 사용할 수 있습니다. 일부 Modern Web Guidance 가이드에서는 이러한 기능을 사용하지만, 이러한 기능에 대한 안내는 기본적으로 코딩 에이전트에 제공되지 않습니다. 이러한 기능에 대한 안내를 받으려면 프로젝트 루트에서 다음 명령어를 실행합니다.
npx modern-web-guidance@latest set-allow-origin-trials
다음 단계
이제 Modern Web Guidance에 대한 전반적인 개요와 AI 코딩 워크플로에서 최신 웹 권장사항을 더 쉽게 채택할 수 있는 잠재력을 파악했습니다. 이제 Modern Web Guidance에서 제공하는 가이드를 살펴볼 수 있습니다.