픽셀아트 안 깨지게 확대하기

픽셀아트 업스케일은 게임 스프라이트나 도트 아이콘처럼 색 수가 적고 경계가 또렷한 이미지를 확대하는 도구입니다. 일반 이미지 편집기의 기본 확대는 새 픽셀 값을 주변 색의 평균으로 채우는 보간을 쓰기 때문에 도트 특유의 각진 경계가 뭉개집니다. 이 도구가 제공하는 Nearest·Scale2x/Scale3x(EPX)·xBR 계열 네 알고리즘은 그 대신 픽셀 격자의 경계를 지키도록 설계된 판정식을 따르며, 아래에서는 그 판정식이 실제로 어떤 상수와 조건으로 동작하는지를 원전 출처와 함께 정리합니다. 모든 처리는 브라우저 안에서 끝나므로 원본 이미지가 서버로 업로드되지 않습니다.

EPX 계열(Scale2x·Scale3x) — 경계 조건과 코너 치환

Scale2x와 Scale3x는 1992년 Eric Johnston이 고안한 EPX(Eric’s Pixel Expansion, 퍼블릭 도메인 알고리즘)를 근거로 하며, Andrea Mazzoleni가 이를 2배·3배로 확장한 버전입니다. 이 도구는 scale2x.it가 공개한 규칙 설명을 근거로 알고리즘을 다시 구현했고, AdvanceMAME의 GPL 소스 코드 자체는 가져오지 않았습니다. 규칙은 3×3 이웃 가운데 상하좌우 네 칸만 봅니다 — 위(B)·왼쪽(D)·오른쪽(F)·아래(H). 이미지 가장자리 밖의 좌표는 가장 가까운 테두리 픽셀 값으로 클램프해 채웁니다.

핵심 판정은 하나입니다: 위(B)와 아래(H)가 다르면서 왼쪽(D)과 오른쪽(F)도 다를 때만 코너를 이웃 색으로 바꾸고, 그 밖에는 중앙 픽셀을 그대로 복제합니다. 여기서 “같다”는 R·G·B·A 네 채널이 모두 일치하는 완전 일치를 뜻하므로, RGB는 같지만 투명도(알파)만 다른 두 픽셀은 서로 다른 색으로 취급됩니다. 조건이 참이면 2×2로 나뉜 네 출력 코너 각각이 다시 개별 조건을 통과해야 이웃 색을 받습니다 — 좌상은 왼쪽==위일 때만 왼쪽 색, 우상은 위==오른쪽일 때만 오른쪽 색, 좌하는 왼쪽==아래일 때만 왼쪽 색, 우하는 아래==오른쪽일 때만 오른쪽 색으로 바뀝니다. 그 부조건까지 만족하지 못하면 해당 코너는 중앙 픽셀을 그대로 복제한 값(픽셀 더블링)에 머뭅니다.

Scale2x·Scale3x는 이 과정에서 어떤 색도 섞지 않습니다. 모든 출력 픽셀은 원본의 이웃 가운데 정확히 하나(중앙·위·아래·왼쪽·오른쪽, Scale3x는 대각 네 칸도 포함)를 그대로 복사할 뿐, 색을 혼합하는 연산은 코드 어디에도 없습니다. 그래서 두 알고리즘은 원본에 없던 색을 절대 만들어내지 않고 팔레트를 정확히 보존합니다. Scale3x는 같은 1차 판정(B≠H && D≠F)을 쓰면서 3×3 결과의 정중앙 픽셀은 항상 원본을 그대로 유지하고, 네 모서리는 Scale2x와 같은 단순 조건을 씁니다. 네 변의 중점은 모서리 조건에 더해 대각 이웃과 중앙의 불일치까지 추가로 요구하는 복합 조건을 씁니다 — 예컨대 윗변 중점은 왼쪽과 위가 같으면서 중앙과 오른쪽위 대각이 다르거나, 위와 오른쪽이 같으면서 중앙과 왼쪽위 대각이 다를 때만 위쪽 색을 받습니다.

xBR 계열 — YUV 가중 에지 거리와 보간

