클로드 코드에 모던 웹 가이던스를 설치해 오래된 웹 코드 찾아 고치는 법

모던 웹 가이던스(Modern Web Guidance)는 구글 크롬 팀이 마이크로소프트 엣지·모질라 파이어폭스·MDN 팀과 함께 관리하는 코딩 에이전트용 스킬이다. 에이전트가 학습 데이터에 흔한 옛날 패턴을 따라 쓰지 않고 요즘 브라우저 기능을 쓰게 잡아 준다. 11월 10일 나온 1.0에는 프로젝트에서 오래된 패턴을 찾아 고치는 현대화 워크플로가 들어갔다.

1. 설치한다. 크롬 팀 CLI로 깔면 자동으로 갱신된다.

npx modern-web-guidance@latest install

이미 깔았다면 1.0 이상으로 올린다.

npx modern-web-guidance@latest update

클로드 코드(Claude Code) 플러그인으로 깔아도 된다.

claude plugin install modern-web-guidance@claude-plugins-official

코덱스에서는 codex plugin marketplace add GoogleChrome/modern-web-guidance를 실행한 뒤 codex plugin add modern-web-guidance@googlechrome을 실행한다.

1. 저장소나 폴더를 두고 에이전트에게 "legacy patterns 찾아 줘", "modernize 해 줘"처럼 말한다. 컴포넌트 하나만 짚으면 현대화가 아니라 일반 가이드 검색으로 넘어간다.

2. 설치하기 전에 먼저 돌려 볼 수도 있다.

npx modern-web-guidance@latest legacy-scan .
npx modern-web-guidance@latest search "animate a dialog modal backdrop"

legacy-scan은 HTML·CSS·자바스크립트/타입스크립트·프레임워크 컴포넌트·package.json을 AST·DOM·CSS 파서로 로컬에서 훑는다. LLM을 부르지 않으니 토큰이 들지 않는다. 가이드 약 200개 가운데 오래된 코드를 오탐 없이 가려낼 수 있는 약 20%만 검사하고, 나머지는 에이전트가 작업하면서 필요한 가이드를 찾아 쓴다.