8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
91 lines
8.1 KiB
Markdown
91 lines
8.1 KiB
Markdown
# 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 배정). 분할 히어로 → 아치 꽃 목록 격자, 상단 바 → 내비 없음 + 모바일 하단 예약 바, 마지막 섹션 → 연락처·영업시간 카드 `<footer>`, 마루 부리·크림·갈색 → 리디바탕·분홍·잎 녹색, radius 0 → 12px, 스크롤 리빌 → 로드 스태거 한 번. 로컬 폰트 삭제.
|
||
- 2026-10-02 · (이전 판) 레드팀 06: 워드마크 한 줄 고정, 한글 라벨 자간 0.14em → 0.04em. 카피를 사장님 말투로(잠언·감성 캡션 제거). — 이번 판에서 라벨 자간은 0, 워드마크는 그대로 한 줄.
|
||
- 2026-09-12 · (이전 판) editorial 프리셋, 0.9:1.1 분할 히어로, 로컬 MaruBuri 400/600, 크림 #f8f6f0, 마른 장미 #7c4a3f.
|