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

11 KiB

Raw Blame History

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 경로는 유지.

11 KiB Raw Blame History Unescape Escape