픽셀 아트가 흐려지는 이유와 해결 방법

픽셀 아트는 만들 때보다 표시할 때 흐려지는 경우가 많습니다. 파일은 선명한데 브라우저나 게임 엔진이 소수 배율로 보여 주면서 인접 픽셀을 섞습니다.

해결하려면 어느 단계에서 보간이 들어왔는지 찾아야 합니다.

파일을 100%로 확인

PNG를 원래 크기로 엽니다. 각 블록의 가장자리가 단단하면 내보내기는 정상입니다. 이미 부드럽다면 리샘플링 없이 원본에서 다시 내보냅니다.

128×128 이미지를 뷰어가 700픽셀 창에 자동 맞춘 상태로 판단하지 마세요. 100%, 200% 같은 정수 확대를 사용합니다.

정수 배율로 확대

64픽셀 이미지는 128, 192, 256픽셀로 깨끗하게 커집니다. 150픽셀에서는 각 원본 픽셀이 같은 화면 폭을 가질 수 없어 혼합되거나 폭이 달라집니다.

가능하면 2배, 3배, 4배를 사용합니다. 고정된 어색한 크기가 필요하면 그 크기에 맞는 그리드로 새로 만드는 편이 안전합니다.

브라우저 스무딩 끄기

.pixel-art {
  image-rendering: pixelated;
}

적절한 width와 height도 함께 지정하세요. image-rendering은 샘플링 방식을 바꾸지만 잘못된 소수 크기를 완벽하게 만들 수는 없습니다.

부모 요소의 scale(0.9) 같은 변환도 확인합니다. 선언한 너비가 정수여도 이미지를 화면 픽셀 사이로 옮길 수 있습니다.

편집기와 게임 엔진 확인

이미지 편집기에서는 사진용 bilinear 대신 nearest neighbor를 선택합니다. 게임에서는 소수 카메라 배율, 반 픽셀 위치, 텍스처 압축, mipmap, UI 캔버스의 소수 스케일을 확인합니다.

미리보기 화면을 캡처하지 말고 PixelTool에서 PNG나 SVG를 직접 내보냅니다.

투명 이미지 가장자리에 밝거나 어두운 테두리가 있으면 반투명 픽셀도 확인합니다. 흰색과 검은색 배경에서 모두 테스트하세요.

점검 순서

1. 내보낸 파일을 100%로 확인
2. 표시 크기가 정수 배율인지 확인
3. 최근접 또는 pixelated 활성화
4. 소수 변환과 카메라 위치 제거
5. 필터, 압축, mipmap 재검토
6. 캡처 대신 다시 내보내기

한 번에 한 단계만 바꾸세요. 흐림이 사라진 지점이 영구적으로 수정할 곳입니다.