<p align="center">
<img src="https://github.com/GoogleChrome/modern-web-guidance/raw/main/.github/img/modern-web-guidance.svg" alt="Modern Web Guidance 로고" width="150" />
</p>
Modern Web Guidance
Modern Web Guidance는 웹 플랫폼 전문 지식, 모범 사례 및 브라우저 호환성 데이터를 코딩 에이전트에 직접 내장하는 일련의 기술입니다. 이는 코딩 에이전트가 레거시 패턴에서 벗어나 현대 웹 플랫폼의 강력한 기능과 역량을 활용하는 솔루션으로 나아가도록 돕습니다.
Google Chrome, Microsoft Edge, Mozilla Firefox 및 MDN 팀과 웹 개발 커뮤니티가 협력하여 관리합니다.
Documentation · Eval Dashboard · Source Code · Report an Issue
<img src="https://github.com/GoogleChrome/modern-web-guidance/raw/main/.github/img/terminal.svg" width="24" height="24" style="vertical-align: middle; margin-right: 4px;"> Quickstart
npx modern-web-guidance@latest install
이 명령어는 Modern Web Guidance를 설치하기 위한 대화형 마법사(interactive wizard)를 실행합니다. 아래 Alternative Installation Methods에서 다른 설치 방법을 확인하세요.
사용해 보기 (설치 없이)
# 관련 가이드 검색
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
...
<img src="https://github.com/GoogleChrome/modern-web-guidance/raw/main/.github/img/lightbulb.svg" width="24" height="24" style="vertical-align: middle; margin-right: 4px;"> 왜 필요한가?
코딩 에이전트는 LLM(Large Language Model) 학습 데이터에 방대한 양의 레거시 코드(legacy code)가 포함되어 있기 때문에 종종 구식 패턴을 기본값으로 사용합니다. 이는 현재 네이티브하고 고성능 웹 플랫폼 솔루션이 존재하는 작업에 대해 비대해진 JavaScript를 생성하는 결과를 초래할 때가 많습니다.
모델이 특정 API의 존재를 알고 있더라도, 실제 운영 환경(production-ready)에 필요한 현실적이고 현대적인 구현 패턴의 밀도(density)가 부족한 경우가 많습니다.
Modern Web Guidance가 이 격차를 해소합니다. 저희 스킬의 CLI는 목표 지향적이며 전문가가 큐레이션한 가이드를 에이전트의 컨텍스트 창(context window)에 직접 반환하며, 다음 사항에 중점을 둡니다:
- 현대 브라우저 API (Modern Browser APIs): 모델이 자주 오용하는 API를 올바르게 구조화하도록 돕습니다.
- 성능 및 접근성 (Performance & Accessibility): 브라우저에 의해 최적화될 수 있고 내장된 접근성 기능(accessibility affordances)을 포함하는 플랫폼 수준의 API를 선호합니다.
- 책임 있는 폴백 (Responsible Fallbacks): 무거운 폴리필(polyfills)이나 레거시 라이브러리 대신 합리적이고 가벼운 폴백을 사용하도록 모델을 안내합니다.
<img src="https://github.com/GoogleChrome/modern-web-guidance/raw/main/.github/img/package.svg" width="24" height="24" style="vertical-align: middle; margin-right: 4px;"> 포함된 내용(What's Included)?
저희는 웹 플랫폼의 지난 몇 년간의 새로운 기능부터 최첨단(cutting edge)까지 모두 다룹니다. 이 가이드는 **토큰 효율성(token-efficient)**을 염두에 두고 설계되었으며, 모델이 이미 알고 있는 가장 낮은 공통분모(lowest-common-denominator)의 콘텐츠를 제거할 수 있도록 평가(evals)를 실행합니다.
핵심 분야 (Core Disciplines)
<table width="100%" style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td width="33%" valign="top" style="border: none; padding: 6px;">
<h4>🎨 사용자 경험 (User Experience)</h4>
<p style="font-size: 0.9em; line-height: 1.4;">부드러운 시각적 상태(View Transitions, 진입/퇴장 애니메이션, 패럴랙스 스크롤, CSS `scrollbar-color`).</p>
</td>
<td width="33%" valign="top" style="border: none; padding: 6px;">
<h4>📐 CSS 레이아웃 (CSS Layout)</h4>
<p style="font-size: 0.9em; line-height: 1.4;">최신 레이아웃 시스템(container queries, `subgrid`, `oklch`와 같은 현대 색상 공간, 텍스트 줄 바꿈 조정(text-wrap tuning), 줄 높이 다듬기(line-height trimming)).</p>
</td>
<td width="33%" valign="top" style="border: none; padding: 6px;">
<h4>⚡ 성능 (Performance)</h4>
<p style="font-size: 0.9em; line-height: 1.4;">속도 최적화(즉각적인 사전 로딩(preloading), 다음 픽셀까지의 상호 작용 진단(Interaction to Next Paint (INP)), `scheduler.yield`를 통한 작업 스케줄링).</p>
</td>
</tr>
<tr style="border: none;">
<td width="33%" valign="top" style="border: none; padding: 6px;">
<h4>📝 폼 및 UI (Forms & UI)</h4>
<p style="font-size: 0.9em; line-height: 1.4;">네이티브 컴포넌트(툴팁을 위한 Anchor Positioning, Popover API, 다이얼로그(dialogs), `:user-invalid` 유효성 검사, 자동 크기 조정 필드).</p>
</td>
<td width="33%" valign="top" style="border: none; padding: 6px;">
<h4>♿ 접근성 (Accessibility)</h4>
<p style="font-size: 0.9em; line-height: 1.4;">중요한 고려 사항(화면 판독기 및 키보드 작동 가능성, 콘텐츠 탐색 및 발견 용이성).</p>
</td>
<td width="33%" valign="top" style="border: none; padding: 6px;">
<h4>🤖 내장형 AI (Built-in AI)</h4>
<p style="font-size: 0.9em; line-height: 1.4;">로컬 클라이언트 모델(네이티브 번역, 요약 및 언어 감지 API).</p>
</td>
</tr>
</table>
예시 보기: navigation-drawer 가이드.
<!-- INJECT_SKILL_COVERAGE_START -->
전체 목록
<details>
<summary><strong>250개의 현대 웹 기능</strong></summary>
CSS & 레이아웃 (140개 기능)
HTML & DOM (36개 기능)
| | | |
| :autofill | <slot> | HTML 스트리밍 세터 |
| ... |
JavaScript & API (74개 기능)
| | | |
| [<install>]{(https://web-platform-dx.github.io/web-features-explorer/features/install/) | url()에 대한 integrity() | Sanitizer API |
| ... |
</details>
<details>
<summary><strong>203개의 실제 개발자 사용 사례</strong></summary>
<h3>접근성 (accessibility)</h3>
- accessible-error-announcement: 프로그래밍 방식의 접근성 상태(예: aria-invalid)를 시각적인 :user-invalid 상태와 동기화하여, 화면 읽기 사용자에게는 상호작용 후에만 오류 피드백이 제공되도록 하여 시각적 경험을 반영해야 합니다.
- accessible-generated-content: CSS 생성 콘텐츠(
::before/::after)를 사용하면서도 접근성을 유지하는 방법을 사용해야 하며, 장식용 콘텐츠에는 대체 텍스트(alternative text)를 포함해야 합니다.
- respect-os-text-scale: 페이지에 대해 운영 체제(OS)의 텍스트 배율 선호도를 존중해야 하므로, 글꼴 크기, 레이아웃 및 rem 기반 측정값이 사용자의 접근성 설정을 따르도록 해야 합니다.
built-in-ai
- [language-detection]: 사용자 생성 콘텐츠 또는 이미 존재하는 사이트 콘텐츠의 언어를 감지합니다.
- [language-model]: Prompt API를 사용하여 브라우저에서 온디바이스 자연어 추론(Natural Language Inference)을 실행하며, 스트리밍 출력, 구조화된 JSON 응답, 다중 턴 세션 관리를 지원합니다.
- [summarizer]: 온디바이스 Summarizer API를 사용하여 텍스트 콘텐츠를 요약합니다.
- [translator]: 온디바이스 Translator API를 사용하여 언어 간 텍스트를 번역합니다.
CSS