xBR 계열 구현은 Hyllian(Jararaca)이 libretro 포럼에 공개한 xBR 알고리즘 튜토리얼(YUV 가중 에지 검출과 대각 보간)을 근거로 재구현한 것이며, libretro의 GPL 셰이더 소스는 가져오지 않았습니다. 원문에서 그대로 따른 것은 색 거리 가중치(Y=48, U=7, V=6)이고, 에지 판정 방식은 원문의 YUV 가중 거리 아이디어를 참고했을 뿐 5×5 이웃의 다단계 규칙과 달리 중앙 픽셀과 상하좌우 네 이웃만 보는 코너 판정으로 단순화했습니다. RGB→YUV 변환 행렬도 다릅니다 — 원문은 U = -0.169R - 0.331G + 0.500B, V = 0.500R - 0.419G - 0.081B를 쓰는 반면, 이 도구는 PAL 아날로그 방식(BT.470)의 표준 행렬을 씁니다: Y = 0.299R + 0.587G + 0.114B, U = -0.14713R - 0.28886G + 0.436B, V = 0.615R - 0.51499G - 0.10001B. Y 행은 두 행렬이 완전히 같으므로 휘도 차이가 지배적인 픽셀아트에서는 판정이 사실상 일치하고, 휘도는 비슷한데 채도만 크게 다른 색쌍에서만 원문 셰이더와 결과가 미세하게 갈릴 수 있습니다.

세 채널의 차이는 Y=48, U=7, V=6의 가중치로 합산되고, 여기에 알파(투명도) 차이가 128의 가중치로 더해집니다: 48·|ΔY| + 7·|ΔU| + 6·|ΔV| + 128·|Δ알파|. Y·U·V 가중치 48/7/6은 Hyllian이 같은 포럼 글에서 직접 밝힌 “48*y + 7*u + 6*v” 공식과 정확히 일치합니다. 다만 알파 항 128은 이 도구가 투명↔불투명 경계도 에지로 잡기 위해 붙인 확장으로 보입니다 — Hyllian이 공개한 원 공식 자체에는 알파 항이 없으므로, 128이라는 값을 Hyllian의 원전에서 그대로 가져온 상수라고 단정할 근거는 없습니다. 이렇게 구한 가중 거리가 155(EDGE_THRESHOLD) 이상이면 뚜렷이 다른 색으로, 미만이면 같거나 비슷한 색으로 판정합니다.

코너 하나(예: 좌상단)를 계산할 때는 그 코너의 가로·세로 이웃 두 픽셀 사이의 거리가 임계값 미만이면서, 중앙 픽셀과 두 이웃 각각의 거리는 임계값 이상일 때만 그 코너를 에지로 판정합니다. 이 조건을 만족하면, 두 이웃의 거리가 0(완전히 같은 색)이 아닌 한 두 이웃 색을 50:50으로 선형 혼합한 새 색을 코너에 씁니다. Scale2x·Scale3x와 달리 xBR 계열은 이 혼합 연산을 실제로 호출하기 때문에, 원본 팔레트에 없던 중간색을 만들어낼 수 있습니다 — 곡선과 대각선이 매끄러워지는 대신 색 수가 늘어날 수 있다는 뜻입니다. 네 코너(좌상·우상· 좌하·우하)는 각각 계산되고, 확대 후 각 서브픽셀은 자신이 속한 사분면 안에서 코너 쪽 대각선 절반에 있을 때만 코너색을 받고 나머지 절반은 원본 중앙색을 그대로 씁니다. xBR 계열은 2배·3배·4배 확대만 지원합니다.

정리하면, 기준 셰이더가 5×5 이웃의 다단계 규칙으로 에지를 판정하는 것과 달리 이 구현은 중앙 픽셀과 상하좌우 네 이웃만 보는 코너 판정을 쓰고, 위에서 설명한 RGB→YUV 행렬·알파 가중치도 달라 기준 xBR 셰이더와 비트 단위로 같은 결과를 보장하지 않으며, 팔레트 제한이 꺼져 있으면 두 이웃 색의 중간색을 만들 수 있습니다.

팔레트 스냅 — RGBA 제곱 거리로 최근접 색 찾기

원본 팔레트로 제한 옵션을 켜면, 먼저 업스케일 전 원본 이미지에서 등장하는 고유 RGBA 색을 등장 순서대로 모두 모읍니다(R·G·B·A를 하나의 32비트 값으로 합쳐 집합에 넣는 방식이라 중복 판정이 빠릅니다). 업스케일 결과 자체가 아니라 원본 이미지가 팔레트의 기준이므로, xBR 계열이 새로 만든 중간색도 항상 업스케일 전에 존재했던 색만을 기준으로 스냅됩니다.

