저는 독학 개발자(solo dev)이며, 지난 몇 달 동안 **Pixanima**라는 프로젝트를 구축해 왔습니다. 이 에디터는 브라우저에서 완전히 구동되는 픽셀 아트 및 애니메이션 에디터이며, 선택적으로 AI 어시스턴트 기능이 내장되어 있습니다. 방금 출시하게 되어 기술적으로 흥미로웠던 부분들, 즉 일반 이미지 모델을 깨끗한 픽셀 아트로 출력하는 방법, 원자적 크레딧 시스템(atomic credit system), 애니메이션을 위한 AI 인비트위닝(inbetweening) 기능, 그리고 전체 비즈니스 모델이 하나의 아키텍처 사실에 의해 어떻게 무너지는지에 대해 공유하고자 합니다.

개요

레이어, 그룹 및 효과를 사용하여 픽셀 아트를 그리고, 온리온 스킨(onion-skin) 기능을 통해 프레임 타임라인에서 애니메이션을 만들고, GIF / 스프라이트 시트 / PNG로 내보낼 수 있습니다. 이 모든 것이 클라이언트 측에서 작동하며 설치가 필요 없습니다. 게다가 AI 어시스턴트는 텍스트 프롬프트를 스프라이트, 끊김 없는 타일(seamless tiles), 팔레트로 변환하고, 캐릭터를 재배치하며, 인비트위닝 애니메이션 프레임을 생성합니다.

프론트엔드는 Vue 3이 HTML 캔버리를 구동하며, 백엔드는 **Laravel 12 (PHP 8.4)**입니다. 제가 배운 점들은 다음과 같습니다.

모든 것이 브라우저에서 실행되다 — 그리고 그것이 비즈니스 모델을 결정했다

전체 에디터는 클라이언트 측(client-side)으로 작동합니다. 프로젝트는 IndexedDB에 저장되며, 아무것도 업로드되지 않습니다. 이는 개인 정보 보호와 속도 면에서 훌륭하지만, 많은 사람들이 간과하는 결과가 있습니다: 클라이언트 측 기능을 의미 있게 제한할 수 없다는 것입니다. 그리기, 레이어, 내보내기 기능이 모두 사용자의 브라우저에서 실행된다면, 이들을 둘러싼 어떤

해결책은 후처리 파이프라인 (post-processing pipeline)입니다. 모델은 단지 가공되지 않은 입력값 (raw input)을 생성할 뿐이며, "픽셀 아트"는 그 이후 PHP의 GD 라이브러리를 통해 결정론적 (deterministically)으로 만들어집니다:

1. 프롬프트로부터 일반 이미지 생성 (Replicate의 flux-schnell 사용)
2. 대상 그리드(예: 32×32 셀)로 영역 다운스케일링 (Area-downscale)
3. N개의 색상으로 양자화 (Quantize) (imagetruecolortopalette) + 선택적 순서 디더링 (ordered dithering)
...

이것이 "AI 슬롭 (AI slop)"과, 실제로 캔버스에 올려 편집할 수 있는 결과물 사이의 차이점입니다. 인터페이스 뒤에서 모델을 교체할 수 있으므로, 동일한 파이프라인이 스프라이트 (sprites), 타일 (tiles), 팔레트 추출 (palette extraction)을 지원합니다.

AI 인비트위닝 (AI inbetweening): 애니메이션 트릭

제가 가장 만족하는 기능은 **AI 인비트위닝 (AI inbetweening)**입니다. 두 개의 키프레임 (keyframes)을 제공하면 그 사이의 프레임들을 생성해 줍니다.

내부적으로는 두 개의 프레임 PNG 파일에 대해 Google의 FILM 프레임 보간 (frame-interpolation) 모델을 실행하여 mp4 파일을 받아온 다음, ffmpeg를 사용하여 이를 정지 영상으로 분할합니다. 각 중간 프레임은 동일한 픽셀화 단계(비디오의 검은색 배경을 제거하는 키잉 (keying) 작업 포함)를 거치며, 결과물은 실제 편집 가능한 프레임으로서 타임라인에 삽입됩니다. 애니메이션 도구로서 이는 "단순한 또 하나의 스프라이트 에디터"와 차별화되는 진정한 강점입니다.

