Remotion 템플릿, 디자이너를 위해 GSAP으로 갈아엎은 이야기

1월 말에 발간했던 가장 처음 제작했던 리릭스 비쥬얼 라이저. 이때는 원곡을 리믹스하는 수준에서 그쳐 보컬 녹음과 믹스마스터링이라는 더 큰 장벽을 아직은 모를 때였다.

여튼 저 비쥬얼라이저 리릭스 뮤비를 만들면서 웹gl, svg filter effect, css3, scroll animation을 응용해 이걸 frame 단위로 변경해 화면을 채우는 웹 애니메이션 컴포넌트-> remotion 변환의 여러 누적된 작업들이 모여 하나하나 스타일을 이뤘다.

이 비디오를 만든 과정은 KR-my-first-lyrics-visualiser-mv 에 자세히 담겨있다.

그 결과로 처음 프로토 타입을 만든 것이 이번 1월에 발행한 리릭스 비디오였다.

비디오 에디터 툴이 사실 리모션으로 일일이 코딩하는 것보단 훨씬 효율성이 좋다. 어떤 이들은 mcp와 skills를 이용해 리모션으로 영상을 만들 수 있다곤 하지만 그 영상의 퀄리티와 세밀한 컨트롤까진 장담을 못한다. 뭣보다 타이밍과 비트가 생명인 내 영상 스타일상 매번 커스텀 세부 조절이 필요한 작업인데 코딩 모델을 통해 이를 구사하는 건 아주 단조로운 슬라이드/프레젠테이션 형식의 단순한 애니메이션에 그칠뿐이다. 여차하다 컴플렉스한 애니메이션을 만들 수는 있겠지만 그 여러 커스텀 애니메이션을 다양한 트랜지션으로 엮어 다이나믹 데이터(싱크로된 자막파일)를 삽입해 정확한 타이밍에 정확한 트랜지션과 키네틱 그라프를 다이나믹하게 구사하는 걸 코드로 할 바엔 차라리 애프터 이펙트나 카발리를 쓰는게 훨씬 더 효율적이다.

하지만 여러 전방위 다른 포맷의 데이터를 매번 스케일업 혹은 전환을 다양한 방면으로 할 때 이런 에디터툴은 그 툴만의 한계가 있기 때문에 그 장벽을 없애는 게 더 나은 워크플로우에선 리모션을 쓰는게 좋다. 이것이 가능한 것은 영상 구현에서 오류가 났을 때 프롬프트에 의존하는 것이 아니라 직접 내가 코드 구조를 보고 아키텍쳐를 문서로 남기며 점진적인 스케일업을 과정을 기록하며 디버깅을 할 수 있는 안목이 있어야 가능한 것이다. 그렇기에 나에게 가장 최적의 스타일은 final cut pro, after effect, 같은 standalone 프로그래밍과 여러 가벼운 모델학습을 이용한 파이썬 미디어 보조 애널리틱스, 그리고 최종 패턴형식의 다이나믹스 애니메이션 컴포지션엔 직접 코딩하여(다시 말하지만 skills나 mcp를 이용해 프롬프트만으로 몇 시간 혹은 몇분만에 영상을 만들 수 있단 착각은 버려야한다. 대부분 그런 말을 퍼뜨리는 사람들은 제대로 3분 이상의 다채로운 키네틱 애니메이션을 구현하는 안목이나 센스도 없이 아주 심플한 피치덱 수준의 영상을 1분 이내로 뽑아놓고는 바이럴 돌리는 사람들이다.)

이를 통해 svg 필터와 css3 블렌딩 모드 등을 응용해 여러 레이어 이펙트를 영상미로 가져오는 작업들을 이번 niji 커버 뮤비 작업에 도입할 수 있었다.

이러한 작업이 가능했던 것은 내가 1월 말에 발간한 리릭스 비디오를 통해 이 아키텍쳐의 시험작을 처음으로 끝까지 완성하였고 이를 좀 더 증강해보고자 하는 시험을 이번 두번째 버젼의 영상을 통해 이루고자 했다.

첫번째 프로토타입의 시연은

이 비디오를 만든 과정은 KR-my-first-lyrics-visualiser-mv 에 자세히 담겨있다.

