Chapter 17

종합 작업실

지금까지 소리를 신호로, 음계를 집합으로, 화성을 그래프로, 리듬을 이산 시계열로 다뤘습니다. 이 장에서는 그 부품을 전부 한 기계에 넣습니다. 조성을 고르면 다이아토닉 화음이 생기고, 진행을 고르면 보이스 리딩 알고리즘이 손가락 위치를 정하고, 베이스는 규칙으로, 선율은 제약이 걸린 난수로 만들어지고, 하나의 오디오 시계가 16분음표마다 모든 악기에 '언제 울릴지'를 예약합니다. 결과물은 WAV 파일로 내보낼 수 있는 진짜 음악입니다.

스케줄러 → 악기 → 트랙 버스 → 센드 이펙트 → 마스터 → 출력으로 이어지는 작업실의 신호 흐름을 그리고 설명한다.
조성·코드 진행·베이스 패턴·드럼 패턴·선율 생성 규칙을 조합해 4–12마디 루프를 만들고 저장·공유한다.
루프를 곡 형식(인트로–벌스–코러스–브리지–아웃트로)으로 편곡하며 트랙의 켜고 끔으로 에너지 곡선을 설계한다.
악기별 주파수 대역을 알고, 실시간 스펙트럼에서 마스킹이 생기는 대역을 찾아 EQ로 자리를 나눈다.
OfflineAudioContext로 실시간보다 빠르게 렌더링하고, 16비트 WAV(RIFF) 파일을 직접 인코딩한다.

작업실의 설계도: 신호 흐름

DAW(디지털 오디오 워크스테이션)든 하드웨어 스튜디오든 구조는 같습니다. 시간을 관리하는 시계가 있고, 시계가 음표 사건을 만들고, 사건이 악기를 울리고, 악기 소리는 트랙 버스(채널 스트립)에서 볼륨·EQ를 거쳐 마스터 버스로 모이며, 일부는 센드로 갈라져 공유 이펙트(리버브)를 거쳐 돌아옵니다. 이 장의 작업실도 정확히 그 그래프를 Web Audio 노드로 만듭니다.

그림 17-1. 작업실의 신호 흐름. 시계(MB.Clock)는 25 ms마다 깨어나 앞으로 120 ms 안에 올 16분음표를 오디오 시계 위에 예약한다(11·12장). 각 트랙은 자기 버스(볼륨 → 하이패스 EQ)를 가지며, 센드 양만큼 공유 리버브(컨볼버)로 보낸다. 모든 소리는 마스터 저역 통과 필터와 리미터를 지나 분석기와 스피커로 간다. 내부 작업실 믹서 그래프를 OfflineAudioContext에 다시 지으면 WAV로 렌더링된다. 실시간 청취에는 그 뒤 MB.out의 마스터 이득(기본 0.8)·추가 컴프레서가 붙고 WAV에는 없으므로 스피커 출력과 파일의 음량을 직접 동일시하지 않는다.

시계가 왜 '앞을 내다보며 예약'해야 하는지는 12장에서 보았습니다. JavaScript 타이머는 수 ms에서 수십 ms까지 흔들리지만, start(when)으로 예약한 소리는 오디오 하드웨어 시계에 샘플 단위로 맞춰 울립니다. 16분음표 하나의 길이와 스윙 오프셋은 다음과 같습니다.

$$\Delta t_{16} = \frac{60}{\mathrm{BPM}\cdot 4}, \qquad t_{\text{swing}} = \begin{cases} (s - 0.5)\cdot 2\,\Delta t_{16} & \text{16분 스윙: 홀수 스텝} \\ (s - 0.5)\cdot 4\,\Delta t_{16} & \text{8분 스윙: 스텝} \equiv 2 \pmod 4 \\ (s - 0.5)\cdot 2\,\Delta t_{16} & \text{8분 스윙: 홀수 스텝} \end{cases}$$

$s$: 스윙 비율(0.5 = 정박, 0.667 = 셋잇단 셔플). 100 BPM에서 16분음표 = 150 ms. 스윙은 '짝'의 앞 음표가 차지하는 비율이다(11장). 블루스 셔플은 8분음표 단위로, 로파이·힙합은 16분음표 단위로 건다.

8분 스윙에서는 긴 앞 8분과 짧은 뒤 8분을 각각 같은 길이의 16분 두 개로 나눈다. 따라서 중간 16분 시작점도 함께 이동하고 서로 겹치지 않는다.

루프 스테이션

