2단계: 디자인
목표: 소유자가 휴대폰과 노트북에서 확인한 디자인을 승인했습니다. 이 디자인은 토큰으로 작성되어 복사만으로 워드프레스 스킨이 될 수 있으며, 기능 손실 없이 나중에 교체할 수 있습니다.
단계
- 방향. 프로젝트의
docs/DESIGN_DIRECTION.md를 작성합니다: 북두칠성, 대상 고객, 피해야 할 모습(경쟁사, 템플릿), 그리고 양보할 수 없는 사항. 전체 사이트가 아닌 작은 무드 보드나 히어로 목업 형태로 최대 두세 가지 방향을 제시합니다. static/에 프로토타입 제작. 순수 HTML과 CSS.css/tokens.css는 테마의skins/default/tokens.css와 동일한 이름을 사용합니다. 컴포넌트는 토큰만 사용합니다. 실제 구조(헤더, 히어로, 카드, 폼, 푸터), 플레이스홀더 콘텐츠, 가격이나 정책 텍스트는 없습니다.- 처음부터 접근성 보장:
- 텍스트 명암비 ≥ 4.5:1;
- 포커스 표시;
- H1 하나;
- 스킵 링크;
- 키보드 경로;
prefers-reduced-motion준수. 프로토타입을 보여주기 전에 axe(브라우저 확장 프로그램)로 확인합니다.
- 소유자 검토. 모든 페이지를 휴대폰(375px)과 노트북(1440px) 너비로 스크린샷을 찍습니다.
DESIGN_DIRECTION.md에 승인 날짜를 기록하고 스크린샷을docs/design/에 저장합니다. - 글꼴:
.woff2파일을 자체 호스팅하고, 필요한 언어로 서브셋하며, 라이선스를 확인하고, 첫 화면에 표시되는 한두 개의 서체를 미리 로드합니다(이름을*-preload.woff2로 지정). 어디에서도 Google Fonts 요청이 없어야 합니다. - 워드프레스로 포팅 (
references/design-system.md):- 토큰을 스킨에 복사합니다;
- 컴포넌트 CSS를
skin.css로 이동합니다; - 코어의 렌더 함수를 사용하여 템플릿을 배치합니다;
- 마크업이 달라져야 하는 경우에만 스킨 부분 오버라이드를 추가합니다. 디자인이 변경됩니다. 코어의 데이터와 마크업 계약은 변경되지 않습니다.
- 이후 리디자인은 새 스킨입니다:
skins/default를skins/<name>으로 복사하고, 토큰을 변경하며,?skin=<name>(관리자)으로 미리보기하고, 승인되면<prefix>_skin옵션으로 전환합니다.
게이트 (SITE_STATUS.md에 체크)
-
DESIGN_DIRECTION.md작성됨; 스크린샷과 함께 소유자 승인 기록됨 - 토큰 정의됨; 컴포넌트가 토큰만 사용
- 글꼴 자체 호스팅됨; Google Fonts 요청 0건
교훈
- 비즈니스 파트너가 자신의 리디자인을 보냈을 때 고정된 디자인이 변경되었습니다. 디자인이 스킨이었기 때문에 전환 시 모든 기능이 유지되었습니다. 첫 번째 디자인조차 항상 스킨으로 구축하세요.
- 경쟁사의 팔레트, 글꼴 쌍 또는 레이아웃을 복사하지 마세요. 소유자가 알아차리고 방문자는 당신을 기억하지 못합니다.
- 아이디어를 시험해보기 위한 테스트 전용 스킨(
dev-*)은 프로덕션에 표시되지 않습니다. frontend-design또는design-motion-principles스킬이 설치된 경우, 방향 설정과 모션에 해당 스킬을 사용하세요.