designpaca/apps/site/public/work/hannam-jari/design.md

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건 기록.