완전한 WordPress 웹사이트 구축
설명 하나를 입력하면 완성된 블록 테마가 출력됩니다. 이 스킬은 다른
wp-* 스킬들을 순서대로 실행합니다. 각 게이트는 이전 게이트가 완료되어야 다음이 시작됩니다.
게이트 0: 브리프 (하드 스탑)
사용자의 설명을 바탕으로 SITE_BRIEF.md를 작성합니다:
- 목적 및 대상, 브랜드 톤, 색상 및 글꼴 (제공된 것이 없으면 기본값 제안).
- 페이지 목록 (기본값: 홈, 소개, 서비스 또는 제품, 블로그, 연락처).
- 기능 (연락처 양식, 블로그, 갤러리, 쇼핑몰). 사용자가 요청한 것만 포함.
- 가정 사항, 각각 번호를 매기고 기본값 포함.
사용자에게 해당 내용을 보여주고 수락, 거부 또는 조언을 요청합니다. 중단하고 기다립니다.
게이트 1: 프로젝트 설정
- 새 폴더(사용자가 선택한 이름)에서 작업합니다. 기존 사이트의 파일을 절대 건드리지 않습니다.
- 블록 테마를 생성합니다:
style.css,theme.json,templates/,parts/(header, footer),patterns/,assets/,functions.php. - WordPress 코어 블록과 패턴을 사용합니다. 페이지 빌더나 CSS 프레임워크를 사용하지 않습니다.
- 선택적 로컬 테스트: 가능한 경우 WordPress Playground 또는
wp-env사용.
게이트 2: 디자인 시스템 (wp-responsive-fluid-design)
theme.json에 색상, 유동적 글꼴 크기 및 간격 토큰을 정의합니다. 헤더,
푸터, 내비게이션 및 모바일 메뉴를 구축합니다. 모든 값은 토큰에서 가져옵니다.
게이트 3: 페이지 및 콘텐츠
브리프의 모든 페이지에 대한 템플릿과 패턴을 생성합니다. 용도가 알려진 경우
로렘 입숨 대신 명확한 플레이스홀더 카피와 alt 텍스트가 있는 이미지를 사용합니다.
의미론적 HTML 사용: 페이지당 하나의 h1.
게이트 4: 모션 (wp-animated-block-theme)
먼저 CSS로 스크롤 리빌, 호버 및 페이지 전환 효과를 추가한 다음
Interactivity API를 사용합니다. 모든 것이 prefers-reduced-motion을 존중하며,
콘텐츠는 JS 없이도 계속 표시됩니다. 요청된 효과가 필요할 때만
wp-gsap-lottie-integration을 사용합니다.
게이트 5: 검사
wp-motion-performance-audit: 높은 항목 수정 (레이아웃 트리거 애니메이션, 레이아웃 시프트, 무거운 스크립트).wp-accessible-ui-review: 높은 항목 수정 (포커스, 대비, 레이블, 제목).- 360, 768, 1024 및 1440px에서 확인: 가로 스크롤 없음.
- 검증: PHP 파일에 대해
php -l,theme.json에 대해 JSON 유효성 검사.
게이트 6: 인계
테마 폴더에 간단한 README.md를 작성합니다: 설치 방법 (zip 및 업로드),
페이지 편집 방법, 그리고 검증되지 않은 항목 (라이브 Lighthouse, 실제 기기,
스크린 리더, 호스팅). 실행된 것 이상을 주장하지 않습니다. 사용자가 요청하지
않는 한 배포, 푸시 또는 커밋하지 않습니다.
규칙
- 모든 파일에 비밀, API 키 또는 절대 로컬 경로를 포함하지 않습니다.
- 사용자가 승인한 플러그인만 추가하며, 아무 것도 추가하지 않는 것이 좋습니다.
- 일반적인 플레이스홀더 콘텐츠를 사용하며, 실제 개인 또는 클라이언트 데이터를 절대 사용하지 않습니다.
- 각 변경 사항이 브리프에 추적 가능하도록 유지합니다.