Lyrics MV Projects: 파일셋팅과 컴포넌트가 영상이 되기까지

– ArtXTech

Lyrics MV Projects: 파일셋팅과 컴포넌트가 영상이 되기까지

스마트폰 화면에서 픽셀 하나가 어긋나는 걸 잡아본 적이 있는가? 아니면 DAW에서 보컬과 MR이 묘하게 따로 노는 이유를 찾느라 같은 구간을 백 번씩 반복해서 들어본 적은?

내 Lyrics MV Project는 가사에 글자를 얹는 작업이 아니었다. 오디오 파일, SRT 자막, 이미지와 비디오 애셋, WebGL 셰이더, 모션 컴포넌트를 하나의 파일 구조 안에서 조립하고, 결국 음악의 프레임으로 출력하는 제작 시스템이었다.

나는 이 작업을 **Compound Convergent Directing(이런 타이틀은 존재하지 않는다. 당연하지. 내가 만든 말이니까)**이라고 부른다. 각각의 MV는 독립적인 결과물이지만, 실제로는 이전 프로젝트에서 만든 컴포넌트와 실패 로그를 다음 프로젝트가 계속 물려받는 연쇄 구조다.

공통 파일셋팅: SRT가 들어오면 영상이 나가는 구조

초기 Remotion 프로젝트의 기본 구조는 다음과 같았다.

VideoEditPlayground/
├── src/remotion/
│   ├── _Shared/
│   │   ├── Typography/
│   │   ├── Layout/
│   │   └── Helper/
│   │       ├── parseSrt.ts
│   │       └── subtitleHelpers.ts
│   ├── _YT/
│   ├── _MV/
│   │   ├── ChromaDrift/
│   │   ├── Niji/
│   │   └── HardestButton/
│   └── schema.ts
├── public/
│   ├── audio/
│   ├── video/
│   ├── images/
│   ├── textures/
│   └── fonts/
└── captions/
    ├── vocal.srt
    └── beat-events.csv

parseSrt는 자막을 객체 배열로 만들고, 각 문장은 startFrame, endFrame, text, style, motion, stagger 데이터로 확장된다. 오디오 이벤트는 Reaper에서 마킹한 뒤 CSV로 꺼내고, Remotion은 이 데이터를 프레임 이벤트로 변환한다.

즉, 한 줄의 가사는 그냥 문자열이 아니다.

  • 자막 시작·종료 프레임
  • 글자별 등장 시간
  • 자간과 줄바꿈
  • 가로·세로 레이아웃
  • Stagger 방향과 간격
  • 컬러와 CSS3 Blending Mode
  • 오디오 피크와의 동기화 값

이 값들을 하나의 schema로 묶어야 같은 컴포넌트를 다른 곡에도 재사용할 수 있다.

1. 첫 번째 Lyrics Visualiser: 가능성을 확인한 프로토타입

첫 번째 작업은 완성된 브랜드 MV라기보다 가능성 검증에 가까웠다. 기존 웹 애니메이션에서 사용하던 SVG Filter, CSS3, Scroll Animation을 Remotion의 30fps 프레임 구조로 옮겼다.

처음부터 거대한 아키텍처를 만든 것은 아니다. SRT 파서와 TypewriterSubtitle을 붙이고, 자막 인덱스가 바뀔 때 애니메이션이 다시 시작되도록 useRef로 이전 인덱스를 추적했다.

SRT
 └─ parseSrt()
     └─ subtitle[]
         └─ TypewriterSubtitle
             ├─ useCurrentFrame()
             ├─ subtitleIndex
             ├─ startFrame / endFrame
             └─ typingProgress

이때의 결과는 원곡 리믹스 수준의 비주얼라이저였지만, 가사 데이터와 모션 컴포넌트를 코드로 연결할 수 있다는 것을 입증했다.

관련 기록: KR-my-first-lyrics-visualiser-mv

2. Chroma Drift: 리믹스에서 보컬 커버로

Chroma Drift는 첫 번째 프로토타입을 다시 확장한 두 번째 버전이었다. 이번에는 원곡의 인스트루먼트만 재구성하는 게 아니라 직접 보컬을 녹음해 MR과 섞었다.