결국에는 오디오 드라마 시디를 만든다고 tts 서비스를 조교하며 얻어낸 음성 데이터 패턴과 그 학습라인을 통해서 내 목소리를 모델학습 시키고 거기서 다시 로직프로르 통해 여러 톤 변화 및 음정 변경을 통해 내가 연기를 하면 다양한 목소리로 여러 캐릭터의 오디오 드라마를 연출할 수 있는 실험들과 더불어 로직프로 및 여러 음정 마스터링 vst 사용 짬밥이 들면서 노래 믹스도 가능하게 되었다.

KR-how-1-person-can-make-diverse-charactor-acting-for-audio-drama

저 첫번째 리릭스 비디오작업과 내가 2025년 동안 거쳐온 웹 페이지 애니메이션-> 리모션 fps 기반 애니메이션 전환 과정 중에 겪어온 여러 시도와 고난( 자세한 것은 이 아티클을 참조: KR-how-my-motion-graphics-workflow-has-been-evolved)들을 거쳐 두번째 re-skin 작업을 하게 되었다.

이번에는 원곡을 stem split해서 여러 vst로 악기 instrumental rework를 한 것에서 좀 더 나아가(이 작업에 대해서는 이 아티클에서 설명KR-K-Pop-Live-Band-Rework) 내가 스스로 노래를 부르며 녹음하고 이를 믹싱용으로 재편집해 원곡의 MR과 마스터링을 잘 섞어서 나만의 커버곡을 찍고 그에 맞춰 visualiser m/v를 내보고자 한거다.

기존 악기 인스트루먼트 리믹스를 해봤으니 보컬을 섞는 건 괜찮지 않을까 했는데 그렇게 만만할리가 없었다.

내가 듣기에 괜찮게 들리던 원곡은 사실 해당 가수의 보컬음색과 목소리톤에 맞춰 정교하게 EQ를 맞추고 마스킹에 텍스쳐를 다 입힌 음원이었으니 해당 아티스트가 아닌 내가 커버 노래를 불렀을 때 이 음색을 배경음에 섞으니 너무나 이질감 들게 전혀 섞여들지 않았다. 여기서부터 난관이다. 아니 그냥 가라오케에서 우리가 흔히 노래부르듯 엠알만 분리해서 그 위에 내 노래 음성을 입히면 되잖아. 왜 이렇게 겉도는 거지?

그 이유를 해결하기 위해 수차례 검색해보고 이리저리 삽질하며 VST 설정값이랑 믹싱 값을 이리저리 건들여보았다.

이렇게 음향 작업을 하는 동안, 1차 프로토타입을 위해 만들어봤던 여러 텍스트 애니메이션 이펙트들과 webgl들로 구성한 여러 쉐이프, 배경, 텍스쳐 질감 등을 다시 둘러보았다.

첫번째 프로토타입은 일단 webGL로 구성된 여러 소스들을 리모션 30fps 기반의 재생플레이타임에서 어긋나지 않게 프리뷰하는 것이 관건이었다. 이 과정에서 렌더링이 삑사리나 검은 화면만 나오거나 쉐이더의 일부 버텍스는 아예 출력도 안되는 등 여러 골치아픈 문제들이 있었지만 그에 관해서 상세한 건 다음에 언급하기로 한다.

[GSAP, Remotion, 순수 리액트 typescript로 지정한 여러 파편들을 모아 타임라인에 맞게 싱크해서 키네틱 타이포 애니메이션을 이뤄 한 플레이에 4개의 샘플을 동시 시연해보는 프리뷰를 구성한 모습]

애프터 이펙트나 카발리로 하지 않고 굳이 이렇게 코드로 하는 이유가 무엇이냐고?

그것은 바로 lyrics의 자막 구간 파일이 문단별로 특정 자간을 분리해 나열하면 총 180줄의 입력 데이터가 나온다. 나는 그 데이터 값을 일일이 수정할 자신이 도저히 없다…물론 카발리 역시 스프레드시트나 데이터셋을 로딩해 능동적으로 입력데이터를 넣을 수는 있지만 숙련도의 차이랄까. 카발리에 익숙한 경험보단 코드 에디터를 열어서 어느 컴포넌트가 어떤 로직을 할당하는지 라인별로 리뷰하며 디버깅하는 게 훨씬 익숙해서 일테다.

