픽셀 랩

여러 프레임을 한 팔레트로 고정하고 정리·검사한 뒤 내보내세요.

여러 도구에서 내보냈거나 크기를 바꿔 다시 저장한 프레임은 색이 조금씩 어긋납니다. 같은 명암이 미묘하게 다른 세 색이 되고 애니메이션이 반짝거립니다. 고정(lock)은 이를 바로잡습니다. 모든 프레임을 함께 보고 팔레트 하나를 만들고(2~256색, 기본 16색, 또는 PICO-8 같은 프리셋), 모든 프레임의 모든 픽셀을 거기에 맞추며, 디더링은 끄거나 순서형으로 두어 멈춘 부분이 깜박이지 않게 합니다. 픽셀 랩은 브라우저에서 이를 처리하고 프레임을 1×~8× PNG로, 팔레트를 .gpl로, 요약을 pixel-lab.json으로 내보내며, 내보낸 모든 색이 팔레트 안에 있는지 확인합니다.

이미지을(를) 여기에 놓으세요여러 개를 한 번에 처리할 수 있습니다
업로드 없음 · 이 기기에서 처리

프레임 색이 어긋나는 이유와, 팔레트 하나와 알맞은 디더로 막는 방법

프레임을 거치는 도구마다 색을 조금씩 바꿀 수 있습니다. 리샘플링은 이웃 픽셀을 섞고, JPEG나 손실 WebP는 잡음을 더하며, 색을 알파로 미리 곱해 저장하는 캔버스는 반투명 픽셀을 틀어지게 합니다. 이런 프레임을 하나씩 따로 양자화하면 프레임마다 팔레트가 달라집니다. 랩은 대신 모든 프레임을 알파로 가중한 히스토그램 하나에 넣고, Oklab에서 중앙값 분할로 나눈 뒤(빈도와 눈에 보이는 차이를 함께 반영) 다듬어, 모든 프레임이 함께 쓰는 팔레트 하나를 만듭니다.

깜박임은 디더링이 좌우합니다. 순서형(Bayer) 디더는 픽셀 위치에만 따르는 치우침을 더하므로, 바뀌지 않은 영역은 모든 프레임에서 같은 픽셀이 됩니다. 오차 확산(Floyd–Steinberg, Atkinson)은 반올림 오차를 프레임 전체로 넘기므로 픽셀 하나가 움직여도 그 뒤 모든 픽셀의 결정이 바뀌고, 가만히 있는 벽도 깜박일 수 있습니다. 랩의 기본값은 없음이며, 프레임이 둘 이상인데 오차 확산을 고르면 경고합니다.

랩은 캔버스를 거치지 않고 RGBA 값으로 바로 PNG를 씁니다. 캔버스는 반투명 색을 미리 곱한 알파로 반올림하기 때문입니다. 이렇게 바꾸기 전에는 16색으로 고정한 팔레트 밖으로 내보낸 색 84개 중 68개가 벗어났고, 바꾼 뒤에는 하나도 벗어나지 않았습니다.

팔레트 고정
모든 프레임의 모든 픽셀을 정해진 팔레트 하나에 맞추는 것.
중앙값 분할
목표 개수가 될 때까지 색 히스토그램을 가장 넓은 축의 중앙값에서 계속 나누는 방법.
순서형(Bayer) 디더
픽셀 위치로 정해지는 고정 문턱값 무늬. 프레임 사이에서 깜박일 수 없음.
오차 확산
픽셀마다 반올림 오차를 이웃에 퍼뜨리는 디더. 애니메이션에서 깜박일 수 있음.

예시: 안티앨리어싱된 프레임 8장을 16색으로 고정

랩의 브라우저 테스트이며, 내보낸 파일은 별도 디코더로 다시 읽었습니다.

입력      프레임 8장 × 48×48 px = 18,432 px, 안티앨리어싱된 가장자리
추출      8장 전체에서 팔레트 하나(16색)
고정      모든 픽셀 → Oklab 기준 16색 중 가장 가까운 색, 디더 없음
확인      내보낸 모든 PNG의 색: 16개, 팔레트 밖: 0개
깜박임    변하지 않는 띠: 8장에서 모두 한 가지 모양(없음, Bayer 4×4 모두)
개수 세기 전체 프레임 면적 4MP까지 정확, 여기서는 0.018MP
크기 제한 프레임 한 장당 최대 4096 × 4096 px

게임에 중요한 것은 마지막 확인입니다. 미리보기가 아니라 내보낸 PNG를 열어 색을 세세요. 랩의 테스트도 Pillow로 바로 그렇게 합니다.

고정된 프레임 확인하기

  • ← →로 프레임을 넘깁니다. 같은 명암은 모든 프레임에서 팔레트의 같은 칸으로 표시돼야 합니다.
  • 내보낸 PNG 두 장을 아무 이미지 편집기에서 열어 멈춘 영역의 같은 지점 색을 찍어 봅니다. 값이 완전히 같아야 합니다.
  • 내보낸 프레임 한 장의 색 수를 다른 도구로 셉니다. 팔레트 크기를 넘으면 안 됩니다.
  • 내보낸 .gpl을 김프나 에이스프라이트에서 불러옵니다. 같은 색이 같은 순서로 보여야 합니다.

