악보보다 코드가 편한 개발자를 위한 음악 이론
악보보다 코드가 편한 개발자를 위한 음악 이론
음악 이론을 배울 때 가장 답답한 순간은 이유 없이 규칙부터 외워야 할 때예요. RunJS가 공개한 글은 소리를 시간에 따라 변하는 숫자로 놓고, JavaScript 배열과 Web Audio API만으로 12음·음계·화음·코드 진행을 차례로 만들어요. 1
악기를 연주하지 못해도 각 예제를 브라우저에서 실행해 귀로 확인할 수 있어요. 음악을 물리와 산수, 코드로 연결해서 이해하고 싶은 개발자에게 잘 맞는 설명이에요. 2
핵심 요약
| 구분 | 핵심 | 왜 볼 만한가요 |
| 출발점 | 소리를 시간에 따라 달라지는 숫자로 다뤄요 | Web Audio API가 만드는 파형을 바로 들으며 주파수와 음높이의 관계를 확인할 수 있어요 |
| 음정 | 옥타브와 완전5도를 주파수 비율로 설명해요 | 익숙한 음정이 왜 안정적으로 들리는지 배음과 맥놀이로 이해할 수 있어요 |
| 12음 | 평균율을 수학적인 타협으로 유도해요 | 옥타브를 왜 12단계로 나누는지 짧은 탐색 코드로 비교해요 |
| 작곡 | 음계와 화음을 정수 배열로 만들어요 | 이론이 실제 코드 진행과 브라우저 재생으로 이어져요 |
1. 소리에서 코드 진행까지 JavaScript로 유도해요
글은 440Hz 사인파를 만드는 짧은 코드에서 시작해요. 주파수가 높아지면 음높이도 올라간다는 가장 단순한 관계를 먼저 들려줘요. 음의 시작과 끝을 조절하는 엔벌로프를 더하면 같은 주파수도 클릭음이 아니라 악기처럼 들리기 시작해요. 2
다음에는 기본 주파수와 함께 울리는 배음을 살펴봐요. 사인파·삼각파·사각파·톱니파가 같은 음높이인데도 다르게 들리는 까닭을 배음 구성으로 연결해요. 설명 옆에 있는 재생 버튼과 편집 가능한 JavaScript 코드를 이용하면 파형을 바꾼 결과를 즉시 비교할 수 있어요.
옥타브는 주파수가 2배가 되는 관계예요. 완전5도는 3대 2처럼 단순한 정수비에 가까워요. 두 음의 배음이 자주 겹치면 합친 파형이 짧은 주기로 반복돼요. 반대로 가까운 배음끼리 조금씩 어긋나면 음량이 울렁이는 맥놀이가 생겨요. 글은 협화음과 불협화음을 추상적인 감각 대신 파형의 반복과 배음의 간섭으로 보여줘요. 1
12음은 완벽한 답보다 쓸 만한 근사치예요
완전5도를 계속 쌓아도 옥타브와 정확히 만나지는 않아요. 3의 거듭제곱과 2의 거듭제곱이 같아질 수 없기 때문이에요. 현대 음악에서 널리 쓰는 12평균율은 옥타브만 정확하게 유지하고 나머지 음정을 조금씩 조정해요.
원문은 옥타브를 여러 개의 같은 간격으로 나눈 뒤, 각 분할이 3대 2 비율을 얼마나 가깝게 표현하는지 코드로 비교해요. 12등분은 더 적은 건반 수로 완전5도를 약 0.1% 오차까지 근사하는 첫 선택지예요. 더 정확한 분할도 있지만 한 옥타브에 필요한 음이 크게 늘어요. 이 과정을 따라가면 12음이 관습으로만 정해진 숫자가 아니라 연주 편의와 음정 오차 사이의 절충이라는 점이 보이기 시작해요. 2
음계와 화음은 정수 배열로 다룰 수 있어요
평균율을 받아들이면 음은 MIDI 번호 같은 정수로 표현할 수 있어요. 장음계는 12개 음 가운데 특정 간격을 고른 배열이 되고, 화음은 음계에서 3도 간격의 음을 쌓은 배열이 돼요. 으뜸화음·버금딸림화음·딸림화음의 흐름도 배열 인덱스와 함수 호출로 만들 수 있어요.
마지막에는 긴장과 해소를 실제 코드 진행으로 들어봐요. 딸림화음에서 으뜸화음으로 움직일 때 각 음이 가까운 안정음으로 이동하는 과정도 확인할 수 있어요. 악보는 이 구조를 다룬 뒤에 등장해요. 원문은 오선보를 소리의 규칙 그 자체보다 시간·음높이·길이·세기를 기록하는 직렬화 형식에 가깝게 설명해요.
왜 중요한가요
개발자에게 익숙한 자료형과 실행 방식이 학습 장벽을 낮춰줘요. 주파수는 숫자, 음계는 배열, 화음은 인덱스 조합으로 바뀌어요. 규칙을 먼저 암기하는 대신 값을 바꾸고 결과를 들으며 관계를 확인할 수 있어요. 2
Web Audio API를 소개하는 글로도 쓸모가 있어요. 별도 라이브러리 없이 브라우저가 제공하는 오실레이터와 게인 노드만 사용해요. 오디오 생성, 파라미터 조절, 짧은 시퀀싱을 한 페이지 안에서 실험할 수 있어 소리 기반 웹 기능을 처음 만드는 개발자도 흐름을 따라가기 쉬워요.
물론 음악 전체가 간단한 정수비와 배열만으로 설명되지는 않아요. 원문도 조율 체계와 서양 화성의 출발점을 다루며, 리듬·프레이징·장르별 관습까지 모두 포괄한다고 말하지 않아요. 그 범위를 알고 읽으면 이 글의 장점이 더 또렷해요. 낯선 음악 용어를 외우기 전에 브라우저에서 소리를 만들고, 숫자 사이의 관계를 귀로 확인할 수 있어요. 1
참고 자료
- 프로그래머를 위한 음악 이론 — GeekNews
- Music theory for programmers — RunJS