# design.md — 마테리아 스튜디오

## 진행 상태

- 2026-10-06 재작업(전체·리디자인 경로, 방향 선택은 plan.md 배정으로 위임). 0 현행 감사 → 1 레퍼런스 → 2 방향(카드 3장, A 채택) → 3 토큰 → 4 구현(레이아웃 → 재질 → hover) → 5 검증(게이트 42/0/0, 실렌더 감사 18/0, E2E 34/34) → 6 이 문서. 완료.

## 브리프

- 무엇을: 인테리어 스튜디오 소개 한 장(`index.html`) + 한남 듀플렉스 24개 공간 상세(`projects/hannam-duplex/`) + 옛 주소 리다이렉트(`hannam-duplex.html`).
- 누구에게: 펜트하우스·갤러리 공사를 맡길 사람. 작업 세 곳과 마감재를 보고 상담 항목을 정리해 신청 폼까지 간다.
- 제약: 정적 HTML/CSS, 기존 사진 자산 26장만 사용(새 이미지 없음), 폰트는 OFL 공개 배포본(jsdelivr), 낮/밤 토글(`#btnAmbianceDay/Night`)·프로젝트 모달·갤러리 라이트박스·옛 주소 유지, 기본 언어 ko-KR(대화 언어). 배정(plan.md): 전면 이미지 히어로 · 표제부에 녹인 차례 · 다음 행동 하나 푸터(상담 폼) · 이롭게 바탕/Wanted Sans · #e8e0d4 · 95° 올리브 · 8px · 모션 없음 · 종이 결 · 흘림.

## 미확정

- 상호·프로젝트명·면적·마감재·시공 기준 수치는 기존 쇼케이스 예시값이다(가상 브랜드, 푸터 고지 한 줄).
- 성북동 레지던스 카드 사진(`hannam-08-terrace.webp`)은 한남 프로젝트 테라스 사진이다 — 기존 자산 그대로. 실제 사진이 생기면 교체한다.
- 방향 카드 선택은 위임이었다(아래 방향 절).

## 레퍼런스

| 슬롯 | 출처(실측 2026-10-06, 텍스트 페처) | 가져온 원리 |
|---|---|---|
| R1 구조 | Studio Ashby https://www.studioashby.com | 첫 화면이 표제 없는 전폭 프로젝트 사진, 내비는 Projects/About/Contact 셋, 올리브(#645E26) 색면의 소개 문단, 푸터는 링크 한 줄 → 사진이 먼저, 글은 작게 |
| R1′ 같은 시장 | 백에이어소시에이츠(100A) https://100a.kr | 머리에 전화·메일·주소 사실을 바로 둔다, 첫 화면은 프로젝트 목록 → 머리·히어로에 사실 목록(차례)을 두는 근거 |
| R2 톤 | Axel Vervoordt https://www.axel-vervoordt.com | h1을 작게(`o-title-small`), 첫 화면이 전시 목록 → 작은 표제 + 목록이 첫 화면 |
| R3 디테일 | Studio Ashby 서체 페어 Allrounder Antiqua(세리프 표제) + Matter(고딕 본문), 이미지 `sizes` 1440 상한 | 부리 표제 + 고딕 본문, 사진은 1440 상한 |
| 미검증 | normcph.com(455), labotory.com(연결 실패), designsul.com·jeonglee.co.kr(연결 실패) | — |

## 방향

지문: 전면 이미지(공간 사진 풀블리드, 표제판 좌하단) · 이롭게 바탕 / Wanted Sans · 밝음·웜 모래 #e8e0d4(밤 #1b1814) · 95° 올리브 #43632c(밤 #a9c47a) · 8px · 흐름 "사진+표제판(차례) → 작업 3점(대표 1점 왼쪽 흘림, 2점 격자) → 마감재(접사 오른쪽 흘림 + 4항목) → 절차 4단계(글, 큰 번호) → 푸터=상담 폼" · 내비 = 표제판 안 차례(작업·마감재·절차·상담), 머리는 비고정 워드마크+낮/밤 · 푸터 = 다음 행동 하나(폼) · 이미지 흘림(한쪽 끝), 390은 세로 원본으로 교체 · 모션 없음(hover·focus 색 전환 160ms만)

