# Clayzo, 코드로 쓰는 웹과 앱용 애니메이션 파일

코드로 쓰는 애니메이션 도구 Clayzo의 .clayzo 파일을 같은 장면의 MP4와 직접 비교했습니다. 도형만 있으면 66배 작고, 한글이 들어가면 7배 큽니다.

- Language: ko
- Published: 2026-11-03
- Tags: dev, animation, clayzo
- URL: https://devs7ud.io/deep-dives/clayzo-deep-dive
- Translation (en): https://devs7ud.io/en/deep-dives/clayzo-deep-dive-en.md

## 애니메이션 도구 Clayzo 직접 재 보기

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 공식 사이트의 첫 화면](/blog-img/clayzo-deep-dive/1.png "zoom")

_그림: [clayzo.com](https://clayzo.com)_

## Clayzo를 한눈에 보기

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입니다 |

_출처: Clayzo 0.3.20 설명서와 CLI 도움말_

이 글에서 직접 써 본 것은 장면 쓰기, 검토(`review`), 패키지, 내보내기, 웹 재생기의 크기입니다. 상호작용 바인딩과 iOS, macOS 재생은 설명서만 읽었고 써 보지는 않았습니다.

## 코드로 쓰고 파일 하나로 묶어 웹에서 재생

장면은 TypeScript로 씁니다. 노드와 키프레임을 코드로 만들고, 검증을 통과한 문서를 `clayzo package`로 `.clayzo` 파일 하나에 묶습니다. 글꼴, 이미지, 소리도 이 파일에 함께 들어갑니다. 웹에서는 이 파일을 재생기가 읽어서 그립니다.

**장면이 화면에 닿는 길**

- 장면 코드 → clayzo 파일 (clayzo package)
- clayzo 파일 → 웹 재생기 (화면에 그리기)

_출처: Clayzo 패키지 설명서\(0.3.20\)_

계정이 필요한 범위가 나뉩니다. 문서를 쓰고 검증하는 일과 웹 재생기의 재생은 계정 없이 됩니다. 미리보기, 프레임 렌더, 검토, 패키지, 내보내기는 `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로 만든 4초 샘플: 세 면이 흩어졌다가 돌아와 젬이 됩니다](https://jopzjj8vk485j5in.public.blob.vercel-storage.com/blog-clip/clayzo-deep-dive-sample-47283dda6496.mp4)

_영상: 이 글을 쓰며 Clayzo로 직접 만든 샘플입니다_

## 같은 장면의 크기 : 도형은 작고 한글은 큽니다

우리 쇼릴과 같은 구성으로 15초 세로(1080×1920, 30fps) 릴스 한 편을 Clayzo로 만들었습니다. 이 장면 하나를 `clayzo package`로 `.clayzo`에 묶고, 같은 문서를 `clayzo export`로 H.264 MP4(`--tier final`)로 내보내 바이트 수를 비교했습니다. 글자와 소리를 빼거나 바꾼 판을 따로 만들어서, 무엇이 크기를 정하는지 갈랐습니다.

| 항목 | 값 | 설명 |
| --- | --- | --- |
| 도형만 | 66배 | .clayzo가 MP4보다 작음 |
| 한글이 들어가면 | 7배 | .clayzo가 MP4보다 큼 |

_출처: 직접 측정\(2026-11-03, 장면 하나, 컴퓨터 한 대\)_

**같은 장면, 파일 크기**

| 판 | .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배 작음 |

_출처: 직접 측정, 1MB는 1,000,000바이트_

도형만 있는 장면에서는 제작사의 주장이 맞았습니다. 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 쪽과 우리 쇼릴 방식 쪽을 따로 만들어 봤습니다.

![Clayzo review가 만든 14프레임 검토 시트](/blog-img/clayzo-deep-dive/2.png "Clayzo 검토 시트")

![우리 쇼릴 방식의 박자별 스토리보드](/blog-img/clayzo-deep-dive/3.jpg "쇼릴 스토리보드")

![본문 샘플의 프레임 시트](/blog-img/clayzo-deep-dive/4.png "샘플 프레임 시트")

_그림: 직접 만든 영상의 검토 화면_

**두 도구로 만든 릴스**

| 항목 | 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 공식 사이트](https://clayzo.com), 제작사
- [Clayzo Product Hunt 페이지](https://www.producthunt.com/products/clayzo), 11월 3일 확인
- [@clayzo/webgl-player](https://www.npmjs.com/package/@clayzo/webgl-player), npm 패키지 0.3.20
- 파일 크기, 렌더 시간, 검토 결과는 11월 3일에 직접 측정했습니다. 장면은 15초 세로 릴스 하나이고, MP4는 H.264(`--tier final`)입니다.

이번 글은 소재 하나만 다뤘습니다.