가로 64칸이면 4:3 사진은 64 × 48칸: 칸마다 평균색을 내고 가까운 팔레트 색으로 칠합니다
이미지 도트화는 사진을 가로·세로 몇 칸으로 나눈 뒤, 칸 하나를 한 가지 색으로 칠해 픽셀 아트처럼 만드는 작업입니다. 위 도구는 가로 칸 수를 정하면 세로 칸 수를 원본 비율로 맞추고(640 × 480 px 사진을 가로 64칸으로 나누면 세로 48칸), 칸에 들어간 픽셀의 평균색을 구한 다음 고른 팔레트에서 가장 가까운 색으로 바꿉니다.
그림을 좌우로 끌면 같은 자리에서 원본과 도트 결과를 겹쳐 볼 수 있고, 아래 '색별 칸 수'는 색마다 몇 칸을 칠했는지 보여 줍니다. 저장할 때는 칸 하나를 4·8·16배 같은 정수 배로 키워 PNG로 만들기 때문에 경계가 흐려지지 않습니다. 이미지는 브라우저 안에서만 처리하며 서버로 보내지 않습니다.
언제 사진을 도트로 바꾸나
- 프로필·이모티콘을 만들 때: 가로 32~64칸이면 얼굴 윤곽이 알아볼 정도로 남습니다. 작은 아이콘으로 쓸수록 칸 수를 줄이고 색 수를 8색 안팎으로 줄이면 또렷해집니다.
- 게임 스프라이트나 타일의 밑그림이 필요할 때: 배경을 지운 투명 PNG를 넣고 윤곽선을 켜면 손으로 다듬기 전의 초안이 됩니다. PICO-8처럼 정해진 팔레트로 바로 맞춰 볼 수도 있습니다.
- 비즈·십자수 도안을 짤 때: 칸 하나가 비즈 한 알이나 한 땀입니다. 격자를 켜면 10칸마다 진한 선이 들어가 세기 쉽고, '색별 칸 수'가 색마다 필요한 개수입니다.
- 레트로 느낌의 썸네일·포스터가 필요할 때: 게임보이 초록 4단계나 흑백 2색에 디더링을 섞으면 옛 화면처럼 보입니다.
도트로 바꾸는 순서
- 칸 나누기: 가로 칸 수를 w라 하면 세로 칸 수는 w × 원본 세로 ÷ 원본 가로를 반올림한 값입니다. 칸 하나에 들어가는 픽셀 범위는 원본 폭을 w로 나눈 경계로 정합니다.
- 칸 평균색: 칸 안 픽셀의 빨강·초록·파랑을 불투명도만큼 가중해 평균합니다. 불투명도 평균이 절반 이상이면 그 평균색으로, 절반 미만이면 투명한 칸으로 둡니다.
- 팔레트 정하기: '자동'은 칸 색들을 가장 넓게 퍼진 색 채널의 중앙값에서 거듭 둘로 나누는 median cut(Heckbert, 1982)으로 색 수만큼 묶고, 묶음 평균을 네 번 다듬어 팔레트를 만듭니다. PICO-8·CGA·게임보이·흑백은 고정된 색을 씁니다.
- 가까운 색 고르기: 칸 색과 팔레트 색의 차이를 사람 눈의 밝기·색 차이에 가깝게 만든 OKLab 색 공간(Ottosson, 2020)의 거리로 재고, 가장 가까운 색으로 칠합니다. 디더링을 켜면 이 단계에서 색을 섞습니다.
- 확대해서 저장하기: 칸 하나를 n × n 픽셀로 그대로 키웁니다(주변 색을 섞는 보간을 쓰지 않음). 64 × 48칸을 8배로 저장하면 512 × 384 px PNG입니다.
| 칸 안 픽셀 네 개 (2 × 2) | 불투명도 평균 | 칸 결과 |
|---|---|---|
| 빨강 (255, 0, 0) 두 개 + 파랑 (0, 0, 255) 두 개 | 100% | (128, 0, 128) 자주색 |
| 빨강 한 개 + 파랑 한 개 + 투명 두 개 | 50% | (128, 0, 128), 절반이라 불투명 |
| 빨강 한 개 + 투명 세 개 | 25% | 투명한 칸 |
투명한 픽셀은 색 평균에 들어가지 않으므로 둘째 줄도 자주색이 됩니다. 이 자주색 (128, 0, 128)을 PICO-8 팔레트로 칠하면 OKLab 거리로 가장 가까운 #7E2553(어두운 자주)이 됩니다.
칸 수 고르기: 4:3 사진 기준
가로 칸 수가 정해지면 세로 칸 수와 저장 크기가 따라 정해집니다. 아래는 640 × 480 px처럼 가로세로 비율이 4:3인 사진의 값입니다.
| 가로 칸 수 | 세로 칸 수 | 전체 칸 | 8배 저장 크기 | 느낌 |
|---|---|---|---|---|
| 16 | 12 | 192 | 128 × 96 px | 아이콘, 형태만 남음 |
| 32 | 24 | 768 | 256 × 192 px | 이모티콘, 얼굴 윤곽 |
| 64 | 48 | 3,072 | 512 × 384 px | 프로필, 인물·사물이 알아보임 |
| 128 | 96 | 12,288 | 1,024 × 768 px | 풍경, 세부가 남음 |
| 256 | 192 | 49,152 | 2,048 × 1,536 px | 사진에 가까움 |
참고로 초기 게임보이 화면은 160 × 144 픽셀(Pan Docs), PICO-8 화면은 128 × 128 픽셀(PICO-8 매뉴얼)입니다. 그 화면을 꽉 채우는 그림이라면 가로 128~160칸이 기준이 됩니다.
팔레트 6가지
| 팔레트 | 색 수 | 색이 정해지는 방식 | 어울리는 그림 |
|---|---|---|---|
| 자동 | 2~64 (기본 16) | 이미지의 칸 색에서 median cut으로 골라 다듬음 | 사진, 원본 분위기를 살릴 때 |
| 원래 색 | 줄이지 않음 | 칸 평균색 그대로 | 모자이크, 칸 수만 줄일 때 |
| PICO-8 | 16 | Lexaloffle의 판타지 콘솔 PICO-8 고정 색 | 밝고 선명한 게임 그림 |
| CGA | 16 | 1981년 IBM CGA의 RGBI 16색(6번은 #AA5500 갈색) | 도스 시절 PC 화면 느낌 |
| 게임보이 | 4 | 초록 4단계, BGB 에뮬레이터 기본값 | 휴대용 게임기 느낌 |
| 흑백 | 2 | #000000, #FFFFFF | 디더링과 함께 판화·신문 느낌 |
고정 팔레트는 이미지에 없는 색을 쓰지 않습니다. 예시 이미지를 PICO-8로 바꾸면 16색 중 실제로 칸에 칠해지는 색만 '색별 칸 수'에 나옵니다. 초기 게임보이는 녹색 4단계를 보여 주는 화면이지만 공식 RGB 값이 따로 없어, 에뮬레이터마다 색이 조금씩 다릅니다. NES(패미컴)는 화면 색이 TV와 영상 회로에 따라 달라 하나로 정해진 RGB 팔레트가 없으므로(NESdev Wiki) 넣지 않았습니다.
PICO-8·게임보이 팔레트 값, 게임보이·PICO-8 화면 크기, 디더링 가중치는 위 출처 원문으로 2026-10-12에 확인했습니다. 이 값들은 해마다 바뀌는 제도 값이 아닙니다.
디더링: 점을 섞어 중간색 만들기
색 수가 적으면 하늘이나 피부처럼 부드럽게 변하는 부분이 몇 개의 덩어리로 끊깁니다. 디더링은 가까운 두 색을 점 단위로 섞어, 멀리서 보면 그 사이 색처럼 보이게 하는 방법입니다.
| 방식 | 원리 | 어울리는 그림 |
|---|---|---|
| 없음 | 칸마다 가장 가까운 색 하나 | 면이 단순한 그림, 아이콘 |
| 격자 무늬 | 4 × 4 Bayer 행렬(Bayer, 1973)로 칸마다 색을 조금씩 밀고 당겨 규칙적인 무늬로 섞음 | 레트로 게임 화면, 흑백·4색 |
| 오차 확산 | 칠하고 남은 색 차이를 오른쪽 7/16, 왼쪽 아래 3/16, 아래 5/16, 오른쪽 아래 1/16로 넘김(Floyd–Steinberg, 1976) | 사진, 그러데이션이 많은 그림 |
칸 수가 적을 때 디더링을 쓰면 점이 거칠게 보일 수 있습니다. 가로 32칸 이하에서는 없음, 64칸 이상 사진에서는 오차 확산부터 비교해 보면 고르기 쉽습니다. '원래 색'은 색을 줄이지 않으므로 디더링이 필요 없습니다.
자주 틀리는 경우
- 작게 저장한 뒤 다른 프로그램에서 키웁니다: 대부분의 이미지 프로그램은 확대할 때 주변 색을 섞어 경계가 흐려집니다. 처음부터 8배나 16배처럼 필요한 크기로 저장합니다.
- PNG를 JPG로 다시 저장합니다: JPG 압축은 칸 경계 주변에 얼룩을 만들고 투명한 칸을 채웁니다. 도트 그림은 PNG로 둡니다.
- 원본보다 칸을 더 늘립니다: 가로 300 px 이미지를 512칸으로 나누면 칸이 원본 픽셀보다 많아질 뿐 더 세밀해지지 않습니다. 도구가 칸 수 아래에 이 경우를 알려 줍니다.
- 색 수를 줄이면서 디더링을 끕니다: 4~8색으로 얼굴이나 하늘을 칠하면 띠가 생깁니다. 색을 16색 이상으로 늘리거나 오차 확산을 켭니다.
- 복잡한 배경을 그대로 둡니다: 칸 수가 적으면 배경과 인물이 섞입니다. 배경을 지운 투명 PNG를 넣으면 투명한 칸은 그대로 비워 두고, 윤곽선을 켰을 때 인물 둘레에 선이 들어갑니다.
- SNS에 올리면 원래 크기 그대로라고 생각합니다: 서비스마다 올린 이미지를 줄이거나 다시 압축할 수 있습니다. 칸이 뭉개지면 저장 배수를 바꿔 다시 올려 봅니다.
한계와 주의
- 계산은 브라우저 안에서만 합니다. 칸 평균을 낼 때는 원본을 긴 변 1,024 px 이하로 줄인 뒤 읽으며, 가로 512칸까지는 결과에 차이가 거의 없습니다.
- 가로는 8~512칸, 세로는 1,024칸까지입니다. 저장은 한 변 4,096 px·넓이 4,096 × 4,096 px까지만 고를 수 있습니다. iOS 기기 브라우저의 캔버스 한계가 4,096 × 4,096이기 때문입니다(MDN).
- 브라우저가 열 수 있는 형식만 받습니다. 움직이는 GIF는 첫 장면만 쓰고, HEIC처럼 브라우저에 따라 열지 못하는 형식은 JPG·PNG로 바꿔 넣어야 합니다. 파일은 40MB까지 받습니다.
- 자동 팔레트는 같은 이미지·설정이면 늘 같은 결과를 내지만, 사람이 직접 고른 색 조합보다 낫다는 보장은 없습니다. 색이 마음에 들지 않으면 색 수를 바꿔 비교합니다.
- 윤곽선은 이웃 칸보다 충분히 어두운 칸과 투명한 칸 옆의 칸을 선 색으로 바꾸는 간단한 방식이라, 원하는 선만 골라 그리지는 못합니다.
- 게임보이·CGA 같은 옛 기기의 색만 흉내 냅니다. 타일·스프라이트마다 쓸 수 있는 색 수 같은 하드웨어 제약은 반영하지 않습니다.
출처
- 01Lexaloffle — PICO-8 User Manual화면 128 × 128, 고정 16색 팔레트(색 이름 0~15) — 2026-10-12 확인
- 02Lospec — PICO-8 PalettePICO-8 16색 HEX 값(Lexaloffle Games). 게임보이 4색은 같은 사이트의 Nintendo Gameboy (BGB) Palette 값을 씀
- 03Pan Docs — Specifications초기 게임보이(DMG) 화면 160 × 144, 녹색 4단계
- 04NESdev Wiki — PPU palettes합성 영상 출력에는 모든 게임에 맞는 단일 팔레트가 없음, 팔레트 항목은 64색 중 하나를 가리킴
- 05Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. median cut 색 줄이기
- 06Björn Ottosson — A perceptual color space for image processing2020-12-23. OKLab 변환(선형 sRGB → LMS → 세제곱근 → Lab)
- 07Wikipedia — Floyd–Steinberg ditheringFloyd & Steinberg (1976), An adaptive algorithm for spatial grey scale, Proceedings of the SID 17: 75–77. 오차 가중치 7·3·5·1/16. 같은 곳의 Ordered dithering(Bayer, 1973, IEEE ICC)
- 08Wikipedia — Color Graphics AdapterIBM CGA(1981) RGBI 16색, 6번 갈색 #AA5500
- 09MDN — <canvas>: Maximum canvas sizeiOS 기기 4,096 × 4,096 한계, 넘으면 캔버스를 쓸 수 없음
자주 묻는 질문
사진을 도트 그림으로 바꾸려면 칸 수를 얼마로 해야 하나요?
용도에 따라 다릅니다. 아이콘은 가로 16~32칸, 프로필이나 이모티콘은 32~64칸, 풍경은 128칸 안팎이 많이 쓰입니다. 4:3 사진을 가로 64칸으로 나누면 세로 48칸, 모두 3,072칸이 됩니다. 칸 수 칩을 바꿔 가며 아래 팔레트별 미리 보기와 함께 비교하면 고르기 쉽습니다.
색 수는 몇 색이 좋나요?
사진은 16색 안팎에서 원본 분위기가 남고, 8색 이하로 줄이면 단순한 그림체가 됩니다. 얼굴이나 하늘처럼 부드럽게 변하는 부분에 띠가 생기면 색을 늘리거나 디더링(오차 확산)을 켭니다. 칸 색이 단순한 이미지는 고른 색 수보다 적은 색만 쓰일 수 있습니다.
디더링은 무엇이고 언제 켜나요?
디더링은 가까운 두 색을 점 단위로 섞어 멀리서 그 사이 색처럼 보이게 하는 방법입니다. 격자 무늬(Bayer 4 × 4)는 규칙적인 무늬로 레트로 게임 느낌을 내고, 오차 확산(Floyd–Steinberg)은 칠하고 남은 색 차이를 옆 칸으로 넘겨 사진의 그러데이션을 자연스럽게 보여 줍니다. 칸 수가 적은 아이콘은 끄는 편이 깔끔합니다.
저장한 PNG가 흐릿하게 보이는 이유는 무엇인가요?
이 도구는 칸 하나를 정수 배로 그대로 키워 저장하므로 파일 자체는 흐리지 않습니다. 작은 배수로 저장한 뒤 다른 프로그램이나 SNS가 이미지를 키우거나 다시 압축하면 주변 색이 섞여 흐려집니다. 처음부터 8배나 16배처럼 필요한 크기로 저장하고 PNG로 유지합니다.
투명한 배경은 그대로 남나요?
남습니다. 칸 안 픽셀의 불투명도 평균이 절반 미만이면 투명한 칸으로 두고 PNG에도 투명하게 저장합니다. 절반 이상이면 투명한 픽셀을 뺀 나머지 픽셀의 평균색으로 칠합니다. 배경을 지운 이미지에 윤곽선을 켜면 그림 둘레 칸이 선 색으로 바뀝니다.
올린 이미지가 서버에 저장되나요?
저장되지 않습니다. 이미지는 브라우저 안에서 열고 계산하며 서버로 보내지 않습니다. 페이지를 닫거나 다른 이미지를 고르면 사라집니다. 저장한 PNG는 내 기기의 다운로드 폴더에만 생깁니다.
게임보이·PICO-8 팔레트의 색은 정확한가요?
PICO-8은 Lexaloffle이 정한 고정 16색을 그대로 씁니다. 초기 게임보이는 녹색 4단계를 보여 주는 화면이지만 공식 RGB 값이 없어서, 이 도구는 BGB 에뮬레이터의 기본 4색을 씁니다. 옛 기기의 색 느낌만 흉내 내며, 타일마다 쓸 수 있는 색 수 같은 하드웨어 제약은 반영하지 않습니다.
HEIC 사진이나 움직이는 GIF도 바꿀 수 있나요?
브라우저가 열 수 있는 형식만 바꿀 수 있습니다. HEIC를 열지 못하는 브라우저에서는 JPG나 PNG로 바꿔 넣어야 하고, 움직이는 GIF는 첫 장면만 도트로 바꿉니다. 파일은 40MB까지 받으며, 계산할 때는 긴 변을 1,024 px 이하로 줄여 읽습니다.