yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
Details

Browse source 
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.
This commit is contained in:
Yun Chan 2026-10-06 16:55:50 +09:00
parent 88c11682b1
commit 8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
Download patch file Download diff file Expand all files Collapse all files

123
apps/site/public/work/overtone-sound/design.md
View file

@ -1,27 +1,118 @@
# Overtone Sound Lab 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단계 기록 — 이 문서
## 브리프
- 무엇을: 공간 음향 작업 기록의 가상 아카이브.
- 누구에게: 작업명·연도·공간/기술 메타를 읽으면서 음향의 분위기를 느끼려는 방문자.
- 제약: 앰버, 큰 타입, 아카이브의 의도적 엇갈림, 캔버스 outside-pause와 reduced-motion을 유지한다.
- 무엇을: 공간 음향 연구소(가상)의 작업 아카이브 한 장. 작업 네 건의 연도·채널 수·측정 조건을 기록한다.
- 누구에게: 전시·공연 기획자가 "이 연구소가 무엇을 하는 곳인지"를 첫 화면에서 읽고 작업 네 건을 확인한다.
- 제약(재작업 배정표 2026-10-06): 비대칭 콜라주 히어로(파형·사진 조각, 두 줄 문장 표제) · 내비 없음 · 큰 워드마크 한 줄 푸터 · Black Han Sans / Gothic A1 · 어두운 배경 #12100e 유지 · 345° 로즈 강조 · radius 0 · 캔버스 + 마퀴 유지, 스크롤 리빌 삭제 · 재질 없음 · 듀오톤 이미지.
- 보존: 상호, 작업 네 건의 사실(48ch, −62dB, 6시간, 220–940Hz, 2023–2026), `installation.webp`, `#wave` 캔버스 계약(보일 때만 그리고 화면 밖·감소 모션에서 정지), 가상 브랜드 고지.
- 기본 언어: 한국어, 합니다체.
## 결정표
## 미확정
| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
- 없음. 사실·수치는 전부 기존 파일에서 가져왔고 새 값을 만들지 않았다.
## 레퍼런스
| 슬롯 | 출처 | 실측(브라우저 1440) | 가져온 것 |
|---|---|---|---|
| 구도 | 기준 화면에서 파형이 제목·설명 뒤로 지나가 텍스트가 불안정했다. | 왼쪽 텍스트 표면과 오른쪽 파형 표면을 독립 그리드로 둔다. `--container`, `--space-7`, `--line`. | 파형 표면이 모바일에서 제목보다 먼저 오거나 별도 표면의 의미를 잃으면 순서를 되돌린다. |
| 타입 | 제목은 감각적 표면, 아카이브는 비교 가능한 기록이다. | 제목 `--step-3`, 작업 제목 `--step-2`, 연도·메타 `--step--1`을 유지하고 각 작업에서 같은 열에 정렬한다. | 200%에서 작업 제목·연도·메타의 관계가 깨지면 스태거를 제거한다. |
| 색 | 앰버는 파형과 연도만 잇는 신호다. | `--accent`, `--accent-dim`, `--surface-raised`를 파형/연도/파형 표면에만 쓴다. | 앰버가 본문과 경쟁하거나 가상 표기를 약화하면 면적을 줄인다. |
| 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 — 열렸으나 상단 바 내비라 슬롯에 맞지 않음 | — |
## 근거와 경계
## 방향
[art-direction.md](../../../../../packages/skill/references/art-direction.md)의 Hofmann 관련 초점·여백 관찰은 제목과 파형을 서로 다른 표면으로 나누는 데만 적용했다. [typography.md](../../../../../packages/skill/references/typography.md)의 Ruder 관련 실제 한글·숫자 proof는 기록 열의 정렬에만 적용했다. [visual-design-lineage.md](../../../../../packages/skill/references/visual-design-lineage.md)의 Albers 관련 맥락색 관찰은 앰버와 갈색 바탕의 대비에만 적용했다. 이는 청취 경험의 성능 법칙이 아니다.
**지문**: 비대칭 콜라주(파형 조각 8/12폭 · 듀오톤 사진 6/12폭 · 로즈 수치 조각 5/12폭, 표제가 그 위를 지남) · Black Han Sans / Gothic A1 · 어두움 #12100e · 강조 345° 로즈(#ef587e) · radius 0 · 흐름 [콜라주 히어로 → 작업 네 건 목록 → 작업 방식 한 문장 → 마퀴 → 워드마크 푸터] · 내비 없음(브랜드 + 앵커 하나) · 큰 워드마크 한 줄 푸터 · 듀오톤(흑 → 로즈) · 캔버스 파형 + 마퀴, 리빌 없음.
[trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md)에 따라 가상 아카이브와 작업·장소·수치 예시 표기를 기존 가까운 설명에 유지한다.
**한 문장 컨셉**: 전시 기획자가 파형·설치 사진·측정 수치 조각이 겹친 첫 화면에서 "잔향을 재고 스피커를 놓는 곳"임을 읽고 작업 네 건을 확인한다.
## 2026-09-12 현재 검증 기록
**프리셋**: anti-grid 지배(격자 위 조각 겹침). 보조 없음.
- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
**방향 카드(위임 — 배정된 콜라주 패밀리 안에서 구조를 달리했다)**
| 카드 | 한 줄 | 첫 화면 | 흐름 | 포기하는 것 |
|---|---|---|---|---|
| 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 — (이전) 빈 어두운 면 대신 조건이 읽히는 설치 아카이브로 화면용 조판 추가.

