# AI 꾸러미 — 가림 저역 필터 (벽 뒤 소리) — Sound occlusion (low-pass filtering)
> 벽 뒤에 있는 소리를 저역 필터에 통과시켜 고음을 자르고 크기를 줄여, 같은 가락이 벽 너머에서 먹먹하게 들리게 한다.  
> 견본: https://ai-techstudio.web.app/#t/i158

이 문서를 코드 도우미(Claude Code · Cursor · ChatGPT 등)에 그대로 주면 돼요. 「## 주문서」 가 할 일, 나머지는 참고 자료예요.

## 주문서

### 만들어 줘: 가림 저역 필터 (벽 뒤 소리) — Sound occlusion (low-pass filtering)

#### 1. 목표
벽 · 문 너머에서 나는 소리에 가림 효과를 넣어 줘 — 벽 뒤 소리는 저역 필터로 고음을 자르고 작게, 벽 두께로 정도를 조절하게. 느낌은 자연스러운 먹먹함.

#### 2. 핵심 기술 용어
- **Sound occlusion (low-pass filtering)** — 가림 — 벽 뒤 소리는 고음이 먼저 사라짐
- **BiquadFilterNode lowpass** — 저역 통과 필터 — 높은 소리 자르기
- **Occlusion amount (wall thickness)** — 벽 두께 = 자르는 정도 · 줄이는 정도

#### 3. 환경
- 플랫폼: Web Audio API (TypeScript) — 소리 파일 없이 OscillatorNode · GainNode · BiquadFilterNode 로 합성
- 화면: 브라우저 — PC · 폰 모두 (폰은 첫 터치 뒤에만 소리가 난다)

#### 4. 조건
- 가림은 필터 + 크기 둘 다 — 필터만 쓰면 너무 크게 들린다
- 벽 두께 0 ~ 1 을 차단 진동수 1500 → 350Hz, 크기 0.7 → 0.4 로 섞는다
- 가림이 켜지고 꺼질 때는 차단 진동수를 setTargetAtTime 으로 미끄러지게 (문이 열리는 순간 등)
- 고음이 있는 소리(톱니 가락 + 찰랑)로 시험해야 차이가 들린다

#### 5. 완성 기준 (이게 보이면 성공)
- 「벽 없이 → 벽 뒤 비교」를 누르면 같은 가락이 처음엔 또렷하다가 두 번째엔 먹먹하고 작게 들린다
- 벽 두께를 올리면 더 먹먹해진다
- 소리 그림(스펙트로그램)에서 벽 뒤일 때 위쪽(고음)이 어두워진다

#### 6. 진행 방식
- 핵심 코드 위주로, 설명은 짧게. 내 프로젝트에 끼워 넣기 쉬운 함수 · 클래스로 나눠 줘.
- 처음 화면에 바로 결과가 보이게, 그리고 켬/끔(또는 전/후) 비교를 할 수 있게 만들어 줘.
- 그림 · 소리 · 모델 파일이 필요하면 코드로 만든 임시 대체물로 먼저 돌아가게 하고, 진짜 파일로 바꿀 자리를 표시해 줘.
- 마지막에 「확인 방법」(무엇을 보면 성공인지)과 「조절할 값」 목록을 짧게 정리해 줘.
- 답변과 코드 주석은 한국어로 해 줘.

## 원리
- 벽은 높은 소리를 더 많이 막는다 — 그래서 벽 뒤 소리는 「먹먹하고 작다」.
- 소리를 저역 필터(Q 0.8)에 통과시키고, 차단 진동수 = 1500Hz(얇은 벽) ~ 350Hz(두꺼운 벽) 를 두께로 섞는다.
- 크기도 함께 0.7(얇은) ~ 0.4(두꺼운) 배로 줄인다.
- 벽이 없으면 필터 없이 바로 보낸다 — 「벽 없이 → 벽 뒤」를 이어 들려주면 차이가 확실하다.

