SpriteForge

PIXEL ART GUIDE

픽셀아트 확대에서 이미지가 흐려지는 이유와 안전한 배율

픽셀아트는 일반 사진과 확대 원리가 다릅니다. 사진은 픽셀 사이를 부드럽게 보간해도 자연스럽지만, 픽셀아트에서는 한 칸 한 칸의 경계가 디자인의 일부입니다. 따라서 확대 과정에서 새로운 중간색이 생기면 원본의 형태가 흐려지고 선 굵기도 일정하지 않게 됩니다.

최근접 이웃 방식이 필요한 이유

일반적인 이미지 확대는 주변 픽셀을 섞어 새 색을 만듭니다. 반면 최근접 이웃 방식은 원본 픽셀의 색을 그대로 복제합니다. 16×16 이미지를 4배 확대한다면 원본 1픽셀은 결과 이미지에서 4×4의 같은 색 블록이 됩니다. 이 때문에 경계에 반투명한 혼합색이 생기지 않고 원본의 계단 모양이 그대로 유지됩니다.

정수 배율을 권장하는 이유

2배, 3배, 4배처럼 정수 배율에서는 모든 원본 픽셀이 동일한 크기의 사각형으로 확장됩니다. 2.5배처럼 비정수 배율을 사용하면 어떤 픽셀은 2칸, 어떤 픽셀은 3칸 너비로 표현되어 선 굵기와 패턴 간격이 불균일해질 수 있습니다. 특히 도트 폰트, 1픽셀 외곽선, 반복 타일에서 이 차이가 눈에 잘 띕니다.

큰 배율은 파일 크기보다 메모리를 먼저 봐야 합니다

가로와 세로를 각각 4배 늘리면 전체 픽셀 수는 16배가 됩니다. 8배 확대는 64배입니다. 브라우저 Canvas는 압축된 PNG 파일 크기가 아니라 실제 픽셀 데이터를 메모리에 펼쳐서 처리하므로, 원본이 큰 경우 예상보다 메모리 사용량이 빠르게 증가합니다. 작은 캐릭터 스프라이트에는 문제가 없더라도 큰 배경 이미지를 8배 또는 16배 확대하면 브라우저가 느려질 수 있습니다.

UI 아이콘과 스토어 이미지에서는 목적을 구분합니다

게임 내부에서 픽셀아트 스타일을 그대로 유지하려면 정수 배율 최근접 확대가 적합합니다. 반면 앱스토어 스크린샷이나 마케팅 배너는 최종 출력 크기가 정수 배율과 맞지 않을 수 있습니다. 이때는 먼저 픽셀아트를 정수 배율로 충분히 크게 만든 뒤, 최종 합성 단계에서 전체 레이아웃을 조절하는 방법이 안전합니다. 캐릭터 스프라이트 자체를 비정수 배율로 직접 늘리는 것보다 원본 형태를 보존하기 쉽습니다.

확대 후 확인할 항목

일반 이미지 리사이즈와의 차이

사진, 일러스트, UI 배경처럼 부드러운 곡선과 그라데이션이 중요한 이미지는 최근접 확대가 오히려 거칠게 보입니다. 이런 이미지는 이미지 크기 변경 도구처럼 일반 리사이즈를 사용하는 편이 낫습니다. 픽셀아트에만 픽셀아트 확대를 사용하는 이유가 여기에 있습니다.