문제 해결

증상유력한 원인확인 방법해결
고정한 뒤 애니메이션이 깜박임오차 확산 디더(Floyd–Steinberg 또는 Atkinson)가 켜져 있음변환 단계에 깜박임 경고가 표시됨없음이나 Bayer로 바꾸고 디더 비교 격자에서 나란히 보기
작은 디테일 색이 사라짐중앙값 분할은 쓰는 픽셀 수로 색에 가중치를 주므로 2픽셀짜리 눈 하이라이트가 큰 면적에 밀림추출 뒤 팔레트 단계에 그 색이 있는지 확인그 색을 잠그고 다시 추출하거나 색 개수를 늘리기
끌어다 놓은 스프라이트 시트가 프레임 하나가 됨랩은 이미지 한 장을 프레임 하나로 다루며 시트를 자르지 않음프레임 줄에 프레임이 하나뿐먼저 스프라이트 슬라이서로 자른 뒤 프레임을 놓기
랩이 이미지를 거부함4096 × 4096px보다 큰 프레임은 탭을 멈추게 하므로 거부함메시지에 크기와 제한이 나옴먼저 줄이거나 자르거나, 프레임으로 나누기
색 개수가 한 프레임만 셈전체 프레임 면적이 4MP를 넘으면 보이는 프레임만 셈개수 옆 패널에 그렇게 표시됨정확한 합계가 필요하면 한 번에 넣는 프레임 수 줄이기

다른 방법

방법이럴 때 더 낫습니다
Studio 픽셀 작업 공간에서 변환프레임이 타임라인이 있는 레이어 스프라이트라면 색 모드…가 레이어와 태그를 유지한 채 인덱스로 바꿉니다. 팔레트 편집기 참고.
추출 대신 공개된 팔레트PICO-8이나 Endesga 32처럼 정해진 팔레트에 맞춰야 한다면 Lospec 팔레트 적용.
안티앨리어싱 가장자리와 외톨이 픽셀 정리고정 뒤에도 이상한 가장자리 픽셀이나 점이 남았다면 랩의 정리 단계. 도트 정리 참고.

이 방법의 한계

  • 애니메이션 재생은 없고 프레임을 한 장씩 넘겨 봅니다.
  • 모든 처리가 메인 스레드에서 돌고 취소 버튼이 없어, 아주 큰 묶음은 끝날 때까지 탭이 멈춥니다.
  • Chromium에서만 확인했습니다.

버전과 출처

Nerulio: docs/PIXEL-LAB.md. 빌드한 사이트에서 Playwright로 Chromium을 돌려 측정했고, 모든 수치는 내려받은 파일을 다시 읽어(Pillow, zipfile, json) 확인했습니다. 단위 테스트는 tests/game-palette.test.mjs입니다. 쓰는 .gpl은 김프 팔레트 형식을 따릅니다.

참고한 공식 문서

픽셀 랩

여러 프레임을 한 팔레트로 고정하고 정리·검사한 뒤 내보내세요.

사용 방법

  1. 이미지 넣기
  2. 필요한 설정을 조정하고 결과 확인
  3. 다운로드로 새 파일 저장

지원 형식

PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 입력 디코딩은 브라우저 지원과 추가 엔진 사용 여부에 따라 다릅니다.

이 도구로 할 수 있는 일

여러 프레임을 하나의 팔레트로 통일하고, 정리·검사까지 한 곳에서.

처리 방식과 검증 수준

advanced · shared Oklab histogram / locked palette indices / ordered and error-diffusion dithers / indexed recolour. 품질 검증을 진행 중입니다. Pro·Flagship 수준은 아직 입증되지 않았습니다.

저장 전에 확인하세요

픽셀을 정리해 주지만 새 디테일을 그려 주지는 않습니다. 애니메이션에 오차 확산 디더링을 쓰면 프레임마다 색이 달라질 수 있습니다.

자주 묻는 질문

이 도구의 한계는 무엇인가요?

픽셀을 정리해 주지만 새 디테일을 그려 주지는 않습니다. 애니메이션에 오차 확산 디더링을 쓰면 프레임마다 색이 달라질 수 있습니다.

파일이 서버에 업로드되나요?

이 도구에서 연 파일은 서버에 업로드하지 않고 사용자 기기에서 처리합니다. 커뮤니티 글에 직접 첨부하는 이미지는 별도로 업로드됩니다. 일부 엔진과 모델은 외부에서 내려받으므로 IP 주소 등 연결 정보가 해당 서비스에 전달됩니다.

작업이 자동 저장되나요?

아니요. 이미지와 편집 상태는 이 탭에 있고 미디어 결과는 기기 내 임시 저장소를 사용할 수 있습니다. 언어를 바꿔도 작업은 유지되지만 새로고침, 탭 닫기, 다른 페이지로 이동하면 사라질 수 있습니다.