## 핵심 코드 — 벽 두께만큼 먹먹하게
(발췌: demos/demosSfx.ts wallNode · recOcclude 를 정리)
```ts
const lerp = (a: number, b: number, k: number) => a + (b - a) * k;

/** 벽 뒤 소리는 이 노드에 이어 보낸다. thick: 0 얇은 벽 ~ 1 두꺼운 벽 */
function wallNode(c: AudioContext, out: AudioNode, wall: boolean, thick: number): AudioNode {
  if (!wall) return out;                                   // 벽 없으면 바로
  const lp = c.createBiquadFilter();
  lp.type = 'lowpass';
  lp.frequency.value = lerp(1500, 350, thick);             // 고음 자르기
  lp.Q.value = 0.8;
  const g = c.createGain();
  g.gain.value = lerp(0.7, 0.4, thick);                    // 크기도 줄이기
  lp.connect(g).connect(out);
  return lp;
}
// 쓰기: 가락(톱니 + 찰랑)을 wallNode 로 보낸다
// const dest = wallNode(ctx, ctx.destination, behindWall, 0.5);
// phrase(ctx, dest, ctx.currentTime + 0.05);
// 문이 열리면: lp.frequency.setTargetAtTime(18000, ctx.currentTime, 0.1) 로 미끄러지게
```

## 흔한 실수 · 확인 목록
- [ ] **사인 같은 둥근 소리로 시험하면 가림 차이가 안 들린다** — 자를 고음이 없어서다. 톱니 · 잡음 섞인 소리로 시험한다.
- [ ] **벽 뒤로 갈 때 필터를 뚝 바꾸면 딸깍 소리가 난다** — 차단 진동수 · 크기를 setTargetAtTime 으로 0.1초쯤 미끄러지게.
- [ ] **필터만 걸고 크기를 안 줄이면 벽 뒤인데 너무 가깝게 들린다** — 두께에 따라 크기도 0.7 ~ 0.4 배로.

## 완성 기준 체크리스트
- [ ] 「벽 없이 → 벽 뒤 비교」를 누르면 같은 가락이 처음엔 또렷하다가 두 번째엔 먹먹하고 작게 들린다
- [ ] 벽 두께를 올리면 더 먹먹해진다
- [ ] 소리 그림(스펙트로그램)에서 벽 뒤일 때 위쪽(고음)이 어두워진다

## 이 기술 정보
- id: `i158` · 분류: 소리 › 효과음 (SFX) · 공통 · 난이도 쉬움 · 폰 부담 가벼움 (폰 OK) — 필터 1 + 게인 1.
- 라이브 견본 (브라우저에서 직접 조작): https://ai-techstudio.web.app/#t/i158
- 쓰면 좋을 때: 보이지 않는 곳의 소리 (옆방 · 동굴 안 · 상자 속) / 물속 · 이불 속처럼 「막힌」 느낌
- 쓰지 말 때: 멀리 있는 소리 — 멀리는 작아지기만 하고 먹먹함은 덜하다, 거리 감쇠 쪽 / 방 울림이 필요할 때 — 잔향(i159)

## 견본 실제 코드 (라이브 견본이 돌리는 코드 — three.js · TypeScript)
### wallNode — `src/demos/demosSfx.ts:1516`
```ts
function wallNode(c: BA, out: AudioNode, wall: number, thick: number): AudioNode {
  if (!wall) return out;
  const lp = filt(c, 'lowpass', lerp(1500, 350, thick), 0.8);
  chain(lp, gainN(c, lerp(0.7, 0.4, thick)), out);
  return lp;
}
```

### recOcclude — `src/demos/demosSfx.ts:1522`
```ts
const recOcclude: Rec = (c, out, t0, p, r) => {
  phrase(c, wallNode(c, out, p['wall'] ?? 1, p['thick'] ?? 0.5), t0, r);
};
```

## 관련 기술
- 먼저 알면 좋은 기술: [공간 소리 (PannerNode)](https://ai-techstudio.web.app/ai/t/i31.md) `i31`
- 다음에 해 볼 기술: [방 크기 잔향](https://ai-techstudio.web.app/ai/t/i159.md) `i159`
- 참고 문서: [MDN — BiquadFilterNode](https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode)