도구스개발

디더링·밴딩 계산기

그러데이션 폭과 비트 심도를 넣으면 띠(밴딩)가 몇 픽셀 폭으로 생기는지, 띠를 없애려면 몇 비트가 필요한지 계산합니다. 순서 디더와 오차 확산의 오차·띠 길이를 나란히 견주어 봅니다.

px

한쪽 끝에서 반대쪽 끝까지 밝기가 곧게 오르는 구간의 폭

bit

32계조

그냥 반올림했을 때 가장 넓은 띠

62px

띠를 아예 없애려면 11비트가 필요합니다. 지금은 5비트라 같은 값이 최대 62픽셀 이어집니다.

계조 수32개
계단 하나의 크기8.226 (8비트 코드값 기준)
띠가 사라지는 비트수11비트
순서 디더의 유효 계조249개
이론 RMSE (계단/√12)2.3746

세 가지 방법 견주기

방법RMSE최대 오차가장 넓은 띠값이 바뀌는 곳
그냥 반올림2.3744.11162px31
순서 디더 (베이어)3.3417.69922px961
오차 확산 (플로이드-스타인버그)3.3588.04621px959

오차는 8비트 코드값(0~255)으로 환산한 값입니다. 폭 1,920픽셀 그러데이션을 5비트로 담았을 때를 계산한 것입니다.

평균제곱오차만 보면 디더링이 더 나쁩니다. 일부러 오차를 흩뿌리기 때문에 RMSE가 그냥 반올림보다 커집니다. 그런데도 눈에는 낫게 보이는 것은, 사람 눈이 넓게 이어진 경계에는 예민하고 잘게 흩어진 잡음에는 둔하기 때문입니다. 그래서 이 문제는 수치 하나로 우열을 가릴 수 없고, 이 계산기가 오차와 띠 길이를 함께 보이는 이유이기도 합니다.

미리보기

원본 (연속 계조)

그냥 반올림

순서 디더 (베이어)

오차 확산 (플로이드-스타인버그)

미리보기는 폭 256픽셀짜리 그러데이션을 같은 비트 심도로 담은 것입니다. 위 수치는 입력한 폭 1,920픽셀 기준이므로 띠 길이가 서로 다릅니다. 화면이 넓을수록 같은 비트 심도에서 띠가 넓어집니다. 브라우저가 그림을 늘려 그리므로 화면 폭에 따라 가장자리가 흐려질 수 있습니다.

띠는 언제 생기나

폭 W픽셀에 밝기가 곧게 오르는 그러데이션을 넣으면 입력은 W단계인데 출력은 2B계조뿐입니다. 그래서 평균 W ÷ 계조 수 픽셀마다 값이 한 칸씩 오르고, 그 사이는 완전히 같은 값이라 평평한 띠로 보입니다. 띠가 아예 없으려면 계조 수가 폭 이상이어야 하므로 필요한 비트수는 ⌈log₂W⌉입니다 — 1,920픽셀이면 11비트, 3,840픽셀이면 12비트입니다. 8비트로 넓은 하늘을 담으면 띠가 보이는 것이 당연한 셈입니다.

두 가지 디더의 차이

순서 디더는 미리 정한 문턱값 배열을 되풀이해 얹습니다. 이웃 픽셀을 볼 필요가 없어 빠르고 결과가 언제나 같지만 규칙적인 격자 무늬가 남습니다. 배열이 8칸이면 계단 사이를 8등분하는 셈이라 유효 계조가 249개로 늘어납니다.

오차 확산은 버린 오차를 다음 픽셀로 넘깁니다. 넘긴 오차가 언젠가 값을 한 칸 올리므로 국소 평균이 보존되고 무늬가 덜 눈에 띄지만, 앞의 결과가 뒤에 영향을 주어 병렬 처리가 어렵고 잔물결 무늬가 생길 수 있습니다.

가로 한 줄만 보는 1차원 모형입니다. 실제 플로이드-스타인버그는 오차를 오른쪽·아래 네 이웃에 7/16·3/16·5/16·1/16으로 나누고, 베이어 디더도 2차원 행렬을 씁니다. 여기서 쓰는 순서 디더의 문턱값은 2차원 베이어 행렬의 한 줄과 같은 비트 뒤집기 수열입니다. 또 이 계산은 밝기값이 선형이라고 보므로, 감마가 적용된 실제 화면에서는 어두운 쪽에서 띠가 더 잘 보입니다.

사용 방법

  1. 1그러데이션이 가로지르는 폭을 픽셀로 넣습니다. FHD 화면을 가득 채우는 하늘이면 1920입니다.
  2. 2채널당 비트 심도를 넣습니다. 보통 이미지는 8비트(256계조)입니다.
  3. 3「띠가 사라지는 비트수」와 실제 띠 길이를 확인합니다.
  4. 4순서 디더의 문턱값 배열 크기를 바꿔 가며 유효 계조가 어떻게 늘어나는지 봅니다.
  5. 5미리보기 띠를 눈으로 견주어 봅니다. 오차 수치가 큰 쪽이 오히려 낫게 보이는 것을 확인할 수 있습니다.

