WordPress 사이트 구축, 처음부터 끝까지
이 방법이 존재하는 이유
에이전트는 피드백 루프가 느리면 설계를 제대로 하지 못합니다. WordPress 내부에서 페이지를 배치하는 데는 반복당 3~5분이 소요됩니다(작성, 저장, 직렬화, 캐시 비우기, 새로고침, 확인). 로컬 HTML과 개발 서버를 사용하면 같은 루프가 5초 만에 완료되며, 설계 품질은 미적 지시보다 반복 횟수에 훨씬 더 안정적으로 비례합니다.
두 번째 절반은 전달 제약 조건입니다. 클라이언트가 코드를 작성하지 않고 사이트를 편집합니다. 이것이 바로 원시 HTML 블록과 템플릿 소유 콘텐츠를 금지하는 이유이며, 변환 과정을 제한하고 그리기 과정은 제한하지 않습니다.
한 줄로 요약하면: 디자인은 페이지 콘텐츠가 아닌 파일에 저장됩니다. WordPress는 완성된 테마를 받으며, 레이아웃 지시사항은 받지 않습니다.
먼저 따라야 할 두 가지 규칙
규칙 0 — 2단계(그리기)는 4단계(변환)가 없는 것처럼 진행하십시오. 목업에 변환 제약 조건을 도입하지 마십시오. 그리면서 core/html 금지를 예상한다면 깊이, 겹침, 중심 객체가 조용히 사라집니다. 결과는 완벽하게 변환되지만 아무도 만족하지 못합니다.
규칙 0′ — 레퍼런스에서 미적 자유를 빼앗지 마십시오. 레퍼런스가 있으면 모델은 자신만의 스타일로 표류하기 쉽습니다. 레퍼런스가 차가운 흰색인 곳에 따뜻한 베이지색, 산세리프 하나만 있는 곳에 개성 있는 세리프체, 원래 없던 강조 색상을 사용합니다. 레퍼런스에서 7가지 레지스터 불변 항목을 읽어내어 재현합니다. 하나를 변경하는 것은 코딩 전에 클라이언트에게 물어봐야 할 문제입니다. 불변 항목, 레지스터 게이트 및 측정 스크립트는 references/register.md에 있습니다.
열 가지 규칙
각 규칙은 실제로 발생한 실수에서 비롯되었습니다.
- 시각적 레퍼런스를 요구하십시오. 레퍼런스가 없으면 출력이 통계적 중심으로 퇴보합니다. 중립적인 글꼴, 보라색 그라데이션, 흰색 페이지.
- 실제 사진 없이 목업을 만들지 마십시오. 회색 상자는 깨진 이미지로 읽힙니다.
- WordPress 프로덕션에는 두 번의 클라이언트 승인(목업 승인, 배포 계획 승인)이 있어야 합니다.
- 홈페이지는 페이지이지 템플릿이 아닙니다.
front-page.html은 헤더,post-content, 푸터를 포함합니다. core/html블록을 0개 사용하십시오. 그룹, 제목, 단락, 이미지로 구성하십시오.- 이미지는 미디어 라이브러리에 있으며 모든
core/image에는id가 있어야 합니다. - 모든 대화형 변형은 페이지에 있으며 스크립트가 클래스를 전환합니다.
- 디자인 아래에 타사 테마를 두지 마십시오.
- 프런트 엔드가 아닌 편집기에서 승인하십시오. 페이지가 완벽하게 렌더링되어도 Gutenberg에서는 사용할 수 없을 수 있습니다.
- 픽셀 정확도는 눈대중이 아닌 계산된 스타일과 형상을 통해 선택자별로 측정됩니다.
단계 및 게이트
이전 게이트를 통과할 때까지 다음 단계를 시작하지 마십시오.
| 단계 | 담당 | 종료 게이트 |
|---|---|---|
| 0 · 작업 공간 | 에이전트 | 사용자의 작업 폴더에 프로젝트가 있고 쓰기 액세스가 테스트됨 |
| 1 · 브리핑 | 클라이언트 | 레퍼런스 조사, 레퍼런스에서 가져온 팔레트 및 서체, "내가 추가할 것" 목록 |
| 2 · 목업 | 반복적 | HTML로 된 홈페이지, 레지스터 게이트 통과, 클라이언트 승인 |
| 3 · 페이지 세트 | 에이전트 | 모든 페이지가 하나의 헤더/푸터 소스로 조립됨 |
| 4 · 블록 테마 + 스테이징 | 에이전트 | 테마 구축됨; 재현 가능한 도구로 로컬 WordPress 설정됨; 게이트 1~5가 스테이징에서 통과됨 |
| 5 · 배포 | 에이전트 (계획에 대한 클라이언트 승인 후) | 웹 루트 외부에 백업한 후, 동일한 도구를 프로덕션에서 실행 |
| 6 · 승인 | 에이전트 | 게이트 1~5가 프로덕션에서 통과되거나 4단계로 돌아감 |
단계 0~3 및 배포 계획: references/phases.md. HTML-블록 변환: references/block-conversion.md. 코드가 포함된 5가지 게이트: references/acceptance.md.
스테이징은 로컬이며 모든 변경 사항은 도구입니다. 콘텐츠와 구성은 wp-admin에 입력하는 대신 PHP CLI로 로컬 복사본에 대해 실행되는 멱등성 PHP 스크립트(tools/install-site.php, tools/configure-*.php)로 작성됩니다. 동일한 스크립트가 배포 시 프로덕션에서 다시 실행되며, 두 번 실행해도 아무것도 변경되지 않습니다. 이것은 가정이 아니라 확인됩니다.
분기 선택
방법은 모든 사이트에 동일합니다. 차이는 4단계 이후입니다.
| 사이트 | 변경 사항 | 참고 문서 |
|---|---|---|
| 쇼케이스 | 페이지, 양식(Contact Form 7 + Flamingo), 법적 페이지 | 이 파일 및 단계 |
| 스토어 | WooCommerce 블록 템플릿, 카탈로그 가져오기, 제품 필터, 장바구니/결제 블록, 동의, 결제, 뉴스레터, 주문 확인 | references/store.md |
| 웹 앱 | 커스텀 포스트 타입, 역할, REST, 동적 블록, 계정 흐름 — 목업은 여전히 모든 공개 화면을 구동 | references/web-app.md |
references/store.md는 실제 빌드(WooCommerce 11.2.2, 블록 체크아웃, 블록 테마)에서 측정되었습니다. references/web-app.md는 그렇지 않습니다. 문서에 그렇게 명시되어 있으며, 관련 스킬을 참조하도록 안내합니다.
사실은 클라이언트의 소유입니다
목업은 브리핑에서 카피를 창작하며, 사실을 절대 창작하지 않습니다. 리뷰, 평점, 고객 수, 언론 로고, 배송 시간, 서비스 가격, 법적 조항 및 회사 정체성은 보이는 자리 표시자(클라이언트만 제공할 수 있는 것은 à compléter, 이전 사이트에서 읽었으며 오래되었을 수 있는 것은 à vérifier)로 남겨둡니다. 조작된 리뷰는 모든 게이트를 통과하며 클라이언트에게 법적 비용을 초래할 수 있는 유일한 결함입니다.
주석, 커밋 메시지 및 보고서에서 어떤 주장이 측정되었는지(날짜 포함)와 어떤 주장이 읽혔는지(출처 포함)를 명시하십시오.
도구
| 파일 | 시기 |
|---|---|
scripts/serve.mjs | 2단계 — 종속성 없는 정적 서버, 포트가 사용 중이면 다음 포트 시도 |
scripts/assemble.mjs | 3단계 — 하나의 <head>, 헤더 및 푸터 소스에서 모든 페이지 빌드 |
scripts/fetch-fonts.mjs | 4단계 — Google Fonts 자체 호스팅: 방문자의 Google 요청 없음, GDPR에 따른 신고 불필요 |
scripts/novamira.mjs | 5단계 — MCP 서버 등록 없이 HTTP를 통해 Novamira 기능 호출 |
assets/theme-skeleton/ | 4단계 — 최소 블록 테마: blockGap: 0px가 포함된 theme.json, editor.css, 편집기 내 글꼴 |
참고 자료
| 파일 | 읽어야 할 시기 |
|---|---|
references/register.md | 1단계 전 및 모든 목업 표시 전 |
references/phases.md | 0~3단계 및 5단계의 배포 순서 |
references/block-conversion.md | 4단계 동안 매번 |
references/acceptance.md | 4단계 및 6단계 — 5가지 게이트 및 측정 위생 |
references/store.md | 모든 WooCommerce 사이트 |
references/web-app.md | 멤버십, 예약, 대시보드, 로그인 사용자가 작업을 수행하는 모든 것 |
references/pitfalls.md | 증상이 당신을 놀라게 하는 즉시 |
관련 스킬: wp-theme-block-fse(theme.json 및 템플릿), wp-design-system(토큰), wp-woocommerce(훅 및 HPOS), wp-deploy(마이그레이션), wp-plugin-architecture 및 wp-blocks-gutenberg(애플리케이션 코드), wp-accessibility 및 wp-performance(승인 전)