IT Life

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

2017.08.31 09:30

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

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


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




 오늘 만들어 볼 작업은?

오늘 만들어 볼 작업은 베를린 출신의 Sound Visual 아티스트인 ‘Carsten Nicolai’와 덴마크 출신의 electric musician인 ‘Thomas Knak(a.k.a. Opiate)’이 2001년 함께 만든 작업인 ‘Opto File 2’ 입니다. 사실 이번 작업은 Sound 작업보다는 Visualization에 초점을 맞출 예정이라, ‘Carsten Nicolai’를 중점적으로 소개해 드릴 예정입니다. 

Carsten Nicolai 작가는 Noise Sound 작업의 선구자 격의 작가로, 단순히 음악 작곡만 하는 것이 아니라 프로그래밍 등을 통해 새로운 형태의 Sound를 만들고, Sound Visualization의 영역까지 완벽하게 해내는 엄청난 작가입니다. 물론, 지금도 활발히 활동하고 있습니다. 작년에는 류이치 사카모토와의 협업으로 영화 ‘레버넌트: 죽음에서 돌아온 자’의 사운드 트랙을 제작하면서 2017 그래미 사운드트랙 부문에 노미네이트되기도 했었죠. 

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 원리와 과정을 좀 더 자세히 살펴보도록 하겠습니다.


Alva Noto + Opiate - Opto File 2 - 2001

https://youtu.be/ZQ1zjPqJBPQ



 어떻게 만들었을까?

만들기 전에 Sound Visualization 작업은 이름 그대로 ‘Sound + Visualization’으로 나뉩니다. 따라서 작가가 직접 Sound Making Tool이나 프로그래밍을 통해 Electric Sound 나 Synthesizer 등을 만들어야 합니다. 하지만 예전 블로그에서 잠시 언급했던 바와 같이 제가 Sound를 만드는 능력은 부족하기도 하여, 이번 편에서 Sound는 기존에 있는 음원을 사용하기로 하고, Visualization 하는 데 중점을 두도록 할 예정입니다. 

우선 ‘Sound Visualization’에 대해서는 과거 연재를 통해 소개해 드린 적이 있습니다. 간단히 ‘Sound Visualization’을 정의하자면, 음악(청각)을 그림(시각)으로 나타내는 것이라 할 수 있습니다. 대표적인 예로는 ‘Equalizer’ 가 있지요. 

예술과 IT – Sound Art

http://blog.lgcns.com/1342


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을 할 수 있습니다. 


자주 사용하는 Sound Visualiztion Tool

Max•Msp: https://cycling74.com/products/max/

Touch Designer: https://www.derivative.ca/

Vvvv: https://vvvv.org/ 

Minim Library: http://code.compartmental.net/tools/minim/


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

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


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


l Java Script ThreeJS Library 공식 사이트, 사이트 구경하는 재미가 쏠쏠합니다 

 (출처: https://threejs.org/)


Java Script에 대해 설명해 드리기에는 내용이 너무 광범위하지만, 제가 사용한 library중 유용한 것을 하나 소개해 드리고자 합니다. ThreeJS라는 library인데요. Java Script에서 3D Effect를 구현하는 것을 아주 쉽게(?) 만들어 줍니다. 프로그래밍에 관심 있는 독자분들이 있으시다면 꼭 참고해보시길 권장해 드립니다. 




 만들어봅시다!

그럼, 이제부터 ‘Opto File 2’를 본격적으로 만들어보도록 하겠습니다. 또, 말씀드리지만 작업을 겉으로만 따라 만들어보는 것에 지나지 않기 때문에, 작가가 오랜 기간 연구와 노력을 통해 얻은 작업의 깊이는 따라할 수 없음을 기억해주시기 바랍니다.

① 하드웨어 만들기


이전까지의 연재에서는 하드웨어가 하나씩 있었는데, 이번 작업은 프로그래밍 작업인 관계로 따로 하드웨어 작업은 없습니다. 하지만, 대형 디스플레이에 직접 만든 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이 되겠네요.


l Sound Visualization Version 1: 뭔지 모르게 심심하다…


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


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


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


l Sound Visualization Version 2: 이제 좀 재미있어 보이는 느낌!



 완성과 마무리

여기까지 오면 어느 정도 괜찮은 느낌을 주고, 생각한 컨셉대로 나왔으니 끝인 것으로 보입니다. 그러나, 사실 지금부터가 시작이라고 볼 수 있습니다. 세부적인 변수와 Parameter들을 조금씩 수정해 보면서, 전체 음원 영역에서 원하는 Visualization이 잘 나타나도록 만들어 주어야 하는 가장 중요한 작업이 남아있는 것이지요. 이때 사용하면 좋은 것이 각 Parameter 들을 플레이 중에 조정할 수 있도록 UI를 만들어 두는 것입니다. (js/libs/dat.gui.min.jslibrary 참조) 

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

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


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


무작정 따라해 본 ‘Opto File2’

http://jbsong.com/JS/LGCNS_Sound.html


 마치며

오늘은 Make Media Art 다섯 번째 시간으로, Carsten Nicolai의 ‘Opto File 2‘ 를 만들어 보았습니다. Sound Visualization이라는 작업을 글로 설명하기 어려운 부분이 많아 충분히 설명해 드리지 못한 것 같아 조금 아쉽긴 합니다.

하지만 어떤 과정을 거쳐서 Sound Visualization 작업이 이루어지는지 느낌을 받으셨다면 저로서는 만족이라고 생각합니다. 어느 노래 제목처럼, ‘처음만 힘들지’ 그 다음 스텝은 조금 더 쉽게 밟으실 수 있을 테니까요! 그럼 다음 시간에 더 재미있는 미디어 작업으로 돌아오겠습니다!

글 | 송준봉 | 미디어 아트 그룹 teamVOID

teamVOID는 현재 송준봉, 배재혁으로 이루어진 미디어 아트 그룹으로, 기술과 예술의 융합을 주제로 로봇, 인터렉티브, 키네틱, 라이트 조형 등 다양한 뉴미디어 매체를 통해 실험적인 시스템을 구상하고 그것을 작품으로서 구현하고 있습니다.



* 해당 콘텐츠는 저작권법에 의하여 보호받는 저작물로 LG CNS 블로그에 저작권이 있습니다.

* 해당 콘텐츠는 사전 동의없이 2차 가공 및 영리적인 이용을 금하고 있습니다.


저작자 표시 비영리 변경 금지
신고
Posted by IT로 만드는 새로운 미래를 열어갑니다 LG CNS
위로