크레딧 시스템: 선결제 후 생성, 멱등성 (idempotent), 환불 가능

AI 호출은 매번 비용이 발생하므로, 크레딧 시스템은 완벽해야 합니다. 두 가지 규칙이 있습니다: 이중 청구 금지, 그리고 실패 시 청구 금지입니다.

원장 (credit_transactions)이 신뢰할 수 있는 유일한 원천 (source of truth)이며, 사용자 행 (row)의 잔액은 단순히 동기화된 캐시일 뿐입니다. 모든 청구는 잠금 처리된 멱등적 (idempotent) 트랜잭션입니다:

DB::transaction(function () use ($userId, $cost, $reference) {
    $user = User::whereKey($userId)->lockForUpdate()->first();
    if ($user->credit_balance < $cost) {
...

AI 엔드포인트는 청구 → 생성 → 실패 시 자동 환불 프로세스를 따릅니다. Replicate에서 오류가 발생하거나 타임아웃이 되면, 크레딧은 즉시 잔액으로 되돌아갑니다. 동일한 멱등성 키 (idempotency key)는 크레딧을 부여하는 Stripe 웹훅 (webhook)을 보호하므로, checkout.session.completed 이벤트가 재전송되어도 계정에 크레딧이 두 번 지급되지 않습니다.

이 부분에 대한 테스트를 작성하면서 실제 버그를 발견했습니다: credit_balance는 일괄 할당(mass-assignable)이 불가능합니다(보안상 올바른 설정입니다). 그래서 update([...])가 아무런 동작도 하지 않은 채 조용히 넘어가고 있었습니다. 느낌(vibes)보다는 테스트(Tests)가 중요합니다.

수익화 모델, 솔직하게 말씀드리면

• 에디터: 영구 무료. 그리기/애니메이션/내보내기 기능은 모두 클라이언트 측(client-side)에서 이루어지므로, 이 기능들을 제한하는 것은 의미가 없습니다.
• AI: 선불 크레딧 방식이며, 실제 마진을 남기기 위해 원시 모델 비용보다 높게 책정했습니다 (결제 수수료, 체험용 크레딧, 환불, 인프라, 세금 및 시간은 공짜가 아닙니다). 신규 계정에는 체험을 위한 무료 크레딧이 제공됩니다.

개발자들은 때때로 마진(markup)을 붙이는 것에 주춤하기도 하지만, 이는 탐욕이 아니라 무료 에디터를 지속 가능하게 유지하기 위한 유일한 방법입니다. "수익을 내는 사용자가 비용을 지불한다"는 압박은 기능을 제한하는 방식이 아니라, 부드러운 상업적 이용 안내를 통해 전달됩니다.

기술 스택, 간단히 요약하자면

• 프론트엔드 (Frontend): Vue 3 SPA, 캔버스 렌더링 (canvas rendering), IndexedDB 지속성 (persistence), Vite.
• 백엔드 (Backend): Laravel 12 / PHP 8.4, Sanctum (Bearer tokens), Socialite (Google/GitHub).
• AI: Replicate (생성을 위한 FLUX, 포즈 편집을 위한 FLUX Kontext, 보간(interpolation)을 위한 FILM), 픽셀화/애니메이션 파이프라인을 위한 GD + ffmpeg.
• 결제 (Payments): Stripe Checkout + 멱등성(idempotent) 웹훅.
• 인프라 (Infra): 시스템 nginx + Cloudflare 뒤에 있는 단일 Hetzner 서버 상의 Docker 스택.

사용해 보세요 / 비판해 주세요

pixanima.app 에서 설치 없이 바로 무료로 이용할 수 있으며, 프로젝트는 브라우저에 저장됩니다. 특히 에디터의 사용감과 AI 기능에 대해 진심 어린 피드백을 받고 싶습니다. 현재 사용 중인 도구 대신 이 도구를 실제로 사용하게 만들려면 무엇이 필요할까요?

캔버스 렌더링, 픽셀화 수학, 또는 "무료 도구 + 유료 AI" 모델 등 어떤 부분에 대해서든 댓글로 더 깊이 있게 논의할 준비가 되어 있습니다.