- 컨셉: 공사를 맡길 사람이 거실 사진 한 장과 네 줄 문장으로 이 스튜디오가 무엇을(일조 측정, 석재·오크) 하는지 알고, 차례에서 작업·마감재·절차를 골라 읽은 뒤 상담 항목을 정리한다.
- 프리셋: editorial 지배. 재질 축만 종이 결(svg-filters R2 변형).
- 표현 리스크: 사진 위 표제판. 사진 위 직접 글자는 대비를 보장할 수 없어 불투명 종이판에 올렸다. 검증: 게이트 대비 82요소 AA(낮·밤), 렌더 픽셀 실측 13.98:1(낮)·11.46:1(밤).
- 카드(배정 제약 안에서 구조를 달리함):
  - **A. 사진 한 장, 차례 한 장**(채택) — 사진이 첫 화면, 좌하단 종이판에 네 줄 표제 + 차례 4항목. 흐름 위 지문. 포기: 큰 표제, 첫 화면 버튼.
  - B. 왼쪽 기둥 차례 — 사진 위 왼쪽에 번호 차례 세로 기둥, 각 장이 전폭 흘림 사진으로 이어지는 긴 책 꼴. 포기: 길이(화면 8개), 390 첫 화면에서 차례가 사진을 밀어낸다.
  - C. 사진 아래 차례 띠 — 사진 100svh, 표제는 사진 위, 차례는 사진 아래 모래색 띠. 마감재를 작업보다 먼저. 포기: 390에서 차례가 첫 화면 밖.
  - 고른 이유(위임): 차례가 1440·390 모두 첫 화면 안에 있어야 "표제부에 녹인 차례" 배정이 성립하고, R1 Studio Ashby가 표제 없이 사진으로 열며 100A가 사실 목록을 머리에 두므로 A.
- 반사실: 고유 요소 — 한남 거실 사진(트래버틴 벽·훈증 오크), 표제의 한남·청담·트래버틴·훈증 오크·벨기에 리넨, 차례의 작업 세 곳 이름. 경쟁사 치환 시 표제·사진·차례가 모두 깨진다.
- 수렴(B-2, muwol-coffee 대비): 섹션 흐름·히어로 글 묶음(라벨 없음/서너 줄/리드 없음/행동 없음+차례)·내비(차례 vs 탭)·푸터(폼 vs 연락처 카드)·이미지(흘림 vs 원형 크롭)·모션(없음 vs 스태거) 6축 전부 다름. 토큰 4축(마루 부리→이롭게 바탕, Pretendard→Wanted Sans, 웜 오프화이트→모래, 2px→8px, 갈색→올리브) 전부 다름.
- 보존 자산: 상호, 세 프로젝트 사실과 모달 문구, 마감재 네 항목, 4단계 문구, 폼 항목·id, 24개 갤러리 카드와 라이트박스, `#btnAmbianceDay/Night`·`.site-head`·`#projectModal`·`.gallery-card-action`·`#lightboxDialog`·옛 주소.

## 토큰과 예산

- 값은 `styles/tokens.css` 한 곳. 표제 이롭게 바탕(OFL 1.1, iropke/font-iropke-batang README·EULA 확인 2026-10-06, 웹 임베딩 가능) / 본문 Wanted Sans Variable(OFL 1.1, wanteddev/wanted-sans OFL.txt, 유니코드 분할 서브셋, swap). 모노 없음 — 숫자는 `tabular-nums`.
- 타입: 히어로 표제 20~26px(본문의 1.4배, 서너 줄), 섹션 제목 22~30px 문장, 절차 번호 40~72px가 가장 큰 글자. 본문 1.7, 표제 1.35~1.55, measure 36em.
- 색: 모래 #e8e0d4 / 종이판 #f3ede4 / 잉크 #1f1d18 / 보조 #5a554b(5.6:1) / 올리브 #43632c(5.2:1, 흰 글자 6.9:1). 밤: #1b1814 / #26221c / #ece5d9 / #b3aa9b / #a9c47a(9.1:1). 라이트박스는 전용 토큰으로 낮·밤 모두 어두운 면.
- radius 8px 한 값. 모션 `--dur-quick` 160ms 색·테두리 전환만.
- 예산(tokens §5 기본선): JS 150KB → 인라인 약 3KB. LCP 2.5s → 로컬 300ms(히어로 `<img fetchpriority=high>`, 세로 원본은 `<picture>`로 390에서만). CLS 0.008. **폰트 100KB 초과**: 이롭게 바탕은 jsdelivr 배포본이 단일 woff 984KB뿐이고 서브셋이 없다(Wanted Sans는 분할 서브셋 17개 약 356KB). 첫 화면 전송 약 1.9MB로 1MB 예산도 넘는다. 배정 서체라 유지하고 초과를 여기 적는다. `font-display: swap`은 배포 CSS에 없어 `main.css`의 자체 `@font-face`로 싣는다. 줄이려면 self-host 서브셋(woff2)이 필요하다 — 이번 범위(공개 링크만) 밖.

## 이펙트와 폴백

