블로그로 돌아가기

도구 및 통합가이드

pixelfx 스킬로 게임에 픽셀 아트 효과 추가하기

Claude Code에 pixelfx 스킬을 설치하고 프로스트 노바를 요청한 뒤, 실시간 비용 표로 저렴한 모델에서 그 세션에 드는 비용을 확인하세요.

작성자: CheapTokens Team 게시됨읽는 시간 5분

Claude Code 로고 옆에 pixelfx 스킬 설치 명령이 표시된 터미널
이 페이지의 내용
  1. pixelfx란
  2. 스킬 설치
  3. 효과 하나 요청하기
  4. 세션 비용
  5. 출시 전 확인 사항

브라우저 게임에 프로스트 노바를 넣고 싶은데, 프레임 40장을 손으로 그리고 싶지는 않을 겁니다. pixelfx 스킬을 쓰면 Claude Code가 대신 해줍니다. 명령 두 개로 설치하고, 효과를 한 문장으로 설명하면 에이전트가 코드를 작성합니다. 저렴한 모델에서 그 세션에 드는 비용은 단계 수에 따라 달라지므로, 아래 표는 명시된 가정 아래 실시간 가격으로 계산한 값입니다.

pixelfx란#

pixelfx는 244개의 픽셀 아트 효과 라이브러리입니다. README(github.com/patch-gg/pixelfx, 2026년 11월 4일 확인)에 따르면 각 효과는 src/fx/<category>/로 작성된 작은 코드 조각이며, 카테고리는 불, 폭발, 물, 얼음부터 번개, 근접, 신성, 암흑, 상태, 날씨, UI, 크리처까지 다양합니다. 61개 효과는 캐릭터를 사용하고, 여러 효과를 연쇄시키는 12개의 전체 동작이 있습니다.

엔진에 따라 두 가지 방식으로 사용합니다:

  • 브라우저 게임: JavaScript 코드를 직접 사용합니다. 의존성이 없습니다.
  • Godot 또는 다른 엔진: 원하는 효과를 Aseprite 스타일 JSON과 함께 PNG 스프라이트 시트로 내보냅니다.

저장소에는 새 효과를 만드는 별도의 Claude Code 스킬도 포함되어 있습니다. 이 가이드가 다루는 것이 바로 그 스킬입니다. 스킬 파일을 한 번도 열어본 적이 없다면, 에이전트 스킬이란 무엇이고 어떻게 검증하는지가 5분이면 읽을 수 있으며 저장소에서 무언가를 설치하기 전에 읽어볼 가치가 있습니다.

스킬 설치#

Claude Code가 이미 CheapTokens를 가리키도록 설정되어 있어야 합니다. 아니라면 먼저 설정하세요: Claude Code를 CheapTokens에 연결하는 방법에 주소와 변수가 있습니다. 파일이 긴 게임 코드에는 DeepSeek-V4-Flash(deepseek-ai/DeepSeek-V4-Flash-0731)가 잘 맞습니다: 답변당 최대 32,768 토큰, 380K 컨텍스트 윈도우, 시간대와 무관한 단일 가격입니다. 자세한 내용은 DeepSeek 모델 페이지에 있습니다.

README는 두 가지 설치 방법을 제시합니다. 플러그인 방식은 Claude Code 안에서 명령 두 개입니다:

text
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx

수동 방식은 저장소의 skills/pixelfx 폴더를 ~/.claude/skills/에 복사하는 것입니다.

pixelfx용 플러그인 명령 두 개가 표시된 터미널
pixelfx README의 설치 명령 두 개, 2026년 11월 4일

순서대로 배열하기

설정을 올바른 순서로 진행하세요

  1. Claude Code를 CheapTokens 키에 연결
  2. /plugin marketplace add로 pixelfx 마켓플레이스 추가
  3. /plugin install로 스킬 설치
  4. 평범한 언어로 효과 요청

효과 하나 요청하기#

스킬은 일반적인 요청으로 작동합니다: 효과 추가, 내보내기, 조정 또는 생성. README의 예시가 가장 좋은 출발점입니다. 게임 폴더를 열고 claude를 시작한 뒤 다음과 같이 입력하세요:

text
Add a frost nova to my character's ultimate.

