코드로 만든 효과를 공개했다 — 사실
2026-10-31 기준 폭발 ZIP에는 explosion.ts 한 파일 523줄이 있다. 블랙홀 ZIP에는 black-hole.ts 한 파일 624줄이 있다. 두 파일의 외부 import·require는 0건이다. 폭발 소스 · 블랙홀 소스
Sprite Fusion · 픽셀 아트
Claude로 (좋은) 픽셀 아트 효과를 만드는 방법
한 번의 프롬프트로 끝내는 대신, 초안 5–10개를 영상으로 비교한 뒤 사람이 골라 수정한다.
읽기 전에
핵심은 코드로 만든 시안을 영상으로 비교하면서 사람이 다음 수정을 정하는 데 있다. 한 번의 프롬프트로 완성품을 얻는 비법은 아니다. 원문 도입
절차적 픽셀 시각 효과(Visual Effects, VFX)는 시간에 따른 픽셀의 변화를 코드로 계산하는 효과다. 공개된 폭발 예제는 Frame의 색상·빛 버퍼에 Uint32Array를 쓴다. update(dt)는 상태를 갱신한다. draw는 효과를 그린다. done은 종료 여부를 알린다. 폭발 예제 코드
‘코드는 점토다’라는 비유는 시안을 고쳐 가는 작업 방식을 가리킨다. 원하는 분위기를 느슨하게 설명한 뒤 코딩 에이전트에 첫 시안 5–10개를 요청한다. 각 시안을 짧은 영상으로 만들어 /records에 남긴다. 코드는 점토다 사람이 한 방향을 고른 뒤 구체적인 수정을 지시한다. 예를 들어 섬광의 길이나 연기가 흩어지는 속도를 수정 대상으로 삼을 수 있다. 바뀐 영상을 다시 보면서 같은 과정을 반복한다. 눈을 믿어라
직접 재현하려면 코딩 에이전트 외에 효과를 실행할 환경과 영상을 기록할 수단이 필요하다. 외부 npm import가 없다는 사실만으로 어느 엔진에나 코드를 그대로 붙일 수 있는 것은 아니다. 블랙홀 예제의 화면 왜곡 함수 drawLens는 Canvas 2D를 받는다. 보조 캔버스의 기본 구현은 OffscreenCanvas다. 다른 엔진에 넣을 때는 화면 출력 방식을 맞추는 작업이 필요하다. 블랙홀 예제 코드
- 본문의 효과 영상을 본 뒤 수정 과정을 읽는다. 정지 화면보다 움직임과 타이밍이 비교의 중심이다.
- 직접 구현할 때는 공개 예제에서 시작한다. 저자가 말한 작업 시간이나 추가 도구 비용은 개인 경험이며, 보편적인 제작 시간이나 총비용의 근거는 아니다. 저자의 제작 경험
Executive Summary
픽셀 아트 시각효과의 완성도는 한 번의 생성보다 사람이 고르고 고치는 과정에 달렸다는 것이 저자의 주장이다. Hugo Duprez는 2026-10-28 Sprite Fusion에 실은 글에서 skill.md 하나나 복사한 프롬프트로 좋은 결과를 얻는다는 약속을 거부한다. 자신의 게임과 효과 라이브러리에 만든 사례는 코드로 구동하는 효과다.
코드를 택한 이유는 변형과 수정의 자유다
저자는 이미지 스프라이트가 경직되어 제약이 많다고 느꼈다. 코드를 점토처럼 고쳐 쓰는 접근은 그 선호에 따른 선택이지, 모든 스프라이트 제작 방식이 열등하다는 비교 결과가 아니다. Claude Code나 Codex 같은 코딩 에이전트만으로 작업한다는 설명은 별도 효과 생성 서비스가 필요 없다는 뜻이다. 에이전트 사용료와 사람의 제작 시간까지 무료라는 뜻은 아니다.
여러 초안을 영상으로 비교한 뒤 한 방향을 좁힌다
저자의 절차는 느슨한 아이디어와 원하는 시각적 방향을 에이전트에 전달하는 데서 시작한다. 에이전트는 초안 5~10개를 짧은 영상으로 렌더링해 /records에 저장한다. 사람이 영상을 보고 한 방향을 고른다. 이후에는 균형과 움직임, 타이밍을 구체적으로 수정한다. 원하는 모습에 닿을 때까지 생성과 선택을 반복한다.
빠른 첫 구현과 출시할 품질은 다르다
저자는 작동하는 첫 버전보다 자신이 정한 높은 품질 기준을 승인 조건으로 삼는다. Destroy Any Website의 MIRV 로켓 발사기도 첫 버전은 빨리 만들었지만 원하는 모습까지 몇 시간 동안 고쳤다고 썼다. 이 시간은 저자의 자술이지 측정한 생산성 향상 수치가 아니다. 그는 게임에 대한 애정을 세부를 즐기며 다듬는 시간으로 연결한다. 시각과 움직임이 함께 기준에 닿기 전에는 첫 버전을 그대로 내놓지 않았다는 설명이다.
참고작을 공부하는 시간이 선택 기준을 만든다
저자는 취향이 참고작에서 자란다고 본다. 디자인과 영화, 사진을 접하며 무엇이 왜 좋은지 살피는 경험이 그 기준을 만든다는 설명이다. 그는 Path of Exile 2의 시각효과를 분석했다. ARC Raiders에서는 파괴와 불을 공부했다. 자기 게임을 만드는 대신 참고작을 공부하는 한 시간도 판단력을 기르는 투자로 본다.
오픈소스 효과는 자기 효과로 고쳐 쓸 출발점이다
저자는 공개한 효과 코드를 에이전트의 참고 자료로 주거나 수정해 새 효과를 만드는 방식을 제안한다. Dash & Blink는 잔상이 남는 대시와 빛으로 흩어지는 순간이동을 제공한다. Black Hole은 빛이 휜 듯한 원반과 주변 물질을 빨아들이는 효과다. Rain은 비스듬한 빗줄기와 물 튀김, 물결, 안개를 만든다. Ice는 얼음 가시와 서리 폭발, 결정, 깨지는 얼음, 얼어붙은 캐릭터를 제공한다.
팩트체크
Hugo Duprez · Sprite Fusion · 2026-10-28
종합 등급 B
근거 등급은 A(독립 재현), B(1차 자료 지지·재현 한계), C(부분 지지), D(핵심 근거 부족), E(중요 주장과 충돌), F(핵심 주장 반박)로 구분한다.
판정에서 사실은 자료가 주장을 뒷받침한다는 뜻이다. 부분사실은 조건이나 범위를 좁혀야 한다는 뜻이다. 불확실은 공개 근거만으로 확정할 수 없다는 뜻이다. 의견은 취향이나 작업 권고다.
공통 버퍼와 수명 주기가 있다 — 사실
두 효과의 Frame은 색상 color와 빛 light를 각각 Uint32Array에 쓴다. 반환 객체에는 update(dt)가 있다. draw(Frame, layer?)로 그린 뒤 done()으로 종료 여부를 판단한다. explosion.ts 4·43~61행 · black-hole.ts 4·118~205행
시드와 크기를 바꿀 수 있다 — 사실
폭발은 size, 블랙홀은 radius 옵션을 받는다. 두 효과는 seed로 내부 의사난수 생성기 Rng를 초기화한다. explosion.ts 6~23·192~206행 · black-hole.ts 7~27·472~486행 블랙홀의 입자 생성은 update 호출 횟수에도 의존한다. 같은 시드만으로 서로 다른 시간 간격의 결과까지 같아지지는 않는다. black-hole.ts 120~145행
의존성 없음이 모든 엔진에서 즉시 실행된다는 뜻은 아니다 — 부분사실
공식 페이지는 의존성을 “None”으로 표기한다. 폭발 페이지 · 블랙홀 페이지 호출 측은 효과를 갱신하고 버퍼를 화면에 표시할 실행 환경을 마련해야 한다. 블랙홀의 장면 왜곡 함수 이름은 drawLens다. 이 함수는 CanvasRenderingContext2D를 받으며 기본 생성기로 OffscreenCanvas를 쓴다. 다른 엔진에서는 해당 그리기 기능을 연결하거나 옮겨야 한다. black-hole.ts 332~384행
MIT로 공개했지만 ZIP에 전문은 없다 — 부분사실
공식 페이지는 “MIT, free for commercial use”라고 명시한다. 폭발 라이선스 표기 · 블랙홀 라이선스 표기 두 소스 헤더에도 MIT와 Hugo Duprez의 저작권 표기가 있다. ZIP에는 별도 LICENSE 파일이 없으며 소스 안에도 MIT 허락·보증 조항의 전문은 없다. MIT라는 표기와 라이선스 전문의 동봉 여부는 별개다. 폭발 ZIP·소스 2~3행 · 블랙홀 ZIP·소스 2~3행
블랙홀이 주변의 모든 게임 오브젝트를 자동으로 삼킨다 — 부분사실
블랙홀 코드는 내부 입자와 지면 조각을 끌어당긴다. 외부에서 넣는 feed(amount, col)는 섭취량과 색상에 반응한다. 임의의 게임 오브젝트를 찾아 삭제하는 통합 기능은 아니다. black-hole.ts 53~74·131·169~191·502~519행
에이전트의 기여도와 제작 시간·비용을 재현할 수 있다 — 불확실
Hugo Duprez는 MIRV 로켓 발사기를 몇 시간 동안 고쳤다고 썼다. 원문에는 에이전트별 코드 기여를 가를 전체 생성·수정 기록이나 총비용 명세가 없다. 제작 경위와 소요 시간은 저자의 자기보고다. 공개 코드가 그 시간이나 비용을 독립적으로 증명하지는 않는다. 원문: Trust. Your. Eyes
영상으로 초당 60프레임 실행 성능을 입증한다 — 불확실
공식 예제의 update(1 / 60)는 시간 간격을 전달하는 코드다. 기기와 해상도를 고정한 성능 측정치가 아니다. 공식 사용 예제 녹화본을 초당 60프레임으로 인코딩하더라도 게임 실행 중의 처리 속도를 증명하지는 않는다. 원문이 제시하는 것은 결과 영상과 제작 방식이다. 원문: Code is clay
초안 5~10개와 눈으로 고르는 방식이 정답이다 — 의견
“눈을 믿어라”와 참고작으로 취향을 기르라는 말은 저자의 작업 권고다. 초안 5~10개가 최적이라는 대조 실험이나 품질의 정량 기준은 제시하지 않는다. 좋은 결과를 정하는 취향과 특정 방법의 효과를 검증하는 실험은 다르다. 원문: Code is clay · 원문: What are your references?
원본 (완역)
요즘은 AI로 게임을 개발할 때 한 번에 훌륭한 결과를 얻을 수 있다고 믿게 하려는 사람이 많다. “이 skill.md만 쓰면 돼”, “저 프롬프트만 복사하면 돼.” 음… 아니다. 특히 픽셀 아트 시각 효과라면 더 그렇다. 훌륭한 결과를 원한다면 노력을 들여야 한다. 지금까지 내 결과를 가장 크게 바꿨다고 느낀 것들을 소개한다.
1. 코드는 점토다
코드는 픽셀 아트 효과를 만드는 데 무척 잘 맞는다. 나는 이미지 스프라이트가 너무 경직돼 있고 제약이 많다고 느꼈다. 전부 코드이므로 Claude Code나 Codex 같은 최전선의 코딩 에이전트 외에 별도의 도구나 유료 서비스를 쓸 필요도 없다.
내게 처음 도움이 된 것은 코드를 점토처럼 다루는 일이었다. 아이디어가 떠오를 때마다 머릿속의 미술 방향과 함께 대략적으로 설명한다. 에이전트에게 첫 시안 5–10개를 작성하고, 살펴볼 수 있도록 /records 디렉터리에 짧은 영상으로 렌더링하게 한다.
그러면 아이디어가 펼쳐지고 “분명히 이 방향이 맞다”라는 판단이 작동한다. 그중 하나를 골라 파고들고, 세부를 다듬는다. 머릿속에 그린 바로 그 모습으로 좁혀질 때까지 반복한다.
출발점으로 삼을 수 있도록 픽셀 아트 효과 몇 가지를 오픈소스로 공개했다. 에이전트에게 참고 자료로 주거나, 수정하거나, 이를 바탕으로 새 효과를 만들 수 있다.
2. 눈을 믿어라
이것은 아주 중요하다. 품질 기준을 정하는 사람은 바로 자신이다.
어설픈 결과에 만족하고 멈출 수도 있고, 훌륭한 것을 만들 수도 있다. 까다로워져라! 특정 세부를 다시 작업해 달라고 요청하고, 원하는 모션 디자인이 나올 때까지 주고받으며 다듬어라.
자신의 눈을 믿어라. 느낌이 맞는가? 어떻게 하면 균형이 더 좋아질까? 움직임과 타이밍을 어떻게 바꾸면 더 보기 좋을까? 내 게임 Destroy Any Website의 MIRV 로켓 발사기는 첫 버전을 꽤 빠르게 만들었다. 하지만 완벽하게 다듬으려고 수시간을 반복했다. 첫 버전을 내놓고 다음 작업으로 넘어갈 수도 있었다. 그렇게 하지 않았다. 머릿속에 그린 모습과 정확히 같기를 원했기 때문이다.
3. 무엇을 참고하는가?
취향은 자신이 참고하는 것들로 만들어진다.
노트북을 덮고 디자인·영화·사진을 비롯한 온갖 예술을 읽고 살펴보기를 강하게 권한다. “이게 좋은데, 왜 좋지?”, “이건 통하네”, “이 아이디어에 저걸 쓰면 멋지겠는데”라고 느끼는 감각이 깨어난다.
학생의 눈으로 게임도 해 보자. 나는 Path of Exile 2를 하면서 어떻게 그렇게 멋진 시각 효과를 만들었는지 이해하려고 시간을 들였다. ARC Raiders에서는 파괴와 불을 같은 방식으로 살폈다. 자기 게임을 만드는 대신 판단 기준을 채우는 데 쓴 한 시간은 잘 투자한 시간이다.
결론
짧게 말하면 한 가지 질문으로 모인다. 자신의 게임에 애정이 있는가? 분명 그럴 것이다! 그렇다면 시간을 들이고, 세부를 만지는 재미를 즐겨라. 자신의 품질 기준을 충족할 때만 승인해라. 그 기준은 가능한 한 높게 잡아라.
앞서 출발하고 싶은가? 오픈소스 효과 몇 가지를 가져와 자신만의 효과로 빚기 시작해 보자.
원본 링크·인용
원문과 공개 코드
- Hugo Duprez, 「How to make (good) pixel art effects with Claude」. Sprite Fusion, 2026-10-28.
- Explosion · explosion.zip
- Black Hole · black-hole.zip
기타
용어와 수록 범위
- 스프라이트
- 게임 화면에서 쓰는 이미지 조각이다. 애니메이션에서는 여러 프레임을 순서대로 재생한다.
- 코드 기반 효과
- 위치와 밝기의 변화를 코드로 계산해 그리는 효과다. 이 글의 공개 예제는 색과 빛을 별도 픽셀 버퍼에 그린다. Frame·draw 구현
- 타이밍
- 동작이 시작되거나 끝나는 시점과 각 단계가 지속되는 길이다.
원문 본문과 캡션을 전량 옮겼다. 원문 영상 3개와 이미지 6개를 같은 문맥에 두었다. 네 효과의 미리보기는 원문의 animated WebP다.