각 픽셀은 이 팔레트 가운데 가장 가까운 색으로 다시 매핑됩니다 — 단, “가장 가까운 ”의 기준은 흔히 말하는 R·G·B 세 채널 유클리드 거리가 아니라, R·G·B·A 네 채널 모두에 대한 제곱 거리(각 채널 차이를 제곱해 더한 값)입니다. 그래서 색상은 같아도 투명도 (알파)가 다른 두 색은 서로 다른 거리로 계산되고, 경우에 따라 알파 차이만으로 최근접 색이 뒤바뀔 수 있습니다. 이미 원본 팔레트에 정확히 일치하는 픽셀은 이 스캔 없이 그대로 통과하고, 실제로 거리를 계산해야 하는 픽셀은 xBR 계열이 새로 섞어낸 소수의 색뿐이라 전체 스캔 비용이 크지 않습니다. 이 과정을 거치면 결과 이미지의 색 집합은 언제나 원본 색 집합의 부분집합에 머뭅니다. 인덱스 컬러 규격이나 정해진 색 수를 지켜야 하는 게임 리소스라면 이 옵션을 켜 두는 편이 안전합니다.

정수배 고정과 출력 크기 상한

Nearest는 배율이 1 이상의 정수가 아니면 곧바로 오류를 내고 멈춥니다. 각 출력 픽셀은 좌표를 배율로 나눈 정수 몫으로 원본 픽셀을 그대로 복제할 뿐 보간을 전혀 하지 않습니다. 흔히 알려진 문제로, 1.5배·2.3배처럼 정수가 아닌 배율로 픽셀아트를 키우면 행이나 열마다 픽셀이 고르지 않게 배분돼 어떤 칸은 다른 칸보다 두꺼워지는 얼룩 같은 아티팩트가 생길 수 있습니다. 이 도구는 정수 배율만 아예 받아들이는 구조라 그런 아티팩트 자체가 발생할 여지가 없습니다.

고를 수 있는 배율은 알고리즘마다 다릅니다 — Nearest는 2·3·4·5·6·8배 중에서, Scale2x는 2배 고정, Scale3x는 3배 고정, xBR 계열은 2·3·4배 중에서 고릅니다. 또한 완성 이미지의 가로나 세로가 4096px를 넘거나 전체 픽셀 수가 4096×4096(약 1670만)을 넘는 배율은 아예 목록에서 비활성화됩니다. xBR 계열처럼 픽셀 단위로 도는 알고리즘이 큰 원본과 큰 배율을 함께 만나면 브라우저 메인 스레드가 멈추거나 메모리가 부족해질 수 있기 때문입니다.

사용 순서

도트 그림 파일을 창 위로 끌어다 놓거나, 클릭해서 파일 선택 창으로 불러옵니다.
위에서 설명한 네 알고리즘 가운데 결과물에 원하는 느낌을 주는 하나를 고릅니다.
몇 배로 키울지 정합니다. EPX 계열은 고정 배율이고, 나머지 둘은 목록에서 값을 고를 수 있습니다.
확대해도 색이 늘지 않게 하려면 원본 팔레트로 제한하는 체크박스를 켭니다.
미리보기 생성을 누르면 원본과 결과가 나란히 놓이고, 그 아래에 원본 색·출력 색·새 색과 팔레트 보존 여부가 함께 표시됩니다. 여기서 가로세로 크기와 색이 의도한 대로인지 눈으로 확인합니다.
결과가 마음에 들면 PNG 다운로드를 눌러 저장합니다. 알고리즘·배율·팔레트 제한 가운데 하나라도 다시 건드리면 미리보기가 사라지고 다운로드 버튼도 다시 잠기니, 바뀐 옵션으로 한 번 더 생성한 뒤 내려받으세요.

주의

이 네 알고리즘은 색이 적고 경계가 또렷한 도트 그림을 전제로 설계됐습니다. Scale2x·Scale3x는 이웃이 완전히 같은 색일 때만 계단을 다듬는데 사진·그라데이션에는 그런 구간이 거의 없어 사실상 블록 확대처럼 되고, xBR 계열의 색거리·혼합 판정은 완만한 경계를 엉뚱하게 에지로 잡아 얼룩덜룩해질 수 있습니다. Nearest는 다듬기 자체가 없어 그냥 블록으로 커집니다.
색 비교(같다·다르다 판정과 거리 계산)는 항상 알파(투명도)까지 포함한 4채널 기준입니다. 반투명 안티에일리어싱 테두리가 있는 스프라이트는 그 경계 자체가 추가 색 차이로 잡혀 예상보다 많은 코너가 바뀔 수 있습니다.
EPX 계열(2배·3배)은 배율이 고정이라, 그보다 더 키우려면 Nearest나 xBR 계열을 쓰거나 EPX로 한 번 키운 결과를 다시 확대하세요.
완성 이미지의 가로나 세로가 4096px보다 커지는 배율은 “크기 초과” 표시와 함께 아예 고를 수 없게 막아 둡니다. 메모리 고갈을 예방하려는 조치이니, 필요하면 원본을 미리 잘라 일부만 키우세요.
색이 하나도 불어나지 않는 결과가 최우선이라면 xBR 계열 대신 Nearest를 쓰거나, xBR 계열을 쓰더라도 원본 팔레트 제한을 함께 켜서 새로 섞인 색을 원래 팔레트로 되돌리세요.

