픽셀 아트 축소하기: 기술적 심층 분석

픽셀 아트는 작은 단위의 디지털 아트로, 픽셀 아티스트들은 작품을
내보내거나 공유할 때 보통 원본보다 확대된 버전을 사용합니다. 하지만 다른
플랫폼에서 활용하거나 특정 크기에 맞춰야 할 경우, 원본 크기를 유지하지
않고 확대된 이미지를 다시 축소하면 가장자리 블러 현상이 발생할 수
있습니다. 이런 문제를 해결하기 위해서는 확대된 픽셀 아트를 원래 크기
또는 다른 크기로 되돌릴 수 있는 픽셀 아트 축소기(pixel art down
scaler) 가 필요합니다. 일반 이미지와 달리 픽셀 아트는 고유의 미학적
특성이 있기 때문에 특별한 처리가 필요합니다. 이 글에서는 픽셀 아트를
축소하는 기술적 접근 방법과 실제 구현 사례를 살펴봅니다.

이미지 축소 알고리즘 이해하기

픽셀 아트 전용 기술을 살펴보기 전에, 일반적인 이미지 축소 알고리즘의
차이를 이해하는 것이 중요합니다.

Bilinear 보간법은 대부분의 이미지 편집기와 웹 브라우저에서
기본적으로 사용하는 방법으로, 주변 픽셀의 색상을 평균 내어 부드럽게
연결합니다. 하지만 이 과정에서 픽셀 아트의 날카로운 경계가 흐려지고
안티앨리어싱 효과가 생깁니다.

Bicubic 보간법은 bilinear보다 더 많은 주변 픽셀을 고려하여 계산하기
때문에 사진과 같은 일반 이미지에서는 더 선명하고 디테일을 보존하는
결과를 줍니다.

Lanczos 리샘플링은 sinc 함수 기반의 윈도우 기법을 사용하여 매우
선명한 결과를 제공하므로, 사진 이미지처럼 디테일이 중요한 경우에
적합합니다.

하지만 이 알고리즘들은 픽셀 아트에는 적합하지 않습니다. 왜냐하면
의도적으로 날카롭고 블록 같은 미학을 가진 픽셀 아트의 특성을 손상시키기
때문입니다.

왜 픽셀 아트는 특별한 방식이 필요한가

픽셀 아트는 일반 이미지와 다른 독특한 특성을 가지고 있습니다. 픽셀
아트 축소기는 이러한 특성을 반드시 고려해야 합니다.

제한된 색상 팔레트: 픽셀 아트는 보통 4~16색 정도의 제한된 팔레트를
사용합니다. 각 픽셀의 색상은 신중하게 선택된 것이므로, 색 정확도가 매우
중요합니다.

낮은 해상도: 한 픽셀 한 픽셀이 전체 구도에 큰 의미를 가지므로, 단
하나의 픽셀 정보라도 손실되면 작품 전체가 달라질 수 있습니다.

날카로운 경계: 블록처럼 보이는 경계는 의도적인 것이며, 어떤 형태의
부드럽게 처리된 효과도 아트의 본질을 무너뜨립니다.

기하학적 패턴: 픽셀 아트에는 단순하고 규칙적인 패턴이 많으며, 축소
과정에서도 반드시 유지되어야 합니다.

이러한 이유로 픽셀 아트에는 최근접 이웃(Nearest Neighbor) 알고리즘이
적합합니다. 이 방식은 주변 픽셀을 섞지 않고 가장 가까운 픽셀의 색상만
가져오기 때문에 원래의 경계와 색을 그대로 유지할 수 있습니다.

픽셀 아트 축소의 어려움

픽셀 아트는 주로 16x16, 32x32, 64x64 등 작은 해상도에서 제작됩니다.
그러나 실제 사용을 위해서는 2배, 4배, 심지어 8배까지 확대해서 내보내는
경우가 많습니다. 문제는 이 확대된 버전을 다시 원본 크기나 다른 크기로
줄일 때 발생합니다. 이 과정에서 픽셀 구조가 깨지지 않도록 처리하는 것이
핵심 과제입니다.

자동 확대 배율 감지 구현

픽셀 아트 축소기의 핵심은 원본이 몇 배로 확대된 상태인지를 자동으로
감지하는 것입니다. 이를 위해 다음과 같은 방법이 사용됩니다.

격자 기반 샘플링 방식

