designpaca/research/dogfood-overtone/01-references.md

1단계 — 레퍼런스 조사 (오버톤 사운드랩)

브리프 (2줄)

미디어아트 & 공간 음향 DSP 스튜디오 "오버톤 사운드랩" 사이트. 다크 #0E0D0B 배경에 앰버 1색(#E8A33D) 강조, 의도적으로 깨진 격자(anti-grid)와 비대칭 타이포, FFT 파형 레이어가 특징. 조사일 2026-08-21, WebFetch + CSS 원문 직접 다운로드로 실측. 접근 불가 사이트는 아래 "실패 기록"에 정직하게 남김.

---

R1 · 구조 — Carsten Nicolai https://carstennicolai.de

(같은 업종 확인: 사운드아트/미디어아트 아티스트 — 독일, noton 레이블 운영. 미디어아트 + 공간 음향 작업 = 오버톤과 동일 군)

가져올 축: 29년치 프로젝트를 연도 인덱스로 나열하는 아카이브 구조, 3분할 플로트 컬럼, 섹션 순서.

실측값 (cn.css / basic.css / navi.css 원문 다운로드로 확인)

• 컨테이너: --main-width: 1152px (주석 "1280 - 128"), 좌우 패딩 32px → 실효 폭 1088px, 중앙 정렬
• 컬럼 분할: #main-navi 15% 좌측 / #sub-navi 20% / #content 85% 우측 플로트(works 페이지는 content 65%). 합계 100%가 아닌 비대칭 분할
• 내비 항목 8개: news / biography / works / publications / links / contact / imprint / newsletter — 쿼리스트링 라우팅(?c=works&w=slug)
• 섹션 순서: news → works 아카이브(사이트의 핵심, 연도 역순 2024→1996, 연도 29개 / 작업 약 140건, 최다 2010년 13건) → publications → links → contact → imprint
• 색: 배경 #fff / 본문 #333 / 보조 #666 / 보더 #999·#ccc / 호버·셀렉션 #cf3 (형광 차트뤼스 1색 — 단일 액센트 원칙의 선례)
• 타입: Gotham(클라우드 웹폰트), 기본 13px / h1 18px / h3 16px / h4 15px / 저작권 10px → 최대:최소 = 1.8:1 (극도로 압축된 스케일), line-height 1.5em
• 이미지: publications 3열 그리드(100%/3, 갭 8px×2), 최대 512×512px, 1px outline(rgba(50,50,50,0.15)); 비디오는 padding-top 56.25% (16:9) 반응형 래퍼
• 모션: 최소화 — 링크 호버 배경 #cf3 + opacity 0.75, 햄버거 슬라이드 0.2s ease-in-out뿐. @keyframes show 페이드인 1개
• 브레이크포인트: 1024px(내비 햄버거 전환), 767px(2열, 패딩 12px)

보조 관찰 — Zimoun (tonelab.jp 요청이 zimoun.ch로 연결되어 관찰됨, 자세한 내막은 실패 기록): 홈페이지 전체가 약 135행의 텍스트 하이퍼링크 세로 인덱스 — "작품명, 도시, 국가, 연도" 행 패턴, 썸네일 없음, 페이지네이션 없음. 사운드아트 스튜디오의 극단적 텍스트 인덱스 사례.

변형 (오버톤 적용): 연도 역순 프로젝트 인덱스 구조는 그대로 가져오되, carstennicolai의 정돈된 15/20/65 분할 대신 항목마다 좌우 오프셋을 다르게 주는 anti-grid 인덱스로 깨기. #cf3 단일 액센트 원칙은 앰버 #E8A33D로 치환. 13px 기본 타입의 압축된 스케일 감각은 유지하되 타이틀만 비대칭 대형으로 대비.

---

R2 · 톤 — Obys Agency https://obys.agency

(업종 다름 확인: 디지털 디자인 에이전시 — 사운드/미디어아트 스튜디오가 아님. anti-grid/에디토리얼 파격 톤 축)

가져올 축: 엇갈린 2열 스태거, 모노크롬 + 단색 강조, 라인 마스크 텍스트 리빌, 마퀴 루프.

실측값 (HTML + 인라인 CSS 원문 다운로드로 확인)

• 색: --white:#fff; --black:#000 — 순수 2색 모노크롬. HTML 전체에서 발견된 hex는 #fff, #000, #ffffff 단 3개뿐
• 폰트: 자체 호스팅 커스텀 서체 ObysSans4.woff2 (font-display: swap, fallback serif)
• 비대칭 배치: 포트폴리오 번호가 두 인터리브 열로 분리(한 열 01, 03, 05… / 다른 열 02, 04, 06…) — 2열이 한 행(~50%)씩 어긋난 스태거. 두 번째 번호 시퀀스는 80까지 올라가는 스크롤 레일 마커
• 타입 크기 대비: 정적 마크업 기준 3티어 관찰(프로젝트 타이틀 대형 / 카테고리 라인 "Creative Direction, Web Design/Dev" / 2자리 인덱스 01–19 소형 카운터). px 수치는 JS 런타임 주입이라 정적 HTML로 실측 불가 — 정직하게 "측정 불가"로 기록
• 여백/헤어라인: --m-x:1rem 여백 변수, 구분선 border-bottom 1.34px (의도적 소수점 헤어라인), 프리로더 진행바 2.5px
• 모션: 라인 마스크 리빌(부모 overflow:hidden + 자식 transform:translateY(102%) 에서 0으로), 프로젝트 목록 2회 복제 = 심리스 무한 마퀴/캐러셀 루프, 프리로더 카운터 mix-blend-mode:difference, 푸터 실시간 시계("CET 00:00 AM")
• 에디토리얼 제스처: 푸터에 "Vertical, Horizontal, Grid" 문구 — 그리드 자체를 주제로 하는 자기지시적 모티프

