게시일: 2026년 11월 13일
이 사이트를 정기적으로 읽거나, X, LinkedIn, Bluesky에서 개발자용 Chrome을 팔로우하거나, 이번 주에 DevTools에서 새로운 기능 패널을 열었다면 이 소식을 들었을 것입니다. 하지만 출시를 위해 열심히 노력한 모든 분들을 위해 Modern Web Guidance가 이제 안정화 버전 1.0으로 제공됩니다.
Google I/O에서 초기 프리뷰를 공유한 이후 많은 개선사항이 적용되었으며, Modern Web Guidance는 Firefox 및 Edge와의 크로스 브라우저 공동작업으로 성장했습니다. 이번 주에는 도움말, 우수사례, 동영상, 문서를 통해 이러한 내용을 자세히 살펴보았습니다.
요약
프런티어 모델은 웹 개발을 위해 기존 패턴을 기본값으로 사용하는 경우가 많습니다. 예를 들어 CSS 스크롤 기반 애니메이션보다 JavaScript 애니메이션 라이브러리를 선호하거나 맞춤설정 가능한 드롭다운에 appearance: base-select를 사용하는 대신 복잡한 중첩 div 괴물을 빌드합니다.
Modern Web Guidance는 프롬프트를 기반으로 간결하고 작업 범위에 맞는 가이드를 삽입하여 이 문제를 해결합니다. 1.0 출시에서 제공하는 기능은 다음과 같습니다.
- 전문가가 검증한 가이드 추가: 성능, 스타일, 접근성, 보안, 개인 정보 보호, 양식 등을 다룹니다. 각 기술은 기술 분야 전문가가 검토하고 테스트했습니다. 가이드 카탈로그에서 기술을 탐색할 수 있습니다.
- 기본적으로 교차 브라우저: Mozilla Firefox, Microsoft Edge, Chrome을 빌드하는 팀의 공동작업입니다. 모든 가이드에는 기준 호환성 데이터와 대체가 포함되어 있습니다.
- 공개 평가 도구 모음: 수천 건의 평가 실행이 공개 평가 대시보드에서 검사 가능하며, 통과율의 상승을 강조합니다.
Modern Web Guidance 1.0 공지 게시물에서 Modern Web Guidance가 해결하는 AI 지식 격차의 구체적인 예, 에이전트용 Chrome DevTools를 사용한 엔드 투 엔드 워크플로, I/O 프리뷰에서 업데이트하는 방법을 확인하세요.
Google의 말만 믿지 마세요
Modern Web Guidance의 공동 제작자로서 당연히 약간의 편향이 있을 수 있습니다. Chrome의 전체 AI 코딩 도구 모음을 일상적인 워크플로에서 테스트한 후 파트너가 어떻게 생각하는지 살펴보세요.
- Policybazaar 및 Pensionbazaar: 빌드 및 확인 루프를 종료하여 새 페이지 처리 시간과 UI 버그를 90% 이상 줄였으며, Policybazaar는 약 30개의 방문 페이지에서 수동 Core Web Vitals 감사 작업을 92% 줄였습니다.
- MetaMask: 약 480개의 pull 요청에 걸쳐 3줄의 자문 PR 검토 봇에 Modern Web Guidance를 연결하여 15분의 중앙값 소요 시간으로 43개의 접근성 및 시맨틱 HTML 수정을 유도했습니다.
- WeTV: CI/CD에 에이전트용 Chrome DevTools와 Modern Web Guidance를 추가하여 반복되는 CLS 회귀의 90%를 자동으로 진단하고 수정함으로써 디버깅 시간을 87% 단축했습니다.
- note inc.: Modern Web Guidance를 내부 디자인 시스템의 규칙과 결합하여 최신 웹 검사 통과율을 61% 에서 94%로 높이고 적절한 LCP 이미지 우선순위 지정을 28% 향상했습니다.
시작하기
에이전트에게 Modern Web Guidance를 설치하도록 요청하면 운이 좋을 수도 있지만, 다음 npx 명령어를 사용하여 단계별 흐름으로 프로젝트와 에이전트를 설정하면 안심할 수 있습니다.
npx modern-web-guidance@latest install
GitHub에서 대체 설치 옵션을 살펴볼 수도 있습니다.
설정이 완료되면 새로운 사용 사례와 Modern Web Guidance 1.0의 내부 작동 방식을 심층 분석할 수 있습니다.
- 기존 코드베이스 현대화:
npx modern-web-guidance@latest legacy-scan가 빠른 로컬 문법 검사와 컨텍스트 에이전트 검토를 결합하여 불필요한 이탈 없이 기술 부채를 줄이는 방법 - 코드 생성 그 이상: 지속적인 개발자 학습: AI 에이전트로 코딩하는 동안 최신 HTML, CSS, 웹 API 기능을 최신 상태로 유지하기 위해 Modern Web Guidance를 대화형 학습 및 탐색 도구로 사용하는 방법을 알아봅니다.
- 기본적으로 크로스 브라우저: Baseline 대체 작동 방식:
가이드에서 실시간 웹 기능 데이터를 사용하여 점진적 개선,
@supports쿼리, 폴리필을 브라우저 타겟과 일치시키는 방법 - 웹 개발에서 AI가 잘못하는 10가지: 최신 프런티어 모델조차 현대 웹 검사의 절반 정도를 통과하지 못하는 10가지 일반적인 접근성, UX, 성능, 보안 격차를 살펴봅니다.
- 코딩 에이전트를 위한 로컬 벡터 검색: 507MB에서 7줄 루프로: Modern Web Guidance가 에이전트의 컨텍스트 윈도우를 채우지 않고도 200개가 넘는 가이드 기술 자료에서 관련 가이드를 밀리초 단위로 검색하는 방법을 자세히 알아보세요.
Chrome을 사용한 에이전트 웹 개발의 미래
코딩 에이전트와 함께 Modern Web Guidance를 사용하면 좋은 출발을 할 수 있습니다. 하지만 더 나아갈 수 있으며, 더 나아가야 합니다. 에이전트가 실제 브라우저에서 코드를 실행, 검사, 확인하는 방법이 필요합니다.
1년 넘게 에이전트용 Chrome DevTools는 접근성 및 성능 검사부터 메모리 디버깅 및 애니메이션 기록에 이르기까지 다양한 도구를 통해 코딩 에이전트에 실시간 런타임 가시성을 제공하여 에이전트가 이를 미세 조정할 수 있도록 지원해 왔습니다.
앞으로 몇 주 동안 에이전트용 Chrome DevTools의 다음 주요 업데이트를 기념할 예정입니다. Chrome에서 에이전트로 올바른 컨텍스트를 전달하는 것이 훨씬 더 쉬워집니다.
Modern Web Guidance 1.0을 사용해 보고 의견을 알려주세요. Modern Web Guidance와 에이전트용 Chrome DevTools는 모두 GitHub에서 공개적으로 빌드됩니다. 에이전트가 여전히 잘못 처리하는 웹 플랫폼 작업이 있거나 다음에 해결해야 할 문제에 관한 아이디어가 있다면 문제를 열고 알려주세요.