<img src="https://raw.githubusercontent.com/GoogleChrome/modern-web-guidance-src/HEAD/.github/img/modern-web-guidance.svg" alt="Modern Web Guidance" width="30" height="30"> Modern Web Guidance (소스)
이 저장소는 [GoogleChrome/modern-web-guidance]의 소스 저장소이며, 그 내용 작성(authoring), 보정(calibrating), 평가(evaluating)를 위한 코드와 문서를 포함합니다.
Modern Web Guidance는 웹 플랫폼 전문 지식(web platform expertise), 모범 사례(best practices), 그리고 브라우저 호환성 데이터(browser compatibility data)를 코딩 에이전트(coding agents)에 직접 내장하는 일련의 기술입니다. 이는 코딩 에이전트가 레거시 패턴(legacy patterns)에서 벗어나 현대 웹 플랫폼의 힘과 기능을 활용하는 솔루션 쪽으로 방향을 잡도록 돕습니다.
프로젝트 진행 방식과 코드베이스의 방향성에 대해서는 CONTRIBUTING.md와 GOVERNANCE.md를 참조하십시오.
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)]을 참조하십시오.
사용해 보기 (설치 없이)
# Search for relevant guides
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;"> 왜 필요한가요?
코딩 에이전트(Coding agents)는 LLM 학습 데이터에 방대한 양의 레거시 코드(legacy code)가 포함되어 있기 때문에 종종 오래된 패턴을 기본값으로 사용합니다. 이로 인해 현재 네이티브하고 고성능인 웹 플랫폼 솔루션이 존재하는 작업에 대해서도 비대해진 JavaScript를 생성하는 경우가 많습니다.
모델이 API의 존재를 알고 있더라도, 프로덕션 레디(production-ready) 코드를 위해 필요한 실제 세계적이고 현대적인 구현 패턴의 밀도가 부족한 경우가 많습니다.
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;"> 무엇이 포함되어 있나요?
저희는 웹 플랫폼의 지난 몇 년간의 새로운 기능부터 최첨단까지 모두 다룹니다. 이 가이드는 토큰 효율성(token-efficient)에 맞춰 설계되었습니다. 저희는 모델이 이미 알고 있는 가장 일반적인 내용(lowest-common-denominator content)을 제거할 수 있도록 평가(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`와 같은 현대적인 색상 공간, 텍스트 랩 조정, 라인 높이 트리밍).</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;">속도 최적화 (즉시 프리로딩, 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>📝 양식 및 사용자 인터페이스 (Forms & UI)</h4>
<p style="font-size: 0.9em; line-height: 1.4;">네이티브 컴포넌트 (툴팁을 위한 Anchor Positioning, Popover API, 다이얼로그, `: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개 기능)
| | | |
| :--- | :--- |
| ::backdrop | content-visibility | progress() |
| ... |
HTML 및 DOM (36개 기능)
| | | |
| :autofill | <slot> | HTML streaming setters |
| ... |
JavaScript 및 API (74개 기능)
| | | |
| <install> | integrity() for url() | Sanitizer API |
| ... |
</details>
<details>
<summary><strong >203개의 실제 개발자 사용 사례</strong></summary>
<h3 >접근성 (accessibility)</h3>
<h3>built-in-ai</h3>
- language-detection: 사용자 생성 콘텐츠 또는 이미 존재하는 사이트 콘텐츠의 언어를 감지합니다.
- language-model: Prompt API를 사용하여 브라우저에서 온디바이스(on-device) 자연어 추론(natural language inference)을 실행하며, 스트리밍 출력, 구조화된 JSON 응답, 다중 턴 세션 관리 기능을 지원합니다.
- summarizer: 온디바이스(on-device) Summarizer API를 사용하여 텍스트 콘텐츠를 요약합니다.
- translator: 온디바이스(on-device) Translator API를 사용하여 언어 간 텍스트를 번역합니다.
<h3>CSS</h3>