273
apps/site/public/work/overtone-sound/index.html
View file

@ -3,170 +3,197 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>오버톤 사운드랩 · 공간 음향 연구소</title>
<title>오버톤 사운드랩 — 공간 음향 설계</title>
<meta
name="description"
content="공간 음향 작업을 기록하는 방식을 보여 주는 가상 아카이브입니다. 작업·장소·수치는 예시입니다."
content="전시장과 소극장의 반사와 잔향 시간을 먼저 재고 스피커 자리를 정하는 가상 공간 음향 연구소. 2023년부터 2026년까지 작업 네 건의 기록."
/>
<meta property="og:title" content="오버톤 사운드랩" />
<meta property="og:title" content="오버톤 사운드랩 — 공간 음향 설계" />
<meta
property="og:description"
content="공간 음향 작업을 읽는 가상 아카이브 구성."
content="잔향 시간을 먼저 재고 스피커 자리를 정합니다. 작업 네 건의 채널 수와 측정 조건을 적었습니다."
/>
<meta property="og:type" content="website" />
<meta property="og:image" content="./og.png" />
<meta property="og:image:alt" content="어두운 바탕 위에 로즈색 파형 조각, 듀오톤 설치 사진, 수치 조각이 겹친 오버톤 사운드랩 첫 화면" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="theme-color" content="#12100e" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gothic+A1:wght@400;700&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<link rel="stylesheet" href="./styles/tokens.css" />
<link rel="stylesheet" href="./styles/main.css" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230E0D0B'/%3E%3Cpath d='M4 16h4l2-7 3 14 3-10 2 5h10' fill='none' stroke='%23E8A33D' stroke-width='1.8'/%3E%3C/svg%3E"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%2312100E'/%3E%3Cpath d='M4 16h4l2-7 3 14 3-10 2 5h10' fill='none' stroke='%23EF587E' stroke-width='1.8'/%3E%3C/svg%3E"
/>
</head>
<body>
<a class="skip" href="#main">본문으로 건너뛰기</a>
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#main">오버톤 사운드랩</a>
<nav class="nav" aria-label="섹션">
<a href="#works">작업</a>
<a href="#manifesto">선언</a>
<a href="#contact">연락</a>
</nav>
</div>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-h">
<div class="wrap hero-inner">
<div class="hero-copy">
<p class="hero-kicker reveal">
<span>가상 공간 음향 아카이브</span>
<span class="mono">작업 기록 형식 예시</span>
</p>
<h1 id="hero-h" class="reveal" style="--delay: 80ms">
침묵과 폭발의<br /><em>주파수</em>
</h1>
<p class="hero-statement reveal" style="--delay: 160ms">
오버톤은 소리가 공간에서 어떻게 달라지는지를 기록하는 방식을 보여 줍니다.
곡선과 아래 작업·장소·수치는 화면 구성을 위한 예시이며 실제 작업이나
협업 이력을 뜻하지 않습니다.
</p>
</div>
<div class="wave-surface">
<canvas id="wave" class="wave" aria-hidden="true"></canvas>
<div class="wrap hero-head">
<p class="brand">오버톤 사운드랩</p>
<a class="hero-link" href="#works">작업 네 건 보기</a>
</div>
<div class="wrap collage">
<h1 id="hero-h" class="hero-h">
잔향 시간을 먼저 재고<br />
스피커 자리를 정합니다
</h1>
<div class="piece piece-wave" aria-hidden="true">
<canvas id="wave" class="wave"></canvas>
<p class="piece-tag">잔향 파형 그래픽</p>
</div>
<figure class="piece piece-photo">
<div class="duotone">
<img
src="./assets/installation.webp"
alt="종이 콘 스피커가 줄지어 놓인 어두운 전시실, 그 위를 가로지르는 조명 한 줄"
width="1440"
height="810"
fetchpriority="high"
decoding="async"
/>
</div>
<figcaption class="piece-tag">공명하는 방, 전시장 설치 연출</figcaption>
</figure>
<dl class="piece piece-figures">
<div class="figure">
<dt>작업</dt>
<dd><span class="num">4</span>건, 2023–2026</dd>
</div>
<div class="figure">
<dt>최대 채널</dt>
<dd><span class="num">48</span>ch</dd>
</div>
<div class="figure">
<dt>바닥 소음</dt>
<dd><span class="num">−62</span>dB</dd>
</div>
<div class="figure">
<dt>조율 범위</dt>
<dd><span class="num">220–940</span>Hz</dd>
</div>
</dl>
</div>
</section>
<section id="works" class="section works" aria-labelledby="works-h">
<div class="wrap">
<h2 id="works-h" class="works-h reveal">작업</h2>
<p class="muted reveal" style="--delay: 30ms">
아래 제목, 연도, 공간, 기술 조건은 음향 작업 아카이브의 표현 방식을 설명하는 예시입니다.
</p>
<h2 id="works-h" class="section-h">2023년부터 2026년까지 작업 네 건을 했습니다</h2>
<p class="section-lead">작업마다 채널 수와 측정 조건을 적었습니다. 최근 작업이 먼저 옵니다.</p>
<ol class="archive">
<li class="work reveal">
<p class="work-year mono">2026</p>
<h3>공명하는 방 — 전시장 설치 예시</h3>
<p>
종이 콘 스피커가 공간의 반사를 되돌려주는 설치 구성 예시입니다.
소리의 지연과 관람객 동선을 함께 기록하는 방식을 보여 줍니다.
</p>
<p class="work-meta mono">48ch · 공간지연 · 상설</p>
<li class="work">
<p class="work-year">2026</p>
<div class="work-body">
<h3>공명하는 방 — 전시장 설치</h3>
<p>
전시실에 종이 콘 스피커 48개를 설치했습니다. 관람객이 걷는 속도에 맞춰 채널마다 지연
시간을 다르게 설정했습니다.
</p>
</div>
<ul class="work-meta">
<li>48채널</li>
<li>공간 지연</li>
<li>상설 설치</li>
</ul>
</li>
<li class="work work-b reveal" style="--delay: 60ms">
<p class="work-year mono">2025</p>
<h3>무의 스펙트럼 — 공연 구성 예시</h3>
<p>
조용한 공간의 바닥 소음을 다루는 공연 구성 예시입니다. 표기된 수치는
실제 측정값이나 공연 기록이 아닙니다.
</p>
<p class="work-meta mono">live · −62dB floor</p>
<li class="work">
<p class="work-year">2025</p>
<div class="work-body">
<h3>빈 객석 — 공연</h3>
<p>
빈 객석의 바닥 소음을 소리 재료로 쓴 공연입니다. 공조기를 끈 뒤 남은 −62dB 소음을
증폭해 첫 악장에 썼습니다.
</p>
</div>
<ul class="work-meta">
<li>공연</li>
<li>바닥 소음 −62dB</li>
</ul>
</li>
<li class="work reveal" style="--delay: 40ms">
<p class="work-year mono">2024</p>
<h3>파도의 인버전 — 해안 설치 예시</h3>
<p>
바람과 파도라는 소재를 반대 위상으로 해석하는 해안 설치 구성 예시입니다.
</p>
<p class="work-meta mono">field data · 6h loop</p>
<li class="work">
<p class="work-year">2024</p>
<div class="work-body">
<h3>역위상 파도 — 해안 설치</h3>
<p>
6시간 녹음한 파도 소리를 역위상으로 재생해, 해안 데크 위에서만 파도 소리가 줄어들게
했습니다.
</p>
</div>
<ul class="work-meta">
<li>현장 녹음</li>
<li>6시간 반복</li>
</ul>
</li>
<li class="work work-b reveal" style="--delay: 100ms">
<p class="work-year mono">2023</p>
<h3>유리 진동자 — 연주 설비 예시</h3>
<p>
유리잔의 높이와 공진을 조율하는 연주 설비 구성 예시입니다.
</p>
<p class="work-meta mono">glass · 220–940Hz</p>
<li class="work">
<p class="work-year">2023</p>
<div class="work-body">
<h3>유리잔 12개 — 연주 설비</h3>
<p>물 높이를 달리한 유리잔 12개를 220Hz부터 940Hz까지 조율한 연주 설비입니다.</p>
</div>
<ul class="work-meta">
<li>유리잔 12개</li>
<li>220–940Hz</li>
</ul>
</li>
</ol>
</div>
</section>
<section id="manifesto" class="section manifesto" aria-labelledby="manifesto-h">
<div class="wrap">
<h2 id="manifesto-h" class="sr-only">선언</h2>
<p class="manifesto-line reveal">
좋은 음향은 들리지 않는다.<br />
방이 좋아지는 것뿐이다.
</p>
<p class="manifesto-note reveal" style="--delay: 100ms">
이 구성은 음파의 크기보다 공간의 반사와 잔향을 먼저 읽게 합니다.
시각화가 소리의 모든 경험을 대신할 수 없다는 점을, 작업 기록의 순서로
보여 줍니다.
<section id="method" class="section method" aria-labelledby="method-h">
<div class="wrap method-grid">
<h2 id="method-h" class="method-h">음량보다 잔향&nbsp;시간을 먼저&nbsp;잽니다.</h2>
<p class="method-note">
잔향이 길면 같은 음량에서도 말소리가 뭉개집니다. 그래서 모든 설계는 공간의 잔향 시간(RT60)
측정에서 시작하고, 그다음에 스피커 배치와 흡음재를 정합니다. 첫 화면의 파형은 분위기를
보여 주는 그래픽이며 측정값이 아닙니다.
</p>
</div>
</section>
<div class="marquee" role="group" aria-label="협업 장소 유형 예시">
<div class="marquee-track">
<span>공공 전시장</span><span>도심 복합문화공간</span><span>콘서트홀</span><span>소극장</span><span>해안 야외 공연장</span><span>공공 전시장</span><span>도심 복합문화공간</span><span>콘서트홀</span><span>소극장</span><span>해안 야외 공연장</span>
</div>
<div class="marquee" role="group" aria-label="작업한 공간 유형" tabindex="0">
<ul class="marquee-track">
<li>공공 전시장</li>
<li>도심 복합문화공간</li>
<li>콘서트홀</li>
<li>소극장</li>
<li>해안 야외 공연장</li>
<li aria-hidden="true">공공 전시장</li>
<li aria-hidden="true">도심 복합문화공간</li>
<li aria-hidden="true">콘서트홀</li>
<li aria-hidden="true">소극장</li>
<li aria-hidden="true">해안 야외 공연장</li>
</ul>
</div>
<section class="section photo" aria-label="설치 현장">
<figure class="wrap photo-fig reveal">
<img
src="./assets/installation.webp"
alt="어두운 전시실에 종이콘 스피커들이 늘어서 있고 앰버색 빛줄기가 한 줄 지나간다"
width="1440"
height="810"
loading="lazy"
/>
<figcaption class="mono">공명하는 방 · 설치 연출 이미지</figcaption>
</figure>
</section>
<section id="contact" class="section contact" aria-labelledby="contact-h">
<div class="wrap contact-grid">
<h2 id="contact-h">구성 안내</h2>
<p>
이 페이지는 공간 음향 작업을 설명하는 구성 예시입니다. 실제 설치·공연·연구
협업이나 연락을 접수하지 않습니다.
</p>
<a class="contact-mail" href="#main">작업 구성 다시 보기</a>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-inner">
<p>오버톤 사운드랩 · 가상 공간 음향 아카이브</p>
<p class="mono foot-meta">실제 협업 단체·장소·연락처를 제공하지 않습니다.</p>
<div class="wrap foot-row">
<p class="foot-note">가상 브랜드 쇼케이스입니다. 작업, 장소, 수치는 모두 예시이고 의뢰를 받지 않습니다.</p>
<a class="foot-top" href="#main">맨 위로</a>
</div>
<p class="foot-mark" aria-hidden="true">오버톤 사운드랩</p>
</footer>
<script>
// 파형 캔버스 — 화면에 보일 때만 그리고, 화면 밖과 감소 모션에서는 정지 프레임 하나만 남긴다.
const canvas = document.getElementById("wave");
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
const ctx = canvas.getContext("2d");
const accent = getComputedStyle(document.documentElement).getPropertyValue("--accent-rgb").trim() || "239 88 126";
const rgba = (a) => `rgb(${accent} / ${a})`;
let w, h, dpr, running = false;
function fit() {
@ -182,8 +209,8 @@
ctx.clearRect(0, 0, w, h);
for (let layer = 0; layer < 3; layer++) {
ctx.beginPath();
const amp = (h * 0.16) * (1 - layer * 0.28);
const yMid = h * (0.52 + layer * 0.12);
const amp = h * 0.2 * (1 - layer * 0.28);
const yMid = h * (0.48 + layer * 0.1);
const speed = 0.00042 * (1 + layer * 0.7);
for (let x = 0; x <= w; x += 3) {
const p = x / w;
@ -194,8 +221,8 @@
Math.sin(p * 53 - t * speed * 1.7) * amp * 0.25 * env;
x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
}
ctx.strokeStyle = layer === 0 ? "rgba(232,163,61,0.85)" : `rgba(232,163,61,${0.32 - layer * 0.1})`;
ctx.lineWidth = layer === 0 ? 1.4 : 1;
ctx.strokeStyle = layer === 0 ? rgba(0.9) : rgba(0.34 - layer * 0.1);
ctx.lineWidth = layer === 0 ? 1.6 : 1;
ctx.stroke();
}
}
@ -207,7 +234,7 @@
}
fit();
addEventListener("resize", fit, { passive: true });
addEventListener("resize", () => { fit(); if (!running) draw(0); }, { passive: true });
draw(0);
if (!reduced) {
@ -222,18 +249,6 @@
});
io.observe(canvas);
}
const io2 = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (!e.isIntersecting) continue;
e.target.classList.add("is-in");
io2.unobserve(e.target);
}
},
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
);
for (const el of document.querySelectorAll(".reveal")) io2.observe(el);
</script>
</body>
</html>

