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

9.6 KiB

Raw Blame History

design.md — 스튜디오 폼

진행 상태

2026-10-06 전체(리디자인) 경로 0~6단계 완료. 재개할 일이 생기면 "검증"의 미검증 목록부터 본다.

브리프

무엇을: 주택·기념관·재생 건축 여섯 건을 사진과 평면도로 기록하는 가상 건축연구소 포트폴리오 한 장. 대표 기록은 폼 하우스(가평, 2025).
누구에게: 건축 작업의 기록 방식을 살피고 프로젝트 색인으로 이동하려는 건축주·협력사. 목표 행동 없음(상담·견적을 받지 않는 가상 연구소).
제약: 정적 HTML·CSS, 기존 흑백 사진 3장과 평면도만 사용(새 이미지 없음), 기본 언어 ko-KR(상호 "스튜디오 폼"만 표기, 영문 FORM 미사용), 한자 금지, 가운뎃점 메타 문자열 금지, 폰트는 OFL·공개 배포본.
배정(outputs/rework-2026-10-06/plan.md): 표제 + 전폭 무대 · 측면 색인 · 큰 워드마크 한 줄 푸터 · Gothic A1 300 / Gothic A1 · 밝음 중립 #fcfcfb · 강조 없음 · radius 0 · scroll-driven 진행선 · 종이 결 feTurbulence · 극단 비율 파노라마 + 흑백.
화면: index.html 한 장(2차 페이지 없음).

미확정

