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.
118 lines
14 KiB
Markdown
118 lines
14 KiB
Markdown
# design.md — 오버톤 사운드랩
|
||
|
||
## 진행 상태
|
||
|
||
- 0단계 브리프 — 완료(기존 design.md·index.html에서 슬롯 확인, 재작업 배정표가 제약)
|
||
- 1단계 레퍼런스 — 완료(R1 Box of Toys Audio·R2 David Rudnick 브라우저 실측, R3 기존)
|
||
- 2단계 방향 — 완료(카드 3장 중 A "측정 조각 콜라주", 위임)
|
||
- 3단계 토큰 — 완료(`styles/tokens.css`)
|
||
- 4단계 구현 — 완료(레이아웃 → 재질 없음 → 캔버스·마퀴)
|
||
- 5단계 감사 — 완료(아래 검증)
|
||
- 6단계 기록 — 이 문서
|
||
|
||
## 브리프
|
||
|
||
- 무엇을: 공간 음향 연구소(가상)의 작업 아카이브 한 장. 작업 네 건의 연도·채널 수·측정 조건을 기록한다.
|
||
- 누구에게: 전시·공연 기획자가 "이 연구소가 무엇을 하는 곳인지"를 첫 화면에서 읽고 작업 네 건을 확인한다.
|
||
- 제약(재작업 배정표 2026-10-06): 비대칭 콜라주 히어로(파형·사진 조각, 두 줄 문장 표제) · 내비 없음 · 큰 워드마크 한 줄 푸터 · Black Han Sans / Gothic A1 · 어두운 배경 #12100e 유지 · 345° 로즈 강조 · radius 0 · 캔버스 + 마퀴 유지, 스크롤 리빌 삭제 · 재질 없음 · 듀오톤 이미지.
|
||
- 보존: 상호, 작업 네 건의 사실(48ch, −62dB, 6시간, 220–940Hz, 2023–2026), `installation.webp`, `#wave` 캔버스 계약(보일 때만 그리고 화면 밖·감소 모션에서 정지), 가상 브랜드 고지.
|
||
- 기본 언어: 한국어, 합니다체.
|
||
|
||
## 미확정
|
||
|
||
- 없음. 사실·수치는 전부 기존 파일에서 가져왔고 새 값을 만들지 않았다.
|
||
|
||
## 레퍼런스
|
||
|
||
| 슬롯 | 출처 | 실측(브라우저 1440) | 가져온 것 |
|
||
|---|---|---|---|
|
||
| R1 구조 | [Box of Toys Audio](https://www.boxoftoysaudio.com/) — 런던 사운드 디자인 스튜디오 | 바탕 #000, 상단 내비 없음(하단 pill 도크만). h1 54.7px/300 6줄. 푸터: 20px 열 행(링크·주소·메일) 위 1px 괘선, 그 아래 전폭 워드마크 1400×270px가 화면 하단에 붙음 | 내비 없음 + 워드마크 한 줄 푸터의 구조. 우리는 도크도 두지 않고 브랜드 표기 + 앵커 하나만 둔다 |
|
||
| R2 톤 | [David Rudnick](https://www.davidrudnick.org/) — 디자이너 포트폴리오 | 바탕 #000, 큰 조각 452×452 두 장(x 250·751)과 287px 폭 작은 조각들이 격자에서 벗어나 크기 차를 두고 놓임. 텍스트 내비 없이 아이콘 4개 | 어두운 바탕 위 조각 크기 차(큰 1 · 중간 1 · 작은 1). 우리는 조각을 사진이 아니라 파형·듀오톤 사진·수치로 바꾼다 |
|
||
| R3 디테일 | carstennicolai.de(기존 design.md) | 아카이브 역연도 목록 | 작업 목록 순서(최근이 먼저) |
|
||
| 미검증 | coda-to-coda.com, echoic.audio — DNS 실패. obys.agency — 로더만 캡처됨. zeligsound.com — 열렸으나 상단 바 내비라 슬롯에 맞지 않음 | — |
|
||
|
||
## 방향
|
||
|
||
**지문**: 비대칭 콜라주(파형 조각 8/12폭 · 듀오톤 사진 6/12폭 · 로즈 수치 조각 5/12폭, 표제가 그 위를 지남) · Black Han Sans / Gothic A1 · 어두움 #12100e · 강조 345° 로즈(#ef587e) · radius 0 · 흐름 [콜라주 히어로 → 작업 네 건 목록 → 작업 방식 한 문장 → 마퀴 → 워드마크 푸터] · 내비 없음(브랜드 + 앵커 하나) · 큰 워드마크 한 줄 푸터 · 듀오톤(흑 → 로즈) · 캔버스 파형 + 마퀴, 리빌 없음.
|
||
|
||
**한 문장 컨셉**: 전시 기획자가 파형·설치 사진·측정 수치 조각이 겹친 첫 화면에서 "잔향을 재고 스피커를 놓는 곳"임을 읽고 작업 네 건을 확인한다.
|
||
|
||
**프리셋**: anti-grid 지배(격자 위 조각 겹침). 보조 없음.
|
||
|
||
**방향 카드(위임 — 배정된 콜라주 패밀리 안에서 구조를 달리했다)**
|
||
|
||
| 카드 | 한 줄 | 첫 화면 | 흐름 | 포기하는 것 |
|
||
|---|---|---|---|---|
|
||
| A. 측정 조각 콜라주 | 파형(큰 조각)·듀오톤 사진(중간)·수치 네 개(작은 로즈 면)가 겹치고 표제가 위를 지난다 | 표제 2줄 / 파형 우상 / 사진 좌하 / 수치 우하 | 히어로 → 작업 목록 → 방식 → 마퀴 → 워드마크 | 읽는 순서가 사진보다 수치에 먼저 간다 |
|
||
| B. 스펙트럼 기둥 | 세로 띠(스펙트럼 막대)와 사진 띠가 기둥처럼 서고 표제는 바닥에 깔린다 | 세로 조각 5개 / 표제 하단 | 히어로 → 수치 4개 큰 글자 → 작업 목록 → 워드마크 | 사진이 띠로 잘려 설치 장면이 안 읽힌다 |
|
||
| C. 기록지 더미 | 작업 네 건이 각각 한 장의 기록 조각이 되어 겹치고, 사진은 뒤에 깔린다 | 표제 상단 / 기록 조각 4장 겹침 / 사진 배경 | 히어로(작업 포함) → 방식 → 마퀴 → 워드마크 | 작업 목록을 따로 읽을 수 없고 겹침 때문에 390에서 조각을 펼쳐야 한다 |
|
||
|
||
**고른 카드: A** — 브리프의 재료가 파형(기존 캔버스), 설치 사진 한 장, 측정 수치 세 종류로 정확히 세 가지이고, R2(Rudnick)가 "종류가 다른 조각의 크기 차"로 콜라주를 만든다. 기존 design.md가 아카이브를 "비교 가능한 기록"으로 정의하므로 작업 목록은 별도 섹션으로 남긴다(C 기각). B는 사진 한 장을 띠로 잘라 설치 장면이 사라진다.
|
||
|
||
**표현 리스크**: 표제가 파형 조각 위를 지난다. 글자가 선과 겹쳐 읽힘이 떨어질 수 있어 `text-shadow`(바탕색 0.35rem)로 글자 테두리를 띄우고, 1440·768·390 캡처로 확인했다. 720px 이하에서는 겹침을 풀고 순서(표제 → 파형 → 사진 → 수치)를 준다.
|
||
|
||
**반사실 점검**: 첫 화면 고유 요소 = (1) 종이 콘 스피커 설치 사진(자산), (2) "잔향 시간을 먼저 재고 스피커 자리를 정합니다" 표제(업종 과업 문장), (3) 48ch·−62dB·220–940Hz 수치 조각(기존 작업 기록) → 3개. 세무사무소로 치환하면 파형 조각·듀오톤 사진·수치 조각이 모두 성립하지 않는다. 같은 업종 경쟁사로 바꾸면 사진과 수치는 그대로 성립하지만 표제는 이 연구소의 절차 문장이라 셋 다 성립하지는 않는다.
|
||
|
||
**수렴 점검(B-2, griddle-club 배정값과 — 같은 콜라주 패밀리)**: 섹션 흐름 다름(메뉴·매장·가맹 vs 기록·방식) · 히어로 글 묶음 다름(상단 바 행동 vs 라벨 없음·리드 없음·수치 목록) · 내비 다름(상단 바 + 하단 행동 바 vs 없음) · 푸터 다름(다열 vs 워드마크) · 이미지 처리 다름(누끼 겹침 vs 듀오톤) · 모션(스태거 등장 + 마퀴 vs 캔버스 + 마퀴 — 마퀴만 같음) → 같음 0~1/6. orbit-aerospace와는 표제 서체·본문 서체·모노·강조 hue를 전부 바꿨다(similarity 0.80 → 쌍 목록에서 제외됨).
|
||
|
||
## 토큰과 예산
|
||
|
||
값은 `styles/tokens.css`에만 있다.
|
||
|
||
- 서체: 표제 Black Han Sans 400(Google Fonts, OFL), 본문 Gothic A1 400·700(Google Fonts, OFL). `display=swap`, 구글 한글 슬라이스 서브셋. 숫자 정렬은 `tabular-nums`로, 모노 서체는 쓰지 않는다.
|
||
- 스케일: 표제 clamp(1.6rem, 0.9rem + 4.9vw, 5.75rem) — 320=30px·390=33.5px·1440=85px, 두 줄 유지. 워드마크 clamp(2.5rem, 14.2vw, 13.5rem) — 글자 폭 6.05em이 모든 폭에서 한 줄(실측 320: 274/280, 390: 335/350, 1440: 1235/1346).
|
||
- 색: surface #12100e(유지), ink #f4eee7(17.6:1), muted #bcb1a5(9.0:1), faint #93897c(5.5:1), accent #ef587e(바탕 위 5.6:1, 로즈 면 위 어두운 글자 5.8:1).
|
||
- radius 0. 간격 4px 격자. measure 36em.
|
||
- 예산(tokens §5 기본선): JS 1.6KB 인라인(히어로까지) / 폰트 실측 44~50KB(슬라이스) / LCP 후보 = 히어로 사진 25KB `fetchpriority="high"`, lazy 아님. INP는 입력이 앵커 두 개뿐이라 lab 측정 생략(미검증으로 둔다).
|
||
|
||
## 이펙트와 폴백
|
||
|
||
- 파형 캔버스 `#wave`: 보일 때만 rAF, 화면 밖에서 정지, 감소 모션은 정지 프레임 1장. 색은 `--accent-rgb` 토큰에서 읽는다. 캔버스가 없어도(JS 꺼짐) 조각은 빈 어두운 면으로 남아 레이아웃이 유지된다.
|
||
- 듀오톤: CSS만(`grayscale` + `mix-blend-mode: screen` 위에 로즈 `multiply`, `isolation: isolate`). 블렌드 미지원이면 회색조 사진이 남는다.
|
||
- 마퀴: CSS `transform` 애니메이션. 상자가 `overflow-x: auto`(스크롤바 숨김)라 키보드(ArrowRight 실측 80px 이동)와 드래그로 끝까지 닿는다. hover·focus에 일시 정지. 감소 모션에서는 애니메이션 없이 줄바꿈 목록이 되고 복제 항목은 숨긴다.
|
||
- 스크롤 리빌 없음. 등장 모션 없음.
|
||
|
||
## 하지 않기로 한 것
|
||
|
||
- 상단 바·sticky 헤더·backdrop-filter: 섹션 셋에 행동 하나뿐이라 내비 없음(layout §2-c).
|
||
- 사진 섹션: 같은 사진을 두 번 싣지 않는다(critique R6). 사진은 히어로 조각 한 번만.
|
||
- 모노 서체·앰버·Pretendard: orbit과의 수렴 축이었다.
|
||
- 가운뎃점 메타 문자열: 작업 조건은 칩 목록으로, 캡션은 쉼표로.
|
||
- 재질 필터: 배정 없음. 어두운 면과 로즈 면의 명도 차만으로 깊이를 낸다.
|
||
- 새 이미지: 만들지 않았다. og.png는 첫 화면 1200×630 캡처다.
|
||
|
||
## 검증
|
||
|
||
- 2026-10-06 — html-validate 0건 · stylelint 0건 · no-hanja PASS(3파일) · showcase-audit PASS 6/6(320·390·768·1440·1920·2560) · design-gate 충족 13 / 미검증 0 / 실패 0(꺼짐 3: static·visual·webkit) · instrument-showcases-e2e overtone 블록 PASS 2/2(desktop·mobile: normal 보임 3프레임 상이, 화면 밖 1프레임, reduced 1프레임) · similarity: overtone 쌍 경고 0.
|
||
- 대비 실측(어두운 배경, showcase-audit 조상 배경 방식): 본문 16px 9.0:1 · 보조 13px 5.5~9.0:1 · 연도 22px 로즈 5.8:1 · 수치 조각(로즈 면 위 #12100e) 5.8:1 · 마퀴 28~40px 5.5:1. 4.5 미만 0건.
|
||
- 키보드: Tab 순서 skip → 작업 네 건 보기 → 마퀴(스크롤 영역) → 맨 위로. 포커스 링 전부 보임.
|
||
- 확대: 720px 레이아웃(1440의 200%) h1 2줄·가로 스크롤 없음, 300px(390의 130%) h1 2줄·넘침 0.
|
||
- 캡처: 세션 스크래치 `ov/final-1440-fold.png`, `final-390-fold.png`, `final-1440-full.png`, `final-390-full.png`, `final-1440-gray.png`, `final-390-gray.png`, `final-1440-reduced-full.png`, `w-320.png`, `w-768.png`, `w-1200.png`.
|
||
|
||
**시각 루브릭(critique §2-1, 약한 축부터)**
|
||
|
||
| 축 | 점수 | 근거 | 다음 행동 |
|
||
|---|---|---|---|
|
||
| R6 이미지 | 1 | 사진 한 장뿐이라 "하나의 세계" 판정의 비교 대상이 없다. 1440·390 크롭 모두 콘 스피커 열이 안전 영역에 남음(`object-position: 18% 50%`) | 두 번째 사진이 생기면 같은 듀오톤으로 |
|
||
| R9 디테일 | 1 | 1440 캡처 200% 확대에서 칩·캡션 여백 정상, 숫자 열 tabular. 반례: 수치 조각의 단위(ch·dB·Hz) 기준선이 Black Han Sans 숫자와 광학적으로 1~2px 낮게 보임 | 단위에 `vertical-align` 미세 조정 |
|
||
| R10 모바일 | 1 | 390 첫 화면에 브랜드·표제·파형·사진 상단·행동 링크가 보임(final-390-fold.png). 수치 조각은 첫 화면 밖 | 수치 조각을 사진 위로 올리는 안은 겹침 규칙과 충돌해 보류 |
|
||
| R3 묶음·정렬 | 2 | 시작선 3개 실측: 20/47px(본문·표제·워드마크), 조각 안쪽 24px, 작업 목록 2열 시작선. 반례: 작업 조건 칩이 오른쪽 정렬이라 네 번째 시작선처럼 보일 수 있음 — 역할(조건)이 있어 유지 | — |
|
||
| R4 타이포 | 2 | 합성 이탤릭·볼드 없음(font-synthesis-style none, em 미사용). 자간 0. 마지막 줄 한 어절 0건(320~1920 h1·h2·h3 실측). 모노 없음. 반례: 찾지 못함 | — |
|
||
| R5 여백 리듬 | 2 | 섹션 간격 8.5rem(작업) / 6rem(방식) / 1.5rem(마퀴)로 정보 전환마다 다름. 의도된 극단: 워드마크 203px 대 본문 16px(12.7배). 반례: 작업 목록 행 간격이 균일해 네 건이 같은 무게로 읽힘 — 기록이므로 의도 | — |
|
||
| R7 카피 | 2 | 표제가 업종 절차 문장(잔향 시간·스피커 자리). 경쟁사 치환에서 "오버톤"은 없지만 절차 문장이라 깨지지 않는다는 반례 있음 — 다만 수치 조각(48ch·−62dB)이 이 연구소 기록이라 첫 화면 전체는 깨진다. §13-c grep: `를 통해|당신의|여정|가 아니라` 0건. 은유 0곳 | — |
|
||
| R1 첫인상 | 2 | final-1440-fold.png 3초 문장: "잔향을 재고 스피커를 놓는 음향 연구소, 작업 네 건과 측정 수치가 있다" — 컨셉 문장의 명사·동사(잔향·스피커·작업 네 건)와 일치. 390도 성립. 반례: 로즈 면이 먼저 눈에 들어와 표제보다 수치를 먼저 읽는 사람이 있을 수 있음 | — |
|
||
| R2 위계 | 2 | final-1440-gray.png 시선: 표제 → 로즈 수치 면 → 파형/사진. 의도(표제 → 수치 → 조각)와 같음. 크기·명도·면적 세 차이로 구분. 반례: 390 회색조에서 로즈 면이 표제보다 밝아 2순위가 1순위로 올라올 수 있음 | — |
|
||
| R8 구분성 | 2 | 고유 요소 3개(위 반사실). griddle-club 배정과 페이지 6축 중 같음 ≤1. 반례: 마퀴 모션은 griddle·muwol과 같음 | — |
|
||
|
||
합계 17/20, 0점 없음, R1·R8 2점. 통과.
|
||
|
||
## 피드백 기록 · 보존 목록
|
||
|
||
- 보존: 작업 네 건의 문장과 수치, 캔버스 계약(`#wave`), 가상 브랜드 고지 한 줄, 파형이 측정값이 아니라는 문장.
|
||
|
||
## 변경 기록
|
||
|
||
- 2026-10-06 — 재작업(배정표). 분할 히어로 → 비대칭 콜라주, 상단 바 → 내비 없음, 고지 띠 → 워드마크 푸터, Pretendard/모노/앰버 → Black Han Sans/Gothic A1/345° 로즈, 스크롤 리빌 삭제, 사진 섹션을 히어로 듀오톤 조각으로 통합, 마퀴를 실제 흐르는 스크롤 영역으로 복구, 가운뎃점 메타 문자열 제거, og.png 추가.
|
||
- 2026-10-02 — (이전) 카피 정리: "울림을 설계한다" → "공간 음향 설계", 작품명을 사실로("빈 객석", "역위상 파도", "유리잔 12개"), 영문 장식 라벨 제거, 합니다체 통일.
|
||
- 2026-10-02 — (이전) 레드팀 06: 히어로 문단과 파형 패널 34px 겹침 해소, h1 자간 -0.065em → -0.02em, "예시" 12회 → 1회.
|
||
- 2026-08-30 — (이전) 빈 어두운 면 대신 조건이 읽히는 설치 아카이브로 화면용 조판 추가.
|