아래가 이 책의 마지막 대형 시뮬레이터입니다. 위에서 아래로 내려가며 곡을 쌓습니다. 각 층이 어떤 장의 개념인지 함께 적었습니다.

① 화성 층: 조성(근음 + 음계)을 정하면 7개의 다이아토닉 화음이 생긴다(7·9장). 패드의 색은 화성 기능(초록 T, 주황 S, 빨강 D). 칸을 고른 뒤 패드를 눌러 진행을 채운다. 각 화음의 실제 보이싱은 앞 화음에서 성부 이동 합에 빠진 화음 음당 6·동일 MIDI 음 중복 8의 벌점을 더한 점수가 작아지도록(성부별 가까운 후보 네 개만 탐색) MB.voiceLead가 고른다(9장).
② 리듬 층: 6×16 스텝 그리드(12장). 템포와 스윙은 전체에 적용된다.
③ 베이스 층: 화음의 근음·5음·3음과 다음 화음의 근음으로 규칙적으로 생성한다. '워킹'은 마지막 박에 다음 근음으로 반음 접근한다.
④ 선율 층: 시드 고정 난수로 만든 선율(13장). 강박(1·3박)에는 음계 안에서 실제 반주 화음과 겹치는 음을 고른다(후보가 있을 때). 마지막 으뜸음 종지는 이 규칙의 예외다. 그 사이는 순차 진행(±1 음계 단계) 위주, 마지막 마디는 으뜸음으로 끝난다. 앞 두 마디의 리듬을 뒤 두 마디에 반복해 동기를 만든다. 피아노 롤을 눌러 직접 고칠 수 있다.
⑤ 믹서 층: 트랙별 악기·볼륨·리버브 센드·뮤트·솔로, 마스터 저역 통과 필터(15장).

SIMULATOR

루프 스테이션: 화성 · 드럼 · 베이스 · 선율 · 믹서

1 · 1

—마디 · 박 / 지금 화음

곡 프리셋

템포 스윙

스윙 단위

조(으뜸음) 음계 마스터 저역 통과

① 코드 진행 칸을 고르고 패드를 누르세요 · 마디 수와 화음 종류

마디 수

화음

코드 리듬

② 드럼 칸을 눌러 켜고 끄기 · 이름을 누르면 미리 듣기

③ 베이스

④ 리드 선율 피아노 롤을 눌러 음 넣기/빼기 · 옅은 칸 = 그 마디의 화음 구성음

시드 음표 밀도

⑤ 믹서

⑥ 저장 · 공유 · 내보내기

16분음표 길이—

루프 길이—

이번 마디 베이스 · 리드—

▶ 재생으로 시작합니다(소리는 버튼을 누른 뒤에만 납니다). 재생 중에도 모든 것을 바꿀 수 있고, 다음 스텝부터 반영됩니다. 건반(또는 A–K 키)은 리드 악기로 연주되며 리드 트랙 버스를 지나므로 같은 리버브가 걸립니다. 건반 표시: 보라 = 지금 화음 보이싱, 청록 = 베이스 음. 저장은 이 브라우저(localStorage)에, 공유 링크는 주소의 #std=…에 전체 상태를 담습니다. WAV는 44.1 kHz 16비트 스테레오(TPDF 디더)로 루프를 두 번 렌더링합니다. 모델: 모든 악기는 MB.play/MB.drum 실시간 합성(3·4·12장), 리버브는 지수 감쇠 잡음 IR 컨볼루션(15장), 마스터 리미터는 문턱 −4 dB, 20:1.

프리셋	템포	스윙	진행	특징
로파이 힙합	78	16분 60%	ii7–V7–Imaj7–vi7 (F)	뒤로 끌리는 킥, 어두운 마스터 필터, 일렉트릭 피아노
신스팝	112	정박	i–VI–III–VII (A단조)	16분 하이햇, 옥타브 베이스, 패드
보사노바	120	정박	Imaj7–vi7–ii7–V7 (D)	3-2 클라베 림샷, 근음–5음 베이스, 엇박 기타 컴핑
블루스 셔플	92	8분 67%	12마디 I7–IV7–V7 (A)	셋잇단 셔플, 워킹 베이스, 오르간 찰스턴 리듬
EDM 4-온-더-플로어	124	정박	i–VI–III–VII (F단조)	매 박 킥, 뒷박 오픈 햇과 베이스, 톱니 스탭

