designpaca/apps/site/public/work/overtone-sound/design.md

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 — 런던 사운드 디자인 스튜디오	바탕 #000, 상단 내비 없음(하단 pill 도크만). h1 54.7px/300 6줄. 푸터: 20px 열 행(링크·주소·메일) 위 1px 괘선, 그 아래 전폭 워드마크 1400×270px가 화면 하단에 붙음	내비 없음 + 워드마크 한 줄 푸터의 구조. 우리는 도크도 두지 않고 브랜드 표기 + 앵커 하나만 둔다
R2 톤	David Rudnick — 디자이너 포트폴리오	바탕 #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.59.0:1 · 연도 22px 로즈 5.8:1 · 수치 조각(로즈 면 위 #12100e) 5.8:1 · 마퀴 2840px 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: `를 통해	당신의
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 — (이전) 빈 어두운 면 대신 조건이 읽히는 설치 아카이브로 화면용 조판 추가.