위는 쉐이더 백그라운드를 타임라인 트랙에 맞게 싱크되게 만든 webGL 백그라운드들이다. 몇 개는 아마 react.bit 의 시연툴에서 본 듯한 익숙한 것들도 있을 것이다. 그건 맞다. 쉐이더를 조합하는 패턴에 있어 몇가지 유용한 예시가 있어 이 글에 내 리퍼런스가 되어준 react.bits 소스코드를 제공한 오픈소스 프로젝트에게 감사를 표한다.

혹자는 물을것이다. 그 컴포넌트에서 그냥 가져다 쓰면 되지 왜 디버깅하느라 한달 가까이 머리를 싸맸냐고.

그것은 바로 우리가 웹 브라우저상에서 렌더링되어 시연되는 비쥬얼 구성요소랑 remotion을 통해 canvas에서 추출해서 이걸 다시 webGPU 엔진을 통해 렌더링해 웹미디어 비디오 코덱으로 압축해서 프리뷰 렌더링 하는 것과는 여러 차이가 있기 때문이다.

우선 three.js는 기본값 프레임이 60프레임이다. 한편 리모션은 30프레임이 기본이다. 물론 60프레임으로 조절할 수도 있겠지만 이 프로젝트들을 구성하기 위해 자막 구간 가르기, 타임라인 싱크가르기, 그 외 각종 다양한 컴포넌트들을 전부 다 뜯어고쳐야하는 문제가 있었다. 또한 비디오 포맷으로 웹 브라우저에서 렌더링하기 위해 거치는 코드 아키텍쳐의 라이프 사이클 공정은 웹 브라우저에서 우리가 직접 눈으로 확인하는 거랑은 또 달랐다. 쉽게 간단히 말하자면 웹페이지에서 멀쩡히 보이는 애니메이션 컴포넌트들의 반할 이상은 비디오 포맷으로 다시 재구성해 렌더링할 때 제대로 출력되는 게 없기 때문이다. 이에 대해 자세한 이야기는 다른 아티클에서 별도로 다루는 게 좋겠다…이거 해결하느라 진짜 별의 별 개삽질을 다 했기 때문에…ㅠ

여튼 각설하고 왜 프리소스로 나와있는 툴을 안 쓰고 그 구성방식만 참조하고 내가 새로 나만의 툴을 만들어야하는 이유는 바로 출력 렌더링의 포맷이 다르기 때문이다. 대부분의 오픈소스로 공유된 프리소스들은 웹 SASS 프로덕트를 위한 빠른 프로토타입핑을 위해 구현되었다. 니가 만든 모션 그래픽스도 프론트엔드 스킬셋이고 웹 애니메이션 컴포넌트도 똑같은 스택인데 그냥 갖다 붙이면 되지 않냐고?

그게 됬으면 내가 왜 머리털을 쥐어 뜯으며 삽질을 했겠나. 안되니까 자체 툴로 루트를 틀었지…시발…. 여튼 shader bg generator에서 영감을 받아 여러 vertex와 fragment를 실타래처럼 얽어 내가 직접 파라미터를 주면 그걸 schema로 추출한 뒤 uniform에서 애니메이션 타임프레임을 리모션 fps 렌더링 형식에 맞춰서 코드를 출력하는 내 자체 프로덕션 툴로 만들었다. 당연하지만 이건 리모션 기반의 내 영상 기법을 위한 자체 프로덕션 툴이므로 오픈 공개는 안 되어있다. 사용자가 나니까(…) 범용성의 시장 수요가 없는 기획 제작을 내가 뭣하러 오픈하나용.

현재 texture mix는 얼추 가닥을 보이는데 다이나믹 키네마 타이포 그래픽스를 구성하는 컴포넌트 제작 믹스툴은 현재 아직도 작업 진행중이라 안타깝게도 일일이 코드를 한줄 한줄 쳐다보며 타이포를 고치고 있다…2026 대 llm시대에 이게 뭐하는 삽질인가 싶지만 걍…안 해봤음 말을 말자.

