Claude Code와 Opus 5로 화제의 리소 애니메이션을 재현해봤습니다. 프롬프트, 과정, 토큰 사용량 공유
I recreated the viral riso animation with Claude Code + Opus 5. Here's the full prompt, the process and the token count
핵심 요약
Claude Code를 활용해 화제의 리소그래프 애니메이션을 완벽하게 재현한 프롬프트와 제작 과정을 상세히 공유함.
프롬프트 엔지니어링 — 원본 영상을 Claude Code에 분석시켜 상세한 제작 지침과 구현 로직을 역설계함.
기술적 구현 — 외부 라이브러리 없이 Canvas 2D만 사용하여 3,500줄의 코드로 리소그래프 질감과 사운드를 구현함.
제작 효율성 — 5시간 40분 동안 Claude가 스스로 코드를 작성하고 브라우저에서 렌더링하며 오류를 수정함.
토큰 사용량 — 약 716k 출력 토큰과 43M 캐시된 입력 토큰을 사용하여 복잡한 애니메이션을 완성함.
어제 https://www.reddit.com/r/ClaudeAI/comments/1wgvklo/에 올라온 리소 애니메이션(원작자 Kevin Ngo, X 계정 @kevin_t_ngo)이 완전 대박 났는데, 다들 "프롬프트가 뭐냐"고 난리였음. 아무도 가진 사람이 없길래, 내가 직접 프롬프트를 짜서 Claude Code랑 Opus 5로 돌려봤다. 영상 결과물은 이거임. 원작을 그대로 베낀 게 아니라, 아이디어를 따와서 새로 만든 거다.
Claude가 만든 것
index.html 파일 하나: 224 KB, 약 3,500줄. 라이브러리, 이미지, 폰트, 네트워크 호출 하나도 없이 오직 Canvas 2D만 사용함.
모든 질감은 코드로 구현함. 잉크마다 고유한 스크린 각도를 가진 하프톤 레이어를 따로 썼고, 레이어 위치를 살짝 어긋나게 해서 인쇄 밀림 효과를 냈음. 그 위에 종이 질감이랑 잉크가 덜 묻은 빈틈까지 넣었다.
모든 게 시드(seed) 기반이고 render(t)는 시간에 따른 순수 함수라, 어느 프레임으로 점프해도 화면 깜빡임이 없음.
음악도 같은 파일 안에 WebAudio로 합성함: 120 BPM의 패드와 아르페지오, 그리고 리플이 생길 때마다 핑 소리가 나게 설정함.
일러스트 장면 26개. 프롬프트에 넣은 몽타주 장면 28개 중 20개가 들어갔음. 프롬프트상 전환 전에 장면을 쳐내는 것도 가능하게 해둠.
영상은 페이지 내장 녹화 버튼으로 캡처한 걸 MP4로 변환한 거임.
작업 과정
약 1만 자 분량의 프롬프트 하나(아래 참고). Claude한테 한 번에 다 만들지 말고, 엔진부터 짜고, 장면은 8개씩 끊어서 시각적으로 확인하면서 만들라고 시킴. 그 뒤에 후반부 작업하고, 마지막에 전체 검수까지 돌림.
내가 한 건 짧은 피드백뿐: "다이빙이랑 첫 8개 장면 진행해", "2막 나머지 장면이랑 되감기 진행해", "3막 아카이브 진행해", "5막 듀오톤 리프라이즈 진행해", "인디고 밤 장면 진행해", "이제 마무리해".
Claude가 지가 만든 결과물을 직접 검수함. 헤드리스 브라우저에서 프레임을 렌더링하고, 전환 지점마다 0.25초 간격으로 콘택트 시트를 확인해서 튀는 부분, 어긋나는 부분, 안 보이는 장면들을 다 수정함. 100ms 정도 걸리던 프레임 하나가 프로파일링 결과 거대한 패스에서 closePath() 하나 빠진 거 때문인 걸 찾아내서 고치더라.
프레임 수는 중요하지 않음. 어차피 브라우저가 그리는 거니까. 진짜 비용은 쓰고, 확인하고, 고치는 반복 작업에서 나옴.
프롬프트 ("opus 5" / "claude" 부분은 니들 제목으로 바꿔 쓰셈)
리소그래프 인쇄 스타일의 30초짜리 절차적 애니메이션을 만들어라. 단 하나의 index.html 파일로 완성할 것(Canvas 2D 사용, 라이브러리/네트워크 폰트/이미지/에셋 일절 금지 — 모든 픽셀은 코드로 그릴 것). 기술 시연이 아니라 완성된 애니메이션을 만들어라.
아이디어
외로운 잉크 점 하나가 파동을 일으키며 세상에 신호를 보내고, 공명하는 모든 것들(종소리, 늑대, 고래, 라디오, 불꽃놀이)이 응답한다. 점은 그것들을 기억으로 수집하지만, 혼자 남으면 파란색으로 희미해진다. 그러다 화면 밖에서 분홍색 점 하나가 응답한다. 주고받는 신호. 파동이 만나는 곳에 꽃이 피고, 세상은 두 가지 잉크로 다시 인쇄되며, 우리는 카메라를 뒤로 빼서 짝을 이룬 것들로 가득 찬 우주를 보여준다. 마지막은 손글씨 서명으로 끝난다.
전체 작품의 뼈대: 화면 정중앙에 고정된 작은 인디고 점 하나와 거기서 퍼져 나가는 동심원 파동. 모든 장면, 모든 전환, 모든 카메라 무빙은 이 점을 중심으로 구성된다. 1막부터 3막까지 이 점은 절대 흔들리지 않는다.
형식
720×720 정사각형 캔버스 (내부적으로 devicePixelRatio에 맞춰 렌더링), 28.0초, 프레임 기반이 아닌 시간 기반.
모든 "종이" 장면의 배경은 따뜻한 크림색 종이.
음악/컷은 120 BPM 그리드에 맞춤: 0.25초와 0.5초가 기본 단위.
타임라인
시간(초) 막 내용
0.0–1.5 I. 부름 빈 크림색 종이, 중앙에 점 하나. 파란색 물결 고리 두 개가 점으로부터 프레임 밖으로 퍼져 나감. 작은 곡선 형태의 "진동" 표시(짧은 평행 호 2~3개)가 테두리 근처에서 톡톡 튐.
1.5–4.5 각 물결은 작은 세계를 담은 원판(프레임 너비의 약 55%)을 남기고, 그 사이사이엔 빈 종이와 물결 하나씩 배치: 연잎과 동심원 물결이 있는 잉어 연못 → 커다란 노란 달에 실루엣으로 비친 귀뚜라미(원판이 동전처럼 뒤집히며 들어오고, 테두리 두께가 보임) → 짙은 청록색 바다 속 해파리(원판이 오른쪽에서 미끄러지듯 들어오며 살짝 회전).
4.5–6.0 점 위로 원판이 열리고 카메라가 그 안으로 다이빙하며 화면 가득 참: 올빼미 클로즈업 → 사찰 종소리(소리 호) → 등대(빛줄기 + 파도 호). 다음 장면들은 이전 장면 위로 원판 형태로 열리며 화면을 채움.
6.0–13.9 II. 모든 것이 공명하다 전체 화면 장면들의 몽타주, 비트에 맞춰 강하게 컷 전환, 장면당 약 0.5초에서 0.25초로 가속. 6.0초, 8.0초, 10.0초에는 "숨을 고름": 빈 종이로 돌아가 물결 하나를 보여준 뒤, 다음 장면이 점으로부터 아이리스 효과로 열림. 장면 순서는 아래와 같음.
13.9–15.9 되감기: 이전 장면들이 역순으로 빠르게 지나감, 각각 다른 색상 조합(잉크 색 반전)으로 나타나며, 점 주변의 얇고 희미한 이중 "렌즈" 고리가 점점 조여짐.
15.9–17.8 III. 아카이브 줌 아웃: 모든 장면이 점 주변의 동심원 궤도 4개 위에 약 40개의 원형 메달 형태로 배치됨. 마치 레코드판의 홈이나 태양계 같은 모습으로 연노란색 종이 위에 놓이고, 궤도들은 천천히 반대 방향으로 회전함. 그러다 파란색 잉크 하나로 빠져나가며(시아노타입 느낌), 작아지고 밖으로 흩어지며 사라짐. 종이 위에 점 하나만 남음. 한 박자 정적.
17.8–22.0 IV. 대답 분홍색 하프톤 빛이 왼쪽 하단에서 스며 나오고, 화면 밖에서 분홍색 물결 호가 굴러 들어옴. 점은 파란색 고리로 대답함. 카메라가 천천히 뒤로 빠지며 팬(pan)하면 왼쪽 하단에 분홍색 점이 드러남. 부름과 응답: 파란색과 분홍색 물결이 번갈아 나타나고, 점점 더 대담해지며 고리들이 서로 가까워짐.
22.0–23.0 고리들이 맞닿음: 닿는 지점에서 작은 노란색 불꽃이 튀고, 분홍색 점에 노란색 중심이 생김. 그 사이에 주황빛 노란색 심지를 가진 분홍색 하프톤 연꽃이 피어나 천천히 회전하며, 파란색 고리 하나와 분홍색 고리 하나가 이를 감쌈.
23.0–24.0 V. 함께 분홍색과 파란색 잉크 "만" 사용한 빠른 듀오톤 리프라이즈: 폭포, 고래, 로켓 발사, 고리 달린 행성 — 이제 모든 프레임에 두 점이 다 보임.
24.0–26.0 별 가루와 성운 안개가 깔린 짙은 남색 밤. 노란색 후광을 두른 두 점이 각자의 고리 안에서 서로를 공전함. 줌 아웃: 수백 개의 다른 파란색/분홍색 쌍들이 작은 고리 안에서 각각 공전 중.
26.0–28.0 VI. 서명 크림색 종이. "opus 5"가 남색 잉크로 한 획씩 손글씨로 써지고, 분홍색이 살짝 어긋나게 겹침. 두 점은 그 아래 "••" 표시처럼 나란히 놓임; 분홍색 점이 작은 고리 하나를 보냄; 그 아래 "claude"가 스스로 써짐. 짧게 멈췄다가 모든 글자가 하프톤 점으로 흩어지며 작아져 사라짐.
( "opus 5" / "claude"는 본인의 제목으로 바꾸세요.)
장면 라이브러리 (2막, 순서대로)
오로라 아래 눈 덮인 능선에서 울부짖는 늑대 · 분홍색 햇살이 퍼지는 배경에 울리는 다이얼 전화기 · 턴테이블 (점 = 회전축) · 갈대밭 사이 거대한 보름달 아래서 우는 개구리들 · 해 질 녘 동굴에서 쏟아져 나오는 박쥐 떼 · 부서지는 파도 · 비 오는 밤 창가에 앉은 고양이 뒷모습, 도시의 불빛 · 호박벌이 앉은 해바라기 (점 = 꽃 중심부) · 소리 파동이 그려진 성당 진공관 라디오 · 항구 위로 터지는 불꽃놀이 · 나팔꽃 사이를 날아다니는 벌새 · 타일 벽을 배경으로 휘파람 소리를 내는 빨간 주전자 · 해 질 녘 놀이공원의 대관람차 · 정글 폭포 · 부겐빌레아 아래 세워진 자전거 · 빛줄기 속의 고래 · 소리 파동이 그려진 그랜드 피아노 / 하프 현 · 발사대에서 솟구치는 로켓, 피어오르는 구름 · 달이 뜬 밤의 아파트 창문들 · 고리가 있는 행성 · 언덕 위를 떠다니는 열기구들 · 번개가 치는 화산 · 나선 은하를 관측하는 전파 망원경 · 어두운 숲속의 모닥불 · 지평선까지 펼쳐진 해바라기 밭 · 해 뜰 녘 겹겹이 쌓인 산등성이 · 해 질 녘 밭고랑 위로 홀로 서 있는 우산 소나무 · 밤 연못 위의 빗방울.
모든 장면을 위한 구성 규칙
0.25초 만에 실루엣으로 알아볼 수 있는 굵직한 피사체 하나. 명암 대비는 확실하게.
중심점은 의미 있는 위치(레코드판 중심, 종 몸통, 전화기 다이얼, 해바라기 씨앗, 울림이 시작되는 곳 등)에 찍을 것.
많은 장면에서 파동과 어우러지는 동심원 형태의 소리/빛/물결 아크를 넣을 것.
장면당 잉크는 최대 3~4개까지만.
비주얼 시스템 (리소그래프)
종이: 따뜻한 크림색 #F2EDE3, 미세한 섬유 질감과 희미한 얼룩. 정적인 느낌 유지 — 절대 깜빡거리지 않게.
잉크 (리소 표준): 블루 #0078BF, 형광 핑크 #FF48B0, 옐로우 #FFE800, 그린 #00A95C, 오렌지 #FF6C2F, 바이올렛 #765BA7, 인디고 #2E3192 (점과 글자용). 순수 블랙은 금지: 어두운 부분은 잉크를 겹쳐 찍어서(multiply) 표현할 것.
하프톤: 잉크마다 레이어를 따로 둘 것. 톤은 눈에 보이는 점 스크린(~4~6px 간격)으로 처리하고, 잉크별로 스크린 각도를 다르게(예: 15°, 45°, 75°, 0°) 설정할 것. 그라데이션은 점 크기로 조절. 솔리드 영역은 100%로.
핀트 어긋남(Misregistration): 각 잉크 레이어를 장면마다 고정된 방향으로 1~3px씩 어긋나게 배치할 것. 중심점 한쪽에는 항상 얇은 핑크색 테두리가 보여야 함.
인쇄 질감: 흩뿌려진 점들, 솔리드 영역에 잉크가 덜 묻은 작은 빈틈, 하이라이트용 흰색 해칭.
선 품질: 손으로 그린 듯한 흔들림과 굵기 변화. 파동은 절대 완벽한 원이 아님(반지름에 저주파 노이즈를 넣고 끝부분은 가늘게).
점: 인디고 색상, 프레임 너비의 약 2.2%.
모션 보캐블러리
파동(Ripple): 점으로부터 프레임 구석 너머까지 약 0.6초 동안 고리 모양이 커짐(easeOutCubic), 점점 얇아지며 사라짐; 가장자리에 2~3개의 눈금 아크가 톡톡 튐.
디스크 공개(Disc reveal): 원형 마스크가 살짝 오버슈트하며 커짐(easeOutBack). 변형: 동전 뒤집기(scaleX 0→1, 더 어두운 잉크로 테두리 두께가 보이는 타원), 살짝 회전하며 들어오기.
다이브(Dive): 약 0.35초 만에 디스크를 화면 가득 채우도록 확대(easeInOutCubic); 중심점은 그대로 유지.
몽타주 컷: 0.25 / 0.5초 그리드에 맞춰 딱딱 끊어서 전환. 장면 전체를 넘길 때 크로스페이드는 금지.
렌즈 링: 점 주변의 옅은 이중 외곽선, 샷이 진행될수록 점점 조여짐.
아카이브 풀백: 현재 장면이 메달 하나로 축소되고, 다른 장면들이 궤도를 따라 나타남; 궤도는 회전 방향이 교차함.
잉크 드레인: 각 메달을 휘도에 따라 단일 블루 잉크로 다시 렌더링한 뒤 크로스페이드(유일하게 허용되는 크로스페이드).
산란(Scatter): 메달들이 크기가 0이 될 때까지 밖으로 퍼져나감(easeInQuad).
블룸(Bloom): 꽃잎이 순차적으로 펼쳐짐(easeOutBack), 이후 천천히 회전.
카메라: 부드럽고 감쇠가 확실한 팬과 줌. 떨림은 절대 금지.
손글씨: 획을 따라 경로가 그려지며 글자가 나타남.
디졸브: 글자가 하프톤 점으로 변하고 노이즈가 섞인 타이밍에 맞춰 크기가 0으로 줄어듦.
아키텍처
render(t)는 시간에 따른 순수 결정론적 함수: 애니메이션은 어느 프레임으로든 즉시 이동 가능해야 함.
장면과 요소마다 시드값이 있는 PRNG(예: mulberry32) 사용. 렌더 루프 안에서 Math.random() 호출 금지. 텍스처는 해당 객체에 고정.
타임라인은 하드코딩된 if/else가 아니라 {start, duration, kind, scene, transition, params} 형태의 큐 데이터 배열로 관리.
각 장면은 레지스트리에 {id, inks, draw(inkCtx, localT, rng)} 모듈로 등록.
리소 컴포지터: 각 잉크의 커버리지를 오프스크린 그레이스케일 캔버스에 그리고 → 스크린 각도별로 미리 계산된 임계값 타일로 하프톤 처리 → 색 입히기 → 종이 위에 핀트 어긋남을 적용하여 multiply로 합성.
각 장면의 정적 잉크 레이어는 비트맵으로 미리 렌더링(로딩 바를 띄우고 지연 로딩). 애니메이션은 변형(transform)과 몇 가지 작은 라이브 요소(불, 날개, 물결, 빛줄기)만 처리. 노트북에서 60fps 재생을 목표로 할 것.
손글씨: 필요한 글자만 스트로크 경로로 정의(폰트 파일 사용 금지).
컨트롤 및 내보내기
재생/일시정지(스페이스바), 다시 재생, 시간 표시와 액트 마커가 있는 스크러버, ←/→로 프레임 단위(1/24초) 이동.
?t=12.5 URL 파라미터로 특정 시간에 일시정지된 상태로 열기(검수용).
"Record" 버튼: canvas.captureStream(24) + MediaRecorder → WebM 다운로드.
옵션(기본 음소거): 120 BPM의 WebAudio 사운드트랙(따뜻한 아날로그 패드 + 부드러운 아르페지오), 파동마다 부드러운 핑 소리, 4막에서는 블루와 핑크 핑 소리가 단3도 차이로 들림.
프로세스 — 한 번에 끝내려고 하지 마라.
엔진 우선: 페이퍼, 리소 컴포지터, 도트, 리플, 타임라인, 컨트롤. 더 진행하기 전에 멈추고 t = 0.3, 1.8, 3.0일 때의 스틸 컷을 보여줘.
장면은 8개씩 묶어서 작업해. 각 배치가 끝나면 헤드리스 브라우저에서 720×720 해상도로 ?t=를 붙여서 각 장면을 열어보고, 스크린샷을 찍어서 확인해. 다음 배치로 넘어가기 전에 구도가 흐릿하거나, 알아보기 힘들거나, 중심에서 벗어났으면 수정해.
전환 효과 + 3막~6막 작업.
전체 검수: 1.5, 4.5, 6.0, 13.9, 15.9, 17.8, 22.0, 24.0, 26.0초 부근에서 0.25초 간격으로 스크린샷을 찍어. 팝 현상, 클리핑, 깜빡임, 텍스처가 밀리는 현상, 도트가 중심에서 벗어나는 문제를 전부 잡아내.
퀄리티 기준: 어중간한 장면 여러 개보다 뛰어난 장면 하나가 훨씬 나아. 예산이 부족하면 2막 장면을 쳐내. 전환 효과나 3막~6막은 절대 건드리지 마.
하지 마
외부 에셋, 라이브러리, 폰트, 이미지 생성 사용
실사 느낌, 사방에 검은 외곽선 넣기, 하프톤 없는 매끄러운 그라데이션
전체 장면 간의 크로스페이드 (잉크가 빠지는 연출 제외)
최종 서명 외의 모든 텍스트
프레임마다 바뀌는 무작위 값
주요 댓글
r/claudeai
대부분의 사용자가 Claude의 뛰어난 역설계 능력과 작성자의 상세한 프롬프트 공유에 감탄하며 긍정적인 반응을 보임.
28
정말 흥미롭네요, 공유해주셔서 감사합니다.
7
천만에요 🙏🏻
17
놀랍네요. '이 영상을 보고 역설계해라'라고 말한 게 그렇게 잘 작동했다는 게 믿기지 않네요.
물론 단순히 그것만 한 게 아니라는 건 알지만, 진심으로 놀랍습니다.
공유해주셔서 감사합니다.
7
정말 멋지네요, 공유해주셔서 감사합니다.
7
이 프롬프트는 어떻게 도출하신 건가요? Claude의 도움을 받아 다듬으신 건가요? 즉, 시작점은 무엇이었고 어떻게 발전했나요? 프롬프트가 정확하거나 충분히 좋다고 판단한 시점은 언제였나요?
22
거의 그렇다고 볼 수 있죠. 그냥 원래 레딧 게시물을 Claude Code에 붙여넣고 /watch 비디오 스킬을 사용해 애니메이션을 검사하고 재현할 수 있는 프롬프트를 역설계하라고 시켰어요.
그 후 Claude가 제가 위에 올린 훨씬 상세한 브리핑으로 바꿔준 거죠. 저는 몇 가지 조정만 했습니다. 단순히 겉모습뿐만 아니라 타이밍, 전환, 시각적 시스템, 구현 과정까지 설명해냈을 때 이게 충분히 좋다는 걸 알았죠.
5
잠깐, 잠깐만요… 이거 일러스트 부분 말인데요. Claude가 어떻게 이런 그림을 그린 거죠? Claude가 이렇게 잘 그린 일러스트는 처음 봐요. 10분의 1만큼이라도 이렇게 잘 나온 정지 이미지 일러스트를 본 적이 없거든요. 제가 그동안 몰랐던 건가요, 아니면 Claude가 원래 이 정도는 할 수 있었던 건가요?
Claude가 만든 예술 작품을 보고 'AI가 만든 거네'라고 바로 알아차리지 못한 건 이번이 처음이에요.
7
솔직히 저도 똑같은 반응이었어요! 근데 이건 이미지 모델이 아니라 전부 코드로 만든 거예요. Claude가 먼저 스스로 작은 드로잉 키트(흔들리는 덩어리, 끝이 가늘어지는 붓 터치, 잎사귀, 해칭 등)를 만들고, 각 장면은 그걸로 도형을 배치하는 50줄 정도의 코드로 이루어져 있어요. 주전자 같은 경우도 몸통은 점 9개, 주둥이는 선 하나, 김은 물결선 몇 개로 만든 게 다예요!
리소(riso) 스타일이 주는 느낌도 한몫했죠. 하프톤 도트, 3~4가지 잉크, 살짝 어긋난 정렬, 종이 질감까지… 단순한 도형들도 의도된 것처럼 보이게 만들어주거든요.
4
공유해줘서 고마워!
4
절차적으로 생성된 오디오 결과물도 정말 인상적이네요. 저는 게임에 들어갈 문 여닫는 소리 같은 간단한 효과음 만드는 데만 수십 번을 반복해야 했거든요. 결국 절차적 생성 효과음은 대부분 포기하고, 게임 음악을 구했던 사이트에서 MP3 파일을 가져다 썼습니다.