자주 묻는 질문

Q. 왜 그냥 확대하면 흐릿해지나요?
브라우저나 이미지 편집기의 기본 확대는 쌍선형·쌍삼차 보간으로 새 픽셀 값을 주변 색의 평균으로 채웁니다. 사진에는 자연스럽지만, 픽셀아트는 경계가 번져 도트 느낌이 사라집니다. 이 도구의 네 알고리즘은 저마다 다른 방식으로 이 평균내기를 피합니다 — Nearest는 각 원본 픽셀을 정수 배율만큼 그대로 복제하기만 하고(색 비교 자체가 없음), Scale2x·Scale3x는 상하좌우 이웃이 R·G·B·A 4채널까지 완전히 같은 색인지를 따져 대각선 계단만 다듬으며, xBR 계열은 YUV 가중 색거리로 경계를 찾아 그 방향으로 보간합니다.

Q. Nearest, Scale2x/3x, xBR 계열 중 무엇을 골라야 하나요?
원본 도트를 한 치도 바꾸지 않고 싶으면 Nearest를(2·3·4·5·6·8배 정수 배율), 대각선 계단만 살짝 다듬으면서 팔레트를 그대로 지키고 싶으면 Scale2x·Scale3x를(색을 섞지 않고 이웃 색만 복사), 곡선과 경계를 가장 매끈하게 만들고 싶으면 xBR 계열을(경계 코너에서 이웃 색을 50:50으로 혼합) 고르세요. EPX 계열은 새 색을 절대 만들지 않지만, xBR 계열은 매끄러움의 대가로 원본에 없던 중간색을 만들 수 있습니다.

Q. xBR 계열을 쓰면 원본에 없던 색이 생긴다던데, 왜 그런가요?
xBR 계열은 색이 바뀌는 경계로 판정된 코너에서 두 이웃 픽셀의 색을 50:50 비율로 선형 혼합해 새 코너 색을 만듭니다. Scale2x·Scale3x는 이런 혼합 연산 자체를 쓰지 않고 원본 색을 그대로 복사만 하기 때문에 색이 절대 늘지 않지만, xBR 계열은 경계를 매끄럽게 그리려고 실제로 색을 섞으므로 원본 팔레트에 없던 중간색이 생길 수 있습니다. 색 수를 지켜야 한다면 원본 팔레트 제한을 함께 켜세요. 이 도구의 xBR 계열 모드는 YUV 가중 색거리와 코너 방향 보간을 쓰는 간소화 구현이며, 기준 xBR 셰이더와 비트 단위로 같은 결과를 보장하지 않습니다.

Q. 확대해도 색이 늘어나지 않게 할 수 있나요?
가능합니다. 원본 팔레트 제한을 켜면 결과의 모든 픽셀이 업스케일 전 원본에 실제로 있던 색 가운데 하나로 다시 매핑됩니다. 이때 최근접 색의 기준은 R·G·B 세 채널이 아니라 투명도(알파)까지 포함한 네 채널의 제곱 거리이므로, 색상이 같아도 알파가 다른 픽셀은 다른 색으로 취급됩니다. 정해진 색 수만 쓰는 인덱스 팔레트 규칙을 따라야 하는 게임 리소스 작업에 유용합니다.

Q. 사진이나 안티에일리어싱된 그림에 쓰면 왜 이상해지나요?
세 알고리즘이 서로 다른 이유로 사진에 잘 맞지 않습니다. Scale2x·Scale3x는 상하좌우 이웃이 완전히 같은 색(R·G·B·A 4채널 일치)일 때만 계단을 다듬는데, 사진이나 그라데이션·안티에일리어싱이 강한 그림은 인접 픽셀이 거의 다 미세하게 달라 이 조건이 좀처럼 성립하지 않습니다 — 그래서 다듬기가 거의 일어나지 않고 사실상 블록 확대에 가까운 결과가 됩니다. xBR 계열의 색거리·혼합 판정은 색 경계가 뚜렷한 픽셀아트에 맞춰져 있어, 경계가 완만한 사진에서는 엉뚱한 자리를 에지로 잡아 얼룩덜룩해질 수 있습니다. Nearest는 애초에 색을 비교하거나 다듬지 않고 픽셀을 그대로 키우기만 하므로 매끄러워지지 않습니다.