웹
Layer 1 — 도메인 기반 (v2.0)
모든 웹 프로젝트에 적용되는 보편적인 웹 개발 원칙입니다. React, Vue, Svelte, 바닐라 JS — 이러한 원칙은 모든 프레임워크에서 유효합니다.
철학
이 팩은 에이전트가 개별적으로는 자주 올바르게 처리하지만 실제로는 놓치는 기본 웹 플랫폼 지식을 인코딩합니다. 에이전트는 ARIA 레이블이 무엇인지 알고 있습니다. 그러나 화면 판독기를 위한 오류 알림이 없는 양식을 생성하기도 합니다. 에이전트는 Core Web Vitals에 대해 알고 있습니다. 그러나 치수가 없는 2MB 히어로 이미지를 렌더링하기도 합니다.
격차는 지식이 아니라 — 일관된 적용에 있습니다.
포함 내용
| 유형 | 개수 | 적용 범위 |
|---|---|---|
| 패턴 | 7 | 접근성(WCAG 2.2), 성능(Core Web Vitals), 보안 헤더(OWASP), SEO, 반응형 디자인, 오류 UX, 로딩 상태 |
| 안티패턴 | 6 | Div 수프, 누락된 대체 텍스트, 레이아웃 시프트, 보호되지 않은 양식, 클라이언트 전용 중요 경로, 보안 헤더 없음 |
| 헌법 | 7 | 원칙 |
근거: W3C WCAG 2.2 (2023년 10월), Google Core Web Vitals (2025), OWASP Secure Headers Project, OWASP CSP Cheat Sheet, MDN Web Docs, Web Almanac 2025, European Accessibility Act (2025년 6월).
이 팩이 다루지 않는 내용
- 프레임워크별 패턴 (
react,nextjs등 참조) - CSS 방법론 의견 (BEM vs 유틸리티 우선 vs CSS-in-JS)
- 빌드 도구 구성 (Webpack, Vite, Turbopack)
- 백엔드/API 패턴 (
api또는baas참조)