5도권을 만지며 익히기 — 피아노 연습 도구에 원환을 더했다
조표·나란한조·다이어토닉 코드·코드 진행이 5도권이라는 한 장의 원환 위에서 연결된다. 클릭하면 소리가 나는 인터랙티브 5도권을 만들었습니다.

조표를 “암기”하는 벽
예전에 피아노 연습에 도움이 되는 4가지 도구를 만들었다. 그중 하나인 Scale Reference는 “이 조의 ♯은 뭐였지”를 찾기 위한 조견표였다. 편리하긴 하지만, 찾을 때마다 조표를 “떠올리는” 동작이 남는다.
조표의 ♯♭을 하나씩 암기하는 방식은 곡이 복잡해지면 무너진다. 사장조는 ♯ 하나, 라장조는 ♯ 둘… 이렇게 통째로 외워도 막상 악보를 앞에 두면 막힌다. 애초에 조와 조의 관계가 보이지 않기 때문이다.
이 관계를 한 장으로 보여주는 것이 **5도권(Circle of Fifths)**이다. 시계 방향으로 5도씩 나아가면 ♯이 하나씩 늘고, 반시계 방향으로 가면 ♭이 늘어난다. 이웃한 조는 가까운조로, 실제 전조에서 자주 쓰인다. 바깥쪽 장조와 안쪽 나란한단조는 같은 조표를 공유한다.
이 “관계의 지도”를 그저 바라보는 것이 아니라 만지고 소리 낼 수 있는 것으로 만들고 싶었다.
만든 것
Circle of Fifths는 브라우저에서 동작하는 인터랙티브 5도권이다. 원환의 어느 키를 클릭하면, 그 키에 얽힌 정보가 한꺼번에 펼쳐진다.
원환: 바깥쪽 장조·안쪽 나란한단조
위가 C / Am, 시계 방향으로 5도씩. 바깥쪽이 장조, 안쪽이 나란한단조. 선택한 키가 하이라이트되고, 양옆의 가까운조도 옅게 물든다. “5도 위로 간다는 것은 원환을 오른쪽으로 한 칸 돌리는 것”임을 시각적으로 알 수 있다.
클릭하면 펼쳐지는 정보
키를 선택하면 패널에 다음이 나열된다.
- 조표 — ♯×2, ♭×3처럼 기호의 종류와 개수
- 나란한조 — 장조라면 나란한단조, 단조라면 나란한장조
- 가까운조(5도 이웃) — 전조 대상 후보로 쓸 수 있는 양옆의 키
- 건반 스케일 — 한 옥타브 건반 위에 그 조의 구성음을 하이라이트(으뜸음은 테두리로 강조)
- 다이어토닉 코드 — I·ii·iii·IV·V·vi·vii° 일곱 개를 도수와 함께 표시
그리고 선택하는 순간 으뜸화음(토닉)이 울린다. 눈으로 본 조가 귀에 어떻게 울리는지를 동시에 확인할 수 있다.
장조 / 단조 전환
라디오 버튼으로 전환하면 원환의 하이라이트가 바깥쪽과 안쪽에서 뒤바뀌고, 다이어토닉 코드도 단조의 것(i·ii°·III·iv·v·VI·VII)으로 바뀐다. 자연단음계는 나란한장조의 스케일을 여섯 번째(vi)부터 돌린 것이라, 내부적으로는 같은 스케일을 회전시켜 내보내고 있다.
코드 진행 데모
이 도구의 핵심은 여기라고 생각한다. 대표적인 코드 진행을 버튼 하나로 자동 재생한다. 각 코드가 0.7초 간격으로 울리고, 동시에 다이어토닉 코드 표의 해당 코드가 하이라이트된다.
- 장조: 캐논 진행(I - V - vi - iii - IV - I - IV - V), 왕도 진행(IV - V - iii - vi), 코무로 진행(vi - IV - V - I), 4코드(I - V - vi - IV)
- 단조: 대표적 단조(i - VI - III - VII), 안달루시아(i - VII - VI - v), 6-4-1-5 단조
진행을 “도수의 나열”로 들으면, 키를 바꿔도 같은 울림의 틀이라는 것을 몸으로 알 수 있다. 캐논 진행을 C에서 들은 뒤 G로 바꾸고 같은 버튼을 누르면, “조가 바뀌어도 진행은 같다”는 것을 귀로 확인할 수 있다.
소리 켬/끔·스케일 재생
소리를 내고 싶지 않은 상황을 위한 토글과, 선택한 조의 스케일을 한 음씩 올라가며 울리는 “스케일 연주” 버튼을 달았다. 소리는 Web Audio의 삼각파로, 외부 음원 없이 브라우저만으로 완결된다.
4가지 도구와의 차이
앞의 4가지 도구는 “메트로놈” “독보” “조견표” “타이머”로, 각각 다른 과제에 대응하는 도구였다. 5도권은 성격이 조금 달라서, 조·스케일·코드·진행이라는 따로 외우기 쉬운 요소를 한 장의 원환 위에서 연결하기 위한 것이다.
Scale Reference가 “찾는” 도구라면, Circle of Fifths는 “관계를 잡는” 도구다. 암기 대신, 원환의 형태와 소리의 울림으로 조들의 연결을 몸에 새긴다. 이론은 음악 이론의 계보 시리즈에서도 썼지만, 만지고 소리 낼 수 있는 형태로 만들면 납득되는 방식이 다르다.
브라우저에서 탭을 여는 것만으로 쓸 수 있어서, 연습 사이사이에 “오늘 곡의 조의 가까운조는?” 하고 금방 확인하는 식으로도 쓸 수 있다.