프로젝트 02~06의 평면도·사양·사진 — 없음. 색인 여섯 건 모두 같은 예시 평면도(#drawing)로 연결되며 레일 아래에 그 사실을 적었다.
연락처·주소 — 없음. 연구소 섹션과 <address>에 "연락처와 사무실 주소가 없습니다"로 표기.
방향 카드는 위임으로 골랐다(아래 "방향").

레퍼런스

슬롯	출처	가져온 원리
R1 구조	https://davidchipperfield.com/projects/neues-museum — 브라우저 실측 1440: h1 3줄(42px/700) 좌상단 → 바로 아래 전폭 무대 사진 1149×768	표제 블록 다음에 무대가 온다. 우리는 표제를 26px/300으로 낮추고 무대를 3.6:1로 늘렸다
R1' 색인	https://www.6a.co.uk/projects — "Tate Liverpool, Royal Albert Dock 2022 - 2027"	색인 행 = 번호 / 이름 / 장소 연도
R3 디테일	https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline — sticky 우측 차례(폭 296, 링크 16/24, 행 32, 현재 항목 `aria-current` + 2px 막대 + 틴트)	측면 색인의 현재 위치: `aria-current` + 왼쪽 2px 먹 막대. 틴트는 강조색 없음 규칙으로 뺐다
R2 톤	비움 — 흑백 사진·먹 선이 톤을 이미 정했고, 배정이 서체·바탕·강조를 고정했다	—
미검증	lacatonvassal.com(텍스트 페처 오판, 실측은 드롭다운 필터), sergisonbates.com 401, sanaa.co.jp 인증서 오류, pezo.cl 빈 응답	쓰지 않음

방향

지문: 표제+전폭 무대 · Gothic A1 300 / Gothic A1 400 · 밝음 중립 #fcfcfb · 강조 없음(먹만) · radius 0 · 흐름 [긴 문장 표제 → 3.6:1 흑백 파노라마 → 평면도(스크롤로 선이 그어짐)+사양 → 사진 2장(3:4, 2.4:1) → 연구소 → 큰 워드마크 푸터] · 측면 색인(≤64rem 상단 접는 차례) · 큰 워드마크 한 줄 푸터 · 극단 비율 파노라마 + 흑백, 캡션은 번호와 함께 · scroll-driven(진행선 1px, 도면 stroke-dashoffset), 등장 리빌 없음

한 문장 컨셉: 건축주가 폼 하우스 한 건의 파노라마와 평면도를 사실 문장과 함께 읽고, 왼쪽 색인에서 다른 다섯 건으로 이동한다.
프리셋: swiss-minimal(평평한 종이, 재질 최소). 보조 축 없음. 종이 결은 재질 한 가지(종이)로 한정.
히어로 글 묶음: 라벨 없음 / 서너 줄 긴 문장 표제 / 리드 없음 / 행동 없음(다음 정보인 무대로 이어진다).
표현 리스크: 표제 26px vs 푸터 워드마크 176px(6.8배)의 크기 긴장. 1440·390 전체 캡처로 확인했다.
카드(위임, 구조가 다른 3장): A 도면집 한 장(좌측 색인 + 표제 3줄 → 파노라마) / B 긴 두루마리(사진 3장을 가로 스크롤 띠로) / C 평면도가 무대(전폭 평면도 먼저). A 채택 — 설득 재료가 사진(재료·빛)과 평면도(배치·동선) 둘이고 R1이 사진을 표제 바로 아래 무대로 두며, 색인의 현재 위치 표시는 한 장을 읽는 동안에만 의미가 생긴다. B는 가로 스크롤이 세로 진행선과 충돌해 기각, C는 첫 화면에 사진이 없어 기각.
반사실: 첫 화면 고유 요소 3개 — 긴 수평창 파빌리온 파노라마(자산), 가평·백령도·성수 색인 6건, "사진과 평면도로 집을 왜 그렇게 앉혔는지" 방법 문장. 세무사무소로 치환하면 색인 레일·파노라마가 성립하지 않는다. 페이지 수렴: plan.md상 orbit-aerospace와 측면 색인·극단 비율·scroll-driven 도면 선 3축이 같다 — 글 묶음·푸터·바탕·서체로 갈라 둔 상태이고 섹션 흐름이 달라야 한다.
보존 자산: pavilion-bw·interior-bw·model-bw webp, 프로젝트 6건의 이름·위치·연도, 폼 하우스 사양 수치와 설계 이유 문장, .index a 6개 → #drawing.

토큰과 예산

값은 styles/tokens.css. 역할만 적는다.

서체 한 패밀리 두 웨이트: 300은 표제·h2·푸터 워드마크(가늘고 넓게), 400은 본문·색인. 500은 폰트 예산 때문에 뺐고 색인 이름은 색(ink)과 행 위치로 구분한다.
색: 바탕 #fcfcfb(배정 유지), 먹 #161716, 보조 #585b58(6.7:1), 흐림 #6b6e6b(5.0:1), 선 두 단계. 강조색 없음.
크기: 캡션 13px(한글 하한), 본문 16px, 표제·h2 clamp(20~~26px) — "작은 표제", 워드마크 clamp(52~~176px). 표제 measure 30em(1440에서 3줄), 본문 36em.
무대 비율: 3.6:1(≥64rem) / 2.4:1 / 16:10(≤40rem). 사진 띠 2.4:1 / 2:1 / 16:10.
예산(tokens §5 데모/포트폴리오): JS 인라인 1.2KB / 폰트 254KB 실측 — 200KB를 올렸다(Gothic A1 한글 슬라이스 두 웨이트; 본문까지 300으로 줄이면 가독성이 떨어진다) / LCP 348ms(1440)·252ms(390) 로컬 / CLS ≤0.001 / 첫 화면 전송 약 430KB.

이펙트와 폴백

도면 선 그리기: .plan에 view-timeline: --plan, 벽→내벽→창→문 순으로 stroke-dashoffset 1 → 0. @supports (animation-timeline: view()) 안에만 초기 상태를 두어 미지원(Firefox)은 완성 상태. 감소 모션도 완성 상태.
진행선: 레일 오른쪽 1px 실선 위 먹 구간이 scroll(root block)로 자란다. 감소 모션은 가득 찬 상태(정보).
종이 결: feTurbulence 타일(220px, 2옥타브) SVG를 body::before 고정 레이어 배경으로, opacity 0.08. 런타임 필터 연산 없음. 끄면 바탕색만 남고 레이아웃은 그대로.
읽는 위치: IntersectionObserver가 "이 장" 링크에 aria-current를 준다. JS가 없으면 표시만 없고 색인은 항상 열린다.
좁은 화면 차례: <details>를 JS가 폭(64rem)에 따라 열고 닫는다. 링크를 누르면 닫힌다.

하지 않기로 한 것

상단 바·backdrop-filter·스크롤 리빌·eyebrow·리드·버튼 — 수렴 지문이라 뺐다.
영문 "FORM" 워드마크·영문 장식 라벨 — 기본 언어 규칙.
같은 사진을 두 번 싣기(옛 히어로·사진 섹션 중복) — R6 실패 신호.
프로젝트 02~06의 상세 — 사실이 없어 만들지 않았다(placeholder 대신 색인에서 같은 예시 평면도로 보낸다는 고지).
가운뎃점 메타 문자열, 캡션마다 붙던 "생성 이미지 · 실제 프로젝트 사진 아님" — 히어로 아래 고지 한 문단이 페이지 범위를 한 번 소유한다. 푸터는 브랜드 범위 한 줄만.
MaruBuri 로컬 폰트 — 싣지 않는다(파일은 출처 기록과 함께 남겨 둠). fonts.css는 지웠다.

검증

검증 줄: html-validate 0 오류 · stylelint 0 · no-hanja PASS · showcase-audit PASS 6/0(320~2560) · design-gate 충족 13 / 미검증 0 / 실패 0(꺼짐 3: static·visual·webkit; 대비 AA 66요소, axe 0, 터치타깃·오버플로·죽은 선택자·색 리터럴 0) · archive-showcases-e2e 107/108(실패 1 = 390 접힌 차례 선택자, 제안 수정은 outputs 노트) · similarity 경고 없음.
시각 루브릭(약한 축부터): R3 1(레일 시작선 4개, 역할 설명 가능) · R6 2 · R1 2 · R2 2 · R4 2 · R5 2 · R7 2 · R8 2 · R9 2 · R10 2 = 19/20. 근거와 2점 반례는 outputs/rework-2026-10-06/form-architecture.md.
미검증: WebKit 렌더, 실기기 INP, Firefox 실제 실행(폴백 경로는 @supports로 보장).
캡처: 스크래치 form/final-*.png(1440·390 첫 화면·전체·회색조·흐림·감소 모션·도면 중간 상태·2x 크롭).

피드백 기록 · 보존 목록

보존: 흑백 사진 3장과 역할(남측 입면 파노라마 / 전시실 빛 / 석고 모형), 가로형 평면도, 색인 6건, 폼 하우스 사양.
피드백: 없음(2026-10-06 재작업 직후).

변경 기록

2026-10-06 · 전체 리디자인 · plan.md 배정(측면 색인·표제+전폭 무대·워드마크 푸터·Gothic A1·진행선·종이 결·파노라마)에 따라 구조·토큰·카피를 다시 썼다. 평면도를 가로형(14,400×9,600)으로 다시 그려 치수·비례 불일치와 "기둥 없음" 문장과의 모순을 없앴다. 가운뎃점 메타 문자열·eyebrow·리드·버튼·고지 띠 푸터 제거.
2026-10-02 · 카피 교정 · "빛이 머무는" 같은 무생물 주어·시구형 표제를 사실 문장으로.
2026-09-12 · 전체 쇼케이스 점검 · verify-final 묶음 통과, MaruBuri 파일 동봉(미사용).
2026-08 · 최초 작성 · Pretendard 단일 패밀리, 상단 바 + 두 줄 표제 + 2.35:1 사진 + 인덱스 + 도면 + 사진 시퀀스 + 상담 구성.

9.6 KiB Raw Blame History Unescape Escape