AI 없는 도트 확대 · 정수 배율 최근접 1×~8×
스토어 페이지·트레일러·SNS용 도트는 흐리지 않게 키워야 합니다. 정수 최근접 확대는 각 픽셀을 정확한 N×N 블록으로 만들고, 저장 전에 결과 크기를 보여 줍니다.
도트를 흐리지 않게 키우려면 최근접 방식으로 정수배를 하면 됩니다. 4배면 32 × 32 스프라이트가 128 × 128이 되고 모든 픽셀이 정확한 4 × 4 블록이 됩니다. 4.25배 같은 소수 배율은 일부 픽셀을 더 넓게 만들고, 부드러운 확대나 AI 업스케일러는 흐림이나 지어낸 디테일을 더합니다. Nerulio 픽셀 랩은 프레임을 1×~8× 최근접으로 키우며, 먼저 이미지가 이미 확대본인지 확인해 확대된 사본이 아니라 1배 원본을 키우게 합니다.
- PNG frames측정 확인· Pillow
- Palette측정 확인· re-import
- pixel-lab.json미검증
정수 배율은 격자를 지키고, 나머지는 격자를 휘게 합니다
최근접 방식은 원본 픽셀을 블록으로 복사할 뿐 새 값을 계산하지 않습니다. 정수 k배면 모든 블록이 k × k라서 1픽셀 선은 한 블록 두께로, 대각선은 규칙적인 계단으로, 색은 팔레트 그대로 남습니다.
4.25배면 32픽셀 한 줄이 136픽셀이 되는데, 136을 32개의 같은 블록으로 나눌 수는 없습니다. 최근접으로 하면 폭이 5, 4, 4, 4, 5, 4, 4, 4 … 가 되어 네 번째 픽셀마다 25 % 넓어지고, 깨끗한 대각선이 고르지 않은 계단이 됩니다. 쌍선형·쌍삼차는 이웃을 섞어 고르지 않음을 감추는데, 그것이 바로 피하려던 흐림입니다.
목표 크기가 도트의 배수가 아닐 때 — 400 × 225 그림으로 1920 × 1080 트레일러를 만들면 4.8배 — 가장 큰 정수 배율(4배 → 1600 × 900)로 키우고 남는 부분은 여백이나 테두리로 채우세요. 입력도 먼저 확인해야 합니다. 3배 스크린숏을 다시 4배 하면 12배가 되고 원래 있던 고르지 않음도 함께 커집니다. 검사기는 이미지가 정확한 정수 확대본이면 1배 원본을 되살립니다.
- 최근접(Nearest-neighbour)
- 결과 픽셀마다 가장 가까운 원본 픽셀을 복사. 섞지 않음.
- 정수 배율
- 2×, 3×, 4× …: 모든 도트가 같은 정사각 블록이 됨.
- 논리 크기
- 그림의 1배 크기. 128 × 128로 보이는 스프라이트라면 32 × 32.
예시: 크기와 블록 폭
32 × 32 스프라이트와 400 × 225 장면:
32 × 32 ×2 → 64 × 64 모든 픽셀 2 × 2
32 × 32 ×4 → 128 × 128 모든 픽셀 4 × 4
32 × 32 ×8 → 256 × 256 모든 픽셀 8 × 8
32 × 32 ×4.25 → 136 폭 5,4,4,4,5,4,4,4 … (고르지 않음)
1920 × 1080 트레일러용 400 × 225: 1920/400 = 4.8, 1080/225 = 4.8
가장 큰 정수 배율 4 → 1600 × 900, 좌우 160px·위아래 90px 여백5, 4, 4, 4 패턴은 최근접 샘플링에서 나옵니다. 결과 픽셀 x는 원본 픽셀 ⌊x ÷ 4.25⌋를 보여 주므로 원본 0번은 x = 0~4(5픽셀), 원본 1번은 x = 5~8(4픽셀)을 차지합니다.
이렇게 작동합니다
- 최근접 방식만 쓰는 1×~8× 정수 배율. 필터도, 만들어 낸 디테일도 없습니다.
- 검사기가 이미 확대된 이미지인지(정확한 배율과 오프셋) 감지해, 확대본을 다시 확대하지 않게 합니다.
- 정확한 격자가 있으면 먼저 1배 원본을 복원하고 그것을 확대하세요.
- 애니메이션은 프레임마다 처리하며 PNG로 내보냅니다.
사용 방법
- 이미지나 프레임을 끌어다 놓습니다.
- 배율 보고서를 읽고, 이미 확대된 경우 1배로 복원합니다.
- 정수 배율을 고릅니다.
- PNG로 내보냅니다.
결과 확인
- 결과 크기가 입력 크기 × 배율과 정확히 같습니다(32 × 4 = 128).
- 결과를 검사기에 넣으면 오프셋 0, 0의 정확한 정수 배율이 나와야 합니다.
- 보여 줄 곳(스토어 페이지, 영상 편집기)에서 100 %로 봅니다. 거기서 가장자리가 흐리면 플랫폼이 크기를 다시 바꾼 것입니다.
문제 해결
| 증상 | 유력한 원인 | 확인 방법 | 해결 |
|---|---|---|---|
| 확대한 PNG가 웹 페이지에서 흐리게 보임 | 페이지가 다른 크기로 표시하면서 브라우저가 부드럽게 보간함 | CSS 크기와 파일 크기 비교 | 원래 크기로 표시하거나 CSS image-rendering: pixelated 지정(MDN 기준: 가장 가까운 정수배까지는 최근접, 나머지는 부드럽게) |
| 트레일러나 스토어 페이지에서 도트가 고르지 않음 | 편집기나 스토어가 배수가 아닌 크기(4.8배)로 바꿈 | 파일 크기와 출력 해상도 비교 | 맞는 가장 큰 정수 배율로 키우고 늘리는 대신 여백을 둠 |
| 결과가 예상보다 훨씬 크고 각짐 | 입력이 이미 확대본이었음(3배 후 4배 = 12배) | 검사기가 입력에서 정확한 정수 배율을 보고함 | 먼저 1배로 되살린 뒤 확대 |
| 올린 뒤 외곽선 주변에 색 잡음 | 플랫폼이 JPEG로 다시 인코딩함 | 올라간 사본의 가장자리를 확대 | PNG를 그대로 두는 곳이면 PNG로 올리기 |
다른 방법
| 방법 | 이럴 때 더 낫습니다 |
|---|---|
| 패킹·내보내기의 배율 변형(스프라이트 시트 메이커) | 1배와 함께 @2x·@4x 엔진 아틀라스가 필요할 때. 이 변형은 최근접 방식만 씁니다. |
| Aseprite: File › Export › Export As의 Resize 칸 | 이미 Aseprite로 작업할 때. Aseprite 문서는 애니메이션을 올릴 때 400 % 같은 배율을 권합니다. |
| 엔진이 1배 그림을 키우게 하기 | 게임 안에서는 1배 텍스처를 두고 화면을 정수배로 키우세요(Godot, Unity). 미리 키운 텍스처는 메모리만 씁니다. |
출력 파일과 검증 방법
"측정 확인"은 내려받은 파일을 페이지 밖에서(Pillow·numpy·별도 파서) 다시 열어 그 속성을 측정했다는 뜻입니다. 게임 엔진에서 불러오는 것은 시험하지 않았습니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| PNG frames | anim_N.png · 1×–8× nearest | 측정 확인 Pillow내보낸 PNG를 다시 읽어 모든 색이 고정 팔레트 안에 있는지 확인했습니다. |
| Palette | .gpl · .hex (Lospec) · .json | 측정 확인 re-import각 형식을 내보내고 UI로 다시 가져와 16 → 16색을 확인했습니다. |
| pixel-lab.json | generic frames + palette | 미검증일반 JSON이며 어떤 엔진에서도 불러오지 않았습니다. |
검증 근거
안티앨리어싱된 프레임 8개 → 16색 팔레트 하나, 팔레트 밖 색 0개. 디더링 없음과 Bayer 4×4 모두에서 변하지 않은 영역이 8프레임 모두 동일. 안티앨리어싱 제거로 271색 → 16색, 실루엣 픽셀 이동 0. 정수 배율·오프셋·2.5배 비정수 배율을 정확히 감지.
한계
- 1×~8× 정수 배율만 있고 소수·부드러운 방식은 없습니다.
- 시트는 그림 한 장으로 확대됩니다. 프레임 사이 2px 여백은 4배에서 8px이 됩니다.
- 디테일을 더하지 않습니다. 도트에는 맞지만 사진 업스케일러를 원했다면 맞지 않습니다.
- 4096 × 4096보다 큰 프레임은 거부합니다. 모든 처리가 메인 스레드에서 돌고 아직 취소 버튼이 없습니다.
- 스프라이트 시트는 이미지 하나로 다룹니다. 먼저 프레임으로 자르세요(스프라이트 시트 자르기).
- 디더링을 켜면 정리 개수에 디더 픽셀이 포함됩니다. 먼저 디더링을 없음으로 두세요.
- 내보내는 JSON은 일반 형식이며 Godot·Unity 가져오기는 시험하지 않았습니다.
버전과 출처
Chromium의 픽셀 랩 시험 결과: 1×·2×·3×·4×·8× 최근접 확대를 오프셋 0, 0으로 정확히 감지했고, 2.5배 최근접은 2.500배로 읽었으며, 3배 스프라이트를 16 × 16으로 픽셀까지 같게 되살렸습니다. CSS 동작은 MDN 설명을, Aseprite 내보내기 창은 공식 문서를 따릅니다.
참고한 공식 문서
자주 묻는 질문
왜 정수 배율만 되나요?
정수가 아닌 배율은 일부 픽셀을 더 넓게 만듭니다. 검사기는 그것도 측정합니다. 2.5배 최근접 확대는 2.500배로 읽고 정수라고 하지 않습니다.
AI 업스케일러처럼 디테일을 더하나요?
아니요. 결과의 모든 픽셀은 원본 픽셀의 복사입니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).