알고리즘은 이미지 전체에 고르게 분포된 지점을 분석합니다.

function getSamplePoints(width: number, height: number): Point[] {
  const points: Point[] = [];
  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      const x = Math.floor(((col + 0.5) * width) / COLS);
      const y = Math.floor(((row + 0.5) * height) / ROWS);
      points.push({ x, y });
    }
  }
  return points;
}

이는 이미지의 모서리를 피하고, 중앙부 위주로 신뢰도 높은 샘플 포인트를
얻는 4x4 격자를 만듭니다.

색상 패턴 분석

배율을 찾는 과정은 색상 패턴을 분석하는 방식으로 이루어집니다.

1. 수평 분석: 샘플 지점에서 오른쪽으로 이동하며 색상 변화를 추적
2. 패턴 인식: 첫 색상 변화 이후 다시 색상이 바뀌는 지점을 찾음
3. 배율 계산: 두 지점 간의 거리가 배율을 의미

이 과정은 수직 방향에서도 동일하게 적용되며, 가로·세로 배율이 다를 경우
더 작은 값을 사용합니다.

색상 허용 오차 시스템

실제 이미지에는 압축이나 편집 과정에서 약간의 색상 변화가 생길 수
있습니다. 이를 보완하기 위해 픽셀 아트 축소기는 색상 허용 오차를
둡니다.

function colorClose(c1: RGBA, c2: RGBA, tol = COLOR_TOLERANCE): boolean {
  for (let i = 0; i < 3; i++) if (Math.abs(c1[i] - c2[i]) > tol) return false;
  if (c1[3] !== c2[i]) return false;
  return true;
}

RGB 채널당 최대 3단계 차이까지 허용하여, 원래의 픽셀 구조를 유지하면서도
압축 아티팩트를 견딜 수 있게 합니다.

캔버스 기반 최근접 이웃 구현

배율이 감지되면, 실제 축소는 HTML5 Canvas의 최근접 이웃 방식으로
처리됩니다.

function renderScaled(scaleValue: number) {
  const ctx = previewRef.current.getContext("2d");
  if (!ctx) return;
  
  previewRef.current.width = destW;
  previewRef.current.height = destH;
  ctx.imageSmoothingEnabled = false; // 최근접 이웃을 위한 핵심 옵션
  ctx.clearRect(0, 0, destW, destH);
  ctx.drawImage(canvasRef.current, 0, 0, srcW, srcH, 0, 0, destW, destH);
}

여기서 중요한 부분은 ctx.imageSmoothingEnabled = false입니다. 이
옵션을 꺼야 브라우저가 기본 bilinear 보간 대신 최근접 이웃을 사용하게
됩니다.

예외 상황 및 실패 사례 처리

실제 픽셀 아트 축소기를 만들 때는 자동 감지가 실패하는 상황도
고려해야 합니다.

압축 아티팩트

JPEG와 같은 압축 포맷은 색상 노이즈를 발생시켜 감지를 어렵게 만듭니다.
허용 오차 시스템으로 어느 정도 보완되지만, 심하게 압축된 경우 실패할 수
있습니다.

잘린 이미지

작품이 잘리거나 여백이 추가된 경우에는 알고리즘이 의존하는 패턴이
깨집니다.

복잡한 색상 패턴

그라데이션이나 복잡한 색상을 가진 이미지에서는 일정한 반복 패턴이 보이지
않을 수 있습니다.

수동 입력 기능

자동 감지가 실패했을 때는 수동으로 배율을 입력할 수 있습니다.

if (res.scale === 1) {
  toast.info("자동 감지 실패. 배율을 직접 입력하세요.");
  setIsScaleConfirmed(false);
}

이 기능을 통해 아티스트가 직접 원래의 확대 배율을 지정할 수 있습니다.

실제 적용과 결과

완성된 픽셀 아트 축소기는
https://pixelera.art/tools/pixel-art-downscaler 에서 사용할 수
있습니다. 이 도구는 이론적인 알고리즘이 실제 환경에서 어떻게
적용되는지를 보여줍니다.

대부분의 픽셀 아트 축소 상황에서 자동 감지가 잘 작동하며, 실패하더라도
수동 입력으로 원하는 결과를 얻을 수 있습니다. 이를 통해 픽셀
아티스트들은 원본 미학을 유지하면서도 다양한 상황에서 작품을 활용할 수
있습니다.