Google의 최신 AI 코딩 지원 「Modern Web Guidance」를 Antigravity (agy)와 연동해 보았다
요약
Google Chrome DevTools 팀이 공개한 AI 에이전트용 지식 집합인 Modern Web Guidance(MWG)를 Antigravity(agy)와 연동하는 방법을 다룹니다. 최신 Web 표준 API를 AI에게 학습시켜 레거시 코드를 방지하고, 로컬 환경에서 안전하게 빌드 및 관리하는 가이드를 제공합니다.
핵심 포인트
- MWG를 통해 AI가 최신 Web 표준 API를 참조하도록 유도
- JavaScript 의존도를 낮춘 클린한 프론트엔드 코드 생성 가능
- sudo 권한 없이 로컬 디렉토리에 빌드하여 환경 오염 방지
- 고성능 AI 에이전트 CLI인 Antigravity와 안전한 연동
서론
이번에는 Google (Chrome DevTools 팀)이 초기 프리뷰로 공개한, AI 에이전트용 지식 집합인 **「Modern Web Guidance (이후 MWG)」**를 다룹니다.
이 도구는 AI 에이전트에게 Web 표준의 최신 API를 올바르게 학습시켜, JavaScript (이후 JS)를 극한까지 줄인 클린한 프론트엔드 코드를 생성하게 만드는 강력한 방패입니다.
이번에는 Fedora/Mac 등의 환경에서, sudo (관리자 권한)를 일절 사용하지 않고 일반 사용자 권한의 로컬 환경만으로 소스 코드로부터 빌드하며, 나아가 고성능 AI 에이전트 CLI인 「Antigravity (agy)」와 안전하게 일원 관리 및 자동 연동하는 단계까지 완전 해설합니다.
agy에 대한 자세한 해설은 여기서 하고 있습니다.
개발 환경
OS: Fedora Linux 43 (Workstation Edition) x86_64 -
CPU: 12th Gen Intel(R) Core(TM) i5-12400 -
GPU: Intel Arc Pro B60 -
에디터: JetBrains제 WEBStorm 에디터 등
Modern Web Guidance란?
MWG란, Google (Chrome DevTools 팀)이 초기 프리뷰로 공개한, AI 코딩 에이전트에게 최신 Web 표준 사양을 올바르게 학습 및 참조시키기 위한 전문적인 스킬 집합입니다.
공식 문서: Modern Web Guidance | Chrome for Developers -
공식 소스 리포지토리: GitHub - GoogleChrome/modern-web-guidance-src
왜 지금 이것이 필요한가?
현재의 주요 LLM은 과거의 방대한 Web 데이터로부터 학습했기 때문에, 새로운 프론트엔드 코드를 작성하게 하면 아무래도 한 세대 전의 오래된 JS를 잔뜩 사용한 구현을 제안하기 쉽습니다.
하지만 현재의 모던 브라우저는 다음과 같은 강력한 네이티브 기능을 처음부터 갖추고 있습니다.
Popover API / 네이티브 <dialog> 요소: 복잡한 모달 제어를 JS 없이 구현 -
Scroll-driven animations / Scroll Snap: 스크롤 연동 애니메이션을 CSS만으로 실현 -
:user-invalid 의사 클래스 (Pseudo-class): 사용자가 조작을 마친 후에만 에러를 표시하는 스마트한 폼 검증 (Form Validation)
Modern Web Guidance를 AI 에이전트에게 읽히게 함으로써, AI가 과거의 레거시 구현으로 잘못 연결되는 것을 방지하는 '가드레일 (Guardrail)' 역할을 하게 됩니다.
결과적으로, 브라우저 표준 기능을 극한까지 활용한, 압도적으로 가볍고 타입 안전한 (Type-safe) 클린 코드를 AI가 단번에 출력할 수 있게 됩니다.
1. 글로벌 환경을 더럽히지 않는 「로컬 일원 관리」의 장점
통상적으로 공식 문서에서는 npx modern-web-guidance@latest install을 실행하면 각 에이전트의 글로벌 영역에 배치하도록 안내합니다. 하지만 시스템 영역을 더럽히면 다음과 같은 단점이 있습니다.
sudo에 의한 퍼미션 (권한) 혼란 및 에러 -
OS 업데이트 시나 Node.js 버전 변경 시의 환경 오염 -
보안 리스크 (AI에게 항상 root 권한을 맡기는 것은 NG)
그래서 이번에는 자신의 홈 디렉토리 하위 (예: ~/any-tools/)에 지식의 마스터 (본존) 를 하나만 생성하고, 그것을 agy가 참배하러 가게 만드는 구조를 구축합니다.
~/any-tools/modern-web-guidance/
├── dist/
│ └── index.js # 빌드 (npm run build)에 의해 생성된 실행 파일
...
2. 로컬 환경으로의 배치와 TypeScript 빌드
Google이 공개한 본래 소스 리포지토리는 빌드 전의 TypeScript (이후 TS) 환경이기 때문에, 그대로 실행하려고 하면 could not determine executable to run 에러가 발생하며 차단됩니다. 따라서 수동으로 컴파일을 수행해야 합니다.
# 1. 임의의 위치에 마스터 디렉토리를 생성하고 이동
mkdir -p ~/any-tools/modern-web-guidance
cd ~/any-tools/modern-web-guidance
...
💡 연동 전 단독 동작 체크
agy
에 로드하기 전에, 로컬에서 검색 로직이 살아있는지 테스트합니다.
node dist/index.js performance
터미널에 ** Happy developing 🚀** 라고 출력되면, 로컬 컴파일은 무사히 100% 성공입니다!
failed to read plugin.json
오류의 자작 해킹
- 【가장 중요】걸림돌 포인트: 여기서부터가 본론입니다. 빌드가 성공한 디렉토리를
agy plugin install
으로 등록하려고 하면, 다음과 같은 오류에 직면하여 막히게 됩니다.
Error: failed to read plugin.json: open plugin.json: no such file or directory
🔍 오류의 원인
Google 공식 MWG 리포지토리는 특정 도구에 의존하지 않는 '범용 리포지토리'로 배포되고 있기 때문에, Antigravity CLI (agy)가 외부 플러그인으로 인식하는 데 필수적인 메타데이터 파일(plugin.json)이 처음부터 존재하지 않기 때문입니다.
plugin.json
을 수동으로 해킹하기
🛠️ 해결책: 없으면 만들면 됩니다. 리포지토리의 루트 직경에 ** plugin.json** 을 새로 생성하고, 다음 코드를 작성하여,
agy
에게 엔트리 포인트(본체)의 위치를 알려줍니다.
{
"name": "modern-web-guidance",
"version": "1.0.0",
...
4. Antigravity CLI (agy)에 로컬 연동을 실행
정의 파일을 배치했으니, 만반의 준비를 갖추고 절대 경로(또는 현재 디렉토리의 점)를 지정하여 설치 명령을 실행합니다.
# 현재 위치의 절대 경로를 조사
pwd
# 출력 예: /home/username/any-tools/modern-web-guidance
...
🎉 성공 시 증거
무사히 [ok]가 표시되고, 각 컴포넌트가 처리됩니다. 정상적으로 등록되었는지, 매니페스트를 목록 명령으로 확인해 봅시다.
agy plugin list
{
"imports": [
{
...
매니페스트 JSON 안에 `
는(은) 즉시 프로젝트 내의 구조를 스캔하기 시작합니다.
● ListDir(~/any-tools/test-front)
● Read(~/any-tools/test-front/package.json)
● ListDir(~/any-tools/test-front/src)
● Read(~/any-tools/test-front/src/index.ts)
사람이 "여기에 package.json이 있고, 여기에 소스가 있어"라고 가르쳐주지 않아도, 에이전트가 스스로 파일을 읽어 현재 개발 환경의 상황을 자율적으로 파악해 나갑니다.
2. 인간을 향한 정중한 히어링(Hearing)과 「구현 계획」 제안
기존 코드의 해석이 끝나면, AI는 즉시 코드를 작성하기 시작하는 것이 아니라, 어떠한 폼(Form) 화면으로 만들 것인지에 대한 구체적인 선택지를 사용자에게 제시해 주었습니다.
이 시점에서 MWG의 사용자 경험(UX)을 최우선으로 한다는 설계 원칙의 철학이 반영되어 있음을 알 수 있습니다.
이번에는 권장된 1. 사용자 신규 등록 & 프로필 생성 폼을 선택하여 진행했습니다.
3. 안전 가드(Safety Guard)의 작동
구현 방향이 결정되면, 환경 구축에 필요한 에코시스템(Vite나 Tailwind CSS 등)의 설치 요청이 실행됩니다.
이때 agy의 안전 가드가 작동하여, 사용자에게 실행 권한(Permission) 확인 화면이 표시됩니다.
Requesting permission for: npm install -D vite tailwindcss postcss autoprefixer
Do you want to proceed?
> 1. Yes
...
AI가 멋대로 환경을 변경하지 않는 안심 설계입니다. 여기서는 1. Yes를 선택하여, 안전하게 필요한 개발 의존성 패키지(Development Dependency Package)를 로컬 환경으로 도입시킵니다.
4. 폭속으로 생성된 「Tailwind v4 × 모던 플러그인」의 결과물
설치 허가를 내린 후 불과 몇 분 만에, walkthrough.md와 함께 생성 및 업데이트된 프론트엔드 소스 코드 일체는 다음과 같습니다. 주목해야 할 점은, 최신 컴포넌트 구조와 MWG의 베스트 프랙티스(Best Practice)가 처음부터 심어져 있다는 점입니다.
📦 생성·업데이트된 주요 파일 구성
- 엔트리 HTML (
index.html**)
👉 시맨틱 HTML5를 통한, 군더더기 없는 아름다운 「3단계 구조」의 마크업(Markup) 설계. - CSS & 테마 (
style.css**)
👉 무려 최신 Tailwind v4의 코어 설계(CSS 기반 테마 설정)를 준수! 그라데이션이나 커스텀 애니메이션이 매우 깔끔하게 정의되어 있습니다. - 프론트엔드 로직 (
index.ts**)
👉 비밀번호 강도 인디케이터 연동, 인터랙션 후의 스마트한 유효성 검사(Validation), 나아가 다크 모드 전환이나 아바타 선택, 멀티 스텝 진행 관리까지, 풍부한 모던 로직이 TypeScript로 타입 안전(Type-safe)하게 작성되어 있습니다. - Vite 설정 (
vite.config.ts**)
👉 최신@tailwindcss/vite공식 플러그인 도입과 개발용 포트가 한 번에 셋업 완료.
~/any-tools/test-front/
├── dist/ # 빌드 결과물이 출력되는 디렉토리
├── src/
...
5. 로컬 환경에서의 폭속 프리뷰
생성이 완료되면, 나머지는 터미널에서 제시된 익숙한 명령어를 입력하는 것만으로 로컬에서의 동작 검증이 가능합니다.
# 개발 서버 기동 (http://localhost:3000 에서 폭속 핫 리로드(Hot Reload) 기동)
npm run dev
# 프로덕션 빌드(Production Build) 검증
...
브라우저를 열면, 아래와 같이 브라우저 네이티브의 최신 기능을 풀 활용한 폭속 폼 화면이 눈앞에 나타납니다.
Modern Web Guidance의 지견이 자동 주입되어, 접근성 있는(Accessible) 폼이 순식간에 생성되는 모습
🎯 결론: Modern Web Guidance가 가져다주는 결과물
이번 일련의 자율 생성 과정을 통해 확신한 것은, 인간이 『최신 Web 명세서의 기술 방법』을 처음부터 공부하여 프롬프트로 제약하지 않더라도, MWG를 플러그인으로 갖추는 것만으로 AI 에이전트의 출력 완성도가 상당히 높다는 점입니다.
최신 Tailwind v4나 Vite를 조합한 컴포넌트 개발을 이 정도로 안전하고 자율적으로 진행해 주는 『Antigravity × Modern Web Guidance』의 조합은, 2026년 현재 프론트엔드 개발에 있어 최강의 파트너라고 해도 과언이 아닙니다.
여러분도 꼭 로컬 환경에 지식을 임포트(Import)하여, 이 차원이 다른 초고속 클린 개발을 체험해 보시기 바랍니다!
Discussion
AI 자동 생성 콘텐츠
본 콘텐츠는 Zenn AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기