타임라인에 맞춰 타이포그래피 애니메이션이 타임라인 키프레임에 맞춰 계산되게 싱크하고 4개의 그리드를 한 뷰로 보며 프리뷰하는 게 얼추 되었다. 자 이제 작업환경을 위한 카탈로그가 갖춰줬다.

[Three.js 를 응용한 webGL 프로세싱으로 입혀보는 텍스쳐 렌더링에 미디어를 얹은 경우를 프리뷰셋으로 시연한 브라우저 화면]

얼추 효과를 위한 VFX 프로세싱 텍스쳐와 미디어 애셋, 그리고 키네틱 타이포 그래픽스 샘플링이 갖춰줬으면 이걸 어떻게 구성할 것인지 생각해 볼 차례다.

송충이가 솔잎밖에 먹은 게 없으니 결국 하던 가라대로 Figma를 켜서 먼저 이미지 비쥬얼들을 나열하기 시작했다. 이 과정에서 리모션 프리뷰를 통해 애셋과 프로세싱 이펙트를 확인하는 장점은 아무래도 비디오 렌더링 추출 옵션에서 이미지 스틸컷으로 바로 출력이 가능하다는 점이다.

그렇게 여러 버젼의 컴포넌트 카탈로그 스틸샷 이미지들을 모아서 1920x1080 사이즈의 덱으로 모아보았다.

그렇게 모아놓고 2025년에 웹 컴포넌트로 뽑아놨던 타이포 그래픽스 애니메이션의 스틸샷도 캡쳐해서 무드보드 형식으로 피그마에 나열한 뒤 하나하나 소스들을 모아 브레인 스토밍을 하였다.

이런 식으로.

1월에 작업했던 shader 스틸샷을 여러 샘플을 뽑아 나열해보고 여러 다양한 타이포그래픽스를 배치했다. 더불어 웹 컴포넌트에서 작년에 한 작업들의 일부 스틸컷들도 뽑아 svg 애셋이나 png 이미지 애셋으로 정리했다.

[모션 그래픽스를 코드로 시연하기에 앞서 어떤 비쥬얼 이정표를 향해 달릴지 가늠해보는 모션 그래픽스 스토리보드. 피그마를 통해 제작]

그렇게 여러 화면과 애셋, 스티커 애셋 등을 불러들여 타이포와 함께 배치하며 레이아웃을 잡아본다.

4-5월에 걸쳐 1월에 만든 chroma-drift lyrics m/v 영상을 좀 더 재편성해서 다듬고 이를 기반으로 앞으로 키네틱 타이포 애니메이션을 좀더 어떻게 패턴화하고 체계화시킬지 여러 고민을 하게 되었다.

여튼 저 비쥬얼라이저 리릭스 뮤비를 만들면서 웹gl, svg filter effect, css3, scroll animation을 응용해 이걸 frame 단위로 변경해 화면을 채우는 웹 애니메이션 컴포넌트-> remotion 변환의 여러 누적된 작업들이 모여 하나하나 스타일을 이뤘다.

결국에는 오디오 드라마 시디를 만든다고 tts 서비스를 조교하며 얻어낸 음성 데이터 패턴과 그 학습라인을 통해서 내 목소리를 모델학습 시키고 거기서 다시 로직프로르 통해 여러 톤 변화 및 음정 변경을 통해 내가 연기를 하면 다양한 목소리로 여러 캐릭터의 오디오 드라마를 연출할 수 있는 실험들과 더불어 로직프로 및 여러 음정 마스터링 vst 사용 짬밥이 들면서 노래 믹스도 가능하게 되었다.

이에 대한 더 다양한 활용 케이스는 다음 프로젝트의 팬픽션 오디오 드라마시디를 만든 케이스를 통해 설명해보겠다.

KR-how-1-person-can-make-diverse-charactor-acting-for-audio-drama

저런 식으로 레이아웃의 스토리보드를 잡았으면 이제 시범타로 실제 화면 렌더링뷰를 위한 애니메이션 레이아웃 배치를 시작한다. 움직이는 애니메이션은 Cavalry나 Jitter로 미리 시연을 해보기도 하고 Figma Motion을 통해 나열해보기도 한다. 각 툴마다 편한 구석과 아닌 기능이 각자 달라 이리저리 상황에 따라 돌아가며 쓰고 있다.

