AI에게 프론트엔드 코드를 작성하게 하면, 한 세대 전의 방식을 사용하여 곤란해지는 경우가 자주 있습니다.

제 AI 사용법이 잘못되었다는 전제는 깔아두고 있지만, 예를 들어 CSS에서는 Subgrid를 사용해주길 바라는 상황에서 굳이 오래된 Grid 중첩(nesting)을 작성해 오거나, JavaScript에서는 Object.groupBy로 끝낼 수 있는 그룹화를 reduce를 사용하여 처리하는 등, 최신 작성 방식을 선택해주지 않는 경우가 여러 번 있습니다. 또한, 당연한 품질로서 대응해야 할 접근성(Accessibility) 대응이 누락되거나, 최신 보안 대책이 빠진 코드를 작성해 오는 경우도 있어 서비스의 품질 저하로 이어집니다.

5/19에 Google 공식이 Google I/O에서 발표한 「Modern Web Guidance」 스킬을 사용하면, Claude Code나 Codex와 같은 AI 에이전트가 최신 Web 기능으로 코드를 작성할 수 있게 됩니다. 프론트엔드 개발을 한다면 반드시 도입해두고 싶은 스킬입니다.

Google I/O '26의 Developer Keynote에서 발표된 Modern Web Guidance

본 기사에서는 Modern Web Guidance에 대한 해설과, 실제로 저의 포트폴리오 사이트에 도입한 결과를 소개합니다.

4줄 요약

• Modern Web Guidance란, 최근 몇 년 사이 사용할 수 있게 된 모던한 Web 기능의 지식을 AI 에이전트에게 주입하는 Google 공식 가이드
• 사용자 경험(User Experience)·CSS 레이아웃·퍼포먼스(Performance)·폼 & UI·접근성(Accessibility)·브라우저 내장 AI의 6개 분야를 체크할 수 있음
• 브라우저 지원 현황(Baseline)과 연동하여, 지원이 갖춰지지 않은 기능에는 폴백(Fallback)을 곁들여 제안해줌
• npx modern-web-guidance@latest install로 도입

왜 AI는 오래된 코드를 작성하는가

LLM(대규모 언어 모델)은 과거에 작성된 방대한 코드를 학습하고 있습니다. Web의 세계에는 오래된 작성 방식의 코드가 많이 쌓여 있기 때문에, 아무것도 지정하지 않으면 AI는 '다수파'의 코드를 바탕으로 한 세대 전의 작성 방식을 내놓는 경우가 자주 있습니다. 서두에서 언급한 Subgrid나 dialog의 예가 바로 이것이 원인입니다.

Coding agents often default to older patterns because LLM training data contains vast amounts of legacy code.

(의역: 코딩 에이전트는 학습 데이터에 대량의 레거시 코드가 포함되어 있기 때문에, 무심코 오래된 패턴을 선택해 버린다)

Modern Web Guidance는 최신 Web 플랫폼의 지식을 AI 에이전트에게 주입하여 이 문제를 해결하도록 유도합니다. 공식 측에서는 Claude Opus 4.7에 「이미지를 더 빠르게 로드하게 해줘」와 같이 API 이름을 일부러 말하지 않는 모호한 개발 의뢰를 75개 던지고, 완성된 코드가 브라우저상에서 올바르게 작동하는지, 모던한 작성 방식인지 점수를 매겼습니다. Modern Web Guidance가 없을 때는 올바르게 작성한 비율이 약 절반(52%)이었으나, 있을 때는 85%까지 올라갔습니다. 10번 부탁했을 때 5번 정도밖에 만족스러운 답이 돌아오지 않던 것이, 8~9번은 돌아오게 되었다는 차이입니다. 실험의 상세 내용은 공식 리포지토리의 Evals 섹션에 정리되어 있습니다.

무엇이 체크되는가

Modern Web Guidance에는 6개의 분야(Core Disciplines)로 정리된 모던한 Web 기능 및 유스케이스(Use case)가 수록되어 있습니다. AI 에이전트는 이 유스케이스로부터 '하고 싶은 것'을 역으로 찾아내어 모던한 Web 기술로 구현하거나, 기존 코드가 모던한 작성 방식인지 점검할 수 있게 됩니다.

■ CSS 레이아웃

컨테이너 쿼리(Container Queries), Subgrid, oklch 등의 모던한 색 공간(Color space), text-wrap 조정, 행의 여백(Leading) 트리밍 등

