PixelForge — 웹 픽셀 아트 에디터

프로젝트 소개

PixelForge는 게임용 픽셀 아트를 브라우저에서 만들 수 있는 웹 에디터입니다. 설치나 회원가입 없이 게스트로 시작해 스프라이트를 그리고, 프레임 애니메이션과 타일맵을 구성한 뒤 필요한 형식으로 내보낼 수 있습니다. 데스크톱·태블릿·휴대폰에서 같은 편집 기능을 화면 크기에 맞는 인터페이스로 사용할 수 있도록 구성했습니다.

담당 범위는 에디터 UI, 편집 엔진, 저장·인증 API, 실시간 협업, 모바일 대응, 관리자 화면입니다.

설치 없이 직접 그려보기 →

그리기와 레이어 편집

펜슬로 픽셀을 찍고, 채우기·직선·도형·베지어·그라디언트 등 18가지 도구로 형태와 색을 다듬을 수 있습니다. 선택 영역, 대칭 그리기, 팔레트, 타일 드로잉도 같은 화면에서 사용합니다. 반복되는 배경은 타일셋을 관리하고 타일을 배치하는 방식으로 만들 수 있습니다.

레이어는 캐릭터, 그림자, 배경처럼 서로 다른 요소를 분리해 두는 단위입니다. 레이어마다 가시성·잠금·불투명도를 조절하고, 그룹으로 묶거나 병합할 수 있습니다. 블렌드 모드는 normal, multiply, screen, overlay를 포함한 19가지를 제공합니다. 이 가운데 17개는 Canvas 합성 연산에 연결하고, subtract와 divide는 픽셀 값을 직접 계산하는 방식으로 처리합니다.

캔버스 옆에서 레이어와 색을 조정하고, 필요한 요소만 따로 보거나 잠근 채 작업할 수 있습니다.

프레임 애니메이션

스프라이트에 프레임을 추가하거나 복제한 뒤 조금씩 수정하면 프레임 애니메이션을 만들 수 있습니다. 타임라인에서는 레이어별 프레임을 편집하고, 이전·다음 프레임을 겹쳐 보는 어니언 스킨으로 위치를 맞춥니다. 재생 속도를 바꾸어 움직임을 확인하고, 프레임 태그로 동작 구간을 나눌 수 있습니다.

레이어는 프레임 ID를 키로 셀(cel)을 보관합니다. 셀은 해당 레이어와 프레임에 그린 이미지 데이터입니다. 프레임 순서를 바꿔도 각 프레임의 그림은 ID로 연결됩니다. 셀 연결 기능에서는 두 프레임이 같은 이미지 버퍼를 공유하고, 연결을 해제하면 데이터를 복사해 따로 편집할 수 있습니다.

스프라이트 시트로 내보내기 전에는 여러 프레임이 한 장에 어떻게 배치되는지 확인할 수 있습니다.

저장, 공유와 내보내기

작업 중인 스프라이트는 브라우저의 IndexedDB에 로컬로 저장합니다. 캔버스 크기와 프레임, 레이어, 셀 이미지, 팔레트, 현재 선택 상태를 함께 보관합니다. 로그인한 프로젝트는 클라우드에도 저장할 수 있습니다.

공유 화면에서는 보기 전용과 편집 가능 권한을 구분해 링크를 만들 수 있습니다. 링크를 만들 때 권한값을 함께 API에 보내고, 만들어진 링크는 복사하거나 지원하는 브라우저의 시스템 공유 기능으로 전달할 수 있습니다. 실시간 협업 중에는 참여자의 커서와 편집 내용을 함께 볼 수 있습니다.

결과물은 PNG, GIF, JPEG, WebP, BMP, TGA, ICO, SVG, PNG 시퀀스, .aseprite, 스프라이트 시트의 11가지 형식으로 내보낼 수 있습니다. 단일 이미지는 PNG로, 움직임은 GIF로, 게임 엔진용 프레임 묶음은 스프라이트 시트로, 다른 편집기에서 이어갈 파일은 .aseprite로 선택할 수 있습니다. 스프라이트 시트에는 행·열 배치, 여백, 간격, JSON 포함 여부와 빈 프레임 처리 같은 옵션을 적용할 수 있습니다.

모바일과 태블릿 입력

휴대폰에서는 캔버스를 먼저 볼 수 있도록 화면을 구성하고, 색상·레이어·프레임은 하단 탭과 시트에서 꺼내도록 했습니다. 태블릿에서는 데스크톱의 작업 구조를 유지하되 패널 폭과 접힘 상태를 화면에 맞춰 조정합니다. 레이어·팔레트·타임라인 컴포넌트는 모바일 시트에서도 재사용해, 화면이 달라도 같은 편집 규칙을 사용합니다.

한 손가락으로는 선택한 도구를 사용하고, 두 번째 터치가 들어오면 진행 중인 그리기를 중단해 확대·이동 제스처로 전환합니다. 두 터치의 중점이 움직인 만큼 캔버스를 이동하고, 손가락 사이의 거리에 따라 확대 단계를 조절합니다.

편집기와 운영 화면

편집기는 React, TypeScript, Canvas 2D, Zustand로 구성했고, 저장과 협업에는 Express, PostgreSQL, WebSocket을 사용했습니다. 프레임·레이어·도구의 규칙을 React 컴포넌트 밖의 도메인 코드로 두어 화면 렌더링과 분리했습니다. 편집 규칙, API, 사용자 흐름을 대상으로 Vitest와 Playwright를 사용하는 검증 구성을 두었습니다.

사용자와 프로젝트를 관리하는 화면에서는 사용량과 방문 경로를 확인하고, API 응답 시간과 오류 비율을 살펴볼 수 있습니다. 서버는 요청 로그를 남겨 운영 화면의 정보를 보완합니다.

PixelForge에서 첫 픽셀 찍어보기 →