[몬드리안 형식의 그리드 레이아웃]

[슬라이딩 카루셀 아코디언 애니메이션 스틸샷]

[Bento Grid로 구성한 스틸샷]

[WebGL로 구현한 시티팝 네온사인 테마의 고가도로 풍경 위 글로우 텍스트를 배치]

[타이포 그래픽스가 끝나고 슬라이드로 차례대로 이미지가 등장하는 모습]

[그 뒤 여러 스타일로 배치한 도면 레이아웃의 여러 패널들이 차례대로 등장]

이 작업을 통한 경험은 이후 6월의 niji video 작업으로 이어지게 된다.

[자체 개발툴인 텍스쳐 믹스에서 내 이미지를 첨부하고 여러 쉐이더 버텍스와 프래그먼트를 레이어 형식으로 배정해 이미지를 시연. 노이즈와 90’년대 vhs 노이즈를 구현하고자 했기에 자체 제작 쉐이더를 이리저리 응용해서 넣어보고 있다.]

[백그라운드 생성 툴: GUI를 통해 파라미터를 시연해 맘에 드는 설정값을 찾으면 이후 리모션에서 schema를 통해 지정 설정을 배열해서 비디오 렌더링]

[쉐이더 토이에서 영감받은 여러 쉐이더 텍스쳐 효과를 파편별로 분리 후 이리저리 교차로 혼합해 본 프리셋을 2x2 프리뷰 카달로그 창을 통해 확인해보며 싱크를 디버깅하고 있다]

[별도로 제작 중인 텍스트 타입믹스. 능동적인 다양한 프리셋과 어셈블리 로직을 혼합해 여러 변화구를 줄 수 있는 방향으로 아키텍쳐링을 구성 중]

그러나 타입 믹스는 현재 아직 범용적으로 쓰기엔 애매한 구석이 있어 현재 작업은 파킹 중.

이 작업을 하면서 느낀 것은 모션디자인도 그 제작 방식이 코드와 UX 디자인을 하던 프레임에서 툴의 운용이 비슷하다면 크게 다를바는 없다는 것. 어떤 영상을 만들어 관객들에게 어떠한 이미지와 감정을 전달할 것인가 = 프로덕트를 마주하는 유저들에게 어떠한 가치를 전달할 것인가 - 결국은 오디언스가 누구냐에 따라 테일러링하는 디테일이 다를 뿐, 스토리보드와 리서치를 하고 이미지 리퍼런스를 모아서 패턴화 한 뒤 디자인 토큰과 여러 샘플링 카탈로그로 만들어 코드로 구현화하는 것은 크게 내가 UX 디자인 엔지니어로서 일해왔던 가라와 다를바가 없다.

My Vocal Mix Cover - Chroma Drift 를 만들기까지 거쳐온 여정의 작업들

효과와 키네틱 타이포 구상을 미리 보기 위해 만들었던 자체 제작툴

KR-my-own-production-tool-bg-maker KR-my-own-production-tool-texture-mix

나만의 브랜딩 아이덴티티를 구축하기 위한 비쥬얼 미학의 발전 과정

KR-developing-my-own-aesthetics

이 작업 전과 후에 만들어지는 커버 mv 작업과정 기록 KR-my-first-lyrics-visualiser-mv KR-the-complete-lyrics-visualiser-mv-niji

lyrics mv로 작업이 도달하기까지 이 기반의 양분이 되어준 기반 작업들

KR-GameToAudioDesign KR-the-journey-of-audio-vocalign-analysis KR-the-journey-of-audio-recording-mix-audio-composition KR-K-Pop-Live-Band-Rework KR-how-1-person-can-make-diverse-charactor-acting-for-audio-drama KR-remotion-gsap-pros-and-cons KR-figma-to-jitter-and-remotion KR-remotion-and-shader-converting-glsl-to-webgl KR-making-first-time-youtube-vid-with-remotion KR-how-i-make-a-youtube-series-with-remotion-dynamic-srt-script-setup-exp-likejennie KR-how-i-made-podcast-interview-with-ai-virtual-idol KR-how-my-motion-graphics-workflow-has-been-evolved