모션그래픽도 결국 코드예요. “몇 초에, 무엇이, 어떻게 움직인다”를 말로 설명하면 Claude Code가 그 코드를 써요. 길은 두 가지예요.
CSS·SVG·Canvas로 브라우저가 직접 움직임을 그려요. 이 페이지의 장면이 전부 이 방식 — 홈페이지·앱에 그대로 넣을 수 있어요.
Remotion — React로 장면을 짜고 mp4로 뽑아요. Claude Code에 Remotion 스킬을 깔면 말로 유튜브 인트로·쇼츠·제품 영상을 만들 수 있어요. 위 큰 화면이 그 방식(프레임 번호로 그리기)을 흉내 낸 것.
장면마다 ‘Claude에게 이렇게’를 열면 예시 문장이 있어요.
모든 움직임이 기대는 문법
같은 거리, 같은 시간인데 속도 곡선만 다르다. 이것만 바꿔도 느낌이 완전히 달라진다.
가로 줄 4개에 공을 하나씩 두고 2.6초마다 왼쪽↔오른쪽 왕복시켜줘. 줄마다 이징만 다르게: linear, ease-in-out, ease-out(expo), 살짝 넘쳤다 돌아오는 spring. 줄 위에 이징 이름을 작게 써서 차이가 한눈에 보이게.
떨어질 땐 길쭉, 닿는 순간 납작. 디즈니 애니메이션 12원칙 중 하나 — 무게와 탄력이 생긴다.
공 두 개가 바닥에서 1.1초마다 통통 튀게 해줘. 왼쪽은 모양 그대로, 오른쪽은 떨어질 때 세로로 늘어나고 바닥에 닿는 순간 가로로 납작해지게(스쿼시 앤 스트레치). 공 높이에 따라 바닥 그림자 크기와 진하기도 바뀌게.
글자가 주인공 — 키네틱 타이포그래피
단어를 리듬에 맞춰 하나씩 때려 넣는다. 광고·뮤직비디오·발표 오프닝의 단골.
검은 화면 가운데에 '작게 / 빠르게 / 자주 / 만든다.' 네 단어를 1.2초 간격으로 하나씩 아주 크게 띄워줘. 흐릿하고 크게 나타났다가 살짝 작아지며 제자리(오버슈트). 두 번째는 노란 기울임, 세 번째는 주황 상자가 펼쳐진 위에, 네 번째는 외곽선만 그렸다가 채우기. 아래에 진행 막대.
보이지 않는 선 아래에서 글자가 한 자씩 올라온다. 깔끔한 타이틀·자막의 기본형.
'작은 실험이 / 쌓이는 곳' 두 줄을 글자마다 45ms씩 늦게, 보이지 않는 선 아래에서 위로 올라오게 해줘(expo-out). 다 올라오면 주황 밑줄이 왼쪽부터 그어지고, 잠시 뒤 글자가 위로 빠져나가며 반복.
무작위 글자가 돌다가 하나씩 제자리를 찾는다. 해커·테크 느낌의 등장.
고정폭 글꼴로 '모션그래픽' → 'MOTION GRAPHICS' → '코드로 움직인다'를 차례로 보여줘. 각 글자는 처음엔 무작위 글자(한글은 한글, 영어는 영어)로 빠르게 바뀌다가 글자마다 다른 순간에 진짜 글자로 멈추게. 아직 안 멈춘 글자는 주황색.
선이 그려지고, 모양이 바뀌고, 입체가 돈다
선이 스스로 그려진다. SVG 선의 점선 간격을 밀어서 그리는 고전 기법.
파란 설계도 배경에 얇은 격자선이 차르륵 먼저 그려지고, 이어서 아이소메트릭 정육면체 외곽선 → 안쪽 선이 손으로 그리듯 나타나게 해줘(SVG stroke-dashoffset). 다 그려지면 윗면에 옅게 색이 차고, 점선 원이 천천히 돌고, 치수선과 숫자가 뜨게.
원 → 별 → 하트 → 네모 → 세모. 같은 개수의 점을 옮겨서 모양을 바꾼다.
도형 하나가 원 → 별 → 하트 → 네모 → 세모 → 원으로 부드럽게 변하게 해줘. 모든 모양을 같은 개수(72개)의 점으로 만들어 clip-path polygon끼리 보간하고, 모양마다 색도 바뀌게. 각 모양에서 1초쯤 머물렀다 넘어가게.
흐리게 한 다음 다시 선명하게 — 공들이 액체처럼 붙었다 떨어진다.
검은 배경에 주황·노랑·분홍 원 5개가 천천히 떠다니다가 가까워지면 액체처럼 이어 붙고 멀어지면 떨어지게 해줘. SVG 필터로 흐리게(blur) 한 뒤 알파를 세게 올리는(color matrix) 구이(gooey) 효과로.
CSS만으로 입체. 면 6개를 접어 붙이고 90도씩 돌았다 멈춘다.
CSS 3D로 정육면체를 만들어 면마다 다른 색과 글자('공·방·실·험')를 넣고, 살짝 내려다보는 각도에서 90도씩 돌았다 멈췄다를 반복해줘(ease-in-out). 바닥에 흐린 그림자.
유튜브·방송에서 매일 보는 부품
점 → 파동 → 마크 → 글자. 유튜브 인트로와 브랜드 영상의 시그니처 3초.
검은 화면 가운데 주황 점이 톡 생겼다 사라지며 동그란 파동이 퍼지고, 그 자리에 주황 네모 마크가 회전하며 튕겨 들어오게. 마크가 왼쪽으로 비켜나면 'gongbang' 글자가 왼쪽부터 닦이듯 나타나고, 아래 작은 슬로건이 떠오르게. 5.5초 반복.
화면 아래쪽에 이름표가 미끄러져 들어온다. 인터뷰·방송 영상의 기본 부품.
흐릿하게 움직이는 영상 같은 배경 위, 왼쪽 아래에 이름 자막(로워서드)을 넣어줘. 주황 세로 막대가 먼저 솟고 → 흰 막대가 왼쪽부터 펼쳐지며 이름 '김공방' → 0.2초 뒤 검은 막대에 직함. 3초 머문 뒤 오른쪽으로 접히며 사라지게. 왼쪽 위엔 깜빡이는 REC와 초 카운터.
색 띠 여러 장이 비스듬히 쓸고 지나가며 다음 장면으로. 편집 프로그램의 트랜지션을 코드로.
장면 3개(01 시작 · 02 전개 · 03 마무리)를 차례로 보여주고, 넘어갈 때마다 색 띠 두 장과 다음 장면이 0.09초 간격으로 왼쪽에서 오른쪽으로 비스듬히 쓸고 지나가게 해줘. 마지막 장면에서 첫 장면으로도 같은 전환으로 이어져 끊김 없이 반복되게.
숫자를 움직여 이야기로
막대가 차례로 솟고 숫자가 따라 올라간다. 데이터 영상의 기본 문법.
요일별 막대 6개가 70ms 간격으로 아래에서 튕기듯 자라게 하고, 위의 큰 숫자는 0에서 400까지 같이 올라가게 해줘(CSS @property 정수 카운터). 가장 큰 막대만 주황. 막대 위에 값, 오른쪽 위에 초록 '▲ 37%'.
고리가 차오르며 퍼센트가 오른다. 운동 앱의 활동 링 같은 것.
동심원 고리 3개(주황 72%, 노랑 54%, 파랑 88%)가 0.14초 간격으로 위에서부터 시계 방향으로 차오르게 하고, 가운데 숫자가 0%→72%로 같이 올라가게 해줘. 바깥엔 눈금 고리가 아주 천천히 돈다.
규칙 몇 줄로 만드는 생성형 그래픽 — 마우스에 반응해요
점 수천 개가 모여 글자가 된다. 마우스를 피해 흩어지고, 누르면 터진다.
캔버스에 '공방'을 굵게 그려 글자 픽셀 위치를 뽑고, 그 자리마다 점을 하나씩 둬서 점들이 사방에서 날아와 글자를 이루게 해줘(스프링으로 끌려가며 감속). 마우스 근처 점은 밀려나고, 누르면 터졌다 다시 모이게. 4.5초마다 '모션', '실험'으로 글자를 바꿔 점들이 옮겨가게.
격자 점의 크기가 파도처럼 번진다. 물결의 중심이 마우스를 따라간다.
종이색 배경에 점 격자를 깔고, 한 점에서 퍼지는 물결(sin)처럼 점 크기가 커졌다 작아지게 해줘. 물결 마루의 점만 주황색. 마우스를 올리면 그 자리가 물결 중심이 되고, 아니면 중심이 천천히 원을 그리며 돈다.
앱 안의 작은 움직임 — 마이크로 인터랙션
누르는 순간 하트가 튀고 고리와 점이 터진다. 작지만 '눌렀다'는 기분을 만든다. 하트를 눌러 보세요.
하트 좋아요 버튼 애니메이션: 누르면 빈 하트가 살짝 눌렸다가 → 주황 하트가 1.25배로 튀어나와 제자리, 동시에 분홍 고리가 퍼지며 사라지고 색 점 8개가 사방으로 튄다. 숫자는 203 → 204. 다시 누르면 처음부터.
기다림을 덜 지루하게. 가장 많이 쓰는 로딩 네 가지.
검은 배경을 4칸으로 나눠 로딩 애니메이션 4종을 만들어줘: ① 호가 늘었다 줄며 도는 스피너(머티리얼 스타일) ② 점 3개가 차례로 통통 ③ 회색 막대 위로 빛이 쓸고 가는 스켈레톤 ④ 색 네모 4개가 차례로 뒤집히기.
전부 손으로 쓴 코드예요 — 애니메이션 라이브러리 없이 CSS 키프레임·SVG·Canvas·Web Animations만. 화면 밖으로 나간 장면은 저절로 멈춰요.
왜 만드는가:
확인하려는 것: