구글 크롬 팀의 Modern Web Guidance는 코딩 에이전트가 낡은 웹 코드 대신 최신 웹 표준으로 짜게 돕습니다 | DAKER 커뮤니티

GoogleChrome/modern-web-guidance-src 저장소 소개 모션 미리보기

GoogleChrome/modern-web-guidance-src는 코딩 에이전트에게 최신 웹 플랫폼 기능의 모범 사례와 브라우저 호환성 정보를 스킬 형태로 건네주는 Modern Web Guidance의 소스 저장소입니다. 에이전트가 학습 데이터에 많은 옛날식 JavaScript 대신 브라우저가 기본으로 제공하는 API를 고르도록 돕는 것이 목적이고, README는 Google Chrome, Microsoft Edge, Mozilla Firefox, MDN 팀이 웹 개발 커뮤니티와 함께 관리한다고 밝힙니다. 2026-11-13 KST GitHub Trending Daily 1위에 올랐고, GitHub API 기준 별 3,202개(2026-11-13 11:44 KST 확인), 주 언어는 TypeScript, 코드 라이선스는 Apache-2.0입니다.

에이전트가 웹 기능을 물으면 오프라인 검색으로 맞는 가이드를 찾아 필요한 코드 패턴과 주의점만 컨텍스트에 넣어 줍니다
GoogleChrome/modern-web-guidance-src 핵심 정보 카드

무엇인가

Modern Web Guidance는 웹 플랫폼 전문 지식, 모범 사례, 브라우저 호환성 데이터를 코딩 에이전트에 바로 심어 주는 스킬 묶음입니다. 이 저장소(modern-web-guidance-src)는 배포용 저장소인 GoogleChrome/modern-web-guidance의 원본으로, 가이드를 쓰고 보정하고 평가하는 코드와 문서가 들어 있습니다. README의 전체 목록에는 최신 웹 기능 250개가 정리되어 있고, 분야별로 CSS·레이아웃 140개, HTML·DOM 36개, JavaScript·API 74개입니다.

다루는 주제는 View Transitions와 진입·퇴장 애니메이션 같은 사용자 경험, 컨테이너 쿼리·subgrid·oklch 색 공간 같은 CSS 레이아웃, 프리로딩과 INP(Interaction to Next Paint) 진단·scheduler.yield 같은 성능, Anchor Positioning·Popover API·dialog 같은 폼과 UI, 스크린 리더와 키보드 조작 같은 접근성, 브라우저 내장 번역·요약·언어 감지 API 같은 내장 AI까지 이어집니다. 무거운 폴리필 대신 50줄 미만의 가벼운 대체 코드를 권하고, Baseline 프로젝트의 호환성 데이터를 반영해 현재 브라우저 지원 상황에 맞춘다고 설명합니다.

작동 방식은 세 단계입니다. 에이전트가 관련 작업에서 스킬을 켜고, modern-web-guidance search로 질문에 맞는 가이드를 찾고, retrieve로 그 가이드를 가져와 코드 패턴과 함정, 대체 방안을 컨텍스트에 넣습니다. README에 따르면 검색은 의존성 없는 오프라인 임베딩 모델과 BM25로 돌아가 네트워크 호출이나 API 키가 필요 없습니다. Origin Trial 단계의 실험 API나 출시 3개월 이내의 변동성 큰 기능은 검색에는 나오지만 가져오기는 막아 두고, 프로젝트 루트의 .mwgrc 파일로 팀 단위 허용 여부를 정할 수 있습니다.

왜 지금 뜨나

2026-11-13 KST 트렌딩 페이지에서 하루 동안 별 739개를 받아 Daily 1위에 있습니다. 같은 시각 GitHub API로 확인한 포크는 205개이고, 배포용 저장소 GoogleChrome/modern-web-guidance는 별 7,540개입니다. npm 패키지 modern-web-guidance는 2026-11-10 12:29 KST에 1.0.0 버전이 latest로 올라왔습니다.

눈길을 끄는 이유는 효과를 숫자로 보여 준다는 점입니다. 저장소는 실제 웹 앱 위에 개발자식 요청을 만들고 Playwright 채점기로 결과를 확인하는 평가 파이프라인을 두고, 가이드를 켠 경우와 끈 경우의 통과율을 비교합니다. README의 최근 결과 표를 보면 11월 8일 기준 claude_code(opus-5-5)는 과제 215개·검증 항목 1,801개에서 통과율이 57%에서 88%로 31%p 올랐고, codex_cli(gpt-6.1-sol)는 54%에서 82%로, antigravity_cli(gemini-4-argon)는 58%에서 94%로 올랐습니다. 모델이 이미 잘하는 내용은 걷어 내고 에이전트가 어려워하는 부분만 다듬어 토큰을 아끼도록 설계했다고 합니다.

어떻게 써 보나

설치 없이 먼저 맛보려면 npx로 검색, 가이드 가져오기, 레거시 패턴 점검을 바로 돌려 볼 수 있습니다. 아래 명령은 README의 예시 그대로입니다.

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
npx modern-web-guidance@latest legacy-scan .
  1. 정식 설치는 npx modern-web-guidance@latest install로 대화형 마법사를 띄우는 방식이 기본이고, --choose 옵션을 붙이면 modern-web-guidance(약 205토큰)와 chrome-extensions(약 175토큰) 스킬 묶음 중 원하는 것만 고를 수 있습니다.
  2. Claude Code에서는 플러그인 마켓플레이스로 넣을 수 있습니다. README 안내는 /plugin marketplace add GoogleChrome/modern-web-guidance, /plugin install modern-web-guidance@googlechrome 순서이고, 이어서 /plugin에서 GoogleChrome 마켓플레이스의 자동 업데이트를 켜고 /reload-plugins를 실행합니다.
  3. npx skills add GoogleChrome/modern-web-guidance, gh skill install GoogleChrome/modern-web-guidance 같은 다른 설치 경로와 GitHub Copilot CLI, OpenAI Codex용 명령도 README에 함께 정리되어 있습니다.
  4. 업데이트는 npx modern-web-guidance@latest update로 합니다. 설치 수, 호출한 에이전트 이름, 가이드 ID, 에이전트가 만든 검색어 같은 익명 사용 정보가 수집되며, 원래 사용자 프롬프트는 수집하지 않고 DISABLE_TELEMETRY=1 환경 변수로 끌 수 있습니다.

어디에 쓰면 좋나

가이드 문서는 CC-BY 4.0, 코드는 Apache-2.0으로 공개되어 있어 내용을 읽어 보고 팀 규칙에 맞게 참고하기에도 부담이 적습니다.

출처

여러분의 코딩 에이전트는 웹 코드를 짤 때 어떤 낡은 패턴을 가장 자주 꺼내 오나요? 댓글로 나눠 주세요.