# design.md — 목요일의 화원 ## 진행 상태 - 0 현행 감사 완료(2026-10-06) → 1 레퍼런스 3슬롯 → 2 방향 A 선택(위임) → 3 토큰 → 4 구현 → 5 검증 통과 → 6 이 문서. 다음 작업은 "변경 기록"부터 읽는다. ## 브리프 ``` 무엇을: 매주 목요일에만 여는 서촌 꽃집의 한 페이지 사이트 리디자인(쇼케이스). 이번 주 꽃 목록이 첫 화면. 누구에게: 이번 주 꽃을 사려는 사람이 목록을 보고 수요일 18시 전에 예약(전화·메일·인스타)한다. 보조: 격주 정기 구독 상담. 제약: 정적 HTML/CSS, 사진 5장(flower-01~05.webp) 외 새 이미지 없음, 폰트는 jsdelivr OFL, 기본 언어 ko-KR(기존 사이트), 한자 금지, 재작업 배정값(plan.md thursday-flowers 행). ``` 확정 슬롯(기존 파일 + plan.md 배정): 업종 꽃집·목요일 하루 운영, 목표 행동 예약 하나, 톤 평이한 사실 문장, 자산 사진 5장·상호·연락처·주소. 화면: `index.html` 한 장. ## 미확정 - 방향 선택(카드 A)은 사용자 위임으로 내가 골랐다. 이유는 "방향"에. - 이번 주 꽃 목록 여섯(작약·라넌큘러스·다알리아·스카비오사·유칼립투스·스위트피)은 사진에서 읽은 가설 목록이다. 실제 운영이면 주마다 바뀌는 값 — 가격·수량은 넣지 않았다. - 사진 없는 칸 둘("사진은 목요일 아침에 올립니다")은 정적 페이지라 갱신되지 않는다. - 리디바탕 배포처 원문(ridicorp.com)은 403으로 미확인. 미러 README의 OFL 1.1 전문으로 확인. ## 레퍼런스 | 슬롯 | URL | 가져온 원리 | |---|---|---| | R1 구조 | https://www.bloomandwild.com/send-flowers | h1 32px 작게, 격자가 첫 화면(1440 3열 1:1, 390 2열), 이름은 사진 아래. 원형 크롭 + 아래 라벨 | | R2 톤 | https://kukka.kr/ (푸터) | 연락처·운영시간·주소가 푸터의 본문 | | R3 디테일 | https://kukka.kr/kukka-scent/products/7648/ (390) | 하단 고정 바 74px, 버튼 52px 전폭, 행동 하나 | 미검증: 아치 크롭을 쓰는 실제 사이트(The Sill·Jenni Kayne·Flamingo Estate 열었으나 현재 아치 없음). 실측 기록은 `outputs/rework-2026-10-06/thursday-flowers.md`. ## 방향 격자·목록(3열 아치 창 6칸, 표제 1.5rem 한 줄, 리드 대신 사실 2개) · 리디바탕 400 / Pretendard 400 · #f7ebe9 분홍 · 142° 잎 녹색 #2f6b33 · 12px · 꽃 목록 격자 → 목요일 운영(사실 3줄 + 작업실 아치) → 구독 띠 → 예약·문의 → 연락처·영업시간 카드 푸터 → 하단 행동 바(≤767px) · 내비 없음(워드마크 + 예약 버튼, 모바일은 하단 고정 바) · 연락처·영업시간 카드 · 아치 마스크 4:5(원본 사각 유지, object-view-box 크롭) · 로드 때 스태거 한 번 + hover, 감소 모션 정지 **한 문장 컨셉**: 이번 주 꽃을 사러 올 사람이 여섯 칸을 훑고 수요일 18시 전에 예약한다. **프리셋**: quiet-commerce 지배(목록이 설득, 행동 하나). 보조 없음. 재질 없음. **표현 리스크**: 아치 마스크. 근거는 꽃다발을 세워 둔 실루엣(flower-01의 둥근 머리 + 곧은 줄기)이고, 검증은 1440·390 캡처에서 주피사체가 창 안에 남는지(통과)와 크림 사진이 분홍에 녹지 않는지(1px 안쪽 링으로 해결). **카드**: A 목요일 장부(3열 아치 격자) · B 이름이 먼저(썸네일 + 큰 이름 세로 목록) · C 창가 진열대(가로 스냅 띠). **A 선택** — 재료가 "여섯 가지"라 1440에서 두 줄, 390에서 2열 네 칸이 첫 화면에 들어온다(R1 실측과 같은 열 수). B는 사진의 설득을 버리고, C는 390에서 격자가 아니다. 위임이므로 미확정에 올렸다. **반사실**: 고유 요소 3(꽃 이름 아치 목록, 마감 수요일 18:00 + 최대 20건, 사진 없는 칸의 운영 문장). 세무사무소 치환 실패(격자·사실 모두 바꿔야 함) → 통과. 수렴: hannam(격자) 구도 1축 같음, hyang 내비 없음 1축 같음. 토큰 최고 유사도 0.53(twentyoz). **보존 자산**: 상호, 사실·연락처·주소, 사진 5장, 앵커 `#main #work #thursday #subscribe #contact #visit`, 문장 "남는 꽃이 없어서 시들 일도 없습니다". ## 토큰과 예산 값은 `styles/tokens.css`. 역할: `--surface` 분홍 바탕(흰 꽃 사진이 크림 종이에서 사라졌던 문제를 분홍이 해결) · `--surface-deep` 사진 없는 칸·띠 · `--accent` 잎 녹색은 예약 버튼·링크·hover 이름에만(분홍 위 5.51:1, 흰 글자 6.42:1) · `--ink-muted` 6.54:1 · `--arch` 윗모서리 50%/40% + 아랫모서리 12px · `--step-name`(2rem) > `--step-title`(1.5rem) — 칸이 주인 · 본문 웨이트 400 하나(가변 서브셋 349KB → 정적 400 153KB 실측). 예산(tokens §5 기본선): JS 0KB · LCP 172ms(로컬) · CLS 0.0002 · **폰트 328KB(25파일) — 100KB 예산을 올렸다.** 이유: 한글 두 패밀리를 CDN 다이나믹 서브셋으로 싣고 페이지 글자가 청크 13개에 걸친다. 자체 서브셋은 규칙(CDN 링크)과 충돌해 쓰지 않았다. ## 이펙트와 폴백 - 스태거 등장: `.cell`·`.hero-head`에 `rise` 700ms, `--i × 70ms`. `prefers-reduced-motion: reduce`면 애니메이션 없음(실측 opacity 1). 스크롤 리빌 없음. - hover: 사진 1.04 확대 + 이름 녹색. `(hover: hover)`에서만. - `object-view-box`(다알리아·스카비오사 창): 미지원 엔진은 `object-position` 크롭으로 떨어진다. 깨지지 않는다. - 하단 바: `viewport-fit=cover` + `env(safe-area-inset-bottom)`, `html { scroll-padding-bottom }`·`body { padding-bottom }`. ## 하지 않기로 한 것 - 상단 바 내비·sticky·backdrop-filter — 섹션 넷, 행동 하나라 내비 없음(layout §2-c). - 스크롤 리빌(IntersectionObserver `.reveal`) — 배정표에 없고 05 계측의 수렴 항목. 지웠다. - 큰 표제·리드 문단·eyebrow 라벨 — 격자가 주인. 사실 2개가 리드를 대신한다. - 가격·수량·후기 — 사용자가 준 값이 아니다. - 사진 재사용(같은 파일 두 번) — 이전 판의 R6 결함. 사진 없는 칸은 아치 + 잎으로 비워 두었다. - 종이 재질·필터 — 배정 "재질 없음". - 로컬 MaruBuri(900KB) — jsdelivr 리디바탕으로 교체, `assets/fonts/`·`styles/fonts.css` 삭제. - 가운뎃점 메타 문자열 — 가시 텍스트에서 전부 제거. ## 검증 검증 줄: html-validate 0 · stylelint 0 · no-hanja PASS · showcase-audit PASS 6/0 · design-gate 충족 13/미검증 0/실패 0(static·visual·webkit 꺼짐) · 키보드 순서·포커스 가림 없음 · 감소 모션 정지 · 이펙트 끔 구조 유지 · similarity 최고 0.53. 시각 루브릭(캡처 `scratch/thursday/shots/final-*`, 약한 축부터): R6 1(손질 사진은 손이 주인공, 다알리아 창에 가위) · R9 1(200% 확대 2행만, 잎 SVG 평면) · R1 2 · R2 2 · R3 2 · R4 2 · R5 2 · R7 2 · R8 2 · R10 2 — 18/20, 통과선 충족. 근거 전문은 작업 노트. 미검증: WebKit 렌더(게이트 webkit 꺼짐), 실기기 safe area, 아치 레퍼런스 실측, ridicorp 라이선스 원문. ## 피드백 기록 · 보존 목록 - 보존: 상호·사실·연락처·사진·앵커 id, "남는 꽃이 없어서 시들 일도 없습니다"(이전 판에서 가장 사람 같은 문장으로 기록됨). - 피드백 없음(위임 재작업). ## 변경 기록 - 2026-10-06 · 재작업(plan.md 배정). 분할 히어로 → 아치 꽃 목록 격자, 상단 바 → 내비 없음 + 모바일 하단 예약 바, 마지막 섹션 → 연락처·영업시간 카드 `