자주 묻는 질문

입력의 단계 수가 출력의 계조 수보다 많기 때문입니다. 폭 1,920픽셀에 밝기가 곧게 오르는 그러데이션을 8비트(256계조)로 담으면 평균 일고여덟 픽셀마다 값이 한 칸씩 오르고, 그 사이는 완전히 같은 값이라 평평한 띠로 보입니다. 화면이 넓을수록 같은 비트 심도에서 띠가 넓어집니다.

계조 수가 그러데이션의 픽셀 폭 이상이어야 하므로 ⌈log₂(폭)⌉ 비트입니다. 1,920픽셀이면 11비트, 3,840픽셀이면 12비트입니다. 흔히 쓰는 8비트로는 256픽셀까지만 띠 없이 담을 수 있어, 넓은 하늘이나 그림자에서 띠가 보이는 것이 당연합니다. HDR 영상이 10비트 이상을 쓰는 이유이기도 합니다.

오히려 늘어납니다. 일부러 오차를 흩뿌리는 것이라 평균제곱오차는 그냥 반올림한 쪽보다 커집니다. 그런데도 눈에는 낫게 보이는 것은 사람 눈이 넓게 이어진 경계에는 예민하고 잘게 흩어진 잡음에는 둔하기 때문입니다. 그래서 이 문제는 수치 하나로 우열을 가릴 수 없으며, 이 계산기가 오차와 띠 길이를 함께 보이는 이유입니다.

이웃 픽셀을 보느냐가 다릅니다. 순서 디더(베이어)는 미리 정한 문턱값 배열을 되풀이해 얹으므로 이웃을 볼 필요가 없어 빠르고 결과가 언제나 같지만, 규칙적인 격자 무늬가 남습니다. 오차 확산(플로이드-스타인버그)은 버린 오차를 다음 픽셀로 넘겨 국소 평균을 보존하므로 무늬가 덜 눈에 띄지만, 앞의 결과가 뒤에 영향을 주어 병렬 처리가 어렵습니다.

계단 사이를 더 잘게 나눠 유효 계조가 늘어납니다. n칸짜리 배열이면 계조가 (계조 수 − 1) × n + 1로 늘어나므로, 8비트에 16칸 배열이면 4,081단계를 표현하는 셈입니다. 다만 배열이 커질수록 무늬의 주기도 길어져 격자가 더 눈에 띌 수 있어 무작정 키우는 것이 답은 아닙니다.

이미지를 받아 처리하지는 않습니다. 밴딩이 언제 생기는지를 계산하는 도구이며, 미리보기는 가로 한 줄짜리 그러데이션에 각 방법을 적용해 그린 것입니다. 실제 플로이드-스타인버그는 오차를 오른쪽·아래 네 이웃에 7/16·3/16·5/16·1/16으로 나누고 베이어 디더도 2차원 행렬을 쓰므로, 이 계산기의 1차원 모형과 세부 수치는 다릅니다.

전송되지 않습니다. 모든 계산은 브라우저 안에서 이뤄지고, 입력값은 이 기기에만 남습니다.

알아두면 좋은 점

  • 검증은 계산한 「띠가 사라지는 비트수」를 실제로 넣었을 때 같은 값이 이어지는 구간이 사라지는지, 한 비트 모자라면 다시 생기는지를 폭 64·100·256·500·1920에서 확인해 했습니다. 균등 양자화의 RMSE가 이론값 계단/√12에 수렴하는 것, 비트를 하나 늘리면 오차가 절반이 되는 것도 함께 대조했습니다.
  • 디더링은 평균제곱오차를 오히려 키웁니다. 이 계산기는 오차가 커지면서도 띠가 짧아지는 것을 함께 보이며, 어느 쪽이 나은지는 수치가 아니라 눈으로 판정할 문제입니다.
  • 가로 한 줄만 보는 1차원 모형입니다. 실제 플로이드-스타인버그는 오차를 네 이웃에 7/16·3/16·5/16·1/16으로 나누고, 여기서 쓰는 순서 디더의 문턱값은 2차원 베이어 행렬의 한 줄과 같은 비트 뒤집기 수열입니다.
  • 밝기값이 선형이라고 봅니다. 감마가 적용된 실제 화면에서는 어두운 쪽의 계단이 더 크게 느껴져 띠가 더 잘 보입니다.
  • 미리보기는 폭 256픽셀짜리 그러데이션을 같은 비트 심도로 담은 것입니다. 입력한 폭을 줄여 그린 것이 아니므로 띠 길이는 위의 수치와 다릅니다.

함께 보면 좋은 도구

마지막 검증: 2026년 9월 1일 · 결과는 참고용 추정치입니다.