쉽게 따라 하는 미디어 아트 Make Media Art[5편] Sound Visualization[Opto File 2]

LG CNS 독자 여러분 안녕하세요, 미디어 아티스트 송준봉입니다. 

여름 휴가는 다들 잘 다녀오셨는지요? 한여름의 무더위도 어느덧 사라져 한강에서 맥주 한잔하기 딱 좋은 요즈음입니다. 하지만 이미 학교는 개학•개강을 했고, 직장도 이제 다시 일터로 돌아오는 느낌이라, 이런 좋은 날씨를 즐기기 어려우실지도 모르겠습니다.

하지만! 그래도 미세 먼지 없는 공기라도 듬뿍 호흡하시길 바라면서, ‘쉽게 따라 하는 미디어 아트 Make Media Art’ 다섯 번째 주제를 시작해 보겠습니다

l Opto File 2, Alva Noto + Opiate, Sound + Visualization, 2001

(출처: https://youtu.be/ZQ1zjPqJBPQ)

Carsten Nicolai는 다른 작가와 협업 작업을 많이 하는 편인데요. 특히 2015년에 광주에서 열린 ACT Festival에 Ryoji Ikeda와 함께 전시를 진행했던 것이 기억에 남습니다. 개막식 후 네트워킹 파티에서, 두 명의 위대한 작가가 엄청난 즉흥 잼 공연을 했다고 하네요.

또한, 그는 ‘Alva noto’ 라는 이름으로도 잘 알려져 있습니다. 이전까지는 ‘Alva noto’가 Carsten Nicolai의 활동명 같은 개념인가 했는데, 이번에 글을 쓰면서 찾아보니 Alva noto는 음악 쪽의 활동명인 듯 하고, Carsten Nicolai는 ‘Sound+Media+Science’ 등 모든 것에 쓰이는 실명인 듯하더군요. 

실제로 웹페이지도 두 개입니다. 뭔가 두 개의 인격 같은 느낌이군요. Carsten Nicolai의 수많은 작업 중에서 ‘Opto File 2’는 수많은 타원(ellipse)이 Noise Sound에 반응하며 그 형태를 변화시키는 작업입니다. 

검은색 배경 화면에 흰색 타원으로 이루어져 있는 단순한 구성이지만, 원 하나하나가 Sound와 유기적으로 결합하여 마치 살아 움직이는 음악을 보고 있는 듯한 느낌을 주는 멋진 작업입니다. 사실 ‘Opto File2’ 는 2001년 발매되었던 ‘Opto Files’라는 제목의 EP 앨범에 수록된 곡 중 하나인데, 정말 신기하게도 제가 글을 쓰는 이 시점에 마치 짠 것처럼 국내에서 발매가 되었더군요! 

관심 있는 독자분들은 음원으로 감상해보시거나, 아니면 아래 링크를 통해 감상해 보시면 좋을 것 같습니다. 그럼 지금부터 ‘Opto File 2’와 같은 Sound Visualization 원리와 과정을 좀 더 자세히 살펴보도록 하겠습니다.

l ‘Equalizer’ 대표적인 Sound visualization

(출처: http://osxdaily.com/(좌), https://www.youtube.com/watch?v=_qC6yTBxCs4(우)) 

Sound Visualization을 위해서는 우선 Sound의 어떤 요소를 Visualization 할 것인가에 대해 생각해야 하는데, 가장 쉽게 생각할 수 있는 것이 Sound의 크기와 높낮이입니다. 물론 박자나 코드 등이 될 수도 있지만, 일반적으로 음원의 높낮이 즉, 주파수(Frequency) 대역과 그 세기(Magnitude)가 가장 많이 사용됩니다.

아무래도 한순간의 음원을 세분화해서 이미지로 표현할 수 있는 여지가 많아지는 것이 가장 큰 이유가 아닐까 싶은데요. 여기서 사용되는 이론이 바로 이공계 대학생들이 가장 싫어하는 수학자 중 한 명인 조제프 푸리에(Joseph Fourier)의 푸리에 변환(Fourier transform; FT)입니다. 

푸리에 변환은 시간에 대한 함수를 주파수 성분으로 분해하는 작업인데요, 예를 들면, 낮은 음역인 베이스 같은 악기가 많이 사용되었을 때는 1초당 공기의 진동수가 낮아서, 낮은 주파수 대역 값의 세기가 커지고, 반대로 플롯과 같은 높은 음역의 소리는 1초당 진동수가 높아서, 높은 주파수 대역 값의 세기가 커지게 됩니다. 이때 같은 고음이라도 소리가 크냐 작으냐가 Magnitude라고 할 수 있습니다. 

l Sound Visualization의 대표 사용 요소: Frequency (고음부-저음부) / Magnitude

이렇게 한순간의 음원을 분석하여 주파수 대역과 소리의 크기 등 여러 가지 표현 변수(Variable)로 만들어 주고, 이 변수들을 우리가 표현하고자 하는 이미지의 요소로 사용하면 간단한 ‘Sound Visualization’이 완성됩니다. 우리가 많이 접하는 ‘Sound Equalizer’ 를 예로 들면, Equalizer 사각형의 높이를 각 주파수 대역의 크기로 적용한 것이라고 할 수 있겠습니다.

이제 원리에 대해서는 대략 이해했으니, 어떤 Tool을 사용하여 Sound Visualization 작업을 진행할지 결정하면 되겠습니다. 사실 Sound 분석 라이브러리는 현재 우리가 사용 가능한 개발 Tool 이름 + Sound Analyzer’라고 검색하면 아주 쉽게 구할 수 있습니다. 그만큼 많이 사용된다는 뜻이겠지요. 

대표적으로 많이 사용되는 Sound Visualization Tool 은 Touch Designer, vvvv 등이 있습니다. 물론, 제가 그동안 많이 소개해 드렸던 ‘Processing’에도 Minim Library가 있어서 아주 쉽게 Sound 분석과 Visualization을 할 수 있습니다. 

l 대표적인 Sound Visualization Tool: Max/Msp 

(출처: https://cycling74.com/products/max/)

하지만, 오늘 사용할 프로그래밍툴은 다름 아닌 Java Script입니다. Java Script는 대표적인 웹브라우저 프로그래밍 언어로, 사용이 쉽고 성능이 좋아 많은 사이트에서 사용되고 있습니다. 개인적으로는 블로그 독자분들에게 만든 결과를 웹사이트에서 공유하기 쉽다는 점 때문에 더욱 선택하게 되었습니다. 

① 하드웨어 만들기

이전까지의 연재에서는 하드웨어가 하나씩 있었는데, 이번 작업은 프로그래밍 작업인 관계로 따로 하드웨어 작업은 없습니다. 하지만, 대형 디스플레이에 직접 만든 Sound Visualization 작업을 띄워 보는 것만으로도 그 효과가 상당하기 때문에, 집에 있는 TV 등에 컴퓨터를 연결하여 플레이 해 보시는 것도 좋은 경험이 될 수 있을 것 같습니다. 

또, 혹시 관심 있는 독자 분들 중 직접 Equalizer형태의 Sound Visulalization 장치를 만들고 싶으신 분은 아래 그림의 Arduino와 Processing으로 만든 제작기가 있으니 참고해 보시는 것도 좋을 것 같습니다.

l Arduino와Processing을 사용해 만든 Audio Spectrum Analyzer

(http://www.instructables.com/id/Arduino-Processing-Audio-Spectrum-Analyzer/)

② 소프트웨어 만들기 

Sound Visualization을 진행할 때 가장 먼저 할 일은 Visualization의 컨셉 디자인입니다. 컨셉이 초기에 잘 잡히지 않으면 나중에 작업을 완성하더라도 ‘영 아닌데…’ 라는 생각이 들면서 작업을 다 엎어야 하는 경우도 많이 생깁니다. 다행히도 우리는 이번에 ‘따라잡기’를 하고 있기 때문에 이 부분은 어느 정도 해결이 되었다고 할 수 있겠네요. 

우리의 Visualization 기본 컨셉은 ‘검은 배경•흰색 Line 타원’입니다. 타원은 음원의 주파수 대역(고음부, 저음부)에 따라 여러 개를 만들 예정입니다. 그리고 주파수 대역의 크기 변화에 따라 원의 사이즈를 늘렸다 줄였다 하면 좋을 것 같습니다. 우선은 이러한 컨셉을 그림으로 그려서 생각해보면 나중에 나올 이미지를 상상하기 쉬워집니다.

l Sound Visualization 의 컨셉과 Parameter 정하기

일단 기본적인 컨셉이 정해졌으니, 한번 음악에 반응하게 해 보도록 하겠습니다. 이제 필요한 것은 Java Script에서 음원을 분석하는 API 겠죠. 가장 많이 사용되고 그래서 또 가장 편한 방법이 ‘AudioContext’ API을 이용하는 것입니다.  사용 방법은 1) createAnalyser() 함수로 Analizer 생성, 2) decodeAudioData() 함수로 음원 분석, 3) getByteFrequencyData() 함수로 주파수 대역별 Data 획득으로 총 3단계 입니다.

내용이 더 궁금하신 독자분들께서는 아래의 링크 문서 내용을 살펴보시면 좋을 것 같습니다. 이러한 과정을 거쳐 음원의 각 주파수 대역별 크기에 따라 대응되는 원의 반지름을 바뀌게 해서 아래와 같이 만들어 보았습니다. Sound Visualization Version 1이 되겠네요.

그런데 만들어 놓고 보니 음악에 따라 원의 크기가 변하는 것까지는 좋은데, 뭔지 모르게 심심한 것 같습니다. 변화가 필요할 것 같은데, 타원이 아닌 모양을 쓰거나, Color를 넣자니 좀 난잡해 보일 것 같습니다. 그래서 다시 Opto File 2 작업을 살펴보니, 원을 회전시키는 효과를 주면 심플하면서도 역동적인 모션이 생겨서 변화가 나타날 것 같습니다. 

그래서 저는 두 가지 팩터를 더 추가시켰습니다. 첫 번째 팩터는 회전방향이고 두 번째 팩터는 회전 속도입니다. 회전 방향은 기본적으로 Random으로 설정했고, 회전 속도는 각 주파수 대역의 세기에 따라 속도를 증가시키도록 설정했습니다. 

사실 이러한 회전 효과를 만들기 위해서는 단순한 라인 형태의 원이라도 3차원에서 회전시켜 주어야 하는데요. 이때 아까 소개해 드렸던 ‘ThreeJS Library’가 아주 큰 도움이 되었습니다. 이렇게 ‘Sound Visualization Version 2’가 완성되었습니다.

l 무작정 따라해 본 ‘Opto File2’

(출처: http://jbsong.com/JS/LGCNS_Sound.html)

이렇게 완성된 ‘Opto File2’ 따라잡기 버전은 아래 링크에서 감상해 보실 수 있는데요. 사이트에 들어가신 후 오른쪽 상단의 ‘Open Control’ 탭을 열어서 [Start music]을 Check 하시면 감상하실 수 있습니다. 또, 독자분들의 음원을 Drag&Drop 하신 후 [Start music]을 Check 하셔도 그 음악에 맞추어 Sound Visualization이 보이니 음악 감상하실 때 사용하셔도 좋겠네요!