- 종이 결: `svg.paper`(fixed, pointer-events 없음) 안의 `feTurbulence 0.9 → feDiffuseLighting`을 multiply 0.16(밤 soft-light 0.22)으로 얹는다. 필터를 끄면 바탕은 토큰 색 그대로다(M-A 통과). 렌더 실측: 판 바탕 표준편차 1.7(아주 약함), 글자 대비 13.98:1.
- 모션 없음. `prefers-reduced-motion`에서 전환 1ms.

## 하지 않기로 한 것

- 고정(sticky) 머리와 `backdrop-filter`: 차례가 히어로 안에 있고 페이지가 화면 5개라 늘 보일 이유가 없다.
- 스크롤 리빌·등장 모션·hover 들림(`translateY`): 배정 "없음(hover만)". hover는 색만 바뀐다.
- 사진 위 직접 표제와 그라디언트 스크림: 대비를 숫자로 보장할 수 없어 불투명 판.
- 큰 표제·eyebrow 알약·버튼 두 개 히어로: 글 묶음은 라벨 없음 / 서너 줄 긴 문장 / 리드 없음 / 행동 없음(차례로 이어진다).
- 모노 서체·가운뎃점 메타 문자열(`A · B`): 전부 제거. 섹션 머리의 "작업·마감재·절차·상담" 한 낱말은 차례의 장 표시이며 eyebrow 알약이 아니다(4개, 휴리스틱 2개 초과 — 차례와 같은 목록이라 유지).

## 검증

- 자동: html-validate 3파일 0오류 · stylelint 0 · no-hanja PASS · showcase-audit 18/18(320~2560, 3경로) · design-gate(낮·밤 뷰, 320~1920) 충족 42 / 미검증 0 / 실패 0 · archive-showcases-e2e Materia 34/34 · audit.mjs 마테리아 12/12. 실기기·INP 필드값은 미측정(정적 페이지, 입력 핸들러 2개).
- 시각 루브릭(약한 축부터, 캡처 `outputs`가 아닌 세션 스크래치 `shots/`): R3 1(시작선 셋 — 판 안쪽·wrap·흘림 글 열, 390 최소 인셋 26px) · R5 1(섹션 간격이 전부 `--space-8`, 극단은 번호 크기 72px뿐) · R6 1(슬롯마다 역할·반복 없음·세로 원본 별도, 그러나 성북동 카드가 한남 사진) · R9 1(390 캡션 칩이 사진 폭 거의 전부) · R10 1(390 첫 화면에 워드마크·사진·표제·차례 두 줄, "상담"은 아래) · R1 2(3초 문장 "한남·청담 펜트하우스를 일조부터 재서 석재·오크로 짓는 스튜디오"; 반례: 브랜드가 머리 워드마크에만) · R2 2(회색조·흐림 순서 사진 → 판 표제 → 차례, 의도와 같음; 반례: 우하단 캡션 칩이 넷째 시선) · R4 2(이롭게 바탕 렌더 확인, 4줄 표제 마지막 줄 3어절, 합성 사체·모노 한글 없음; 반례: 390 표제 6줄) · R7 2(표제에 한남·청담·트래버틴·훈증 오크·리넨, 치환 시 깨짐; 반례: 찾지 못함) · R8 2(고유 요소 3개, muwol 대비 6축·4축 전부 다름; 반례: 전면 이미지 패밀리는 baekje·twentyoz와 공유). 합계 15/20, R1·R8 2점, 0점 없음 — 통과.
- 어두운 면 대비 실측: 밤 표제판 글자 11.46:1, 라이트박스 올리브 라벨 #a9c47a/#1f1d18 9.1:1.

## 피드백 기록 · 보존 목록

- (없음. 보존 목록은 방향 절의 "보존 자산".)

## 변경 기록

- 2026-10-06 · 재작업 전체. 히어로 5:7 분할 → 전면 사진 + 표제판·차례, 상단 바 → 비고정 워드마크, 고지 띠 푸터 → 상담 폼 푸터, 마루 부리/Pretendard/JetBrains Mono → 이롭게 바탕/Wanted Sans, 브론즈 → 올리브, 2px → 8px, 로컬 폰트 파일(900KB)·fonts.css 삭제, `.reveal`류 없음 확인. 2차 페이지 셸·토큰·가운뎃점 문자열 정리, 라이트박스 전용 토큰.
- 2026-10-02 · 카피 기준 수정(번역체·과장 제거, 영문 장식 라벨 한국어화, 상세 카드·라이트박스 문구 통일, `#consultation` → `#contact`).
- 2026-09 · 이전 결정(5:7 사진 우세 히어로, 브론즈·종이 토큰, Day/Night, 24개 갤러리·라이트박스·legacy 경로). 이번 재작업으로 히어로·토큰은 대체됐고 Day/Night·갤러리·legacy 경로는 유지.