■ 사용자 경험 (User Experience)

View Transitions, 요소의 표시·비표시 애니메이션, 패럴랙스 스크롤(Parallax scroll), CSS의 scrollbar-color 등

■ 퍼포먼스 (Performance)

페이지 프리로딩(Instant preloading), INP(Interaction to Next Paint) 진단, scheduler.yield를 통한 태스크 분할 등

■ 폼 & UI

툴팁을 위한 Anchor Positioning, Popover API, <dialog>

, :user-invalid를 통한 유효성 검사 (Validation), 입력란의 자동 크기 조정 등

■ 접근성 (Accessibility)

접근 가능한 에러 알림이나 키보드 포커스 관리 등

■ 브라우저 내장 AI

번역·요약·언어 감지를 단말기 내에서 수행하는 로컬 AI 모델 등

유스케이스 및 Web 기능의 예

예를 들어, CSS 레이아웃 기능 가이드는 다음 URL에서 확인할 수 있습니다.

내용은 다음과 같습니다. Flexbox나 Grid의 사용 구분법에 대해 Google 공식 판정이 있다는 점은 매우 유용하네요.

• "1차원 배열이라면 Flexbox, 손자 요소를 조부 그리드의 선에 맞추고 싶다면 Subgrid, 행과 열의 골격부터 구성한다면 Grid"와 같은 레이아웃 모드 선택 방법
• flex-basis와 width를 동시에 지정해서는 안 된다는 점, auto-fit과 auto-fill은 어떻게 다른가와 같은 실수하기 쉬운 포인트의 Do / Don't - 그대로 사용할 수 있는 코드 예시와 기능별 Baseline 상황

다른 예로, "Optimize image priority (이미지 우선순위 최적화)"의 유스케이스를 다음 Markdown에서 확인할 수 있습니다.

내용을 살펴보면, Largest Contentful Paint (LCP)가 되는 이미지에는 fetchpriority="high", 중요하지 않은 이미지에는 fetchpriority="low"를 붙이는 등의 구현 방법이 코드 예시와 함께 작성되어 있습니다.

<img
src="/images/hero-lcp.jpg"
alt="Main Banner"
...

"최근 몇 년 사이 Web에 늘어난 모던한 기능들을 망라적으로 체크하여 자신의 사이트에 도입하고 싶다"고 할 때, 사람이 일일이 기억해내지 않아도 AI 에이전트가 대신 체크하여 제안해 준다는 의미입니다.

도입 방법

다음 명령어로 도입할 수 있습니다.

npx modern-web-guidance@latest install

실행하면 대화형 위저드(Wizard)가 실행되며, 사용 중인 에이전트에 맞춰 SKILL.md를 적절한 위치에 배치할 수 있습니다. Claude Code를 비롯하여 Codex, Gemini CLI, Copilot CLI 등 폭넓은 에이전트 및 에디터를 지원합니다.

도입 대상은 55종류의 에이전트 중에서 선택 가능 (화면은 npx skills의 예)

브라우저 대응은 Baseline과 연동되어 최신 상태를 유지

모던한 기능을 사용할 때 신경 쓰이는 부분이 브라우저 대응 여부입니다. Modern Web Guidance는 Baseline(주요 브라우저에서 해당 기능을 안전하게 사용할 수 있게 된 상태를 나타내는 Web의 공통 지표)의 실시간 데이터와 연동됩니다. 이를 통해 브라우저의 대응 상황에 따라 사용할 기능을 선택하거나 제외할 수 있습니다.

We leverage real-time compatibility data from the Baseline project so agents can dynamically adapt to current browser support and any browser support preferences.

(의역: Baseline 프로젝트의 실시간 호환성 데이터를 사용하므로, 에이전트는 현재의 브라우저 지원 상황이나 프로젝트별 지원 선호도에 맞춰 동적으로 적응할 수 있다)

나아가 에이전트의 정답률을 측정하는 평가 메커니즘도 작동하고 있습니다. 기사 전반부에서 언급한 52%에서 85%로의 개선도 이 측정 결과에서 나온 수치입니다. 결과를 보면서 가이드가 더욱 정교해집니다.

로드맵이나 업데이트 빈도까지는 공개되지 않았습니다. 그럼에도 Baseline과의 연동 및 평가 루프라는 구조를 갖추고 있어, 한 번 설치해 두면 최신 지식을 계속해서 흡수하게 됩니다.

