게시일: 2026년 11월 10일
에이전트 웹 개발의 새로운 시대에 개발자는 코딩 에이전트가 웹 구축 전문가가 되기를 기대합니다. 최신 첨단 코딩 모델은 성능이 뛰어나고 일반적으로 작동하는 코드를 생성할 수 있지만, 웹 개발 전문가에게 AI 생성 코드를 검토해 달라고 요청하면 거의 항상 코드를 더 빠르고, 더 접근하기 쉽고, 더 안전하게 만들 수 있는 방법을 찾을 수 있습니다.
Chrome은 에이전트 기반 웹 개발의 미래에 막대한 투자를 하고 있으며, 이 문제를 해결하기 위해 5월 Google I/O에서 Modern Web Guidance의 초기 프리뷰를 도입했습니다. Modern Web Guidance는 웹 플랫폼 전문 지식, 권장사항, 브라우저 호환성 데이터를 코딩 에이전트에 직접 삽입하는 일련의 기술입니다.
오늘 Modern Web Guidance 버전 1.0의 안정화 버전이 출시되었습니다. 이 버전에는 다음이 포함됩니다.
- 새로운 현대화 워크플로는 기존 코드베이스를 스캔하여 에이전트가 안전하게 현대화할 수 있는 기회를 찾도록 도와줍니다.
- 전문가가 검증한 크로스 브라우저 솔루션을 통해 검증된 수백 개의 AI 지식 격차를 타겟팅하는 확장된 가이드 데이터베이스
- 모든 가이드에 대한 심층적인 전문가 검토(콘텐츠 영역 기술 리드의 승인 및 사용자 대상 가이드에 대한 전담 접근성 검토 포함)
- Modern Web Guidance가 없는 에이전트와 비교하여 측정 가능한 개선사항을 보여주는 공개 평가 대시보드를 통해 모든 가이드에 대한 전체 평가 범위를 제공합니다.
버전 1.0에서는 Modern Web Guidance가 크로스 브라우저 프로젝트로 전환되어 Firefox와 Edge가 Chrome과 함께 크로스 브라우저 호환성을 지원 및 개선하고 프로젝트에 기여하게 되었다는 소식도 전해드립니다. Baseline과의 공동 작업을 기반으로, 에이전트를 사용하여 코딩하는 모든 사용자가 최신 웹 플랫폼의 강력한 기능과 역량을 최대한 활용할 수 있도록 하는 것이 Google의 목표입니다.
사용하는 모델이나 에이전트 하네스에 관계없이 웹용으로 빌드하는 경우 Modern Web Guidance는 에이전트 워크플로에 속합니다.
Modern Web Guidance를 설치하려면 프로젝트 디렉터리에서 다음 명령어를 실행합니다.
npx modern-web-guidance@latest install
또는 이미 이전 버전을 설치한 경우 다음을 실행하여 1.0으로 업데이트할 수 있습니다.
npx modern-web-guidance@latest update
추가 설치 안내를 확인하거나 자세히 알아보려면 Modern Web Guidance 문서를 확인하거나 이 동영상을 시청하여 간단한 개요를 확인하세요.
개발자와 비즈니스가 Modern Web Guidance를 사용해야 하는 이유
코딩 에이전트가 개발자가 그 어느 때보다 빠르게 코드를 작성하는 데 도움이 되었다는 것은 부인할 수 없는 사실입니다. 하지만 모두가 코딩 에이전트를 사용하는 세상에서는 속도가 더 이상 경쟁 우위가 아닙니다.
요즘에는 사용성, 경험 품질과 같은 기본적인 요소에서 차별화하는 것이 그 어느 때보다 중요합니다. Modern Web Guidance가 도움이 될 수 있는 몇 가지 방법은 다음과 같습니다.
모델이 놓치기 쉬운 권장사항 보강
최첨단 코딩 모델은 많은 권장사항을 잘 파악하고 있지만, 평가 결과에 따르면 다음과 같은 여러 중요한 영역에서 여전히 부족한 것으로 나타났습니다.
- 접근성: 키보드 포커스 및 비활성 관리, 모션 감소 지원, 액세스 가능한 양식 유효성 검사
- 사용자 환경: 스와이프 및 터치 동작, 대화상자 및 팝오버 전환, 밝은 테마/어두운 테마 구현
- 성능: 기본 스레드 작업 예약, 오프스크린 렌더링 격리, 레이아웃 변경 방지
- 보안: 안전한 HTML 정제, 엄격한 콘텐츠 보안 정책, 패스키 인증 관리자.
접근성 권장사항은 특히 중요합니다. 잘못된 ARIA와 같은 실수는 ARIA가 전혀 없는 것보다 페이지의 접근성을 떨어뜨릴 수 있기 때문입니다. 버전 1.0의 경우, 매일 보조 기술을 사용하는 접근성 전문가가 실제 보조 기술을 사용하여 사용자 대상 가이드를 검토하고 테스트했습니다.
작업에 가장 적합한 웹 기능 사용
AI 모델은 JavaScript를 사용하여 무언가를 작동시키는 방법을 파악하는 데 매우 능숙하지만, 대부분의 경우 훨씬 적은 코드로 동일한 작업을 수행할 수 있는 HTML 또는 CSS 기능이 있습니다. 또한 브라우저에서 처리되므로 일반적으로 성능이 더 우수하고 접근성 어포던스가 제공됩니다. 예를 들면 다음과 같습니다.
- 팝오버 및 대화상자에 애니메이션을 적용하는 기능
- 스크롤 및 스와이프 기반 상호작용을 개선하는 기능
- 원활하고 유연한 페이지 전환을 위한 더 나은 API
새로운 기능은 사용자에게 중요한 방식으로 사이트 환경을 개선할 수도 있습니다. 예를 들면 다음과 같습니다.
- 패스키 및 WebAuthn: 더 빠르고 안전한 로그인 환경
- 자동 완성: 맞춤 JavaScript 기반 양식 컨트롤을 사용할 때 자주 실패하는 결제 절차(특히 모바일)를 개선합니다.
Modern Web Guidance는 브라우저 지원 요구사항에 따라 작업에 가장 적합한 기능을 추천하도록 설계되었습니다. 가이드에는 Baseline 및 브라우저 호환성 데이터가 삽입되어 있으므로 프로젝트의 요구사항에 맞게 추천을 맞춤설정할 수 있습니다.
코드베이스를 스캔하고 현대화 기회 찾기
대부분의 웹 개발은 완전히 새로운 프로젝트에서 이루어지지 않습니다. 이는 오래된 해결 방법, 불필요한 종속 항목, 더 이상 필요하지 않은 폴리필이 수년간 누적된 기존 코드베이스에서 발생합니다.
버전 1.0에는 기존 HTML, CSS, JavaScript, package.json를 분석하여 안전하게 업그레이드할 수 있는 기회를 찾은 다음 에이전트에게 변경사항을 안내하는 새로운 현대화 워크플로가 추가되었습니다.
/modern-web-guidance Modernize the code in this directory
이 첫 번째 출시에서 현대화 워크플로는 정적 분석을 사용하여 제한된 패턴 집합을 확인합니다. 예측 가능한 결과를 얻을 수 있는 좁은 범위에서 시작한 후 확장하기로 했습니다. 앞으로 알려진 패턴을 일치시키는 것뿐만 아니라 에이전트가 코드를 직접 추론하는 에이전트 감사 등 더 많은 영역을 다룰 계획입니다.
웹 플랫폼의 진화에 발맞춰 최신 정보 확인하기
웹 플랫폼은 끊임없이 변화합니다. 새로운 기능은 브라우저의 주요 버전마다 출시되며, 이전에는 사용할 수 없었던 기존 기능은 새로운 브라우저 출시마다 기준이 됩니다.
Modern Web Guidance는 Baseline 호환성 데이터를 기반으로 빌드되며, 브라우저 엔지니어, 웹 표준 전문가, 접근성 전문가가 추천을 유지관리하므로 이러한 추천은 플랫폼 자체와 함께 발전하며 이제 프로젝트도 마찬가지입니다.
새로운 웹 기능 및 권장사항 알아보기
Modern Web Guidance는 주로 에이전트를 위한 도구로 빌드되었지만, 많은 개발자로부터 이 가이드가 학습 리소스로서 그 자체로도 매우 유용하다는 의견을 들었습니다.
에이전트 코딩 시대에도 영역별 전문성을 쌓는 것은 여전히 가치가 있습니다. Modern Web Guidance는 가이드를 직접 읽거나 CLI를 사용하여 사용 사례를 검색하고 프로젝트와 관련이 있을 수 있는 새로운 기법을 발견하는 데 도움이 됩니다.
Modern Web Guidance를 에이전트용 Chrome DevTools와 페어링
에이전트형 웹 개발에서 코드 작성은 워크플로의 일부에 불과합니다. 또한 코드를 실행하여 예상대로 작동하는지 확인해야 합니다. 이러한 이유로 개발자는 Modern Web Guidance를 에이전트용 Chrome DevTools와 함께 사용하는 것이 좋습니다.
- Modern Web Guidance는 최신 권장사항에 따라 코드를 작성하는 데 필요한 전문 지식을 에이전트에 미리 제공합니다.
- 에이전트용 Chrome DevTools는 에이전트에 Agent Runtime 가시성을 제공하므로 다양한 기기 기능, 사용자 환경설정, 네트워크 조건에서 코드를 확인, 디버그, 최적화할 수 있습니다.
이러한 기능을 함께 사용하면 에이전트가 더 적은 차례로 더 나은 솔루션에 도달할 수 있습니다. 다음은 이러한 도구를 함께 사용하여 효과를 극대화하는 방법의 몇 가지 예입니다.
실적 타겟을 달성할 때까지 최적화
Modern Web Guidance는 기본 스레드를 차단하는 장기 실행 JavaScript 작업을 효과적으로 분할하는 방법을 에이전트에게 알려줄 수 있지만, 코드를 테스트하여 해당 JavaScript 작업이 실제로 기본 스레드를 얼마나 오래 차단하는지 확인할 수는 없습니다.
에이전트용 Chrome DevTools를 사용하면 시뮬레이션된 저사양 CPU에서 성능 추적을 실행하여 문제가 있는지 확인한 다음, Modern Web Guidance의 성능 조언을 사용하여 코드가 기본 스레드를 50밀리초 이상 차단하지 않을 때까지 반복할 수 있습니다(따라서 INP가 저하되지 않음).
애니메이션 테스트 및 미세 조정
Modern Web Guidance는 모달 대화상자, 도움말, 팝오버 메뉴와 같은 기능을 적절하고 성능이 우수하게 애니메이션 처리하는 방법을 에이전트에 보여줄 수 있지만, 이 가이드를 사용하더라도 전체 애플리케이션의 컨텍스트에서 사용할 때 애니메이션이 실제로 작동하고 보기 좋은지 확인해야 합니다.
에이전트용 Chrome DevTools는 코드를 실행하고, 페이지와 상호작용하고, 애니메이션이 작동하는 모습을 화면 녹화할 수 있습니다. 그런 다음 녹화 파일을 검토하여 애니메이션이 실행되는지, 사이트의 나머지 부분과 스타일 및 느낌이 일치하는지 확인할 수 있습니다.
에이전트용 Chrome DevTools를 사용하여 prefers-reduced-motion가 설정되었을 때 구성요소가 사용자의 환경설정을 따르는지 확인할 수도 있습니다.
메모리 누수 없이 뷰 캐시
Modern Web Guidance는 메모리에서 뷰를 렌더링하고 캐시하는 동시에 접근성 트리에서 뷰를 적절하게 숨겨 SPA 전환을 즉각적으로 처리하는 방법을 에이전트에 알려줄 수 있습니다.
하지만 이 경우 사용자가 페이지에 오래 머무를 때 메모리가 누출되지 않도록 사용하지 않는 뷰를 적절하게 정리해야 합니다. 에이전트용 Chrome DevTools에는 메모리 디버깅 도구가 있으므로 에이전트가 메모리 사용량이 무제한으로 증가하지 않도록 할 수 있습니다.
Modern Web Guidance와 에이전트용 Chrome DevTools를 함께 사용하는 방법을 자세히 알아보려면 다음 동영상을 참고하세요.
성공사례
전 세계의 엔지니어링팀은 이미 Modern Web Guidance와 에이전트용 Chrome DevTools를 사용하여 코드 품질을 개선하고, 배포 속도를 높이고, 수동 디버깅 병목 현상을 제거하고 있습니다.
Pensionbazaar 및 Policybazaar
인도 핀테크 기업 Paisabazaar가 출시한 새로운 은퇴 계획 플랫폼인 Pensionbazaar는 Modern Web Guidance와 에이전트용 Chrome DevTools를 함께 사용하여 새 페이지를 빌드하고 검증함으로써 소요 시간을 90% 이상 단축하고(약 4일에서 몇 시간으로) 새 화면의 UI 버그를 90% 이상 줄였습니다. 9,700만 명 이상의 등록 고객을 보유한 인도 최고의 보험 플랫폼 중 하나인 자매 플랫폼 Policybazaar는 에이전트용 Chrome DevTools를 사용하여 트래픽이 많은 약 30개의 방문 페이지에서 성능 감사를 자동화하여 수동 감사 노력을 92% 줄였습니다.
"Pensionbazaar의 경우, 나중에 기술 부채를 방지하기 위해 첫날부터 고품질 코드를 빌드하는 것이 우선순위였습니다. Modern Web Guidance는 코딩 에이전트가 특정 브라우저 호환성 목표를 준수하면서 최신 웹 표준과 성능 권장사항을 채택하도록 안내했습니다. 덕분에 프런트엔드 코드 검토가 훨씬 더 쉽고 빨라졌으며 궁극적으로 개발 소요 시간이 개선되었습니다."
- 아만 소니, Policybazaar 엔지니어링 관리자
WeTV
Tencent의 국제 동영상 스트리밍 플랫폼인 WeTV는 CI/CD 파이프라인에 AI 코딩 에이전트를 추가했습니다. 이 에이전트는 에이전트용 Chrome DevTools를 사용하여 성능 저하를 진단하고 Modern Web Guidance를 사용하여 최신 웹 플랫폼 기능을 통해 이를 해결합니다. 이제 에이전트가 실패한 성능 검사의 90%를 자동으로 진단하고 해결하여 디버깅 및 해결 시간을 87% 단축합니다(수동 평가를 포함하여 4시간에서 30분으로 단축).
"속도와 품질 측면에서 매우 효과적인 결과를 얻었습니다. 에이전트용 Chrome DevTools와 Modern Web Guidance에서 제공하는 진단 통계는 복잡한 레이아웃 문제를 해결하는 데 신뢰할 수 있는 참고 자료가 되었습니다. 수정할 때마다 엄격한 인증을 수행하며 현재 성공률과 안정성이 출시 신뢰도를 크게 향상시켰습니다."
—양지에 정, WeTV(Tencent) 엔지니어링 책임자
note inc.
월간 활성 사용자 수가 9천만 명이 넘는 일본 최대의 크리에이터 및 미디어 플랫폼 중 하나인 note inc.는 Next.js 프런트엔드를 현대화하기 위한 지속적인 노력의 일환으로 사내 디자인 시스템과 함께 Modern Web Guidance를 사용했습니다. 프로덕션 코드베이스에서 180회 실행 평가를 진행한 결과, Modern Web Guidance는 에이전트가 스크롤 애니메이션, 도움말, 아코디언에 맞춤 JavaScript 대신 네이티브 HTML 및 CSS 기능을 사용하도록 유도하여 최신 웹 검사 통과율을 61% 에서 94%로 높였습니다. 또한 병합된 431개의 PR에서 적절한 LCP 이미지 우선순위 지정이 28% 증가했습니다.
"note의 사명은 '창작을 시작하고 계속하는 것'이므로, 모든 크리에이터와 독자가 빠르고 쉽게 액세스할 수 있는 플랫폼을 유지해야 합니다. AI 코딩 에이전트로 작성되는 코드가 늘어남에 따라 Modern Web Guidance는 이전 JavaScript 패턴으로 돌아가는 대신 현대적인 표준 기반 솔루션을 사용할 수 있도록 지원합니다. 또한 이미지 로드 우선순위 및 양식 접근성과 같이 놓치기 쉬운 세부정보를 지적합니다. 디자인 시스템과 결합하여 UI를 일관되게 유지하면서 메모를 계속 개선할 수 있습니다."
<br>—타케히코 이타바시, note inc. 기술 부문 부사장
MetaMask
약 190개국에서 1억 회 이상 다운로드된 자체 보관 금융 플랫폼인 MetaMask는 오픈소스 브라우저 확장 프로그램에 대한 모든 pull 요청에 대해 Modern Web Guidance를 자동 검토 봇으로 실행하며, 이는 단 세 줄의 프롬프트로 구성됩니다. 처음 5주 동안 이 봇은 약 480개의 pull 요청을 검토하고 그중 64개에 댓글을 달았으며, 엔지니어는 댓글에서 수정까지 중앙값 15분으로 43개의 발견 사항(대부분 린터가 포착하지 못하는 접근성, HTML 시맨틱스, 양식 문제)을 수정했습니다.
"리뷰가 정말 도움이 됩니다. 덕분에 Interest Invoker, Popover API와 같은 최신 API를 파악하고 엔지니어들이 익숙해질 수 있었습니다. PR 검토 시간이 늘어나지 않았으며, 오히려 줄어들었을 가능성이 높습니다. MWG가 발견한 문제는 그렇지 않았다면 이러한 최신 웹 기술에 익숙한 검토자가 필요했을 것입니다."
—프랜시스 네포무세노, MetaMask UX 엔지니어
생태계 및 커뮤니티 지원
Modern Web Guidance는 Chrome 내에서 시작된 이니셔티브이지만, 이 1.0 버전을 달성하기까지 웹 커뮤니티 전반의 수많은 전문가가 협력했습니다.
각 웹 플랫폼 영역을 감독하는 콘텐츠 영역 기술 리드, Firefox 및 Edge의 브라우저 파트너, 가이드를 작성하고 테스트한 독립적인 웹 표준 및 접근성 전문가, 이번 출시를 지원한 모든 GitHub의 오픈소스 참여자에게 감사드립니다.
코딩 에이전트가 웹에 대해 알고 있는 내용에 공백이 있거나 기존 가이드를 개선하는 데 도움을 주고 싶다면 참여 가이드를 참고하세요.
Modern Web Guidance 시작하기
프로젝트에 Modern Web Guidance를 추가하려면 프로젝트 디렉터리에서 CLI 설치 프로그램을 실행합니다.
npx modern-web-guidance@latest install
또는 이미 이전 버전을 설치한 경우 다음을 실행하여 1.0으로 업데이트할 수 있습니다.
npx modern-web-guidance@latest update
CLI 외에도 Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code, Grok Build 등 가장 인기 있는 코딩 에이전트 플러그인 마켓플레이스를 통해 Modern Web Guidance를 직접 설치하고 업데이트할 수 있습니다.
자세히 알아보려면 다음 리소스를 확인하세요.