Motion infographic

숫자가 오르고
선이 그려지는 인포그래픽

정지 이미지가 아니라 영상입니다. 막대가 차오르고 숫자가 세고 선이 이어집니다. 편집 프로그램으로 만들지 않고 HTML 로 그린 뒤 프레임으로 구워 냅니다 — 수치가 바뀌면 숫자 한 줄만 고쳐 다시 굽습니다.

1920×10801080×1920H.264 · MP4 15~18초30 FPSAI 생성 0
Works · 5

다섯 편 다 모션 언어가 다릅니다

색만 바꾼 같은 영상을 늘리면 포트폴리오가 아니라 템플릿 자랑이 됩니다. ①은 데이터가 그려지고, ②는 길이 그려지고, ③은 망을 따라 흐르고,
④는 띠가 갈라지고, ⑤는 공간이 세워집니다.

01 · ANNUAL REPORT

연간 실적 리포트

큰 숫자 → 분기 막대 → 월별 라인 → 매출 구성 도넛. 네 가지를 한 번에 띄우지 않고 차례로 냅니다. 축과 눈금선을 먼저 그린 뒤 데이터를 얹습니다 — 순서가 반대면 값이 허공에 뜹니다.
규격
1920 × 1080 · 가로
쓰는 곳
IR · 주주총회 · 유튜브 · PPT 삽입
모션
데이터가 그려진다
색
네이비 · 민트 · 앰버
02 · PROCESS GUIDE

검진 절차 안내

세로 한 줄이 위에서 아래로 그려지고, 선이 지나간 자리에 단계가 켜집니다. 카드가 따로 날아오지 않습니다. 아이콘도 채우지 않고 획을 그립니다 — 선이 주인공인 판이라 그렇습니다.
규격
1080 × 1920 · 세로
쓰는 곳
릴스 · 쇼츠 · 매장 화면 · 카톡 안내
모션
길이 그려진다
색
오프화이트 · 코발트 · 코랄
03 · NETWORK

배송망 흐름도

허브가 서고 선이 뻗고 노드가 켜진 뒤 화물이 선을 타고 흐릅니다. 지도를 그리지 않았습니다 — 실제 지형을 단순화하면 어디가 빠졌네 하는 시비가 붙고 축척이 틀리면 바로 티가 납니다. 추상 망이 더 정확합니다.
규격
1920 × 1080 · 가로
쓰는 곳
회사소개 · 전시 부스 · 제안서 · 홈페이지 히어로
모션
망을 따라 흐른다
색
차콜 · 라임
04 · SANKEY

예산 흐름 다이어그램

띠의 굵기가 곧 금액입니다. 수입 → 회계 → 지출 세 단을 가로지르며 갈라지고 합쳐집니다. 좌표를 손으로 찍지 않습니다 — 금액만 넣으면 노드 높이와 띠 위치가 전부 다시 계산됩니다. 예산이 바뀌면 숫자만 고치면 됩니다.
규격
1920 × 1080 · 18초
쓰는 곳
지자체 예산 공개 · 기업 자금 흐름 · 고객 여정
모션
띠가 열리고 흐른다
색
잉크 · 6색 구분
05 · ISOMETRIC

물류센터 조감도

앞의 넷은 평면이고 이건 공간입니다. 3D 엔진을 쓰지 않고 등축 투영 공식 하나로 (x, y, z) 를 화면 좌표로 바꿉니다. 블록이 순서대로 솟고 라벨이 붙고 AGV 가 동선을 따라 돕니다. 그리는 순서가 곧 깊이라 블록을 정렬한 뒤 그 차례로 올립니다.
규격
1920 × 1080 · 17초
쓰는 곳
공장·물류센터 소개 · 분양 · 전시 부스
모션
공간이 세워진다
색
잉크 · 앰버 · 시안
How

만드는 방식

실시간 재생을 녹화하지 않습니다. "그 시각의 정지 화면"을 계산해 한 장씩 찍습니다. 캡처가 느려도 결과가 흔들리지 않고 프레임이 하나도 빠지지 않습니다.

01

HTML 로 그린다

장면 파일이 window.seek(t) 하나를 내놓습니다. t초 시점의 화면을 만드는 함수입니다. 차트·선·숫자가 전부 이 안에서 계산됩니다.

02

프레임으로 찍는다

node render.js ir 30 — 30fps × 15초 = 450장을 PNG 로 뽑습니다. 규격은 장면이 정한 크기를 그대로 씁니다.

03

MP4 로 굽는다

python encode.py ir 30 — H.264 · yuv420p · faststart. 글자와 선이 주인공이라 압축을 덜 겁니다.

왜 생성형 AI 영상을 안 쓰는가 Veo 같은 영상 생성 모델은 실사에는 좋지만 인포그래픽에는 못 씁니다. 한글과 숫자가 뭉개지고, 같은 수치를 두 번 뽑으면 다른 그림이 나옵니다. 이 방식은 글자가 벡터로 또렷하고, 값을 고치면 한 줄만 바꿔 다시 구우면 됩니다. 그리고 AI 생성 비용이 들지 않습니다.