작동 원리

AI 에이전트에게 프론트엔드 태스크를 요청하면 스킬이 자동으로 발동되도록 설계되어 있습니다. 만약 발동되지 않는다면, 명시적으로 "Modern Web Guidance를 사용해서 다이얼로그의 배경을 애니메이션 처리해줘"와 같이 지시합니다.

"Modern Web Guidance를 사용해줘"라고 요청하면 스킬이 로드되어 search부터 retrieve까지 자동으로 실행됨

AI 에이전트로부터 요청을 받았을 때 modern-web-guidance에서는 search와 retrieve

2단계가 작동합니다.

먼저 search에 쿼리를 던지면, 관련 가이드가 유사도와 함께 반환됩니다. 실행 결과는 다음과 같습니다.

$ npx modern-web-guidance@latest search "animate a dialog modal backdrop"
light-dismiss-a-dialog 0.71
animate-to-from-top-layer 0.68
...

그다음, 목적에 맞는 ID를 retrieve에 전달하면, 구현 절차와 브라우저 지원 현황이 적힌 본문이 반환됩니다.

$ npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
Elements that render in the "top layer" (like <dialog>, popover, tooltips)
have historically been difficult to animate ... Modern CSS provides
...

검색은 오프라인 TensorFlow.js (브라우저나 Node.js에서 동작하는 머신러닝 라이브러리)로 작동하기 때문에, 네트워크 통신도 API 키도 필요하지 않습니다. 로컬 환경에서 완결되므로 프라이버시나 속도 측면에서도 다루기 쉽습니다.

실제로 자신의 포트폴리오에 사용해 보았다

저의 포트폴리오 사이트인 kano.codes를 대상으로 Modern Web Guidance를 통해 체크해 보았습니다.

내린 지시는 간단합니다. "이 리포지토리를 CSS, JavaScript, HTML로부터 접근성 (Accessibility), 성능 (Performance), 보안 (Security)까지 현대적인 웹 개발의 베스트 프랙티스 (Best Practices)로 체크하고, 업데이트 제안을 해줘"라는 것이었습니다. 결과는 보기 편하도록 HTML로 출력하게 했습니다.

채택됨 · 추가 후보 · 보류로 나누어 정리된 리포트

다음 URL에서 확인할 수 있습니다.

다음과 같은 결과가 나왔습니다.

■ 이미 채택된 기능

oklch()를 통한 색상 지정, :has(), Subgrid, invoker commands (command, commandfor) 등 최신 작성 방식이 이미 적용되어 있음을 확인할 수 있었습니다.

■ 개선안

테마 전환 시 발생하는 순간적인 깜빡임을 억제하는 방법이나, 일본어 폰트의 레이아웃 어긋남을 방지하는 font-size-adjust 등 아직 개선할 여지가 있는 부분들이 구체적으로 제시되었습니다. 또한 보안 측면의 지적도 해주었습니다 (리포트 HTML에서는 제외했습니다).

■ 보류해야 할 것

이것은 별도의 스킬에 의한 것이지만, 과거에 시도했다가 궁합이 맞지 않아 제외했던 기능을 참조하면서 "이것은 넣지 않는 것이 좋다"라고 이유와 함께 정리되었습니다. 새로운 기능을 무턱대고 권하는 것이 아니라, 보류하는 판단까지 곁들여 주는 점이 신뢰할 수 있는 부분입니다.

현대적인 웹 기능을 AI도 제대로 사용하게 만들자

저는 CSS나 JS의 최신 정보를 쫓는 것을 좋아하지만, AI 에이전트에게 코드를 작성하게 하면 그 지식이 좀처럼 반영되지 않아 답답함을 느꼈습니다. "이렇게 쓰는 거야"라고 '교육적 지도'를 하거나 스킬을 갖추어 나가기도 했지만, 당연히 저의 지식도 단편적이라 모두 망라할 수는 없었고, 접근성이나 보안 지식까지 커버하기에는 한계가 있었습니다.

Modern Web Guidance는 그 고민을 해결해 주는 것이었습니다. "최근 몇 년 사이 웹에 늘어난 현대적인 기능들을 망라하여 사이트에 도입하고 싶다"라는, 제가 원했던 최강의 스킬을 손에 넣은 기분입니다. 꼭 $ npx modern-web-guidance@latest install 하시기 바랍니다.