ci / build (push) Waiting to run

Details

feat(site): rework 19 marketing showcases for composition diversity

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.

2026-10-06 16:55:50 +09:00

8.1 KiB

Raw Permalink Blame History

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.

8.1 KiB Raw Permalink Blame History Unescape Escape