도트 에디터 온라인 · 브라우저 픽셀아트 편집기
브라우저 탭에서 바로 여는 게임 스프라이트용 도트 에디터입니다. 에이스프라이트에서 익숙한 연필·페인트통·도형·선택·레이어를 그대로 쓰고, 그린 그림은 Studio의 애니메이션·패킹·엔진 내보내기와 같은 프로젝트에 있습니다. 설치가 필요 없고 그림은 기기 밖으로 나가지 않습니다.
도트 스프라이트를 그리기 전에 세 가지를 먼저 정하세요. 게임 해상도에 맞춘 캔버스 크기(16px 타일 격자 위를 걷는 캐릭터라면 16×16~32×32 안에 들어갑니다), 적은 수의 팔레트, 안티앨리어싱 없는 1px 가장자리입니다. Nerulio 픽셀 작업 공간에서 픽셀 › 새 스프라이트…를 고르면 DawnBringer 32 팔레트가 든 32×32 캔버스(1~4096 사이 아무 크기)가 RGB 또는 인덱스 모드로 열리고, 도구는 에이스프라이트와 같은 키로 바뀝니다. 결과는 .aseprite나 PNG 프레임으로 저장하며, 브라우저에서 동작하고 그림은 기기 밖으로 나가지 않습니다.
- .aseprite검증됨· Aseprite 1.3.18
- Palette files측정 확인· read back
- Engine bundles검증됨· Godot 4.7.2 · Unity 6000.5
- Frame PNG · .nerulio일반 파일
크기, 색 모드, 깔끔한 가장자리: 스프라이트를 정하는 세 가지
도트는 게임이 실제로 그리는 크기로 그린 뒤 정수 배로 키워야 픽셀이 네모나게 유지됩니다. 그러니 게임의 내부 해상도에서 출발하세요. 320×180으로 그리는 게임은 6배로 1920×1080, 8배로 2560×1440, 12배로 3840×2160을 채우고, 640×360이라면 배율은 3·4·6입니다. 16px 타일이면 320×180 화면에 가로 20칸, 세로 11.25칸이 보이므로 16×16이나 16×24 주인공은 타일 한 칸 폭이 됩니다. 크기는 작업량도 정합니다. 한 변을 두 배로 늘리면 애니메이션 프레임마다 그릴 픽셀이 네 배가 됩니다(16×16 = 256px, 32×32 = 1024px, 64×64 = 4096px).
RGB(RGBA)는 픽셀마다 값 네 개를 저장하고 팔레트와 무관합니다. RGB 스프라이트에서 팔레트는 색 견본 모음일 뿐이라 견본을 고쳐도 픽셀은 바뀌지 않습니다. 인덱스 색은 픽셀마다 최대 256칸 팔레트를 가리키는 번호 하나를 저장하고, 그중 한 칸이 투명으로 그려집니다(기본은 0번, 에이스프라이트와 같은 규칙). 한 칸을 바꾸면 그 번호를 쓰는 모든 프레임의 픽셀이 함께 바뀌므로 팔레트 교체가 쉽습니다. Nerulio는 인덱스 셀을 PNG-8(PLTE 팔레트와 tRNS 투명도)로 보관하고, 인덱스 스프라이트에서 브러시는 항상 가장 가까운 팔레트 색으로 칠합니다.
깔끔한 선은 규칙적인 계단에서 나옵니다. 손으로 그은 대각선에는 L자로 겹친 모서리가 생기는데, 픽셀 퍼펙트 필터가 그리는 동안 이를 지우며 기본으로 켜져 있습니다. 직선은 계단이 반복될 때 고르게 보입니다. 직선 도구에서 Shift를 누르면 0°, 26.57°(가로 2칸에 세로 1칸), 45°, 63.43°(가로 1칸에 세로 2칸), 90°로 맞춰집니다.
- 내부 해상도
- 게임이 확대하기 전에 화면을 그리는 크기. 예: 320×180.
- 정수 배율 확대
- 2·3·4배처럼 키워 원본 픽셀 하나가 정확한 정사각 블록이 되게 하는 방식.
- 인덱스 색
- 픽셀마다 팔레트 번호(0~255)를 저장하고, 실제 색은 팔레트에 있는 방식.
- 투명 인덱스
- 인덱스 스프라이트에서 투명으로 그려지는 팔레트 칸. 바꾸지 않으면 0번.
- 픽셀 퍼펙트 선
- 여분의 모서리 픽셀을 지워 대각선이 한 픽셀 두께로 유지되는 손그림 선.
예시: 320×180 게임의 16px 격자용 주인공 크기 정하기
픽셀 › 새 스프라이트…에 입력할 캔버스 크기의 근거입니다.
게임 해상도 320 × 180 → 6배 1920 × 1080, 8배 2560 × 1440
화면의 타일 수 320 / 16 = 가로 20칸, 180 / 16 = 세로 11.25칸
주인공 캔버스 16 × 24 px (타일 1칸 폭, 1.5칸 높이)
1px 외곽선 포함 캔버스 18 × 26 px (캔버스 크기에서 사방 +1)
프레임당 픽셀 16 × 24 = 384 (32 × 32면 1024, 작업량 2.7배)
RGBA 프레임(원시) 384 px × 4바이트 = 1536바이트
인덱스 프레임(원시) 384 px × 1바이트 = 384바이트 + 팔레트 33칸(투명 + DB32)원시 크기는 픽셀 하나에 무엇이 저장되는지 보여 줄 뿐이며, 디스크의 PNG 파일은 압축되어 더 작습니다. 팔레트 33칸은 새 인덱스 스프라이트의 시작 상태입니다. 0번이 투명이고 그 뒤에 DawnBringer 32색이 옵니다.
이렇게 작동합니다
- 에이스프라이트와 같은 키의 도구 11개: 연필(B), 지우개(E), 페인트통(G), 스포이트(I), 직선(L), 사각형·타원(U, Shift+U), 사각 선택(M), 올가미(Q), 자동 선택(W), 이동(V). 브러시는 사각·원형 1~16px이고 [ ]로 바꿉니다.
- 픽셀 퍼펙트가 기본으로 켜져 있어, 손으로 그은 계단 선에 생기는 L자 모서리를 그리는 동안 지웁니다. Shift+클릭은 마지막 점에서 직선을 긋고, 직선 도구에서 Shift는 도트용 각도로 맞춥니다.
- 명암 작업용 잉크: 알파 합성, 알파 잠금, 팔레트에서 고른 램프를 따라 한 단계씩 밝히는 셰이딩(오른쪽 버튼은 반대 방향), 농도를 정하는 디더 패턴(Bayer 2·4·8, 체커, 가로줄, 세로줄).
- 레이어마다 표시·잠금·불투명도와 에이스프라이트의 블렌드 모드 19종(에이스프라이트와 같은 계산). 아래로 합치기, 복제, 순서 변경. 대칭은 세로·가로·양쪽이며 축 위치는 숫자로 입력합니다.
- 선 하나, 채우기, 이동, 뒤집기, 팔레트 수정, 레이어 변경이 모두 히스토리에 정확히 한 단계로 남습니다. 프로젝트는 브라우저에 자동 저장되고 .nerulio 파일로 보관하며, 픽셀 메뉴에서 .aseprite·PNG로 저장합니다.
사용 방법
- PNG, 번호 붙은 프레임, GIF, .aseprite 파일을 이 페이지에 끌어다 놓거나, 빈 픽셀 작업 공간을 열어 새 스프라이트(크기, RGB 또는 인덱스)를 만듭니다.
- B로 연필을 고릅니다. 왼쪽 버튼은 전경색, 오른쪽 버튼은 배경색으로 칠하고 X로 두 색을 바꿉니다.
- Shift+N으로 명암용 레이어를 추가하고 레이어 패널에서 블렌드 모드를 정한 뒤, 선화 레이어는 잠가 실수로 칠하지 않게 합니다.
- 레이어와 팔레트를 유지하려면 픽셀 메뉴에서 .aseprite로 저장하고, 게임에 넣을 때는 패킹·내보내기를 열어 Godot·Unity·Phaser용으로 내보냅니다.
애니메이션 전에 스프라이트 확인하기
- 100 %와 정수 배율(200 %, 300 %)로 봅니다. 플레이어가 보게 될 1배에서도 실루엣이 읽혀야 합니다.
- 팔레트 검사를 열고 검사를 누릅니다. 프레임별 색 수가 예산 이하이고 팔레트 밖 색이 없어야 합니다.
- 연필로 대각선을 긋고 확대합니다. L자 모서리 픽셀이 없으면 픽셀 퍼펙트가 켜진 것입니다.
- 픽셀 메뉴에서 프레임을 PNG로 내보내 다시 엽니다. 팔레트 색만 쓰는 인덱스 프레임은 팔레트가 든 PNG-8로 저장됩니다.
픽셀 작업 공간에서 쓰는 에이스프라이트 키
전체 목록은 Studio에서 ?를 누르세요. 그릴 때 가장 많이 쓰는 키입니다.
| 키 | 도구·명령 | 설명 |
|---|---|---|
| B / E / G | 연필 / 지우개 / 페인트통 | 페인트통: 연결 영역 또는 전체, 허용 오차, 모든 레이어 기준 |
| L / U / Shift+U | 직선 / 사각형 / 타원 | Shift는 직선을 도트 각도로, 도형을 정사각형·원으로 |
| M / Q / W | 사각 선택 / 올가미 / 자동 선택 | Shift 추가, Alt 빼기, Shift+Alt 교집합 |
| Ctrl+C / X / V | 복사 / 잘라내기 / 붙여넣기 | 붙인 픽셀은 떠 있음: 방향키 1px 이동, Enter 확정, Esc 취소 |
| Shift+N / Ctrl+J / Ctrl+E | 새 레이어 / 복제 / 아래로 합치기 | 두 레이어 중 하나라도 셀이 있는 모든 프레임을 합침 |
| [ / ] | 브러시 크기 1~16 | 사각 또는 원형 끝 |
문제 해결
| 증상 | 유력한 원인 | 확인 방법 | 해결 |
|---|---|---|---|
| 대각선이 두껍거나 들쭉날쭉함 | 픽셀 퍼펙트가 꺼졌거나 브러시가 1px보다 큼 | 도구 옵션 줄의 픽셀 퍼펙트 토글과 크기 | 픽셀 퍼펙트를 켜고 [ 키로 브러시를 1로 줄인 뒤 다시 긋기 |
| 고른 색과 조금 다른 색으로 칠해짐 | 인덱스 스프라이트라 가장 가까운 팔레트 칸으로 맞춰짐 | 색 패널에 인덱스 스프라이트는 가장 가까운 팔레트 색을 쓴다는 안내가 보임 | 먼저 팔레트 패널에서 전경색을 팔레트에 추가한 뒤 칠하기 |
| 칠해도 아무 변화가 없음 | 레이어가 잠겼거나 숨겨졌거나, 선택된 레이어가 없음 | 상태 메시지가 잠기거나 숨은 레이어 이름을 알려 줌. 레이어 패널의 자물쇠·눈 아이콘 확인 | 레이어 잠금을 풀거나 보이게 하거나, 다른 레이어 선택 |
| 외곽선이나 팔다리가 가장자리에서 잘림 | 그림이 캔버스 끝에 닿아 있음 | 가장 바깥 줄·칸에 불투명 픽셀이 있는지 확인 | 픽셀 › 캔버스 크기…(Ctrl+Alt+C)로 확대 없이 사방에 여백 추가 |
| 여기서는 선명한데 엔진에서는 흐림 | 엔진이 텍스처를 필터링함(선형 필터나 밉맵) | 게임 화면을 확대했을 때 가장자리가 부드러우면 필터링 | 엔진에서 최근접 필터로 설정. Godot에서 흐린 도트, Unity에서 흐린 도트 참고 |
다른 방법
엔진별 내보내기와 검증 방법
"검증됨"은 실제 CC0 에셋으로 내보낸 파일을 해당 엔진·도구가 직접 불러와 원본과 비교했다는 뜻입니다. 불러오지 않은 형식은 그렇게 표시합니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| .aseprite | layers · blend · opacity · locked · indexed palette · frames · tags | 검증됨 Aseprite 1.3.18실제 Aseprite 명령줄이 파일을 인덱스 모드, 레이어 2개, 불투명도 160의 곱하기, 편집 불가로 잠긴 레이어 그대로 다시 열었고 프레임 픽셀이 같았습니다. |
| Palette files | .gpl · .pal · .hex · .ase · .act · .json | 측정 확인 read back형식마다 쓰고 다시 읽어 같음을 확인했고, Aseprite가 만든 .gpl·.pal·.hex·.act와 실제 Adobe .ase(16색)를 읽었습니다. |
| Engine bundles | Godot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export | 검증됨 Godot 4.7.2 · Unity 6000.5그린 스프라이트는 패킹·내보내기에서 묶습니다. 그 엔진 파일은 실제 CC0 에셋으로 각 엔진에서 불러와 확인했습니다(49회 중 47회 통과, 실패 2회는 Phaser 3 프리셋이 피하는 Phaser 3.90 버그). |
| Frame PNG · .nerulio | PNG-8 with the palette when an indexed frame fits it · project file | 일반 파일어떤 도구에서도 쓰는 일반 파일이며, 엔진 실행 검증은 주장하지 않습니다. |
검증 근거
정리 벤치마크(원래 1배 그림을 아는 CC0 사례 69개): 크기를 정확히 찾은 비율 81 %(±1px 90 %), 배경 유지 시 픽셀 74.0 % 정확. 가장 나은 경쟁 도구는 크기 30 %(perfectPixel), 정확한 픽셀 44.6 %(unfake.js). Aseprite로 만든 ×4 최근접 확대는 100 %, ×3.78 쌍선형 확대는 99.7 % 정확하게 돌아왔고 두 경우 모두 크기를 자동으로 찾았습니다. 1px 외곽선과 드롭 섀도는 Aseprite 결과와 픽셀까지 같았습니다(1846px, 705px). 여기서 쓴 .aseprite는 Aseprite 1.3.18에서 인덱스 모드와 레이어·블렌드·잠금이 그대로 열립니다.
한계
- 레이어 그룹, 타일맵 레이어, 참조 레이어, 링크된 셀이 없고, 선택 영역은 뒤집기와 90° 회전만 됩니다(자유 회전·크기 조절 없음).
- 그레이스케일 색 모드는 없으며 스프라이트는 RGB 또는 인덱스입니다.
- 대칭 축은 숫자로 입력하며 캔버스에서 끌어 옮길 수 없습니다.
- 픽셀 작업 공간에 없는 것(Aseprite에는 있음): 레이어 그룹, 링크된 셀, 타일맵 레이어, 참조 레이어, RotSprite와 선택 영역 자유 회전·크기 조절(뒤집기와 90°만), 그라디언트·스프레이·윤곽·텍스트 도구, 사용자 브러시(사각·원 1~16px), 타일 반복 그리기, Lua 스크립트와 명령줄.
- 대칭 축은 숫자로 입력하며 캔버스에서 끌 수 없습니다. 터치에서는 오른쪽 버튼이 없어 배경색은 전환 버튼이나 X로 씁니다.
- 정리: JPEG는 가깝게 돌아오지만(배경 유지 시 84 %가 ΔE 0.02 이내) 정확히 같은 경우는 드뭅니다(12 %). 모의 생성 그림은 크기를 정확히 맞힌 비율이 20 %(±1px 80 %)이고, 실제 생성 그림 7장은 하나도 자동으로 맞추지 않았습니다. 패널이 제안한 픽셀 크기를 직접 입력해야 합니다.
- 인덱스 변환은 Aseprite의 RGB 거리가 아니라 Oklab에서 가장 가까운 색을 고릅니다. 시험 스프라이트의 68 % 픽셀이 다른(눈으로 더 가까운) 색이 됐습니다. Lospec 검색이 유일한 네트워크 요청이며 먼저 묻습니다.
버전과 출처
Nerulio: 픽셀 작업 공간의 순수 모듈은 tests/studio-pixel.test.mjs(테스트 34개)와 실제 CC0 스프라이트로 76가지를 확인하는 브라우저 테스트가 다룹니다. 여기서 쓴 .aseprite 파일은 Aseprite 1.3.18에서 레이어·블렌드 모드·인덱스 팔레트가 그대로 열렸습니다. 512×512에 100프레임인 스프라이트도 헤드리스 Chromium에서 선 확정 21~25ms로 바로 반응했습니다. 에이스프라이트의 색 모드와 기본 팔레트에 관한 설명은 공식 문서를 따릅니다.
참고한 공식 문서
자주 묻는 질문
에이스프라이트 단축키가 그대로 되나요?
주요 키는 같습니다. B·E·G·I·L·U·M·Q·W·V가 같은 도구를 고르고, X는 색 바꾸기, Shift+N은 새 레이어, Ctrl+E는 아래로 합치기, Shift+H·Shift+V는 뒤집기, Enter·F3·F7은 재생·어니언 스킨·미리보기 창입니다. 키를 바꾸는 설정 화면은 아직 없습니다.
스프라이트가 얼마나 커야 느려지나요?
512×512 크기에 100프레임인 스프라이트로 시험했을 때 선을 그으면 바뀐 영역만 다시 그렸고(한 번에 약 0.03ms), 선 확정은 21~25ms, 프레임 전환은 16ms였습니다(헤드리스 Chromium 측정).
휴대폰에서도 되나요?
좁은 화면에서는 패널이 아래에서 올라오는 시트(색, 팔레트, 레이어, 정리, 점검, 타임라인, 히스토리)로 열리고, 탭 한 번이 한 픽셀을 칠합니다. 터치에는 오른쪽 버튼이 없으니 배경색은 전환 버튼이나 X를 쓰세요. 두 손가락 제스처는 테스트하지 않았습니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).