초기 파일셋팅은 다음과 같이 나뉘었다.

ChromaDrift/
├── audio/
│   ├── guide-vocal.wav
│   ├── recorded-vocal.wav
│   ├── instrumental-mr.wav
│   └── mix-master-final.wav
├── captions/
│   └── chroma-drift.srt
├── assets/
│   ├── illustrations/
│   ├── svg/
│   ├── textures/
│   └── shader-presets/
├── components/
│   ├── VideoStagger.tsx
│   ├── TypoStagger.tsx
│   ├── HeroScroll.tsx
│   └── TextureLayer.tsx
└── ChromaDrift.tsx

보컬 작업은 Logic Pro와 Reaper를 오갔다. Python으로 가이드 보컬과 내 녹음의 피치 편차를 확인하고, RVC는 pitch vector와 파라미터를 검토하는 분석용으로 사용했다. 최종 보컬은 RVC 생성물을 그대로 쓰지 않고 Melodyne과 Flex Pitch로 수동 보정했다. (기계음이 섞인 생성물을 억지로 쓰느니 내가 손으로 깎는 게 훨씬 빨랐다.)

WebGL 컴포넌트는 브라우저에서 보이는 것과 Remotion으로 비디오를 렌더링하는 결과가 달랐다. Three.js의 60fps와 Remotion의 30fps, Canvas 라이프사이클, 비디오 코덱이 서로 억까를 벌였다.

그래서 기존 웹 컴포넌트를 그대로 복사하지 않고, GLSL vertex/fragment와 CSS 레이어를 Remotion의 프레임 모델에 맞춰 다시 구성했다.

Chroma Drift에서 개발한 주요 패턴

  • Mondrian Grid 기반 분할
  • Bento Grid 카드 배치
  • Hero Carousel과 Swipe Roll
  • 이미지·텍스트의 순차 등장
  • WebGL 네온 배경
  • CSS3 Blending Mode와 글리치 레이어

관련 기록: KR-the-second-version-trial-lyrics-visualiser-chroma-drift

3. Biiip, BTTF, Bye My Monster: 여러 MV를 하나의 시스템으로 묶기

Biiip by Xlov, BTTF by NCT Wish, Bye My Monster by ONF는 서로 다른 곡이지만, 제작 과정에서 반복되는 패턴이 많았다. 윈도우 프레임, stacked type, 이미지 블록, Stagger, 키네틱 타이포그래피를 매번 새로 만들 이유가 없었다.

옛날 Windows 화면에서 머신이 프리징될 때 여러 창이 시차를 두고 이어지는 모션을 윈도우 프레임의 출발점으로 삼았다.

여러 샘플을 컴포넌트 토큰과 스토리보드 덱으로 묶고, 이를 **Motion CX Journey System(모션도 결국 유저 여정처럼 설계한다는 나만의 억지 타이틀)**이라고 불렀다.

폰트는 Google Fonts API 호환 여부, 상업적 사용 가능 여부, 자간과 크기, Remotion 바인딩 가능 여부를 따로 확인했다. 이 지점에서 모션 디자인은 UX 디자인과 크게 다르지 않다는 걸 확실히 느꼈다.

관련 기록: KR-re-fining-initial-lyrics-mv-biiip-and-bttf-and-styleguide-for-mv-instead-of-app

4. Niji: 씬 단위로 조립된 첫 번째 통합형 MV

Niji는 지금까지 만든 기술을 한 번에 조립한 프로젝트였다. 원곡은 L’Arc-en-Ciel의 「Niji」이고, 2026년 5월부터 6월까지 진행했다.

Niji 파일셋팅

Niji/
├── audio/
│   ├── niji-guide.wav
│   ├── niji-vocal-tuned.wav
│   ├── niji-mr.wav
│   └── niji-master.wav
├── data/
│   ├── niji.srt
│   ├── energy-peaks.csv
│   ├── scene-map.ts
│   └── motion-schema.ts
├── scenes/
│   ├── IntroScene.tsx
│   ├── TypographyScene.tsx
│   ├── CharacterScene.tsx
│   ├── MondrianBreakScene.tsx
│   └── OutroScene.tsx
├── components/
│   ├── KineticTypography/
│   ├── Stagger/
│   ├── HeroCarousel/
│   ├── TextureMix/
│   └── WebGLBackground/
├── assets/
│   ├── character-layers/
│   ├── dithering-palettes/
│   ├── glitch/
│   └── fonts/
└── Niji.tsx