프롬프트는 이게 전부입니다. 스킬은 이런 요청을 위해 만들어졌습니다: Claude Code가 효과를 찾고, 사용하고, 내보내고, 만드는 법을 가르치며, 새 효과를 만들 때는 README에 따라 초안 작성, 렌더링, 확인, 개선의 루프로 동작합니다. 어떤 에이전트 세션이든 그렇듯 한 번의 답변이 아니라 여러 단계를 예상하세요: 파일을 읽고, 그다음 편집합니다.

Godot을 사용한다면 README가 설명하는 다른 방식을 요청하세요:

text
Export the fire and explosions categories as sprite sheets for Godot.

프레임이 그리드로 배치된 PNG와 Aseprite 스타일 JSON을 받게 됩니다. README에 따르면 Godot과 Unity용 Aseprite 임포터가 이를 읽습니다.

시작하기 전에 알아둘 점이 하나 있습니다. 몸에 그려지는 효과는 기본 24x38 더미용으로 작성되므로, 크기가 다른 캐릭터는 해당 효과를 다시 생성해야 합니다.

직접 해보기직접 해보기: 영웅이 32x48 픽셀입니다. 몸 효과가 제대로 맞을까요?정답 보기

기본 설정으로는 맞지 않습니다. 몸 효과는 24x38 더미용으로 그려지므로, Claude Code에 해당 효과를 캐릭터 크기에 맞게 다시 생성해 달라고 요청하세요.

pixelfx README의 예시 프롬프트 두 개가 표시된 터미널
pixelfx README의 예시 프롬프트 두 개, 2026년 11월 4일

세션 비용#

여기서 사람들이 놀라는 부분이 있습니다. 효과 자체는 작은 파일입니다. 비용은 에이전트가 작업하는 데서 발생합니다: 매 단계마다 Claude Code는 읽은 프로젝트 파일, 스킬 텍스트, 지금까지의 대화를 다시 전송합니다.

빠른 확인

Claude Code 세션에서 보통 토큰을 가장 많이 차지하는 쪽은 어디일까요?

정답 보기

정답: 매 단계마다 다시 전송되는 입력

각 단계는 전체 작업 컨텍스트를 담으므로 입력이 빠르게 누적되는 반면, 각 답변은 훨씬 짧습니다(아래 예시에서는 30,000 토큰 대비 1,500 토큰).

프로젝트에 맞게 바꿀 수 있는 가정이 있습니다: 세션이 20단계이고, 각 단계가 약 30,000 토큰의 입력(파일, 스킬 텍스트, 기록)을 전송하며 모델이 약 1,500 토큰을 작성한다고 가정해 봅시다. DeepSeek-V4-Flash에서 이런 단계 하나의 비용은 $0.0006이며, 20단계 전체 세션은 표에 나와 있습니다. 표에는 모든 모델에 대해 OpenRouter 가격도 우리 가격 옆에 나란히 표시되며, 입력과 출력을 합산한 총액으로 계산됩니다.

모델 요청당 20회 요청 OpenRouter, 20회 요청
GLM-5.3-Flash $0.00066 $0.0132 $0.0226
DeepSeek-V4-Flash $0.0006 $0.012 $0.0462
MiniMax-M2.7 $0.0017 $0.0345 $0.414

요청당 입력 30,000개 및 출력 1,500개 토큰입니다. 100만 토큰당 가격은 현재 기준이며 당사 요금제에 따라 함께 변경됩니다. OpenRouter 열은 동일한 작업량에 대한 참고 가격을 보여줍니다.

현재 1M 토큰당 가격: 입력 $0.015, 출력 $0.10. 이미 존재하는 효과를 조금 조정하는 작업에는 GLM-5.3-Flash가 390K 컨텍스트와 답변당 최대 8,192 토큰을 제공하므로 색상이나 타이밍을 조정하기에 충분합니다.

에이전트와 함께하는 더 긴 하루가 어떻게 누적되는지 보려면, Claude Code를 더 저렴하게 쓰는 방법에서 입력을 줄이는 습관을 다룹니다.

출시 전 확인 사항#

코드와 효과는 MIT 라이선스입니다. gallery/fonts의 Patch Pixel 폰트는 MIT 적용 대상이 아니며(저장소의 NOTICE.md 참고), 일부 효과는 Hugo Duprez와 Hollow Crown의 MIT 코드를 각색한 것입니다. 게임에 이 폰트를 포함한다면 NOTICE.md를 먼저 읽으세요.

자체 키와 모델 목록으로 시작하려면 CheapTokens 문서와 실시간 가격 페이지를 참고하세요.

태그: