코드로 쓰는 애니메이션 도구 Clayzo의 .clayzo 파일을 같은 장면의 MP4와 직접 비교했습니다. 도형만 있으면 66배 작고, 한글이 들어가면 7배 큽니다.
Clayzo는 웹과 앱에 넣는 애니메이션을 코드로 쓰고, .clayzo 파일 하나로 묶어 내보내는 도구입니다. 제작자는 puravp이고, 8월 25일에 처음 배포했습니다. 이 글이 다루는 패키지는 명령줄 도구 clayzo, 문서를 쓰고 검증하는 @clayzo/animation, 웹 재생기 @clayzo/webgl-player이며 모두 10월 28일에 나온 0.3.20입니다.
Product Hunt에서는 11월 3일에 확인한 기준으로 191표를 받아 일간 6위이고, 팔로워는 338명, 리뷰는 1개입니다. 제작사는 .clayzo 파일이 같은 영상보다 최대 40배 작다고 소개합니다. 이 글은 그 주장을 같은 장면 하나로 직접 재 본 기록입니다.
라이선스는 비공개 SDK용인 Clayzo SDK License입니다. 만든 영상과 애니메이션은 사용자의 것이고 로열티 없이 배포할 수 있습니다. 반대로 인증 우회, SDK 재배포, 비슷한 엔진을 만드는 일은 금지입니다.
그림: clayzo.com
Clayzo는 애니메이션을 그림 파일이 아니라 코드로 쓰는 도구입니다. 장면은 TypeScript로 쓰고, 글꼴과 이미지와 소리까지 .clayzo 파일 하나에 묶어 웹과 앱에서 같은 모양으로 재생합니다. npx clayzo@latest init을 실행하면 패키지와 함께 코딩 에이전트용 가이드(스킬)도 설치됩니다.
Clayzo가 하는 일
| 만드는 방식 | TypeScript로 노드와 키프레임을 코드로 씁니다 |
| 효과 | 유리 굴절, 듀오톤 디더, 직접 쓰는 셰이더(custom-sksl), 2.5D 카메라를 설명서가 다룹니다 |
| 상호작용 | 호버, 눌림, 드래그에 반응하고 idle, hover 같은 상태 머신을 가질 수 있습니다 |
| 재생 | 웹(WebGL 재생기, React 컴포넌트, 웹 요소)과 iOS, macOS(Swift 패키지)입니다 |
| 내보내기 | mp4, mov, gif, webm, webp, png 시퀀스, svg입니다 |
이 글에서 직접 써 본 것은 장면 쓰기, 검토(review), 패키지, 내보내기, 웹 재생기의 크기입니다. 상호작용 바인딩과 iOS, macOS 재생은 설명서만 읽었고 써 보지는 않았습니다.
장면은 TypeScript로 씁니다. 노드와 키프레임을 코드로 만들고, 검증을 통과한 문서를 clayzo package로 .clayzo 파일 하나에 묶습니다. 글꼴, 이미지, 소리도 이 파일에 함께 들어갑니다. 웹에서는 이 파일을 재생기가 읽어서 그립니다.
- 장면 코드 → clayzo 파일 (clayzo package)
- clayzo 파일 → 웹 재생기 (화면에 그리기)
계정이 필요한 범위가 나뉩니다. 문서를 쓰고 검증하는 일과 웹 재생기의 재생은 계정 없이 됩니다. 미리보기, 프레임 렌더, 검토, 패키지, 내보내기는 clayzo login(브라우저에서 승인)이나 CLAYZO_TOKEN이 있어야 돌아갑니다.
웹 재생기는 createPlayer(), React용 ClayzoPlayer, 웹 요소 <clayzo-player> 세 가지로 씁니다. 상태 머신(idle, hover 같은 상태)을 지원하고, 화면 밖에서는 GPU 메모리를 풀어 줍니다. 재생기가 그릴 수 없는 구성이 있는지는 checkCoverage()로 미리 검사할 수 있습니다.
아래 4초짜리 샘플도 Clayzo로 만들었습니다. 세 면이 흩어졌다가 돌아와 젬이 되는 도형 장면이고, 글자와 소리는 없습니다. .clayzo 파일은 2,364바이트입니다. 같은 문서를 clayzo export로 내보낸 MP4는 품질 등급에 따라 57.5KB(draft), 237.7KB(review), 350.4KB(final)여서, 약 24배에서 148배 작은 셈입니다. 이 문서의 clayzo review는 경고 없이 통과했고 반복 지점도 이어졌습니다.
영상: 이 글을 쓰며 Clayzo로 직접 만든 샘플입니다
우리 쇼릴과 같은 구성으로 15초 세로(1080×1920, 30fps) 릴스 한 편을 Clayzo로 만들었습니다. 이 장면 하나를 clayzo package로 .clayzo에 묶고, 같은 문서를 clayzo export로 H.264 MP4(--tier final)로 내보내 바이트 수를 비교했습니다. 글자와 소리를 빼거나 바꾼 판을 따로 만들어서, 무엇이 크기를 정하는지 갈랐습니다.
- 도형만66배
.clayzo가 MP4보다 작음
- 한글이 들어가면7배
.clayzo가 MP4보다 큼
같은 장면, 파일 크기
| 도형만(글자와 소리 없음) | 2.8KB | 184.6KB | 66배 작음 |
| 한글 글자(시스템 글꼴 번들, 소리 없음) | 5.33MB | 0.77MB | 7배 큼 |
| 한글 글자와 나레이션(WAV) | 5.92MB | 0.90MB | 6.5배 큼 |
| 한글 글자(Pretendard 번들, 소리 없음) | 2.06MB | 0.79MB | 2.6배 큼 |
| 도형과 셰이더 배경(글자와 소리 없음) | 14.0KB | 27.2MB | 약 1,950배 작음 |
도형만 있는 장면에서는 제작사의 주장이 맞았습니다. 2,802바이트와 184,551바이트라서 약 66배 작습니다. 최대 40배라는 말보다 더 벌어졌습니다.
글자가 들어가면 뒤집힙니다. .clayzo는 문서가 쓰는 글꼴을 통째로 담기 때문입니다. 처음 쓴 한글 글꼴(Apple SD Gothic Neo)은 5.33MB가 됐고, 같은 장면의 MP4는 0.77MB였습니다. 그런데 이 글꼴은 시스템 글꼴이고, Clayzo 설명서도 SF Pro 같은 시스템 글꼴은 재배포할 수 없으니 이름으로 쓰지 말라고 안내합니다. 그래서 재배포가 허용되는 OFL 글꼴인 Pretendard로 바꿔 한 번 더 쟀습니다. 2.06MB로 줄었지만 여전히 MP4의 2.6배입니다.
도형 위에 움직이는 도트 필드를 셰이더로 깔면 MP4가 27.2MB로 커져서 .clayzo와의 차이가 약 1,950배까지 벌어집니다. 촘촘한 움직임은 영상이 가장 불리한 내용이기 때문입니다.
나레이션을 넣으면 0.59MB가 더 늘어납니다. .clayzo는 소리를 압축하지 않은 WAV로 담았습니다.
Pretendard 판에는 걸리는 점이 하나 더 있습니다. 웹 재생기용 checkCoverage()가 글자 노드 14개를 "not encoded"로 보고했고, supported가 거짓으로 나왔습니다. 시스템 글꼴을 번들한 판과 도형만 있는 판은 통과했습니다. 원인은 확인하지 못했습니다. 가변 글꼴(woff2) 형식 때문일 수 있다고 짐작할 뿐입니다.
검토 도구도 같은 점을 짚었습니다. clayzo review는 처음 재생까지 9.7MB를 받는다고 경고했고, 가장 큰 자산으로 3MB짜리 글꼴을 꼽았습니다.
웹 재생기의 크기도 쟀습니다. 설치한 0.3.20 패키지에서 진입 파일 element.js는 gzip으로 2.0KB(brotli로 1.8KB)이고, 가장 큰 조각(엔진으로 보입니다)은 gzip으로 361KB(brotli로 283KB)입니다. 제작사가 말한 첫 로드 약 3KB와 엔진 약 350KB는 gzip 기준으로 어긋나지 않습니다. 다만 진입 파일이 불러오는 작은 조각을 모두 더한 값은 재지 않았습니다.
첫 시도는 질문, 단계 카드 세 장, 막대 두 줄이라는 정해진 틀이었습니다. 어떤 소재에도 들어맞는 틀이라서 Clayzo만의 특징이 보이지 않았고, 첫 프레임에도 정보가 없어서 버렸습니다. 다시 만든 릴스는 필름 스트립(영상)과 육각 젬(.clayzo 파일)을 저울에 올리는 구성이고, 젬 쪽은 ?로 가려서 답을 글에 남깁니다. 같은 구성으로 Clayzo 쪽과 우리 쇼릴 방식 쪽을 따로 만들어 봤습니다.
두 도구로 만든 릴스
| 배경 | custom-sksl 셰이더로 청록-흰 도트 필드를 직접 그림 | 셰이더 없이 흰 바탕에 도형만 |
| 렌더 시간 | 내보내기 22.9초(셰이더 포함, GPU 헤드리스 브라우저) | 가로 60fps 2분 8초, 세로 44초 |
| MP4 크기 | 원본 27.6MB, 공유용으로 다시 인코딩해 2.4MB | 가로 2.7MB, 세로 2.3MB |
| .clayzo 크기 | 5.93MB(한글 글꼴 포함), 글자와 소리를 뺀 판 14.0KB | 해당 없음 |
| 자동 검토 | review 모션 경고 0건, 8.4초 | 스토리보드를 사람이 눈으로 확인 |
| 잘림과 겹침 | 화면 밖 글자는 잡고 글자끼리 겹침은 놓침(한 번 시험) | 자동 검사 없음 |
| 자막, 정답 숨김, 승인 | 없음, 직접 붙여야 함 | 이미 있음(이번 릴스는 나레이션과 자막을 쓰지 않음) |
셰이더 배경은 Clayzo의 강점이 분명하게 드러난 곳입니다. 설명서의 효과 이름을 맞추고 capability를 채우면 도트가 흐르는 배경이 파일 몇 KB로 들어갑니다. 반대로 같은 배경을 MP4로 내보내면 27.6MB까지 커졌습니다. 촘촘하게 움직이는 질감은 영상이 가장 불리한 내용입니다.
clayzo review는 쓸 만했습니다. 제가 짧게 준 8틱(1프레임) 페이드 20건을 찾아냈고, 글자를 일부러 화면 밖으로 밀어 보니 65%가 잘렸다고 알려 줬습니다. 반면 글자 두 줄을 같은 자리에 포개 본 시험은 놓쳤습니다. 이 시험은 한 번뿐이라 일반화할 수는 없습니다.
제작 중에 막힌 곳도 있었습니다. 위치 값의 z가 0이 아니면 노드가 아무것도 그려지지 않았고, 오류도 나오지 않았습니다. 첫 렌더가 하얀 화면이어서 원인을 찾는 데 시간이 걸렸습니다.
Clayzo는 도형과 움직임이 전부인 장면을 웹에 얹을 때 확실히 가볍습니다. 2.8KB짜리 장면이 영상 184.6KB를 대신한다면 그 차이는 큽니다. 그런데 글자가 들어가면 글꼴 하나(2MB)가 도형 장면 전체의 700배가 넘습니다. 한글을 쓰는 우리에게는 이 부분이 더 중요합니다.
저라면 반복해서 만드는 릴스는 지금 방식을 유지합니다. 이유는 둘입니다. 우리 릴스는 결국 MP4로 나가기 때문에 .clayzo가 가진 장점(작은 파일, 상호작용)이 쓰이지 않습니다. 그리고 답 유출 검사, 승인 해시, 자막과 출처 표기처럼 이미 쌓아 둔 장치를 Clayzo 쪽에 다시 붙이는 비용이 듭니다.
셰이더로 질감을 깔면 영상과의 차이가 더 벌어지지만, MP4로 나가는 릴스에서는 그 차이가 이득이 되지 않습니다. 대신 딥다이브 맨 위 연출 한 곳은 시험해 볼 만합니다. 글자가 거의 없는 도형 움직임이나 마우스를 올리면 반응하는 요소라면 .clayzo의 장점이 살아납니다. 먼저 checkCoverage()를 통과하는지부터 보겠습니다.
비공개 SDK이고 로그인이 필요하다는 점은 오래 쓸 도구로는 부담입니다. 0.3대 버전이라 규칙이 바뀔 수 있다는 점도 마찬가지입니다. 위의 숫자는 장면 하나를 컴퓨터 한 대에서 잰 값이므로, 다른 장면에서는 달라질 수 있습니다.
- Clayzo 공식 사이트, 제작사
- Clayzo Product Hunt 페이지, 11월 3일 확인
- @clayzo/webgl-player, npm 패키지 0.3.20
- 파일 크기, 렌더 시간, 검토 결과는 11월 3일에 직접 측정했습니다. 장면은 15초 세로 릴스 하나이고, MP4는 H.264(
--tier final)입니다.
이번 글은 소재 하나만 다뤘습니다.