엔지니어의 눈으로 이 루프 스테이션의 상태는 JSON 하나다(조, 음계, 진행 배열, 6×16 비트 드럼 행렬, 길이 64–192의 선율 배열, 믹서 값). 저장 링크는 이것을 UTF-8 → Base64로 주소에 넣은 것이고, MIDI 파일(16장)도 결국 같은 정보를 '시각 + 노트 번호 + 벨로시티' 사건 목록으로 직렬화한 것이다. 상태(데이터)와 렌더링(소리)을 분리하면 같은 상태를 실시간으로도, 오프라인으로도, 다른 악기로도 재생할 수 있다.

곡 형식: 루프를 노래로

루프 하나를 3분 동안 반복하면 음악이 아니라 벽지가 됩니다. 대중음악의 대부분은 같은 재료를 더하고 빼는 편곡으로 긴장과 해소의 곡선을 만듭니다. 인트로에서 화음만 들려주고, 벌스에서 드럼과 베이스를 넣고, 코러스에서 선율까지 모든 층을 쌓고, 브리지에서 드럼을 빼고 필터를 닫아 숨을 고른 뒤, 마지막 코러스를 두 번 반복해 정점을 찍는 식입니다. 전자음악에서는 이 '빼고 넣기'를 브레이크다운과 드롭이라 부릅니다.

$$E(\text{구간}) \approx \sum_{\text{트랙 } k} w_k \cdot \mathbb{1}[k \text{ 켜짐}] \cdot g_k, \qquad T_{\text{곡}} = \sum_{\text{구간}} n_i \cdot \frac{4\,B \cdot 60}{\mathrm{BPM}}$$

$E$: 체감 에너지의 아주 거친 모형(트랙 가중치 $w_k$·볼륨 $g_k$의 합. 드럼과 베이스의 가중치가 크다). $n_i$: 구간 반복 횟수, $B$: 루프의 마디 수(4/4박). 4마디 루프를 90 BPM으로 9번 돌리면 96초.

SIMULATOR

편곡기: 구간마다 트랙 켜고 끄기

지금 구간—

곡 길이—

경과—

위 루프 스테이션의 현재 루프(진행·드럼·베이스·선율·믹서)를 재료로 씁니다. 각 구간의 트랙 버튼으로 켜고 끄며, '반복'은 그 구간에서 루프를 몇 번 돌지, '필터'는 그 구간의 마스터 저역 통과 필터(어둡게 = 900 Hz로 0.3초 동안 미끄러짐)입니다. 위 그래프는 구간별 에너지 모형 $E$(막대 높이)와 재생 위치입니다. 해볼 것: 브리지에서 드럼과 베이스를 끄고 필터를 어둡게 → 다음 코러스에서 모든 층이 '터지는' 대비를 들어 보세요.

주파수 자리 배치와 마스킹

14장에서 본 것처럼 큰 소리는 같은 임계대역 안의 작은 소리를 가립니다(마스킹). 각 악기가 혼자일 때는 멋진데 합치면 탁해지는 이유의 대부분이 이것입니다. 믹싱의 첫 원칙은 악기마다 주파수 '자리'를 나눠 주는 것입니다. 아래 그림은 대표적인 자리입니다. 기본음 대역(진한 막대)과 음색·공격음이 사는 배음 대역(옅은 막대)을 구별하세요.

그림 17-2. 악기의 주파수 대역(로그 축, 대략값). 킥의 '쿵'은 50–80 Hz, '딱'은 2–5 kHz. 베이스 기본음은 40–250 Hz지만 작은 스피커에서 들리는 것은 700 Hz–2 kHz의 배음이다(잃어버린 기본음, 2장). 패드·피아노 같은 화음 악기는 200 Hz–4 kHz를 넓게 덮어 보컬·리드와 정면으로 겹친다. 그래서 화음 악기의 저역을 하이패스로 걷어 내는 것이 가장 흔한 첫 EQ다.

대역	이름(믹싱 은어)	너무 많으면	너무 적으면
20–60 Hz	서브	스피커가 헛힘을 씀, 헤드룸 낭비	클럽에서 몸으로 못 느낌
60–250 Hz	저음(바디)	부밍, 킥과 베이스가 뭉개짐	얇다
250–500 Hz	저중음(머드)	탁하고 '상자 속' 같음	차갑고 비었음
0.5–2 kHz	중음	'뿡뿡'거리는 경적 소리	멀게 들림
2–6 kHz	고중음(존재감)	귀가 아픔(등청감 곡선의 가장 민감한 대역, 14장)	뒤로 숨음
6–20 kHz	공기·치찰음	쇳소리, 치찰음	둔하고 어두움

SIMULATOR

믹스 스펙트럼: 트랙별 색으로 보는 마스킹

EQ로 자리 나누기 (코드 HPF 220 Hz, 리드 HPF 300 Hz, 베이스 HPF 35 Hz) 겹치는 대역 표시

보기

드럼 무게중심—

베이스—

코드—

리드—

겹치는 1/3옥타브 대역—

트랙 버스마다 따로 단 AnalyserNode(4096점)로 그린 스펙트럼입니다. 빨간 띠는 1/3옥타브 대역 중 두 트랙 이상이 가장 센 트랙의 6 dB 안에서 경쟁하는 곳(마스킹 후보)입니다. 해볼 것: ① '로파이'나 '신스팝' 프리셋을 재생하며 200–500 Hz에서 코드와 베이스가 겹치는 것을 확인. ② 'EQ로 자리 나누기'를 켜면 코드·리드의 저역이 빠지며 빨간 띠가 줄고 베이스가 또렷해집니다 — 혼자 들으면 얇아진 코드가 섞으면 오히려 좋게 들리는 것이 믹싱의 역설입니다. ③ 루프 스테이션 믹서의 솔로 버튼과 함께 쓰세요. 모델 한계: 겹침 판정은 단순 레벨 비교이며 실제 마스킹 문턱(14장)보다 거칩니다.

사이드체인 킥과 베이스는 같은 50–100 Hz에서 싸운다. EQ로 나누기 어려우면 시간으로 나눈다: 킥 신호를 베이스 컴프레서의 검출기(사이드체인)에 넣어 킥이 칠 때마다 베이스를 몇 dB 눌렀다 놓는다(15장의 어택·릴리스). EDM의 '펌핑' 효과는 이를 과장한 것이다.

내보내기: 오프라인 렌더링과 WAV

실시간 재생은 스피커 시계에 묶여 있지만, OfflineAudioContext는 같은 노드 그래프를 가능한 한 빨리 계산해 버퍼로 돌려줍니다. 작업실의 내보내기 버튼은 그림 17-1의 내부 작업실 믹서를 오프라인 컨텍스트에 다시 짓고(공통 청취용 MB.out의 이득·컴프레서는 제외), 모든 스텝을 시각 계산으로 미리 예약한 뒤 렌더링합니다. 보통 실시간의 10–50배 속도입니다.

결과는 가장 단순한 무압축 형식인 WAV(RIFF)로 저장합니다. 44바이트 헤더 뒤에 16비트 정수 샘플을 채널 교대(LRLR…)로 늘어놓으면 끝입니다.

오프셋	필드	값(이 작업실)
0	"RIFF", 파일 크기 − 8	리틀 엔디언 uint32
8	"WAVE", "fmt ", 16	PCM 형식 블록 길이
20	형식 1(PCM), 채널 2	uint16 × 2
24	샘플레이트, 바이트/초	44100, 44100 × 2 × 2 = 176,400
32	블록 정렬, 비트 수	4, 16
36	"data", 데이터 크기	샘플 수 × 4
44	샘플	int16, TPDF 디더 ±1 LSB 후 반올림(15장)

$$\text{크기} = f_s \cdot C \cdot \frac{b}{8} \cdot T = 44100 \cdot 2 \cdot 2 \cdot 60 \approx 10.6\ \mathrm{MB/분}$$

CD 음질 무압축 스테레오의 데이터율은 1411.2 kbit/s. MP3 128 kbit/s는 약 1/11이다. 내보낸 파일을 스트리밍에 올린다면 통합 라우드니스 약 −14 LUFS, 트루 피크 −1 dBTP를 목표로 한다(15장).

귀 훈련: 이 진행은 무엇일까

작업실에서 가장 중요한 장비는 귀입니다. 9장의 화성 기능을 듣고 알아맞히는 연습을 해 봅시다. 진행은 항상 으뜸화음(I)으로 시작합니다. 베이스(근음)의 움직임을 먼저 따라가면 훨씬 쉽습니다: IV로 가면 4도 위, V로 가면 5도 위(또는 4도 아래), vi로 가면 3도 아래로 내려갑니다.

SIMULATOR

코드 진행 받아쓰기

난이도

점수0 / 0

연속 정답0

이번 조?

'새 문제'를 누르면 무작위 장조에서 4마디 진행이 피아노와 베이스로 연주됩니다(90 BPM, 한 마디에 한 화음). 네 보기 중 들은 진행을 고르세요. 답한 뒤에는 각 보기를 눌러 비교해 들을 수 있습니다. 조가 매번 바뀌므로 절대음이 아니라 상대적인 기능을 들어야 합니다.

이 작업실의 지도

