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를 사용하지 않고 최신 웹 안내를 설치하려면 다음 에이전트별 안내를 참고하세요. 대부분의 옵션은 자동 업데이트를 지원하지 않습니다.
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
최신 웹 안내는 설정 > 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. 마켓에서 플러그인을 설치합니다.
/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. 마켓에서 플러그인을 설치합니다.
/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":"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"
이 경우 animate-to-from-top-layer 사용 사례의 가이드 마크다운이 터미널에 표시됩니다. 다른 사용 사례의 경우 animate-to-from-top-layer을 유효한 사용 사례 ID로 바꿉니다.
Modern Web Guidance를 사용해야 하는 이유
최신 웹 가이드는 지원되지 않는 AI 모델에 비해 웹 개발자에게 다음과 같은 세 가지 뚜렷한 이점을 제공합니다.
- AI 코딩 에이전트는 최신 웹 개발 문제에 대해 오래되고 시대에 뒤떨어진 솔루션을 기본값으로 사용하는 경향이 있습니다. 이러한 솔루션에는 최신 CSS 및 HTML API로 더 잘 해결되는 문제에 대한 기능을 제공하는 JavaScript가 포함되는 경우가 많습니다.
- 지금까지 AI 모델은 최신 웹 플랫폼 기능을 알지 못하거나 잘못된 정보를 가지고 있었습니다.
- 마지막으로 AI 모델은 특정 프로젝트의 기준 요구사항에 맞게 안내를 조정하는 대신 프로젝트 요구사항이나 브라우저 지원 기준을 고려하지 않는 오래된 추천을 제공하는 경향이 있습니다.
최신 웹 가이드는 이러한 단점을 해결하고 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는 다양한 최신 웹 기능을 사용합니다. 이 중 일부는 기준선 신규 또는 광범위하게 제공되지만 일부는 한정 재고 수량일 수 있습니다. 기능이 널리 제공되지 않는 경우 사용 사례 가이드에서는 기능이 지원되지 않는 브라우저에서 더 광범위한 호환성을 보장하는 방법에 관한 구체적인 안내를 상담사에게 제공합니다. 많은 경우 대체는 최신 기능이 지원되는 곳에서 사용할 수 있는 점진적 개선으로 구현됩니다. 지원되지 않는 브라우저에 polyfill이 필요한 경우 에이전트는 항상 필요한 경우에만 비용이 발생하도록 조건부로 로드하도록 안내됩니다.
정확성은 어떻게 보장되나요?
Modern Web Guidance의 각 사용 사례에는 품질 출력을 보장하기 위해 지속적으로 보정되는 평가 세트가 포함되어 있습니다.
사용 사례 평가에서는 자동화된 QA 하니스를 실행하여 올바른 에이전트 동작을 테스트하며, Playwright가 중심 역할을 합니다.
- 각 가이드에 대해 가이드의 구현 세부정보가 준수되었는지(예:
@media (prefers-reduced-motion: reduce)가 요구되는 곳에서 관찰되었는지) 테스트하는 Playwright 스크립트가 개발됩니다. - 이러한 Playwright 스크립트는 통과율이 100% 인 '올바른' 참조 데모 구현에 대해 지속적으로 보정됩니다. 반대로 스크립트는 통과율이 0% 일 것으로 예상되는 의도적으로 결함이 있는 구현에 대해 검사합니다.
- '올바른' 구현과 의도적으로 결함이 있는 구현 중 하나 또는 둘 다에서 각각 100% 와 0% 의 통과율이 나오지 않으면 생성기는 100% 보정이 달성될 때까지 컨텍스트를 사용하여 자동으로 재시도합니다.
- 마지막으로 기본 애플리케이션에 대한 엔드 투 엔드 평가가 적용됩니다. 이러한 평가 중 하나는 안내가 제공되지 않는 평가로, 최신 웹 안내를 호출하지 않고 기본 학습 데이터를 사용하여 작업을 완료하는 컨트롤입니다. 다른 평가 (실험)에서는 최신 웹 가이드를 사용하여 동일한 작업을 처리합니다.
Google의 평가에서는 최첨단 모델과 코딩 에이전트를 사용하여 매주 여러 차례 실행되므로 Google의 안내가 있을 때와 없을 때 에이전트가 얼마나 잘 작동하는지 명확하게 파악할 수 있습니다. 초기 결과를 보면 에이전트가 Modern Web Guidance를 사용하면 최신 권장사항 준수율이 평균 37%p 개선되는 것으로 나타났습니다. 하지만 프로젝트 요구사항, 모델, 작성하는 프롬프트, 선호하는 에이전트 코딩 도구에 따라 결과가 달라질 수 있습니다.
다음 단계
이제 Modern Web Guidance에 대한 일반적인 개요와 AI 코딩 워크플로에서 최신 웹 권장사항을 더 쉽게 채택할 수 있는 가능성을 알게 되었습니다. 이제 Modern Web Guidance에서 제공하는 분야와 사용 사례를 확인할 수 있습니다.