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

Last updated August 10, 2026 – ArtXTech

예전에 Biiip by Xlov, BTTF by NCT Wish, Bye My Monster by ONF Lyrics MV를 1월에 제작하여 1월 말에 배포를 하였다. 그로부터 몇 달이 지난 뒤 뭔가 이전 작업들을 좀 더 체계적으로 패턴화 하고 싶어졌다.

이게 앱이라면 그냥 으례 대기업에서 제공하는 디자인 시스템 예시와 스타일 가이드를 보면 되면 문제지만…lyrics의 스톱모션 애니메이션을 위한 나만의 브랜딩 모션 파이프라인을 위한 디자인 시스템은 어떻게 구성해야할까 좀 막막했다.

뭐 일단 시작부터 해보자. 모름지기 작업이란 건 하다보면 반복되는 과정이 정리되며 그것이 모여 시스템이 되기 마련이니까.

[시스템 윈도우 아이디어를 차용하여 옛날 윈도우 운영체제 화면에서 머신이 프리징 되었을 때 여러 윈도우들이 좌르륵 이어져서 딜레이되어 보여지던 모션에서 착안한 윈도우 프레임 디자인들]

자 그렇다면 stacked types는 어떨까? 혹은 여러 다양한 컴포넌트와 블록 구성을 엮었을 때 어떠한 비쥬얼을 시연하고 싶은건가? 그런 고민들을 하며 하나둘 프로토타입을 시작했다.

좀 더 추상적인 작업을 위해 여러 모션의 배치도와 레이아웃, 모션 동작의 로지스틱을 간단히 블록 모양으로 시연해본다.

위의 여러 디자인 샘플링들을 모아 컴포넌트 토큰으로 만들고 그 안에 들어가는 여러 이미지들을 배치하며 여러 모로 다양하게 확장할 수 있는 모션 스토리보드덱은 이렇게 만들어진다. 나는 이것을 나만의 motion cx journey system이라 칭하고 있다.

타이포 그래피 같은 경우는 실제로 유입과 도입이 가능하냐 아니냐가 중요하고 라이센스 문제도 있으므로 자간과 규격, 임포트 가능한 애셋들을 정리해서 이렇게 타입 리스트를 만든다.

이렇게 나열하고 보니 웹 UX에서 리서치-질적/정량 조사-테스팅 시나리오 기획-설립-시각적 비쥬얼 이미지와 블루맵 정립- 시스테믹한 아토믹 디자인 토큰과 컴포넌트 나열-실제 시행하며 프로토타이핑으로 구현 이 모든 과정이 모션 UX에도 적용됨을 우리는 확인할 수 있다.

Lyrics MV Design System과 연계되는 아티클

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

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

이 작업 전과 후에 만들어지는 커버 mv 작업과정 기록

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