목록에 표시된 Modern Web Guidance 기술 중에서 웹 개발 수명 주기의 현재 단계에 맞는 기술을 선택하세요. 초기 스타일링부터 최종 보안 구현까지 다양하게 준비되어 있습니다.
핵심 웹 분야
웹 분야별로 작업을 구체화하고 집중하는 데 도움이 되는 오케스트레이터
accessibility
/modern-web-guidance accessibility
전체 애플리케이션에서 효과적인 접근성 패턴을 평가, 수정, 구현하기 위한 중앙 감사 가이드 역할을 합니다.
performance
/modern-web-guidance performance
코어 웹 바이탈을 최적화하고, 페이지 로드 시간 지연 시간을 줄이고, 사용자 입력에 대한 응답성을 개선하는 데 도움이 됩니다.
user-experience
/modern-web-guidance user-experience
반응형 맞춤 요소, 부드러운 전환, 최신 스타일 지정 패턴을 빠르게 구현하는 사용자 인터페이스 (UI) 툴킷 역할을 합니다.
GitHub에서 user-experience 스킬 보기
웹 기술
이러한 핵심 기술은 모든 최신 애플리케이션에 필수적인 구성요소를 제공하여 프로젝트가 시맨틱 HTML, 속도, 상호 운용성을 고려한 최신 권장사항으로 시작되도록 합니다.
html
/modern-web-guidance html
최신 HTML 아키텍처, 시맨틱, 네이티브 대화형 API (대화상자, 팝오버, 세부정보), 포커스 관리, 리소스 우선순위에 관한 행동 중심 가이드라인 웹 문서를 구조화하거나, 네이티브 오버레이를 구현하거나, 리소스 로드 순서를 최적화할 때 이 가이드를 사용하세요.
css
/modern-web-guidance css
최신 CSS 아키텍처, 레이아웃, 성능에 관한 행동 중심 가이드라인 스타일을 작성하거나, 디자인 시스템을 관리하거나, 웹 렌더링을 최적화할 때 이 가이드를 사용하세요.
css-layout
/modern-web-guidance css-layout
Flexbox, 그리드, 하위 그리드, 컨테이너 쿼리, 앵커 위치 지정, 내재적 크기 조정과 같은 최신 CSS 레이아웃 반응형 UI 구성요소나 페이지 레이아웃을 설계할 때 이 기술을 사용하세요.
forms
/modern-web-guidance forms
접근성, 보안, 사용자 친화적인 웹 양식을 빌드하기 위한 권장사항 양식, 입력, 제출 흐름을 만들거나 수정할 때 이 가이드를 사용하세요.
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
WebAssembly를 사용하여 최신 웹용 C 및 C++ 컴파일 C++ 코드를 포팅하거나, Emscripten으로 C++ 라이브러리를 빌드하거나, 브라우저에서 고성능 C++ 구성요소를 설정해야 하는 경우 이 기능을 사용하세요.
브라우저 기능 (선택)
이러한 기술을 사용하면 Manifest V3와 같은 최신 표준을 따르는 Chrome 확장 프로그램을 개발하고 메타데이터, 개인 정보 보호 정책, 권한 근거를 준비하는 데 도움을 받아 Chrome 웹 스토어에 게시하는 과정을 간소화할 수 있습니다. 이러한 스킬은 선택사항이며 기본적으로 사용 설정되어 있지 않습니다.
chrome-extensions
/modern-web-guidance chrome-extensions
일반적인 서비스 워커 수명 주기 및 샌드박스 문제를 방지하는 Manifest V3 기반의 안전하고 규정을 준수하는 Chrome 확장 프로그램을 빌드하세요. 수신 동의하려면 chrome-extensions 기능을 지정해야 합니다.
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
GitHub에서 chrome-extensions 스킬 보기
보안, 신뢰, ID
이러한 기술은 방어적 HTTP 헤더와 출처 격리를 통해 XSS와 같은 클라이언트 측 악용으로부터 애플리케이션을 보호하여 사용자 신뢰에 중점을 둡니다. 또한 개발자는 패스키로 인증 흐름을 개발하고, 서드 파티 추적을 최소화하고, 스킬을 사용하여 C/C++ 라이브러리를 WebAssembly 모듈로 포팅할 수 있습니다.
security
/modern-web-guidance security
웹 개발자를 위한 예방적 보안 가이드라인 (XSS, CSP, 쿠키, 교차 출처 격리) 이 기능을 사용하여 보안 정책의 감사, 테스트, 배포 프로세스를 안전하게 안내하세요.
passkeys
/modern-web-guidance passkeys
웹 애플리케이션에서 WebAuthn 및 패스키를 구현하기 위한 포괄적인 오리엔테이션 및 교차 원칙 패스키 등록, 인증, 관리 또는 재인증을 처리할 때 이 가이드를 사용하세요.
privacy
/modern-web-guidance privacy
웹 개발자가 설계 단계부터 개인 정보 보호 중심 설계, 데이터 수집 최소화, 서드 파티 감사, 안전한 데이터 처리를 구현할 수 있도록 지원하는 행동 중심 가이드라인입니다. 애플리케이션을 설계하거나, 서드 파티 서비스를 통합하거나, 사용자 데이터를 처리하거나, 보안 헤더를 구성할 때 이 기능을 사용하세요.
에이전트형 시스템
이러한 기술은 WebMCP를 사용하여 웹 애플리케이션과 AI 워크플로 간의 격차를 해소하는 데 도움이 됩니다. 클라이언트 측 브라우저 기능을 대화형 도구로 노출하면 AI 에이전트가 애플리케이션 기능과 직접 상호작용하도록 지시할 수 있습니다.
webmcp
/modern-web-guidance webmcp
WebMCP를 구현하여 클라이언트 측 브라우저 기능을 AI 에이전트를 위한 대화형 도구로 노출합니다.
다음 단계
이제 최신 웹 가이드를 이해했으므로 직접 사용해 보세요. Modern Web Guidance에서 지원되는 기능 및 사용 사례를 알아보고 샘플 프롬프트를 몇 개 사용해 시작해 보세요.