변형 (오버톤 적용): 스태거 2열 + 마퀴를 프로젝트 인덱스에 도입하되 화이트 모노크롬을 #0E0D0B 다크로 반전, difference 블렌드는 앰버에 적용하면 시인성 붕괴 위험 → 앰버는 마퀴 호버 하이라이트에만. 1.34px 소수점 헤어라인, 2.5px 진행바 같은 미세 수치 감각 그대로 차용.

---

R3 · 디테일 — Canvas 2D 파형 그리기 (CSS-Tricks)

https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/

기법 (Canvas 2D, SVG 아님):

• 그리기: 터틀 그래픽 모델 — moveTo/lineTo/arc로 세그먼트당 "중앙선에서 세로 선 → 세그먼트 폭의 반원 호 → 중앙선 복귀". (i+1) % 2의 isEven 플래그로 막대가 중앙선 위/아래 교차, 호 방향도 반전. ctx.translate(0, canvas.offsetHeight/2 + padding)로 원점을 중앙 좌측으로 이동해 수학 단순화. lineWidth 1, 흰색, 패딩 20px
• 오디오 처리: AnalyserNode 실시간 FFT가 아니라 사후 피크 추출 — fetch() mp3 → arrayBuffer() → decodeAudioData() → getChannelData(0)(모노) → 70개 블록으로 나눠 블록별 절대값 평균 → 최대값의 역수로 정규화(최음이 1이 되게) → draw(normalize(filter(audioBuffer)))
• DPR: dpr = window.devicePixelRatio || 1, 백킹스토어 = 표시 크기 × dpr 후 ctx.scale(dpr, dpr)
• 전체 코드 100줄 미만

구현 제약 (반드시 반영):

• 전체 mp3 다운로드가 끝나야 그리기 시작 (프로그레시브 불가)
• 30분 팟캐스트 ≈ 1억 5,876만 샘플(44.1kHz) — 메인 스레드에서 수십만~수백만 연산, 수 초 소요 및 다른 연산 차단
• 리사이즈 핸들러 없음 (튜토리얼에 없음 — 직접 구현 필요)
• Safari는 webkitAudioContext 폴백 필요
• 저자 스스로 "매우 비실용적"이라 인정. 완화책: 서버 사전 피크 계산(npm audioform), IntersectionObserver/사용자 인터랙션 시점 지연, 정적 플레이스홀더(실제 Megaphone의 파형은 가짜이며 팟캐스트 전부 동일)

오버톤 적용: 실오디오 디코딩은 하지 않는다. 소규모 사전 계산 피크 JSON(행별 70~120 봉) 또는 결정적 절차적 유사-FFT(시드 노이즈 + 대역 마스크)를 캔버스로 그리고, 리사이즈 리드로우와 IntersectionObserver 지연만 직접 추가.

---

회색조 위계 (#0E0D0B 기준)

역할	값	용도
배경	#0E0D0B	전역
패널/레이어	#14120F	파형 레이어 뒤 패널
헤어라인/보더	#2A2723	1.34px 헤어라인, 인덱스 구분
3차 텍스트(메타)	#5C5750	연도, 좌표, 인덱스 번호
2차 텍스트	#9A948A	프로젝트 설명, 카테고리
본문 텍스트	#EDEAE4	웜 화이트 본문 (순백 #fff 회피)
강조 1색	#E8A33D	활성 파형, 호버, 수치 — 소수 지점만

R1(#333/#666 3단 텍스트 + #cf3 1색)과 R2(#000/#fff 이분법)의 절충: 다크에서 5단 회색 + 앰버 1색.

안 할 것 (3개)

1. 액센트 2색 이상·컬러 그라디언트 — carstennicolai(#cf3 단일)와 obys(모노크롬) 선례처럼 앰버 #E8A33D 1색으로 제한. 파형 레이어도 앰버 농도/투명도 변주만.
2. 균등 3열 카드 그리드·대칭 모듈 격자 — anti-grid 성격 위반. 허용: 항목별 오프셋이 다른 스태거 인덱스(carstennicolai 15/20/85 비대칭 + obys 열 스태거 참조).
3. 전 구간 실오디오 디코딩 파형 — mp3 전체 다운로드 후 메인 스레드 decodeAudioData는 수 초 블록(R3 제약). 소규모 사전 피크 데이터 또는 절차적 유사-FFT로 대체.

---

실패 기록

• tonelab.jp: 1회차 WebFetch 60초 타임아웃. 2회차(tonelab.jp/) 응답은 zimoun.ch 콘텐츠로 연결되어 반환됨(해당 도메인이 zimoun.ch를 가리키는 것으로 관찰). 구조 데이터는 R1 보조 관찰로만 사용.
• www.zimoun.net: ECONNREFUSED(217.70.184.38:443) 2회 → 버림.
• bureau-owen.com / www.bureau-owen.com: DNS ENOTFOUND 2회 → 버림.
• davidlangewis.com / www.davidlangewis.com: DNS ENOTFOUND 2회 → 버림.
• yugo.vin / yugo.vin/: DNS ENOTFOUND 2회 → 버림.
• 대체 후보 1곳 시도: obys.agency — 성공(R2로 채택).
• carstennicolai.de: 1회차 성공하나 본문만으로 색·폭 실측 불가 → CSS 4종(curl) 중 3종 다운로드 성공(color.css는 0바이트, 미사용으로 판단), cn/basic/navi.css에서 실측값 추출.
• obys.agency 실측 한계: 타입 px 크기·컨테이너 폭은 JS 런타임 주입이라 정적 HTML로 실측 불가 — 구조적 티어만 관찰하고 수치는 기재하지 않음(지어내지 않음).