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.
85 lines
10 KiB
Markdown
85 lines
10 KiB
Markdown
# design.md — 한남자리
|
||
|
||
## 진행 상태
|
||
|
||
- 2026-10-06 · 0 현행 감사 → 1 레퍼런스 3슬롯 실측 → 2 카드 3장 중 A 선택(위임) → 3 토큰 재정의 → 4 구현(격자 히어로·푸터 폼·VT) → 5 검증 통과 → 6 이 문서. 재개하면 "검증"의 남은 위험부터 읽는다.
|
||
|
||
## 브리프
|
||
|
||
- 무엇을: 한남 생활권 예시 매물 3곳을 다섯 조건(거래·예산·전용면적·입주일·주차)으로 비교하고 상담 전 확인 항목을 정리하는 공개 화면 + 매물 검수 운영 화면(`admin/`).
|
||
- 누구에게: 집을 찾는 이용자(목표 행동: 조건을 넣고 분석 결과를 본 뒤 상담 준비 순서를 받는다) · 검수 담당자(운영 화면).
|
||
- 제약: 정적 HTML/CSS/JS, 기본 언어 ko-KR(저장소 기존 로컬라이제이션), 기존 자산(사진 2장·og.png)만, 가상 매물·AI 참고·미전송 고지와 `landing.js`의 분석·선택·서류철·대화상자 동작, `admin/`의 구조를 보존. 2026-10-06 재작업 분배표(outputs/rework-2026-10-06/plan.md)의 배정값이 방향 제약.
|
||
- 화면: `index.html`(공개), `admin/index.html`(운영).
|
||
|
||
## 미확정
|
||
|
||
- 방향 카드 선택은 사용자가 위임했다(plan.md "작업자가 그 안에서 방향 카드를 만들고 하나를 고른다"). 고른 이유는 "방향"에 있다.
|
||
- 사진이 2장뿐이라 home-1과 home-3가 같은 거실 사진을 쓴다(home-3는 창가 크롭). 매물별 사진이 생기면 교체한다.
|
||
- 월세 가격 문자열 "보증금 5억 · 월 1,200만"은 가운뎃점 메타 문자열이지만 `tools/showcase-duo-e2e.mjs:563`이 정확 일치로 단언해 유지했다.
|
||
|
||
## 레퍼런스
|
||
|
||
| 슬롯 | 출처 | 가져온 것 |
|
||
|---|---|---|
|
||
| R1 구조 | The Modern House 매물 목록 https://www.themodernhouse.com/sales-list (브라우저 실측: 상단 바 64px, 필터 띠 80px에 h1 "Buy" 30px, 3열 389×260 격자, 캡션 두 열, 푸터 뉴스레터 폼) | 표제는 작게 필터 띠와 한 줄, 격자가 첫 화면, 캡션은 이름/가격 두 열, 푸터는 폼 하나 |
|
||
| R2 톤 | Apple 리퍼비시 Mac 한국 https://www.apple.com/kr/shop/refurbished/mac (실측: 1:1 칸 247px, 간격 0 + 1px 선 격자, 떠 있는 카드 없음) | 선으로 나눈 1:1 칸, 그림자 없음 |
|
||
| R3 디테일 | Chrome 문서 same-document View Transitions https://developer.chrome.com/docs/web-platform/view-transitions/same-document | `startViewTransition` + 칸별 고유 `view-transition-name`, 감소 모션은 `::view-transition-*` animation none |
|
||
|
||
미검증: Inigo 매물 목록(텍스트 페처가 제목만 반환).
|
||
|
||
## 방향
|
||
|
||
지문: 격자·목록 히어로(3열 1:1 매물 칸, 조건 띠 위, h1 작게, 리드 없음) · IBM Plex Sans KR 700 / IBM Plex Sans KR 400 · #eceff1 쿨 회색 · 130° 녹 #2d7639 · 4px · 격자+조건 → 브리핑 → 선택한 집 비교 → 서류철 → 푸터(절차 + 상담 준비 폼) · 상단 바 + 메뉴 버튼(고정, 불투명) · 다음 행동 하나 크게(상담 준비 폼) · 1:1 원본 크롭, 캡션 위 · 분석 시 격자 재정렬 View Transitions 120ms, hover는 선·바탕색만
|
||
|
||
- 컨셉: 집을 찾는 사람이 한남 생활권 예시 매물 3곳을 격자에서 한눈에 보고, 위의 조건 다섯 칸을 채워 어느 집이 가까운지와 중개사에게 확인할 것을 가려낸다.
|
||
- 프리셋: swiss-minimal 계열(격자·선·단색 강조)을 지배로, 보조 없음. 재질 없음.
|
||
- 표현 리스크: 분석 뒤 격자 재정렬(VT). 전환 중 문서가 히트테스트에서 빠지므로 120ms로 짧게 두고, 실제 클릭 E2E(`showcase-duo-e2e.mjs` "세 후보 장면")로 검증했다. 좁은 화면(≤60rem)에서는 재정렬을 끄고 등록 순서를 지킨다(세 번째 칸을 가로 한 줄로 펴기 때문).
|
||
- 표면 다이얼: 공개 — 표현 1·밀도 2·모션 1·증거 노출 2 / 운영 — 표현 0·밀도 3·모션 0·증거 노출 3(구조 유지, 토큰·서체만 공유).
|
||
- 반사실: 첫 화면 고유 요소 — 억 원·㎡·입주일·주차 대수 다섯 필터, 매물 캡션의 실제 수치("매매 118.42㎡ 38억 원"), 캡션 안 "연출 이미지" 고지. 세무사무소로 바꾸면 필터와 1:1 사진 격자 모두 성립하지 않는다.
|
||
- 수렴(05 계측 19종 대비): 히어로 격자(분할 13종과 다름) · 표제 라벨 없음·1줄·리드 없음(라벨+2줄+리드 16~19종과 다름) · 푸터 폼(고지 띠 14종과 다름) · 캡션 위(아래 캡션 다수와 다름) · 상단 바는 배정대로 유지. 5축 중 같은 것은 "단색 버튼 1 + 밑줄 텍스트 1" CTA 조합 하나.
|
||
- 카드(위임): **A. 선 격자 3칸(채택)** — 매물이 3곳이라 1440에서 세 칸이 한 줄에 다 보이고(R1 3열), R2의 1:1 선 격자가 배정 비율과 맞으며, E2E가 보는 비교·서류철 표면을 그대로 둘 수 있다. **B. 색인 표** — 숫자 행 + 썸네일. 사진 2장의 역할이 사라지고 390에서 표를 카드로 바꿔야 해 기각. **C. 큰 두 칸** — 2열 큰 사진, 선택 칸 안에서 브리핑 펼침. 첫 화면에 세 집이 다 안 보이고 매트릭스를 칸 안으로 접어야 해 기각.
|
||
- 보존 자산: 상호·태그라인·HJ 마크, 세 매물의 이름·가격·면적·주차·입주일·관리비, 사진 2장, og.png, 고지 문구("상담은 접수되지 않습니다", "거래 서비스를 제공하지 않습니다"), `data-*` 계약 전부, 서류철 5탭, 상담 대화상자, 로컬 저장 키 `hannam-jari-conditions-v2`, `admin/` 구조.
|
||
|
||
## 토큰과 예산
|
||
|
||
값은 `styles/tokens.css` 한 곳. `landing.css`·`admin.css`는 토큰을 재정의하지 않는다(05 Q-25).
|
||
|
||
- 서체: `--font-display`·`--font-body` = IBM Plex Sans KR(Google Fonts, OFL, 400·700만). 표제는 700, 본문 400. 중간 웨이트를 싣지 않아 합성 볼드가 없다. `--font-sans`는 admin.css가 쓰는 별칭.
|
||
- 바탕: `--surface` #eceff1(페이지) / `--surface-raised` #f7f9fa(칸·판) / `--surface-sunken`(이미지 바닥). 글자 `--ink` #15191c, 보조 `--ink-3` #566069(#eceff1 위 5.56:1 실측).
|
||
- 강조: `--accent` #2d7639(130°) — 선택 칸 테두리·주 버튼·현재 탭·탭 밑줄에만. `--accent-deep`(hover·텍스트), `--accent-soft`(어두운 푸터의 보조 글자).
|
||
- radius: `--radius` 4px 하나. 배지만 `--radius-pill`.
|
||
- 모션: `--transition` 160ms, VT 120ms. 감소 모션은 tokens.css에서 전역 0.01ms + `::view-transition-*` none.
|
||
- 예산(tokens §5 기본선)과 실측(1440, 로컬 파일): JS 25KB(비압축, 예산 150KB gzip) · CSS 8+31KB · 첫 화면 이미지 214KB(E2E 예산 350KB/모바일 260KB 통과) · LCP 292ms(로컬, 첫 매물 사진 `fetchpriority="high"`) · CLS 0.0001 · 폰트 전송 229KB(1440)/198KB(390) + Google Fonts CSS. **폰트는 기본선 100KB를 넘는다** — 한글 2웨이트 슬라이스 합계라 데모/포트폴리오 기준 200KB로 올렸고, 그래도 29KB 초과다("검증" 남은 위험).
|
||
|
||
## 이펙트와 폴백
|
||
|
||
- View Transitions: `document.startViewTransition`이 없거나 감소 모션이면 즉시 갱신(`withViewTransition`). 순서는 CSS `order`로만 바꿔 DOM·키보드 순서를 유지한다.
|
||
- hover: 칸 바탕 흰색 + 1px 안쪽 선, 버튼 진한 녹, 탭 글자색. 전부 꺼도 상태는 `aria-pressed`·`aria-selected`·테두리 2px로 보인다.
|
||
- 이미지 실패: `data-image-fallback` 판이 같은 자리에 뜬다(기존 동작).
|
||
- 무JS: h1·격자·매트릭스·서류철 기본 탭·푸터 폼이 정적으로 읽힌다. 분석·선택·대화상자는 `.no-script` 안내.
|
||
|
||
## 하지 않기로 한 것
|
||
|
||
- 새 이미지 생성 안 함(브리프). home-3는 같은 거실 사진의 창가 크롭(`.is-crop-window`).
|
||
- 스크롤 리빌·등장 애니메이션·마퀴 없음. 재질(feTurbulence·유리) 없음. 상단 바에 `backdrop-filter` 없음(바탕이 단색).
|
||
- 큰 표제·리드 문단·eyebrow를 히어로에 두지 않는다. `.eyebrow`는 `#homes`("예시 매물")·`#dossier`("선택한 예시 매물") 두 곳의 범위 고지뿐이다(E2E가 "예시"·"선택한 예시" 포함을 단언한다).
|
||
- 상담 대화상자를 없애지 않았다. 푸터 폼에서 고른 항목이 대화상자 체크 상태로 넘어간다.
|
||
- 운영 화면 구조·문구·밀도는 손대지 않았다(토큰·서체·강조색·고지 띠 문장만).
|
||
|
||
## 검증
|
||
|
||
- 검증 줄: html-validate 2파일 0건 · stylelint 3파일 0건 · no-hanja 7파일 통과 · showcase-audit 12/12 · design-gate 28/28(미검증 0, 꺼짐 3: static·visual·webkit) · showcase-duo-e2e 한남자리 48시나리오 184단언 통과(스크래치 사본으로 한남자리 블록만, 3회 연속) · audit.mjs 390×320 메뉴 단언 재현 통과.
|
||
- 시각 루브릭(약한 축부터, 캡처 `outputs/rework-2026-10-06` 노트 참조): R6 1 — 사진 2장을 세 매물·비교·서류철에 다시 쓴다(크롭으로 나눴지만 같은 방). R9 1 — 200% 확대는 캡션·조건 띠만 확인. R1 2 · R2 2(흐림 캡처: 사진 셋 → 녹색 버튼 → 표제) · R3 2(시작선 32/53/78px) · R4 2 · R5 2(촘촘한 격자 ↔ 4~6rem 섹션 ↔ 어두운 푸터) · R7 2 · R8 2 · R10 2. 합계 18/20.
|
||
- 대비 실측: 어두운 푸터 위 보조 글자 14.18:1, 표제 16.01:1 / 조건 띠 안내문 6.08:1 / 매물 판정문 6.42:1 / 주 버튼 5.58:1 / eyebrow 7.12:1.
|
||
- 미검증·남은 위험: 폰트 전송량이 올린 예산(200KB)보다 29KB 많다 — 줄이려면 본문 400 한 웨이트로 가거나 자체 서브셋이 필요하다. Firefox·Safari는 VT 미지원 또는 부분 지원이라 즉시 갱신으로 떨어진다(기능은 같다). WebKit 렌더는 E2E의 WebKit 390·1440 단언으로만 봤다.
|
||
|
||
## 피드백 기록 · 보존 목록
|
||
|
||
- (없음) 납품 뒤 반응이 오면 feedback-loop로 축을 좁혀 여기 적는다.
|
||
|
||
## 변경 기록
|
||
|
||
- 2026-10-06 · 재작업: 분할 히어로 → 격자·목록, 웜 페이퍼+Pretendard+청동 → 쿨 회색+IBM Plex Sans KR+130° 녹, 고지 띠 푸터 → 상담 준비 폼 푸터, landing.css의 토큰 재정의를 tokens.css로 통합, 가운뎃점 메타 문자열 제거, 섹션 제목을 사실 문장으로. 운영 화면은 토큰·서체·강조색만 따라간다.
|
||
- 2026-10-02 · 카피: 직역 태그라인·번역체 문장을 평이한 문장으로(outputs/redteam-2026-10-01/copy-criteria.md).
|
||
- 2026-10-02 · 레드팀 06: h1 자간 -0.07em → -0.02em, `text-wrap: balance`(이번 재작업에서 h1 자체가 바뀌어 더는 해당 없음).
|
||
- 2026-09 · 초판: 역할 토큰 `--brief-*`·`--admin-*`, verify-final 18묶음, stress 112건 기록.
|