All Experiments Combined into Making M/Vs: 점, 선, 면이 하나의 영상으로 응집되기까지

Last updated August 24, 2026 – ArtXTech

All Experiments Combined into Making M/Vs

스무 살의 내가 “너는 앞으로 드럼을 고치고, MIDI 신호를 분석하고, Python으로 오디오를 뜯고, WebGL 셰이더를 만들고, 결국 네 목소리로 커버곡을 녹음해 Remotion으로 뮤직비디오를 만들 거야”라는 말을 들었다면 아마 비웃었을 것이다.

나는 그냥 드럼을 치고 싶었다. 그런데 왜 납땜을 하고, PCB를 태워먹고, DDR 패드를 호일로 고치고, DAW를 배우고, 파이썬 의존성 지옥에 빠지고, 대학원에서 데이터 마이닝을 공부하고, 다시 웹 애니메이션으로 돌아왔을까?

지나고 보니 이 모든 것은 서로 무관한 삽질이 아니었다. 점처럼 흩어져 있던 경험들이 선으로 연결되고, 그 선들이 어느 순간 하나의 면을 만들었다. 그 면이 바로 Lyrics MV Project였다.

1. 출발점은 50달러짜리 드럼이었다

2020년 팬데믹과 락다운은 나를 방 안에 가뒀고, 그 고립은 이상하게도 오래 묵혀둔 관심사를 다시 꺼내게 했다. 베이스를 만지작거리다 드럼으로 옮겨갔고, 50달러짜리 중고 전자드럼을 사서 직접 고치기 시작했다.

2021년 9월에는 생전 처음 납땜과 기판 수리를 했다. 목표는 단순했다. DTX Mania와 Clone Hero를 제대로 플레이하는 것. 그런데 고친 드럼으로 조금 연주하고 나면 트리거가 끊기고, 하이햇이 말을 안 듣고, 심벌을 늘리려 하면 MIDI 신호가 꼬였다.

이왕 고치는 김에 어쿠스틱 드럼을 전자드럼으로 개조했다. 80달러짜리 어쿠스틱 드럼에 트리거를 달고, MegaDrum PCB를 조립하고, 케이스를 직접 설계했다.

날이 밝으면 톱질하고, 어두워지면 납땜했다. LED를 거꾸로 붙이고, 전선을 끊어먹고, 데이터시트를 다시 읽고, 기판을 날려먹을 뻔했다.

MIDI 케이블이 문제인 줄 알고 주말을 통째로 납땜에 바쳤는데, 알고 보니 MIDI Through에 맞지 않는 케이블이었다. 이런 억까가 한두 번이 아니었다.

결과적으로 이 하드웨어 삽질은 신호를 물리적으로 이해하는 훈련이 되었다. 나중에 오디오 파형과 MIDI 이벤트, 프레임 타이밍을 연결할 때 이 경험이 계속 되살아났다.

2. 드럼을 치려다 MIDI와 DAW를 배웠다

MegaDrum은 악기가 아니라 MIDI 컨트롤러였다. 트리거가 제대로 작동하는지 확인하려면 소리를 내야 했고, 소리를 내기 위해서는 DAW를 알아야 했다.

처음에는 GarageBand로 시작했다. MIDI 신호와 사운드 셋업을 만지다 Ableton Live로 넘어갔고, VST와 MIDI Mapping을 익혔다. 신호가 끊기면 케이블과 회로를 의심했고, 어느 순간부터는 MIDI Routing과 오디오 엔지니어링을 공부하고 있었다.

Clone Hero와 DTX Mania를 플레이하면서는 음악을 단순히 듣는 게 아니라 이벤트의 순서로 보게 됐다. 킥, 스네어, 하이햇이 어느 순간에 들어오는지, 한 박자 안에서 어떤 밀도로 쌓이는지 감각적으로 분석하기 시작했다.

그 경험은 훗날 Reaper에서 오디오 에너지 피크를 마킹하고 CSV로 추출해 MV의 전환 이벤트로 쓰는 방식으로 이어졌다.

3. 자동 드럼 차트라는 신기루

드럼을 분석하기 시작한 이유는 단순했다. 좋아하는 곡을 Clone Hero용 드럼 차트로 만들고 싶었다. 그래서 Superior Drummer, TuxGuitar, Logic Pro, Audacity를 번갈아 열었다.

처음에는 Python과 머신러닝으로 오디오를 듣고 킥·스네어·하이햇을 자동 추출하면 되지 않을까 생각했다. librosa로 harmonic-percussive separation과 onset detection을 시도했다.

import librosa
import numpy as np
from scipy.signal import find_peaks

def load_audio(file_path):
    y, sr = librosa.load(file_path)
    return y, sr

def separate_drums(y, sr):
    y_harmonic, y_percussive = librosa.effects.hpss(y)
    onset_frames = librosa.onset.onset_detect(y=y_percussive, sr=sr)
    onset_times = librosa.frames_to_time(onset_frames, sr=sr)
    return onset_times, y_percussive

결론은 실패였다. 1~2분, BPM이 정확히 알려진 구간에서는 어느 정도 악기별 정보를 뽑을 수 있었지만, 완전 자동으로 쓸 만한 드럼 차트를 만드는 수준에는 도달하지 못했다.

CUDA 의존성, Conda 충돌, macOS 호환성, Google Colab 원격 디버깅까지 한꺼번에 얽혔다. 자동화를 시도하다 며칠을 날리고 나면, 그냥 손으로 시퀀서를 찍는 편이 훨씬 빨랐다.

인건비가 기계보다 싸다. 이 진리를 이때 처음 제대로 배웠다.

4. 실패가 남긴 것은 파이프라인 감각이었다

자동 추출은 실패했지만, 오디오를 데이터로 바라보는 방식은 남았다. 악보 이미지를 읽어보려 했고, MIDI로 변환하려 했고, Guitar Pro와 TuxGuitar에서 탭을 확인했다.

맥에서는 윈도우 중심의 Clone Hero 툴체인을 쓰기 어려웠다. 그래도 기타 탭을 MIDI로 바꾸고 midi.js를 통해 차트로 변환하는 오픈소스를 찾아 내 작업에 맞게 고쳤다.

2024년 초에는 Demucs와 Keras를 이용해 음원 분리와 MIDI 변환을 다시 시도했다.

이번에도 완전 자동화는 아니었지만, 구간 분리, 피크 검출, 이벤트 변환이라는 사고방식을 익혔다. 이 구조가 훗날 SRT → subtitle object → animation event → rendered frame으로 다시 나타났다.

5. 2024년: 하드웨어에서 데이터 사이언스로 이동하다

드럼과 DDR 기기는 계속 고장났다. 수리하고, 테스트하고, 다시 고장났다. 어느 순간부터는 같은 범위 안에서만 맴도는 느낌이 들었다. 그래서 하드웨어를 잠시 멈추고 소프트웨어와 데이터 쪽으로 이동했다.

대학원에서 데이터 마이닝과 머신러닝을 공부하며, 예전에 실패했던 오디오 분석을 다른 시선으로 보게 됐다. “왜 자동화가 안 되지?”에서 “어떤 조건에서 어느 정도까지 안정적으로 추출되는가?”로 질문이 바뀌었다.

이 차이는 컸다. 성공과 실패를 이분법으로 보지 않고, 입력 조건과 모델의 한계, 데이터 품질, 의존성 환경을 함께 기록하기 시작했기 때문이다.

이때 쌓은 경험은 이후 보컬 피치 편차 분석, RVC 데이터셋 정리, Whisper SRT 추출, Reaper CSV 이벤트 생성으로 연결됐다.

6. 2024년 하반기: 멈췄던 크리에이티브 코딩을 다시 켜다

업계에서 몇 년 동안 Marketing Tech와 CRO Data Analytics를 다루며 일했지만, 내가 원래 잘하던 크리에이티브 코딩과 모션 구현에서는 멀어져 있었다. 2024년 대학원 복학과 함께 이 감각이 낡았다는 위기감이 왔다.

그래서 GSAP, PIXI.js, Three.js를 다시 꺼냈다. 예전에는 HTML5, CSS3, jQuery, 순수 JavaScript와 Gulp, Grunt, Webpack을 쓰던 사람이었는데, 다시 돌아오니 Vite와 React 컴포넌트 아키텍처가 기본값이 되어 있었다.

React에서 애니메이션을 구현하는 일은 단순한 UI 개발과 달랐다. 콘솔 에러가 없어도 프레임이 튀고, 상태는 맞는데 화면이 늦게 바뀌고, 브라우저에서는 멀쩡한데 비디오 렌더링에서는 검은 화면이 나왔다.

그러면서 셰이더를 만지기 시작했다. 이미지 분석 과제에서 얻은 픽셀·밝기·레이어 감각을 시각 효과로 옮겼고, ASCII 아트와 글리치, 노이즈, 디더링을 실험했다.

graph TD
    A[이미지 입력] --> B{이미지 처리}
    B --> C[그레이스케일 변환]
    C --> D[리사이징]
    D --> E{픽셀 밝기 분석}
    E --> F[문자 매핑]
    F --> G[ASCII 아트 출력]

7. 2025년: 웹 애니메이션이 영상 파이프라인으로 바뀌다

2025년의 중요한 전환점은 Remotion이었다. React 컴포넌트를 프레임 기반 영상으로 렌더링할 수 있다는 사실이, 이전의 모든 경험을 한곳에 묶을 수 있는 통로가 되었다.

계엄 사태 이후에는 React와 CSS3로 키네틱 타이포그래피를 만들었다. 감정을 빠르게 표현하기 위해 무거운 편집 툴 대신 코드와 최소한의 레이어를 택했다.

그 뒤 프로토타이핑 흐름을 정리했다.

graph TD
    A[1 아이디어] --> B[2 Figma: 이미지와 디자인]
    B --> C[3 Filmora: 간단한 모션 스케치]
    C --> D[4 Jitter/Cavalry: 모션 프로토타입]
    D --> E[5 Remotion: 코드 기반 최종 구현]

