Remotion 템플릿, 디자이너를 위해 GSAP으로 갈아엎은 이야기
– ArtXTech
https://youtu.be/Mcr_uR9dqT8?si=lbZe41zIyflDvIcX https://youtu.be/PhxjL5PKe4Q?si=VLnSzui692R5Skqo https://youtu.be/afzHoZ6P2zU?si=o5GRsV2FMmd_TZyH
그 결과로 처음 프로토 타입을 만든 것이 이번 1월에 발행한 리릭스 비디오였다.
비디오 에디터 툴이 사실 리모션으로 일일이 코딩하는 것보단 훨씬 효율성이 좋다. 어떤 이들은 mcp와 skills를 이용해 리모션으로 영상을 만들 수 있다곤 하지만 그 영상의 퀄리티와 세밀한 컨트롤까진 장담을 못한다. 뭣보다 타이밍과 비트가 생명인 내 영상 스타일상 매번 커스텀 세부 조절이 필요한 작업인데 코딩 모델을 통해 이를 구사하는 건 아주 단조로운 슬라이드/프레젠테이션 형식의 단순한 애니메이션에 그칠뿐이다. 여차하다 컴플렉스한 애니메이션을 만들 수는 있겠지만 그 여러 커스텀 애니메이션을 다양한 트랜지션으로 엮어 다이나믹 데이터(싱크로된 자막파일)를 삽입해 정확한 타이밍에 정확한 트랜지션과 키네틱 그라프를 다이나믹하게 구사하는 걸 코드로 할 바엔 차라리 애프터 이펙트나 카발리를 쓰는게 훨씬 더 효율적이다. 하지만 여러 전방위 다른 포맷의 데이터를 매번 스케일업 혹은 전환을 다양한 방면으로 할 때 이런 에디터툴은 그 툴만의 한계가 있기 때문에 그 장벽을 없애는 게 더 나은 워크플로우에선 리모션을 쓰는게 좋다. 이것이 가능한 것은 영상 구현에서 오류가 났을 때 프롬프트에 의존하는 것이 아니라 직접 내가 코드 구조를 보고 아키텍쳐를 문서로 남기며 점진적인 스케일업을 과정을 기록하며 디버깅을 할 수 있는 안목이 있어야 가능한 것이다. 그렇기에 나에게 가장 최적의 스타일은 final cut pro, after effect, 같은 standalone 프로그래밍과 여러 가벼운 모델학습을 이용한 파이썬 미디어 보조 애널리틱스, 그리고 최종 패턴형식의 다이나믹스 애니메이션 컴포지션엔 직접 코딩하여(다시 말하지만 skills나 mcp를 이용해 프롬프트만으로 몇 시간 혹은 몇분만에 영상을 만들 수 있단 착각은 버려야한다. 대부분 그런 말을 퍼뜨리는 사람들은 제대로 3분 이상의 다채로운 키네틱 애니메이션을 구현하는 안목이나 센스도 없이 아주 심플한 피치덱 수준의 영상을 1분 이내로 뽑아놓고는 바이럴 돌리는 사람들이다.)
여튼 이렇게 점진적으로 나만의 애니메이션 컴포넌트 워크플로우 시스템을 1년 가까이 차근차근 적립하였다. 비록 이번 5-7월은 대학원 수업을 따라가느라 컴포넌트 개발에 어려움이 있었지만(그리고 너무 이 작업에만 몰입하다보니 번아웃도 좀 심하게 오기도 하였다. 지난 2년간 내가 평생 안해본 작업과 공부, 개발들을 하다보니 러닝커브도 심했고 이를 통해 매번 실패하고 츄라이하고 다시 일어서서 해내는 과정들을 매번 거치다보니 휴식텀이 필요했던것 같다. ) 작년 5월부터 슬그머니 시작한 웹 컴포넌트=> 리모션 애니메이션으로의 전환 작업들이 쌓이면서 나만의 아키텍쳐와 시스템을 구성하게 되었고 점진적 스케일업이 점차 확장되는 것이 눈에 보이기 시작했다.
특히 작년 8월부터는 shadertoy 커뮤니티에서 본 감명깊게 본 이펙트들을 three+react fiber로 변환해 프로세싱하는 구성을 리모션 내부에서 적용했다.
5월 타임라인 요약
| 날짜 | 프로젝트/작업 | 내용 |
|---|---|---|
| 5/14 | _shared 리팩토링 분석 | motionVariants.ts 38KB 과부하 문제 진단, GSAP↔Remotion 이중 엔진 충돌 분석 |
| 5/23 | Chroma Drift — Vocal Cover 진행 | 보컬 커버 영상 + 타이포 프로그레스 작업 시작 |
| 5/27 | Chroma Drift 최종 렌더링 / Niji 시작 | 첫 번째 씬 완성 후 “Niji” 씬 착수 |
| 5/28 | 대규모 클린업 + Hero Scroll 수정 | Jitter 클리닝, 루트 정리, VideoStagger 분리 |
| 5/29 | ChaoticFlyIn 개발 — 실패 후 성공 | Chaotic Flip 시도→실패→수정→범용성 확장→수직 모드 추가 |
| 5/29–30 | Lyrics M/V 설정 베이스 완성 | 가사 적용 예시, 설정 베이스 실행, 최종 가사 정리 |
| 5/25 | 창작 메모 / 팬픽 아이디어 | 나오야 팬아트 Mograph 실험, |
5월
작은 진전과 작업 과정 기록
같은 파일 안에 GSAP 엔진 기반 코드(entryEase: ‘back.out(1.7)’)와 Remotion native 코드(interpolate, frame, fps)가 공존하고 있었다는 것. 이 둘은 실행 엔진 자체가 다르다. GSAP은 브라우저 requestAnimationFrame 기반이고, Remotion은 프레임 단위 렌더링 기반이라 타이밍이 근본적으로 맞질 않는다.
진단 결과:
- MotionReveal.tsx + MotionStagger.tsx + TypoStagger.tsx — 셋 다 “children 순차 등장” 담당. 즉 중복 3형제
- staggerOrderToGsap vs resolveStaggerIndex — 같은 StaggerOrder를 해석하지만 출력 대상이 달라서 동시에 존재하는 이중 구현
- MOTION_MAP 섹션은 완전히 다른 책임을 지고 있는데, 아무도 분리하지 않은 채 방치
해결 방향은 전면 교체가 아니라 레이어 분리 전략. 리팩토링. GSAP 계열은 현재 유지하되, Remotion-native 신규 레이어(_motion/)를 따로 쌓는 방식.
Chroma Drift → Niji: 씬 단위로 조립되는 MV
Chroma Drift 씬 작업이 본격화됐고, 최종 렌더링을 완료했다. 그리고 곧바로 다음 프로젝트 “Niji”로 넘어간다. Hero Scroll 애니메이션 이상 수정, Jitter 클리닝, VideoStagger 분리, 루트 정리. 렌더링 직전에 한 번씩 터지는 그 대청소. 코드를 짜다 보면 어느 순간 “지금 안 치우면 나중에 더 끔찍해진다”는 신호에 응답한 날.