작업실의 각 기능은 앞 장들의 개념을 그대로 코드로 옮긴 것입니다. 궁금한 부품이 있으면 해당 장으로 돌아가세요.

작업실 기능	원리	장
악기 소리(피아노, 패드, 베이스, 리드, 기타)	가산 합성, 감산 합성과 필터 엔벨로프, FM, 카플러스–스트롱	02 · 03 · 04
조성과 음 이름, 12평균율 주파수	$f = 440\cdot 2^{(m-69)/12}$	05
음계 선택, 선율의 음 후보	12비트 피치 클래스 집합, 선법	07
화음 종류(3화음·7화음·속7), 코드 이름	음정 구조와 화음 사전	08
다이아토닉 패드, 기능 색, 보이스 리딩	T–S–D 기능, 최소 이동 보이싱	09
템포, 스윙, 16분음표 격자	박자와 스윙 비율	11
드럼 그리드, 드럼 합성, 예약 시계	스텝 시퀀서, 룩어헤드 스케줄링	12
선율 생성기	제약 기반 난수 선율, 동기 반복	13
믹스 스펙트럼, 자리 나누기	임계대역과 마스킹, 등청감	14
EQ, 리버브, 리미터, WAV·디더	바이쿼드, 컨볼루션, 다이내믹스, 양자화	15
상태 저장, 노트 번호	음악 데이터의 직렬화	16

핵심 정리

작업실의 골격은 시계 → 음표 사건 → 악기 → 트랙 버스 → (센드 → 공유 이펙트) → 마스터 → 출력이다. 시계는 오디오 하드웨어 시계 위에 미리 예약해 지터를 없앤다.
조성 하나가 다이아토닉 화음 7개를 정하고, 진행은 그 인덱스의 배열이며, 보이싱은 최소 이동 탐색이 정한다. 베이스·선율은 화음에서 규칙과 제약으로 유도된다.
좋은 생성 선율의 제약: 강박에는 화음 구성음, 사이는 순차 진행, 범위 제한, 동기(리듬) 반복, 으뜸음 종지.
편곡은 같은 재료를 더하고 빼는 에너지 설계다. 대비(브리지의 비움)가 정점(마지막 코러스)을 만든다.
믹싱의 첫 원칙은 주파수 자리 나누기다. 화음 악기의 저역을 걷어 내고, 킥–베이스는 EQ 또는 사이드체인으로 나눈다.
OfflineAudioContext는 같은 그래프를 실시간보다 빠르게 렌더링한다. WAV는 44바이트 RIFF 헤더 + 인터리브된 PCM 샘플이며, 16비트로 줄일 때는 디더를 건다.

확인 퀴즈

120 BPM에서 16분음표 스텝 하나의 길이는?

한 박(4분음표) = 60/120 = 0.5 s. 16분음표는 그 1/4이므로 125 ms. 한 마디(4/4)는 16스텝 = 2 s.

16분 스윙 67%, 100 BPM일 때 짝을 이루는 두 16분음표의 길이는?

짝(8분음표 하나) = 300 ms. 앞 음표가 67%인 약 200 ms, 뒤 음표가 33%인 약 100 ms — 셋잇단 2:1 셔플이다.

A 자연단조에서 VI 화음(3화음)은?

A 자연단조 = A B C D E F G. 6번째 음 F 위에 3도씩 쌓으면 F–A–C, 장3화음 F. 단조의 i–VI–III–VII(Am–F–C–G)은 신스팝·EDM의 단골 진행이다.

코드 패드와 베이스가 섞이면 탁하게 들린다. 가장 먼저 시도할 만한 조치는?

두 악기가 250 Hz 아래(특히 '머드' 대역)에서 겹치면 마스킹으로 둘 다 흐려진다. 저역 역할은 베이스에 맡기고 화음 악기는 하이패스로 비우는 것이 정석이다. 리버브는 오히려 저역을 더 뭉갠다.

44.1 kHz, 16비트, 스테레오 WAV로 3분짜리 곡을 내보내면 대략 크기는?

44100 × 2채널 × 2바이트 × 180초 = 31,752,000바이트 ≈ 31.8 MB(+44바이트 헤더).

JavaScript의 setTimeout으로 매 스텝 직접 소리를 내지 않고 '앞을 내다보며 예약'하는 이유는?

메인 스레드 타이머는 렌더링·GC로 흔들리지만, start(when)으로 예약한 소리는 오디오 스레드가 정확한 샘플에서 시작한다. 타이머는 '예약 담당'일 뿐이다(12장의 두 시계 방식).