BIN
apps/site/public/work/overtone-sound/og.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 127 KiB

917
apps/site/public/work/overtone-sound/styles/main.css
View file

File diff suppressed because it is too large Load diff

74
apps/site/public/work/overtone-sound/styles/tokens.css
View file

@ -1,39 +1,55 @@
/* ==========================================================================
오버톤 사운드랩 — 디자인 토큰
프리셋: anti-grid
컨셉 한 문장: 어두운 스튜디오 바닥에 흩뿌린 목록 — 격자는 일부러 비틀었다.
레퍼런스: R1 carstennicolai.de(실측: 1152px 컨테이너, 비대칭 15/20/85 열,
압축 타입 스케일 1.8:1, 아카이브 역연도, 형광 1색 → 앰버로 치환)
R2 obys.agency(스태거 2열, 라인 마스크 리빌, 마퀴 1회)
R3 절차적 유사-FFT 캔버스(오디오 디코드 회피)
하지 않은 것: 글래스 도크, 3열 카드, 커서 추적 이펙트, 대문자 타이틀.
이유: 파열은 하나(스태거+파형)로 족하다.
오버톤 사운드랩 — 디자인 토큰 (2026-10-06 재작업)
컨셉 한 문장: 전시 기획자가 파형·설치 사진·측정 수치 조각이 겹친 첫 화면에서
"이 연구소는 잔향을 재고 스피커를 놓는 곳"임을 읽고 작업 네 건을 확인한다.
레퍼런스: R1 boxoftoysaudio.com(실측 1440: 상단 내비 없음, 하단 도크만. 푸터 워드마크
1400×270px 전폭, 그 위 20px 열 행 + 1px 괘선) — 내비 없음·워드마크 푸터
R2 davidrudnick.org(실측 1440: 검정 바탕, 452×452 큰 조각 2 + 287px 폭 작은 조각
여러 장이 격자에서 벗어나 크기 차를 두고 놓임) — 어두운 콜라주의 조각 크기 차
R3 carstennicolai.de(기존: 아카이브 역연도 목록) — 작업 목록의 순서
하지 않은 것: 스크롤 리빌, 모노 서체, 앰버, 상단 바, 재질 필터, 사진 반복.
========================================================================== */
:root {
/* 타입 — R1의 압축 스케일. 최대(40px) ÷ 본문(16px) = 2.5배(선언 문장 제외) */
/* 서체 — 표제 Black Han Sans(OFL, Google Fonts), 본문 Gothic A1(OFL, Google Fonts).
숫자는 모노 대신 본문 서체 + tabular-nums 로 정렬한다(typography §6-5). */
--font-display: "Black Han Sans", "Gothic A1", sans-serif;
--font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
--weight-body: 400;
--weight-strong: 700;
/* 타입 스케일 — 본문 16px, 보조 13px 하한(한글 조판 정본) */
--step--1: 0.8125rem;
--step-0: 1rem;
--step-1: 1.125rem;
--step-2: 1.375rem;
--step-3: clamp(1.875rem, 1.3rem + 2.8vw, 2.5rem); /* 40px 히어로 */
--step-manifesto: clamp(1.875rem, 1.2rem + 4.4vw, 3.75rem); /* 선언 — 이 페이지의 가장 큰 목소리 */
--step-3: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); /* 섹션 제목 */
--step-hero: clamp(1.6rem, 0.9rem + 4.9vw, 5.75rem); /* 두 줄 문장 표제: 320=26px, 390=33px, 1440=85px */
--step-manifesto: clamp(2.25rem, 1.25rem + 4.4vw, 5.5rem); /* 작업 방식 한 문장 */
--step-wordmark: clamp(2.5rem, 14.2vw, 13.5rem); /* 푸터 워드마크(폭 6.05em): 390=55px, 1440=204px, 1920 이상 216px */
--step-figure: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); /* 콜라주 수치 조각 */
--leading-tight: 1.25;
--leading-normal: 1.75;
--font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
--leading-tight: 1.15;
--leading-heading: 1.3;
--leading-body: 1.7;
--measure: 36em;
/* 색 — 어두운 스튜디오 바닥(#12100e 유지)과 345° 로즈 신호 */
--surface: #12100e;
--surface-raised: #1d1915;
--ink: #f1ebe1;
--ink-muted: #b5aa9a;
--ink-faint: #91887c;
--line: #39322b;
--accent: #efad4b; /* 앰버 — 선과 텍스트로만 */
--accent-dim: rgba(239, 173, 75, 0.38);
--surface-rgb: 18 16 14;
--surface-raised: #1c1816;
--surface-sunken: #0c0b0a;
--ink: #f4eee7; /* 대비 17.6:1 */
--ink-muted: #bcb1a5; /* 대비 9.0:1 */
--ink-faint: #93897c; /* 대비 5.5:1 — 13px 보조 글자의 하한 */
--line: #3a332d;
--line-strong: #55493f;
--accent: #ef587e; /* 345° 로즈(LCH 10°). #12100e 위 5.8:1 — 연도·선·파형·수치 면 */
--accent-rgb: 239 88 126;
--accent-deep: #8f2a47; /* 듀오톤 중간 톤 */
--accent-on: #12100e; /* 로즈 면 위 글자 */
/* 간격 */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 1rem;
@ -43,12 +59,14 @@
--space-7: 6rem;
--space-8: clamp(4.5rem, 3rem + 6vw, 8.5rem);
--radius: 0; /* 스튜디오 바닥에는 모서리가 없다 */
--radius: 0; /* 조각은 종이처럼 각지다 — 모서리 없음 */
--border: 1px;
--container: 78rem;
--pad-inline: clamp(1.25rem, 0.75rem + 3vw, 5.5rem);
--container: 84rem;
--pad-inline: clamp(1.25rem, 0.75rem + 2.4vw, 3.5rem);
/* 모션 — 캔버스(요청 애니메이션)와 마퀴만. 등장 리빌은 없다 */
--dur-quick: 160ms;
--dur-normal: 460ms;
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
--marquee-duration: 48s;
}