소개
사실 맨 처음부터 잘못된 시작이었어요.
저는 사운드쪽에 관심이 있는 사람이라, 맨 처음 그전에 발표논문 하면서 사운드를 샘플로 채집해 측정하고, 그것의 변화를 10년동안 추적하여 음악트렌드와 사운드의 변화를 검증했던 논문에서 그거 추출하느라 고생했던게 생각나서, 사운드 채집과 측정의 상황을 좀더 편하게 할 수 있는 방법을 찾으려 했답니다. 그때 6개월동안 분석하느라 정말 고생을 했었는데, AI의 시대면 뚝딱 되리라 생각했던게 완전 경기도 오산이었죠.
Gemini와 Colab와 Google Sheets, Looker Studio를 사용해서 만들던 중에, AI에게 음향과 여러 변수들을 가르치느라 너무 힘이 들어서, 그리고 이미 합쳐져 있는 소리에서 Demucs 같은 Sound Separation 과정들을 끌고 하다보니 아 건드리지 말아야할 것을 건드렸구나... 뭐 이거 금방 끝날 일이 아닌 것 같고 이러다가 사업자 종목 추가하게 될것 같아서..그리고 사실은 Looker Studio 가 결과값 그래프가 마음대로 안나오고 흰머리가 늘고해서(사실 그냥 Spreadsheet 에서 해도되는걸!!) 그래서 한정된 시간 핑계대고 엎었습니다. (시간만 있었더라도 했을거라구요..!)
진행 방법
두번째로 뭘할까 하다가 그전부터 해야겠다 하던걸 끄집어 냈습니다.
일반인들에겐 전혀 쓸모없는 지식일수도 있지만, 의외로 소리가 재생되는 과정에서는 음향을 공부하는 사람이나 필드에 있는 사람들사이에선 '거의 항상' 언급되는 소리의 음량을 일정하게 하는 ‘Compression’에 대한 인터렉티브앱을 개발하자! 그래 마침 Antigravity도 슬슬 궁금해지던 차에 한번 도전해보자! 자 가보자! 하고 삽을 떴습니다.
TV의 채널을 돌릴 때 각 채널의 음량이 다 제각각 다르면 리모컨을 손에 들고 올렸다 내렸다 바쁘겠죠. 지하철에서 방송나오는 것들도 들렸다 안들렸다 커졌다 작아졌다 이러면 곤란하죠. 음악에서나 광고, 영화, 게임, 모든 미디어 매체에서 나오는 소리는 기본적으로 일정하게 볼륨조절을 하는데, 그것이 (다이나믹레인지라고 하는) 작은 볼륨과 큰 볼륨의 차이를 줄여서(사실 큰 볼륨을 어느 일정기준아래로 줄여서), 어느정도 원하는 비율로 일정하게 만드는 작업이 Compression 입니다. 물론 작아진대로 놔두지는 않고, 일정하게 되었으니 이제 일정하게 키워야지 하는 식으로 그 뒤 작업을 하죠. 어쨌던, 문제는 이게 눈으로 안보이고 귀로 듣고 해야되는 작업이라 사실 일반인들이 들으면 ‘뭐가 달라졌다는거야?’ 같은 부분이 크다는거죠. 음향을 공부하는 학생들에게 가장 난이도 높은 부분에 속하는 거라, 그리고 소리를 줄이고 키우는 과정이 1930년대 아날로그 시대부터 지금까지 오고 있는데, 그 발전 과정중에서 전류와 증폭에 관련되어 각 소자들이 뭐가 들어가고 어떤 원리로 진행하느냐에 따라 원래의 소리가 또 바뀌기 때문에 원리에 따라서 분류를 다섯가지 정도로 하고, 또 디지털 시대가 되어서 하이브리드 까지 합치면 개수가 7개 전후가 되어서 ‘한 개 손대자!’했는데 ‘UI 7개 만들자!’ 가 되어버렸네요. 여튼 거기에 내용도 교육관련된 부분들과 작동까지 시뮬레이션 하는 상황이 되니, 험한 것이 나왔군요.
[1. 기획]
첫번째로 셋을 모았습니다. 제미나이, 안티그래비티, 스티치.
안티그래비티와 스티치를 데려온 것은, 하도 주변에서 말들을 하길래 궁금해서, 이 기회에 안만나면 언제만날까 하는 생각이었습니다. 스티치는 차라리 만나지 말…
1. 전반적인 기획 내용을 가장 심플하게 만들어서 제미나이에게 줬습니다. Antigravity를 바로 써도 됐겠지만, 중간 오류나 수정할 때 좀더 친숙하고 매끄럽고, 의논할 상대가 티키타카가 익숙한 제미나이면 좋을 듯 했습니다….만 이렇게 수렁으로 빠지게 될지 그때는 정말 몰랐습니다.
2. 가이드 투어 모드 - 5단계(이론 → 구성 요소 → 청취 → 연습 → 퀴즈)를 통해 7가지 컴프레서 유형 모두를 단계적으로 학습할 수 있도록 만들었고, 한국어와 영어를 전환할 수 있도록 했습니다.
3. 첫번째 벌어진 일은 Stitch에서 만들어온 이미지가 완벽하지 않다는 것이었습니다. 만든 이미지야 모르는 사람에겐 괜찮다~! 겠지만, 아는 사람들에겐 아주 대표적 모델의 형태와 유사한 구조로 만들어줘야 저작권을 피함과 동시에 익숙하게 쓸 수 있단 말이죠. 한데, AI가 상상하면서 특히 자기가 자의적으로 분석해서 만들어버리는 통에 수정에 수정을 했습니다. 기능적인 부분과 내용은 아직 손도 안대고 UI에서 엄청 오래걸리고, 참 아무것도 아닌 바늘달린 미터 만들기가 그렇게 힘들지 몰랐네요. ㅠㅠ 스티치가 만든 것 가져와서 제미나이에서 세부수정을 하고 씨름하다가 더 이상 안되면 다시 Stitch에 가져가고, 왔다갔다 하다보니 코드 하나 구조 하나도 모르던 입장에서 전체 구조내용이 눈에 슬슬 익게되어 간단한건 Antigravity 에서 파일열고 제가 이래저래 만지기도 하고 진행했습니다.
* 실제 소리를 들으며 유닛을 조정하면서 배우는 시뮬레이션 과정을 경험할 수 있는 인터랙티브 랙 유닛을 비주얼라이저와 함께 만들었구요,
* 역사와 원리, 특징을 제공하는 교육 콘텐츠도 함께 제공했습니다.
또한 흥미 유발을 위해 실제 적용된 유명 곡들을 들을 수 있게 유튜브 연동을 했구요.
* 퀴즈를 통해 핵심체크를 최종적으로 할 수 있게 했습니다
* 그래, 글로벌이다! 음향은 세계 공통언어지! 해서 외국사용자를 위한 이중 언어를 지원하게 만들었구요.
* 최대한 거의 증명이 안되는 청각적부분을 시각적인 부분으로 이해하고 동시에 상상할 수 있게 하며, 이해하기 싫고 어려운 원리와 역사를 쉽게 접할 수 있도록 만들었습니다.
[2. 설치]
2. 안티그래비티에 첫 틀 설치 시작
터미널에 제미나이가 짜준 코드를 넣고 실행하니 중간중간 물어볼 것들 물어보면서 설치하고 깔고 계속 알아서 열심히 일합니다.
아, 일단 디자인을 위해 Tailwind CSS를 설치하라 하더군요. 시킨대로 꾸벅.
Hello Antigravity! We are building an "Interactive Audio Compressor Academy" web app.
Please initialize a React project using Vite and Tailwind CSS immediately.
Then, replace the content of the following files to implement a "Real Analog Rack Design" based on the Tube-Tech CL 1B compressor.
1. First, update 'tailwind.config.js' with this configuration to add analog colors:
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
'tt-blue': '#005f87',
'tt-blue-dark': '#004a6a',
'tt-knob': '#1a1a1a',
'vu-bg': '#f3e5ab',
--
이하 300줄이므로 생략
폴더 만들고 트리구조로 착착착 안에 뭘 집어 넣네요.
제미나이 말로는 “클라우드(웹)가 아니라, 윈도우 컴퓨터(Local) 하드디스크에 파일이 생성” 이 되어서, 즉, Antigravity가 클라우드가 아니라 제 로컬 컴퓨터 안에 집을 지었으니, 제 로컬 컴퓨터에 엔진(Node.js) 을 깔아야 npm 명령어가 먹는다고 해서 깔고, React와 Tailwind 를 깔았습니다.
대본부터 시작해서 제가 그전에 만들어준 내용들 포함해서 열심히 뭘 만들었습니다.
1차 랜딩페이지
촌스럽습니다. 맘에 안드네요 (나중에 만들다보니 얘는 선녀였습니다)
기본 지식, 실제 소리를 들으며 작동에 따라 소리 변화가 생기도록 만들었습니다.
근데, 변화를 일반인들은 잘 모른다고 했죠? 그래서 실제 파형의 변화를 눈으로 볼 수 있도록 만들었습니다. (근데 이거 이렇게 만들면 안되는데)
다른 분 사례에서 퀴즈 좋길래 생각난김에 넣어서 그동안 배운거 테스트 해보기.
한데, 비주얼적인 부분(변화되는 사운드 샘플)과 과정중에 제가 선택하지 않고 AI가 생성한 샘플 사운드 및 UI와 오류등 여러모로 수정이 필요한 부분이 있어서 제 메인 작업프로그램인 Avid의 Pro Tools 에서 실제 작업한 Kick Drum 샘플과 이미지를 만들어와서 사운드, 이미지 교체 및 수정요청하는 작업을 진행했습니다.
[3. 그렇게 쉽게 될리가.]
여기까지만 간단히 하고 리뷰만 쓰고 나머지는 천천히 해가자하고 마음을 먹고 돌아서는순간 그만 욕심이 나버렸습니다; (2주전얘기 입니다;;; )
어차피 모바일환경에서 학생들은 다 듣는데, 아무래도 웹버전 보다는 모바일 환경에서 사용할 수 있도록 구성을 바꾸자 해놓고 보니, 생각해보니 이름은 하나인데 6가지 종류에 기본 모델까지 총 7개의 UI를 다시 만들어야 했습니다. 몇일 날 샜는데, Stitch를 쓰다가, ‘지금 생성이 안됩니다 이따 또 해보세요’ 오류가 며칠을 뜨길래 인터넷 찾아보니 유사한 문제를 겪는 사람들이 많더군요. 좀 길거나 시키는게 많으면 파업한다는 ㅠㅠ 기존에 작업하던 프로젝트 오픈하려하니 3일째 무한 로딩 같은 상황도 겪어보고, 그러다가그냥 스티치에 지쳐버렸습니다. 리얼리스틱도 좋은데 내가 늙겠네. 미터가 그렇게 안되나;;;
부글부글부글 (이거말고도 20장은 더 있는듯)
게다가 스티치가 이러기 시작했습니다.
아 딸깍 스위치도 사람 힘들게 하는 ;;;;;
그리고 코드를 하염없이 만들어주던 제미나이가 컨텍스트가 쌓이면서, ‘자, 하나만 수정하면 돼! 힘내자!’ 포켓몬 트레이너처럼 격려하던 이틀 날샌 제게 한방에 오디오는 소리안나고 UI는 자기마음대로 바꾸고 텍스트는 알아서 날려먹고 하는 것을 보며, 한번만더 한번만더 하고 기회를 주다가 ‘아 얘랑은 이제 이 방에서는 만나면 안되겠구나, 있던 정도 없어지겠다’ 하는 생각이 들어 방을 옮기게 되었는데,
“제미나이는 메모리가 다른 채팅룸과 공유가 안돼죠 ㅠㅠ”
아무리 이사짐을 잘 싸고 제미나이가 “이사갈 준비를 위한 완벽히 프롬프트를 짰습니다!!” 하고 자신만만해도 실제 제가 프롬프트를 봐도 ‘이걸로 돼?’ 같은데, 과정이고 맥락이고 생판 처음들어보는 다른 제미나이가 다른 방에서 이걸 보고 ‘다 알겠어. 내가 바통 받아서 잘 갈께 그동안 수고했어’ 이런 것은 불가능한 얘기지 않을까 ㅠㅠ 제미나이랑 길게 얘기하지 말았었어야 하는데 ㅠㅠ
(사실 안티그래비티가 코드 정리해주는 역할을 하게 된게 참 아쉽습니다. 코드를 맡겼었어야 했는데, 돌아가기는 너무 늦었잖아요)
참고로 지금은 방을 네개째 팠습니다. 결국은 어느정도 계속 다시만들고 다시만들고 다시 가르치고 다시 회의하고, 한가지 다행은 사람이었으면 환불해주고 일안한다고 다른 사람 찾아보라고 했을텐데 도망도 못가는 제미나이가 불쌍했어요. 여기까지 열흘넘게 시간을 부어 이제 도망도 못가는 저도 불쌍했구요.
결론은 VU미터는 일러스트레이터에서 제가 이거때매 일러를 배워서 VU미터를 바늘빼고 그려서 SVG파일로 뽑아서 코드로 바꿔서 등등을 해서 전달하고, 만들어 놓은게 또 아니어서 그걸 바탕으로 또 수정을 하고... 해서 '이게 최선이다! 더하면 나도 후기 못쓰고 너도 다운되겠다!!' 하는데까지 해서 상업용으로 풀거 아니니 우린 여기가 끝인가봐 이쯤해서 끝내 하고 말았습니다.
아래는 이삿짐 쌀 때 두번째 방에서 세번째 방으로 떠넘길 때 써놓은 프롬프트입니다.
📋 [인수인계서] UI 컴포넌트 개발 완료 보고
1. 작업 개요
· 목표: 웹 기반 오디오 컴프레서 교육용 시뮬레이터 UI 개발
· 상태: 6종 컴프레서 UI 컴포넌트 개발 및 App.tsx 통합 완료 (UI 동작/애니메이션 구현 됨)
2. 완료된 컴포넌트 목록 (src/components/compressors/)
eCompressor: 빈티지 xxxx스타일, 노브 디자인.
2. oCompressor: xxxx 스타일, 대형 xxx.
3. tCompressor: xxxx 스타일, xxxx모드(UI), xxxx미터 반응.
4. eCompressor: xxxxxxxxx 스타일, 복잡한 xxxxx & xxxx 배치.
5. aCompressor: xxxxx 스타일, xxxxx 미터, 모던xxxxxx
6. lCompressor: xxxxxxxx 스타일, 실시간 xxxxxx, Dual xxxxx, xxxxxx화.
3. 주요 구현 사항
· Visual Feedback: 모든 컴프레서는 xxxxxxxxx 따라 xxxxx가 실시간으로 반응하도록 xxxxxxxxx
· Param Control: 각 xxxxxx(xxxx, xxxx, xxxx, xxxx, xxxx, xx 등)가 App.tsx의 상태와 양방향 연동됨.
· Navigation: App.tsx 상단 탭을 통해 6가지 모델 간 즉시 전환 가능.
4. 향후 요청 사항 (Next Step)
· Audio Engine 연결: 현재 UI만 작동 중이므로, Web Audio API (useAudio.ts)와 실제 DSP 로직을 연결해야 함.
· DSP 차별화: xxxx(xxxxx,xxx,xxxx 등) 소리 (xxxx/xxxxx xxxxx, xxxxxxxx) 구현 필요.
· 콘텐츠 통합: xxxx 및 xxxxxx와 xxxxxx 연동.
· 배포: Vercel 등을 통한 웹 배포 진행.
지금은 최종 검수 및 배포 앞두고 있습니다. 낼은 끝내야죠(매일 하는말)
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
웬만한 코드는 항상 저장해놓자!! 좋은건 저장해놓자!! 이미지도 캡춰하자!! 긴거는 제미나이로 하지말자!!!! 그림은 그림 전문에게 맡기자!! AI 믿지 말고 꼼꼼히 검수하자!!! 오류는 항상 개발자모드 (F12) 눌러서도 확인해보자!! 언어는 전혀 모르더라도 코드를 보면서 이게 뭐하는 거구나 파일과 코드에 대해 좀 익숙해져보자!!!
과정 중에 어떤 시행착오를 겪었나요?
많았지만 위에 언급했으므로 다시 언급하기가 싫...
도움이 필요한 부분이 있나요?
그래픽 UI(front) 잘 짜는(잘 베끼거나 잘 응용하고 말 잘 통하는) AI를 만나서 코드 짜는 친구에게 바로 소개해주고 싶어요
앞으로의 계획이 있다면 들려주세요.
아직도 수정중이고, 끝날때까지 끝난게 아니지만
이 앱 만들어서 100명에게 무료로 풀고, 그 뒤에 아주 저렴하게 유료화 하려는 원대한 꿈을 가지고 있습니다.(뭐했는지 보고하면서 어 그거 시간 그렇게 까먹고 잠안자고 컴퓨터 앞에만 앉아서 일 안하더니 일하던거였구나? 의 소리를 듣고 싶어요) 모든 사람에게 거의 필요없지만 몇명에겐 꼭 필요하거든요 ^^
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)
