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

feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Yun Chan 2026-09-12 18:16:33 +09:00
parent 69e5cc1efd
commit e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,22 +6,22 @@
<title>오버톤 사운드랩 · 공간 음향 연구소</title>
<meta
name="description"
content="침묵과 폭발의 주파수. 공간 음향과 생성 사운드스케이프를 만드는 연구소의 작업 아카이브."
content="공간 음향 작업을 기록하는 방식을 보여 주는 가상 아카이브입니다. 작업·장소·수치는 예시입니다."
/>
<meta property="og:title" content="오버톤 사운드랩" />
<meta
property="og:description"
content="공간 음향과 생성 사운드스케이프 — 작업 아카이브."
content="공간 음향 작업을 읽는 가상 아카이브 구성."
/>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#0E0D0B" />
<meta name="theme-color" content="#12100e" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
/>
<link rel="stylesheet" href="./styles/main.css?v=2" />
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<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"
@ -43,69 +43,66 @@
</header>
<main id="main">
<!--
히어로 — anti-grid: 글자가 파형 위로 삐져나온다.
캔버스는 절차적 유사-FFT(정현파 합). 재생 버튼 없이 스스로 흐르되
화면 밖에서는 그리지 않는다.
-->
<section class="hero" aria-labelledby="hero-h">
<canvas id="wave" class="wave" aria-hidden="true"></canvas>
<div class="wrap hero-inner">
<p class="hero-kicker reveal">
<span>공간 음향 · DSP · 서울</span>
<span class="mono">48kHz / 2ch</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 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>
</div>
</section>
<!--
작업 아카이브 — 스태거 2열. 카드가 아니라 '벽에 걸린 목록'.
같은 간격을 주지 않는다: 짝수 작품은 오른쪽으로, 홀수는 왼쪽으로 쏠린다.
-->
<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>
<ol class="archive">
<li class="work reveal">
<p class="work-year mono">2026</p>
<h3>공명하는 방 — DDP 설치</h3>
<h3>공명하는 방 — 전시장 설치 예시</h3>
<p>
종이 콘 스피커 48개가 천장에서 내려와 방 안의 소리를 0.8초 늦게
되돌려주는 설치. 관람객의 발소리가 악기가 된다.
종이 콘 스피커가 공간의 반사를 되돌려주는 설치 구성 예시입니다.
소리의 지연과 관람객 동선을 함께 기록하는 방식을 보여 줍니다.
</p>
<p class="work-meta mono">48ch · 공간지연 · 상설</p>
</li>
<li class="work work-b reveal" style="--delay: 60ms">
<p class="work-year mono">2025</p>
<h3>무의 스펙트럼</h3>
<h3>무의 스펙트럼 — 공연 구성 예시</h3>
<p>
아무 소리도 없는 방의 바닥 소음(−62dB)을 증폭해 들려주는
퍼포먼스. 침묵에는 평균 진폭이 있다.
조용한 공간의 바닥 소음을 다루는 공연 구성 예시입니다. 표기된 수치는
실제 측정값이나 공연 기록이 아닙니다.
</p>
<p class="work-meta mono">live · −62dB floor</p>
</li>
<li class="work reveal" style="--delay: 40ms">
<p class="work-year mono">2024</p>
<h3> 파도의 인버전 — 제주</h3>
<h3>파도의 인버전 — 해안 설치 예시</h3>
<p>
바람과 파도의 실측 데이터를 반대 위상으로 합성해 바다가 '삼키는'
소리를 만드는 해안 설치.
바람과 파도라는 소재를 반대 위상으로 해석하는 해안 설치 구성 예시입니다.
</p>
<p class="work-meta mono">field data · 6h loop</p>
</li>
<li class="work work-b reveal" style="--delay: 100ms">
<p class="work-year mono">2023</p>
<h3>유리 진동자</h3>
<h3>유리 진동자 — 연주 설비 예시</h3>
<p>
잔 12개에 각기 다른 공진 주파수를 실어 연주하는 설비. 연주자는
물의 높이를 조율한다.
유리잔의 높이와 공진을 조율하는 연주 설비 구성 예시입니다.
</p>
<p class="work-meta mono">glass · 220–940Hz</p>
</li>
@ -113,10 +110,6 @@
</div>
</section>
<!--
선언 — anti-grid의 정점: 문장 하나가 페이지 폭을 다 쓴다.
압축 스케일의 반대편. 이 페이지에서 가장 큰 텍스트 블록.
-->
<section id="manifesto" class="section manifesto" aria-labelledby="manifesto-h">
<div class="wrap">
<h2 id="manifesto-h" class="sr-only">선언</h2>
@ -125,23 +118,19 @@
방이 좋아지는 것뿐이다.
</p>
<p class="manifesto-note reveal" style="--delay: 100ms">
우리는 음파를 시각화로 번역하지 않습니다. 시각화는 소리의 크기만
흉내 낼 뿐, 소리의 '방의 크기'를 옮기지 못합니다. 대신 우리는 방을
조율합니다 — 재생 목록이 아니라 잔향시간을 설계합니다.
이 구성은 음파의 크기보다 공간의 반사와 잔향을 먼저 읽게 합니다.
시각화가 소리의 모든 경험을 대신할 수 없다는 점을, 작업 기록의 순서로
보여 줍니다.
</p>
</div>
</section>
<!-- 협업 마퀴 — 페이지에 하나뿐인 흐름 -->
<div class="marquee" role="group" aria-label="협업 단체">
<div class="marquee" role="group" aria-label="협업 장소 유형 예시">
<div class="marquee-track">
<span>국립현대미술관</span><span>DDP</span><span>서울시립교향악단</span><span>아르코예술극장</span><span>제주국제음악제</span><span>국립현대미술관</span><span>DDP</span><span>서울시립교향악단</span><span>아르코예술극장</span><span>제주국제음악제</span>
<span>공공 전시장</span><span>도심 복합문화공간</span><span>콘서트홀</span><span>소극장</span><span>해안 야외 공연장</span><span>공공 전시장</span><span>도심 복합문화공간</span><span>콘서트홀</span><span>소극장</span><span>해안 야외 공연장</span>
</div>
</div>
<!--
사진 — 설치 현장 한 컷. 다크룸의 앰버 빔.
-->
<section class="section photo" aria-label="설치 현장">
<figure class="wrap photo-fig reveal">
<img
@ -151,36 +140,30 @@
height="810"
loading="lazy"
/>
<figcaption class="mono">공명하는 방 · 설치 뷰 · 2026</figcaption>
<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>
<h2 id="contact-h">구성 안내</h2>
<p>
설치·공연·연구 협업 문의는 소리의 조건(공간 크기, 재생 시간, 청중 수)과
함께 보내주세요.
이 페이지는 공간 음향 작업을 설명하는 구성 예시입니다. 실제 설치·공연·연구
협업이나 연락을 접수하지 않습니다.
</p>
<a class="contact-mail" href="mailto:lab@overtone.kr">lab@overtone.kr</a>
<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">© 2019–2026 · OVERTONE SOUND LAB</p>
<p>오버톤 사운드랩 · 가상 공간 음향 아카이브</p>
<p class="mono foot-meta">실제 협업 단체·장소·연락처를 제공하지 않습니다.</p>
</div>
</footer>
<script>
/*
절차적 유사-FFT — 정현파 5개를 더하고 위상을 흐르게 한다.
오디오 파일도 디코딩도 없다(연구조사 R3의 교훈: 전체 파일 디코드는
수 초 메인스레드를 막는다). 화면 밖·reduced-motion 에서는 정지 프레임.
*/
const canvas = document.getElementById("wave");
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
const ctx = canvas.getContext("2d");
@ -197,7 +180,6 @@
function draw(t) {
ctx.clearRect(0, 0, w, h);
// 세 겹의 파형 — 시간차를 두고 겹친다
for (let layer = 0; layer < 3; layer++) {
ctx.beginPath();
const amp = (h * 0.16) * (1 - layer * 0.28);
@ -205,7 +187,7 @@
const speed = 0.00042 * (1 + layer * 0.7);
for (let x = 0; x <= w; x += 3) {
const p = x / w;
const env = Math.exp(-Math.pow((p - 0.5) * 2.4, 2)); // 중앙 강조
const env = Math.exp(-Math.pow((p - 0.5) * 2.4, 2));
const y =
yMid +
Math.sin(p * 21 + t * speed + layer * 2.1) * amp * env * Math.sin(p * Math.PI) +