Remotion의 기본 파일 구조

VideoEditPlayground/
├── src/remotion/
│   ├── _Shared/
│   │   ├── Typography/
│   │   ├── Layout/
│   │   └── Helper/
│   │       ├── parseSrt.ts
│   │       └── subtitleHelpers.ts
│   ├── _YT/
│   │   └── HowIProgressed/
│   │       ├── YTep1.tsx
│   │       ├── core/contents-srt.tsx
│   │       └── contents/contentSrt.tsx
│   └── schema.ts

SRT 파서는 자막을 데이터로 만들고, TypewriterSubtitle은 useCurrentFrame()을 기준으로 타이핑 애니메이션을 계산한다. 컴포넌트가 새 자막에서 재생성되지 않는 문제는 subtitleIndex와 useRef로 해결했다.

이 프로젝트에서 처음으로 “영상도 데이터 파이프라인으로 만들 수 있다”는 감각을 얻었다.

8. 점, 선, 면: 실험들이 MV로 응집되는 방식

각 실험은 다음과 같은 변환을 거쳤다.

이전 경험	축적된 감각	MV에서의 결과
드럼 트리거 수리	신호와 레이턴시 이해	MIDI·오디오 이벤트 동기화
DAW와 VST	소리의 레이어와 마스킹	보컬 믹스·마스터링
자동 드럼 분석 실패	데이터 조건과 모델 한계	Python 피치·에너지 분석
Guitar Pro·MIDI 변환	이벤트를 파일로 다루기	CSV·SRT 기반 타임라인
GSAP 배너	제한된 환경의 최적화	Stagger·Timeline·Component
이미지 분석·ASCII	픽셀과 밝기 감각	Dithering·Noise·Glitch
React·TypeScript	컴포넌트와 타입 구조	Remotion 영상 아키텍처
Figma·UX 시스템	리서치와 토큰화	Motion CX Journey System

2025년 말에 이르러 나는 음악과 이미지와 코드를 별개의 기술로 보지 않게 되었다. 드럼에서 박자를 구조화하던 방식과, 자막에서 프레임을 구조화하던 방식은 본질적으로 같았다.

9. 결국 MV 제작으로

2026년의 Lyrics MV Projects는 갑자기 생겨난 것이 아니다. 첫 번째 비주얼라이저, Chroma Drift, Biiip/BTTF/Bye My Monster의 모션 패턴, Niji의 통합형 아키텍처는 모두 2024–2025년 실험의 후속 결과다.

이제 MV 한 편을 만들 때 나는 다음 순서로 움직인다.

음악을 선택하고 보컬 또는 오디오 구조를 정리한다.
Python, Whisper, Reaper 등으로 타임코드와 이벤트를 만든다.
Figma에서 이미지·타이포그래피·레이아웃을 설계한다.
Jitter나 Cavalry로 모션의 방향을 빠르게 확인한다.
Remotion과 TypeScript로 프레임 단위 컴포지션을 구현한다.
WebGL, GLSL, SVG Filter, CSS3 Blending Mode를 필요한 장면에 배치한다.
렌더링 결과를 다시 확인하고, 실패한 컴포넌트를 수정한다.

이 워크플로우는 한 번에 완성된 것이 아니다. 하드웨어를 고치며 신호를 배웠고, 자동화에 실패하며 수동 작업의 기준을 배웠고, 회사에서 낡은 감각을 느끼며 다시 코드를 공부했고, 대학원 과제로 데이터와 모델의 한계를 배웠다.

에필로그: 모든 길은 작업의 맥락으로 돌아온다

나는 한동안 내가 너무 많은 것을 건드린다고 생각했다. 드럼, DDR, 펜싱, MIDI, VST, Python, 머신러닝, React, GSAP, WebGL, Remotion. 주변에서 “하나만 제대로 해라”라는 말을 들을 때마다 나도 조금 흔들렸다.

하지만 지금 와서 보면, 그 파편화는 결함이 아니었다. 각 분야에서 얻은 제약 조건과 실패 경험이 서로 다른 분야의 문제를 해석하는 언어가 되었다.

드럼을 고치며 신호를 이해했고, 오디오를 분석하며 시간축을 이해했고, 데이터 사이언스를 공부하며 모델의 한계를 이해했고, 코드를 짜며 그 모든 것을 재사용 가능한 구조로 묶었다.

그래서 Lyrics MV는 단순한 결과물이 아니다. 2024년과 2025년의 실패, 챌린지, 연구과제, 취미, 노가다가 하나의 도메인 아키텍처로 응집된 과정자산이다.

결국 복잡한 창작을 완성하는 건 AI 버튼이나 툴의 화려한 기능이 아니다. 현장의 제약 조건을 이해하고, 무엇을 자동화할지와 무엇을 직접 해야 할지를 판단하며, 흩어진 맥락을 하나의 결과로 통제하는 도메인 전문가, 즉 인간 디렉터의 가치다.