Whisper로 보컬 타임코드를 추출해 SRT를 만들고, Reaper에서 에너지 피크를 마킹해 CSV로 출력했다. Remotion은 이 데이터를 읽어 자막, 전환, 이미지, 셰이더 이벤트를 프레임에 배정한다.

Niji의 핵심은 글자와 이미지가 예쁘게 보이는 것이 아니라, 노이즈·디더링·글리치·블렌딩·자간이 보컬의 감정선과 같은 시간축에 놓이는 것이었다.

Niji의 서사 레이어

주술회전의 젠인 토우지와 젠인 나오야를 팬의 시점에서 재해석했다. 굴레를 거부한 사람과 굴레의 최상단에서 인정받고 싶어 하다 무너진 사람의 관계를, 파열되는 그리드와 수렴하는 키네틱 타이포그래피로 번역했다.

관련 기록: KR-the-complete-lyrics-visualiser-mv-niji

5. The Hardest Button to Button: 다음 확장점

The White Stripes의 「The Hardest Button to Button」은 다음 단계의 실험이다. NCT Wish의 BTTF와 미쉘 공드리의 스톱모션적 연출에서 출발해, 비디오를 여러 블록으로 복제하고 프레임 오프셋을 주는 Video Stagger를 구현했다.

5프레임씩 늦게 재생되는 비디오 블록을 만들기 위해 알파채널 WebM, CSS 마스킹, WebGL 텍스처 동기화를 함께 다뤘다. 이후에는 특정 프레임을 Freeze해 스틸샷처럼 나열하는 로직으로 확장할 예정이다.

이 프로젝트에서 중요한 파일은 다음과 같다.

HardestButton/
├── data/
│   ├── drum-events.csv
│   ├── frame-freeze-map.ts
│   └── lyrics.srt
├── media/
│   ├── alpha-video.webm
│   ├── stills/
│   └── masks/
├── components/
│   ├── VideoStagger.tsx
│   ├── FreezeFrameSequence.tsx
│   ├── AlphaVideoMask.tsx
│   └── BeatTrigger.tsx
└── HardestButton.tsx

최종 결과: MV가 아니라 재사용 가능한 제작 파이프라인

각 프로젝트의 결과는 다음처럼 누적됐다.

프로젝트 핵심 결과
첫 번째 Lyrics Visualiser SRT 기반 자막·Remotion 프로토타입
Chroma Drift 보컬 커버와 WebGL·SVG·CSS 기반 비주얼라이저
Biiip/BTTF/Bye My Monster 모션 토큰과 컴포넌트 카탈로그
Niji 오디오·서사·셰이더·키네틱 타이포그래피의 통합
The Hardest Button to Button 비디오 Stagger와 Freeze Frame 확장

최종적으로 남은 것은 영상 파일 하나가 아니라, 오디오를 분석하고, SRT를 파싱하고, 장면을 schema로 조립하고, WebGL과 타이포그래피를 프레임 단위로 통제하는 나만의 MV 제작 아키텍처다.

이 시스템을 가능하게 한 관련 작업들은 아래에 연결해 두었다.

KR-my-own-production-tool-bg-maker KR-my-own-production-tool-texture-mix KR-my-own-production-tool-type-mix KR-remotion-gsap-pros-and-cons KR-figma-to-jitter-and-remotion KR-remotion-and-shader-converting-glsl-to-webgl KR-how-i-make-a-youtube-series-with-remotion-dynamic-srt-script-setup-exp-likejennie KR-KR-the-stopmotion-cut-trial-mv-the-hardest-button-to-button

결국 영상 제작에서 가장 중요한 건 툴의 이름이 아니었다. 프레임, 오디오, 애셋, 서사의 제약 조건을 이해하고, 그 맥락을 끝까지 통제하는 인간 디렉터의 판단이었다.