이미지 도트화 도구

이미지 도트화 도구는 무엇을 하나요

업로드한 그림에서 픽셀 격자를 찾아 어긋난 픽셀을 다시 맞추고 색을 정리해 진짜 픽셀아트로 바꿉니다. AI가 만든 흐릿한 픽셀아트나 격자가 안 맞는 그림을 깔끔하게 만들 때 씁니다. 사진을 도트 느낌으로 바꾸는 용도로도 쓸 수 있습니다.

도트 이미지가 주는 특별한 감성

픽셀아트는 8비트·16비트 게임 시절의 향수를 불러옵니다. 색과 점을 아껴 쓰는 제약 속에서 오히려 또렷하고 기억에 남는 인상이 생기죠. 캐릭터 하나, 아이콘 하나가 손으로 찍은 듯한 따뜻함을 가집니다. 이 도구는 사진이나 그림을 그 도트 감성으로 옮겨 레트로 게임 스프라이트·픽셀 아바타·이모지 같은 결과를 손쉽게 만들 수 있게 해줍니다.

픽셀 격자와 한 칸 = 한 픽셀 이해하기

진짜 픽셀아트는 격자의 한 칸이 정확히 한 픽셀입니다. 그림을 크게 키우면 격자가 흐트러져 한 칸이 여러 픽셀로 번지고 경계가 뭉개지죠. 이 도구는 숨은 격자를 다시 찾아 한 칸을 한 색으로 모아 픽셀을 또렷하게 구분해 줍니다.

• 한 칸 = 한 픽셀이라야 도트가 선명하게 떨어집니다.
• 업스케일된 그림은 격자가 흐트러져 픽셀 구분이 무너집니다.
• 격자를 다시 정렬하면 확대해도 계단이 깔끔해 스프라이트 시트에 바로 씁니다.

어떻게 동작하나요

크게 세 단계로 처리합니다. 각 단계는 자동으로 이어지며, 설정을 바꾸면 즉시 다시 계산합니다.

• 색 정리: 이미지에서 대표 색을 뽑아 잡색과 번짐을 먼저 줄입니다.
• 격자 감지: 가로·세로 방향의 경계가 반복되는 간격에서 픽셀 한 칸의 크기를 추정합니다.
• 격자에 스냅: 추정한 간격에 맞춰 각 칸을 대표색 하나로 모아, 어긋난 픽셀을 완벽한 격자로 정렬합니다.

색상 수 설정

슬라이더로 2색부터 64색까지 정합니다. 소스에서 대표 색을 그 개수만큼 뽑아 팔레트를 만듭니다. 색을 줄이면 더 또렷한 도트가 되고, 늘리면 원본에 가까운 색이 남습니다. 기본값 16색은 대부분의 픽셀아트에 무난합니다.

커스텀 팔레트로 색 고정

정해진 색만 쓰고 싶다면 hex 목록을 쉼표로 넣거나, 팔레트 PNG를 불러오면 그 이미지의 색만 사용합니다. 스프라이트·타일셋·게임 에셋이 같은 색 팔레트를 공유해야 할 때 유용합니다.

• 예: 0d2b45,203c56,544e68,8d697a
• PNG 불러오기: 색이 담긴 팔레트 이미지에서 최대 256색까지 자동으로 읽습니다.
• 지우기: 커스텀 팔레트를 끄고 색상 수 설정으로 돌아갑니다.

픽셀 크기: 자동과 직접 지정

보통은 자동 감지가 격자 한 칸 크기를 찾아 줍니다. 결과가 너무 잘거나 뭉개지면 "직접 지정"으로 바꿔 원래 배율(예: 8px)을 입력하세요. 원본이 몇 배로 커졌는지 알고 있다면 그 값을 넣는 것이 가장 깔끔합니다.

결과를 자세히 보기

결과 미리보기에서 여러 방법으로 확인할 수 있습니다. 마음에 들면 저장하고, 아니면 설정을 바꿔 다시 확인하세요.

• 확대 슬라이더로 픽셀을 크게 키워 한 칸씩 살펴봅니다.
• 격자 보기를 켜면 칸 경계선이 겹쳐 보여 정렬 상태를 확인할 수 있습니다.
• 결과 팔레트에서 실제 사용된 색을 한눈에 봅니다.
• 결과·원본 버튼으로 정리 전후를 바로 비교합니다.

이런 이미지에 좋아요

격자 기반으로 다시 정리했을 때 이득이 큰 그림에 잘 맞습니다.

• AI 픽셀아트: GPT Image·Gemini 등에서 나온 격자가 어긋난 픽셀아트
• 타일맵·아이소메트릭 맵: 칸에 딱 맞지 않아 이어지지 않는 타일
• 2D 게임 에셋·텍스처: 다시 선명하고 확대 가능한 형태로 만들 때

잘 안 될 때

아래 순서로 조절하면 대부분 해결됩니다.

• 자동 감지가 어긋나면 → 픽셀 크기를 직접 지정하고 원래 격자 크기 입력
• 색이 뭉쳐 보이면 → 색상 수를 올리기
• 결과가 너무 잘게 쪼개지면 → 픽셀 크기 값을 크게 입력
• 사진처럼 원래 격자가 없는 이미지는 → 도트 변환용으로 픽셀 크기를 직접 정하기

저장 전 확인

내려받기 전에 결과를 한 번 점검하세요.

• 확대해서 픽셀이 또렷하게 정렬됐는지 확인
• 결과 팔레트가 의도한 색인지 확인
• 격자 크기가 원래 그림과 맞는지 확인
• 확인되면 PNG 다운로드(필요하면 4배·8배 확대 저장)

좋은 도트 이미지를 만드는 요령

몇 가지만 지키면 훨씬 또렷한 결과가 나옵니다.

• 색은 적게: 8~16색으로 시작하면 도트 특유의 또렷함이 살아납니다.
• 픽셀 크기는 원본에 맞게: 너무 작으면 지저분하고 너무 크면 뭉갭니다.
• 외곽선·디더링은 남기기: 의도한 디테일은 보존하고 지나친 단순화는 피하세요.
• 배경은 단순하게: 복잡한 배경보다 인물·오브젝트 위주가 잘 나옵니다.
• 스프라이트로 쓸 거면 배경이 투명한 PNG가 편합니다.

만든 도트 이미지, 이렇게 써보세요

가볍게 즐기는 것부터 실제 제작까지 폭넓게 쓸 수 있습니다.

• 게임 캐릭터·스프라이트·타일
• 프로필·아바타 이미지
• 이모지·스티커
• 레트로 배경화면
• 도트 로고·아이콘
• 굿즈·NFT용 픽셀 이미지

오픈소스 원리 (참고 출처)

이 도구의 격자 감지·스냅·색 정리 알고리즘은 Hugo Duprez의 오픈소스 프로젝트 Sprite Fusion Pixel Snapper(MIT License)의 방식을 참고해 브라우저용 JavaScript로 다시 구현한 것입니다. 원본 프로젝트는 아래 출처의 GitHub 저장소에서 볼 수 있습니다. 올린 이미지는 서버로 전송되지 않고 브라우저에서만 처리됩니다.