# 4단계 — 히어로 이후 섹션 구조 계획 (코드 미작성) 범위 제한에 따라 히어로만 구현했다. 이하는 계획이다. ## 섹션 순서 — 브리프의 설득 논리로 재배열 antipatterns.md §3 "표준 골격(히어로 → 3열 피처 → 로고월 → 요금제 → FAQ)"을 쓰지 않는다. 대상이 이미 여러 로스터리를 거쳤으므로 **불신 → 검증 → 조건 → 행동** 순서로 간다. | # | 섹션 | 역할 | 레이아웃 패밀리 | 슬롭 회피 메모 | |---|---|---|---|---| | 1 | 히어로 (구현됨) | 판단 재료 즉시 제시 | 헤드 풀폭 + 5:7 비대칭 | 배지 없음, CTA 1개 | | 2 | 척도 설명 | "산미 4"가 무슨 뜻인지 정의 | 좌측 본문 + 우측 여백 주석 | 아이콘 카드 금지. 정의문 3개를 본문으로 | | 3 | 거래 내역 (`#ledger`) | 생두 구매가·농가·환율 공개 | 전폭 표 | R1 Transparency의 원리. **숫자는 실제 값 확보 후에만 공개** | | 4 | 배송 조건 (`#plan`) | 주기·용량·가격·취소 | 2열 비교표(카드 아님) | 요금제 3열 카드 + "Most popular" 배지 금지 | | 5 | 자주 오는 문의 | 실제 문의 3개 | 정의 목록 | 가상 FAQ 6개 금지. 문의가 없으면 섹션 삭제 | | 6 | 푸터 | 사업자 정보·연락처·주소 | 좌측 정렬 단일 블록 | 링크 4열 + 소셜 아이콘 금지 | 레이아웃 패밀리 4종 (헤드+비대칭 / 본문+여백주석 / 전폭 표 / 정의 목록) → SKILL.md 카운트 규칙 "섹션 6개 이상이면 패밀리 최소 3개" 통과. ## 확보해야 할 실제 데이터 (없으면 해당 섹션 삭제) - 원두 3종의 산미·바디·단맛 점수와 로스팅 날짜 → 히어로 표의 `—` 자리 - 생두 구매가·농가명·수입 시점 → 3번 섹션 - 구독 주기별 가격과 취소 정책 → 4번 섹션 - 실제 받은 문의 3건 → 5번 섹션 - 사업자등록번호·통신판매업 신고번호·주소·전화 → 푸터 **어느 하나도 지어내지 않는다.** SKILL.md 하드 게이트 11 대상이다. ## 사진이 생겼을 때 브리프상 지금은 없다. 생기면: - `aspect-ratio` 고정으로 CLS 0 유지 - 듀오톤(`svg-filters.md` R4)으로 톤 통일 — 여러 산지 사진의 색온도가 제각각일 것이다 - 크기 차이로 리듬 생성. 전부 같은 비율 금지