# 디더링(dithering) – Part 1 > Clean Markdown view of GeekNews topic #24029. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=24029](https://news.hada.io/topic?id=24029) - GeekNews Markdown: [https://news.hada.io/topic/24029.md](https://news.hada.io/topic/24029.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2025-10-31T04:34:08+09:00 - Updated: 2025-10-31T04:34:08+09:00 - Original source: [visualrambling.space](https://visualrambling.space/dithering-part-1/) - Points: 3 - Comments: 2 ## Topic Body - 흑백 **픽셀 배열로 여러 단계의 명암을 시각적으로 재현**하는 원리를 설명 - **디더링(dithering)** 은 실제보다 더 많은 색상이나 명암 단계를 **착시로 표현**하는 기술 - **Ordered dithering** 방식에서는 **임계값 맵(threshold map)** 을 사용해 각 픽셀의 밝기를 기준으로 흑백을 결정 - 이 과정에서 **픽셀 밀도 변화**가 회색조의 느낌을 만들어내며, 원본 이미지의 형태를 유지 - 글은 디더링의 기본 개념을 다루는 3부작 중 첫 번째로, 이후 **임계값 맵 생성 알고리듬**과 **오차 확산(error diffusion)** 을 다룰 예정 --- ### 디더링의 개념과 원리 - 디더링은 **제한된 색상으로 더 많은 색조를 표현**하기 위한 시각적 기법 - 흑백 픽셀을 특정 패턴으로 배열해 **여러 단계의 회색조 착시**를 생성 - 실제 색상 수를 늘리지 않고 **시각적 다양성**을 확보 - 글에서는 **회색조 이미지**를 예시로 사용 - 흑백만 표시 가능한 화면에서 각 픽셀을 **가장 가까운 색상(검정 또는 흰색)** 으로 변환 - 단순 변환 시 **명암 경계가 거칠고 세부 그림자 정보가 손실**됨 - 디더링은 일부 픽셀을 **의도적으로 반대 색상으로 바꾸어** 부드러운 명암 전환을 구현 - 어두운 영역에는 검은 픽셀 밀도를 높이고, 밝은 영역에는 흰 픽셀 밀도를 높임 - 결과적으로 **픽셀 밀도 차이**가 회색조의 착시를 형성 ### Ordered Dithering과 임계값 맵 - Ordered dithering은 **임계값 맵(threshold map)** 을 사용하는 단순한 디더링 방법 - 임계값 맵은 0(가장 어두움)에서 1(가장 밝음)까지의 **밝기 값 그리드**로 구성 - 각 입력 픽셀의 밝기를 해당 위치의 임계값과 비교 - 밝기가 임계값보다 크면 흰색, 작으면 검정으로 설정 - 이 과정을 모든 픽셀에 반복해 **흑백 패턴 이미지** 생성 - 임계값 맵은 입력 이미지의 밝기 분포에 따라 **적절한 흑백 밀도 패턴**을 출력하도록 설계 - 밝은 영역은 흰색 비율이 높고, 어두운 영역은 검정 비율이 높음 - 이러한 밀도 차이가 **멀리서 볼 때 회색조처럼 보이는 효과**를 만듦 ### 대형 이미지 처리와 시각적 효과 - 큰 이미지를 디더링할 때는 **임계값 맵을 확장**해 전체 이미지 크기에 맞춤 - 각 픽셀의 밝기를 임계값과 비교해 흑백으로 변환하는 동일한 원리 적용 - 결과적으로 이미지는 **두 가지 색상만 사용하지만**, 원본의 명암 구조를 유지 - 색상 수는 줄었지만 **픽셀 밀도 변화로 시각적 세부 표현 유지** ### 디더링의 의미와 시리즈 구성 - 디더링은 **색상을 추가하는 것이 아니라 제거하면서 시각적 다양성을 만드는 기술** - 작성자는 이를 “가진 것으로 최대한을 만들어내는 과정”으로 표현 - 이번 글은 3부작 중 첫 번째로, **기초 원리와 시각적 이해**에 초점을 맞춤 - 다음 글에서는 **임계값 맵 생성 알고리듬**을, 마지막 글에서는 **오차 확산(error diffusion)** 을 다룰 예정 - 시리즈는 디더링의 다양한 **알고리듬적 접근과 시각적 결과의 차이**를 탐구할 계획 ### 작성자 및 프로젝트 소개 - **visualrambling.space**는 Damar가 운영하는 개인 프로젝트 - 다양한 주제를 **시각적으로 탐구하고 설명하는 인터랙티브 콘텐츠** 제작 - 다루는 주제에는 **Three.js, WebGL, 디더링, 시각화, 인터랙티브 학습** 등이 포함 - Damar는 X/Twitter 계정(@damarberlari)을 통해 **새로운 비주얼 아티클**을 지속적으로 공유 예정 ## Comments ### Comment 45678 - Author: neo - Created: 2025-10-31T04:34:09+09:00 - Points: 1 ###### [Hacker News 의견](https://news.ycombinator.com/item?id=45750954) - 이건 **halftone** 기법임. 즉, 실제 팔레트보다 더 많은 색이 있는 것처럼 보이게 하는 방식인데, 내가 보기엔 **dithering**은 아님 dithering은 팔레트가 충분히 크지 않아 생기는 **밴딩(banding)** 을 없애는 기술이라고 생각함 여기서 보여준 halftone은 2색 팔레트를 약 20색 정도로 확장하지만 여전히 밴딩이 뚜렷함 이런 밴딩은 색을 훨씬 더 많이 쓰거나(예: 256단계 그레이스케일, RGB라면 256³) 혹은 dithering으로 제거할 수 있음 아마 마지막에 예고된 **error diffusion** 기법이 내가 말하는 그 부분일 것 같음 dithering의 핵심은 **노이즈**인데, 이 데모에는 노이즈가 전혀 없음. 모든 게 결정적(deterministic)임 그래도 프레젠테이션 자체는 정말 멋졌음 - **error-diffusion dithering**이나 **blue-noise/white-noise 패턴**을 사용하는 dithering도 사실 결정적임 일반적으로 노이즈는 양자화(quantization) 과정에서 생기며, dithering은 그 노이즈를 **형태 조정**하는 기술임 여기서 사용된 **Bayer-matrix ordered dithering**은 노이즈를 고주파 영역에 집중시켜 눈에 덜 띄게 하지만, 저주파 영역에는 여전히 밴딩이 남음 Dave Long이 말했듯이 **Bresenham 선 알고리즘**도 일종의 dithering으로 볼 수 있음. 신호가 밝기가 아니라 펜의 위치인 셈임 관련 논의가 며칠 전에도 있었음 — [이 스레드](https://news.ycombinator.com/item?id=45728231) 참고 - 네가 말한 걸 보고 찾아봤는데, 이런 기법도 여전히 **ordered dithering**으로 불린다고 함 [위키피디아 문서](https://en.wikipedia.org/wiki/Ordered_dithering) - 밴딩을 줄이거나 없애는 **dithering**은 정말 인상적임 예전에 **NeXT** 컬러 머신은 12비트(채널당 4비트) 디스플레이였지만, dithering을 잘 쓰면 24비트 **true color**처럼 보였음 - 나는 **픽셀 아티스트**인데, 이 기법을 쓰는 사람들은 전부 dithering이라고 부름 - 이름 그대로 **ordered dithering**이라 부름 - Daniel Shiffman의 Coding Train 영상 두 개를 추천함 [Turning Images into Dots: The Magic of Dithering](https://www.youtube.com/watch?v=0L2n8Tg2FwI) [Coding Challenge 181: Weighted Voronoi Stippling](https://www.youtube.com/watch?v=Bxdt6T_1qgc) - 흥미로운 주제였음. 애니메이션도 좋았고 노력의 흔적이 보였음 하지만 이런 **인터랙티브 프레젠테이션**은 전통적인 블로그 글보다 읽기 어려움 글의 구조가 한눈에 안 들어오고, 문장 단위로 읽어야 해서 빠르게 훑어보기 힘들었음 - 이건 블로그보다는 **비디오에 가까운 형식**으로 보는 게 맞을 듯함 사용자가 속도를 조절할 수 있는 **인터랙티브 비디오** 느낌임 나도 평소엔 텍스트를 선호하지만, 이런 형식은 괜찮은 변주라고 생각함 - 나는 여러 디자인 프로젝트에서 **ordered**와 **error diffusion dithering**을 시각 언어로 사용했음 특히 **테크/컴퓨터/블록체인** 관련 작업에서 정적 또는 애니메이션 형태로 활용했음 이런 오래된 기술에는 묘한 **따뜻함과 향수**가 있어서 새로운 아이디어와 결합하기 좋음 내 작업 예시는 인스타그램에 있음: [D.Y.O.R.](https://www.instagram.com/p/DH1AjFzi3c6) / [Printed](https://www.instagram.com/p/Cjfzy23sCOg) / [Titles](https://www.instagram.com/p/DHITpNYiWtF) / [Dithering 실험](https://www.instagram.com/p/CYO_h9Yh18e/) - 좋은 링크였음. 나도 **레트로 스타일 포트폴리오**를 만들며 **retro shader**를 실험 중임 내 사이트 [olsz.me](https://olsz.me) 참고 - 예전에 두 가지 dithering 간 전환을 만든 적 있음 [GitHub 프로젝트](https://github.com/bntre/dithering-gradient-py) - 이걸 정말 좋아하고 싶었는데, **움직이는 패턴 위의 텍스트**를 읽는 게 너무 힘들었음 - 나도 7초 정도 버텼음 - 시각화 방식은 멋졌지만 **threshold map** 부분이 이해되지 않았음 맵을 어떻게 만들고 임계값을 어떻게 정하는지 설명이 부족했음 저자에게 너무 당연해서 생략된 건지 모르겠음 - **ordered threshold map**을 만드는 건 꽤 복잡한 아이디어가 필요함 핵심은 ‘threshold’ 개념을 기억하는 것임. 회색 픽셀이 임계값을 기준으로 흑백으로 바뀜 예를 들어 `dithered_color = (raw_color > threshold_color) ? white : black` threshold를 랜덤으로 써도 됨. 평균값이 0.5가 되면 원래 회색을 잘 근사함 중요한 건 흰 픽셀이 점점 늘어날 때 서로 붙지 않게 하는 것임. 50% 회색은 **체커보드 패턴**, 25%는 2x2 중 한 픽셀만 흰색 등으로 설계할 수 있음 이런 실험은 **ShaderToy**에서 직접 해보면 재미있음 - 2편에서 threshold map을, 3편에서 **error diffusion dithering**을 다룬다고 함 - 시각화는 아름다웠지만 나도 threshold map 부분이 헷갈렸음 처음엔 ‘이진 이미지’를 입력으로 쓰는 줄 알았는데, 나중엔 회색 영역을 입력으로 쓰더라 - 다음 편은 **드래곤볼 Z 예고편**처럼 느껴졌음 - **dithering**은 10비트 색상을 지원하지 않는 모니터에서도 충분히 10비트처럼 보이게 함 밴딩이 사라지고 노이즈가 색 깊이 부족을 가려줌 즉, 현대에도 유용한 기술임. 단순히 **레트로 아트**용이 아님 - 맞음. 하지만 대부분의 소프트웨어는 이걸 하지 않음 사람들은 여전히 **팔레트 dithering**만 떠올림 8비트/채널은 충분하지 않음. 감마 보정 때문에 실제로는 약 220단계 정도임 나는 이런 문제를 해결하려고 **Rust crate** [dithereens](https://crates.io/crates/dithereens)를 유지보수 중임 README 상단의 그래디언트를 보면 왜 중요한지 바로 알 수 있음 - 현대 인쇄에서도 dithering을 씀 고비트 이미지를 10비트나 8비트로 줄일 때 **랜덤 dithering**이 충분히 효과적임 **Photoshop**은 16비트→8비트 변환 시 기본적으로 dithering을 적용함 다른 소프트웨어는 그렇지 않아서, 큰 포스터를 인쇄할 때 밴딩이 생기면 바로 깨닫게 됨 - **LCD 패널**은 오래전부터 **temporal dithering**을 사용해 더 높은 비트 깊이를 흉내냄 6비트 TN 패널을 8비트처럼 보이게 했고, 지금은 **HDR-10**에도 쓰임 이 방식은 픽셀을 빠르게 깜빡여 색을 섞는 단순한 알고리즘임 [Frame rate control 위키 문서](https://en.wikipedia.org/wiki/Frame_rate_control) - 프레젠테이션 형식이 훌륭했고 다음 파트도 기대됨 예전에 **ZX Spectrum Raytracer**에서 **ordered dithering**을 써봤는데, 구현이 간단하고 결과가 좋았음 [프로젝트 링크](https://gabrielgambetta.com/zx-raytracer.html#fourth-iteration-light-just-the-one) 80년대에는 성능 문제로 잘 안 썼던 듯함. 90년대 **Windows 3.1**이나 **Monkey Island VGA** 배경에서는 본 기억이 있음 - 멋진 데모였지만, dithering을 “더 많은 색조의 **환상(illusion)** ”이라 부르는 건 정확하지 않은 것 같음 dither된 이미지를 **저역통과 필터**로 처리하면 실제로 그 중간 색조가 존재함 마치 **클래스 D 앰프**가 펄스 신호를 내보내지만, 필터 후엔 실제 아날로그 음이 되는 것처럼 결국 우리의 시각과 거리 자체가 그 필터 역할을 하는 셈임 - 그래도 나는 그걸 **환상**이라 부름 주의 깊게 보면 실제로 그 색이 존재하지 않음을 알 수 있음 흑백 픽셀만으로 회색을 인식하지만, 동시에 그게 착시임을 인지할 수 있음 그래서 ‘illusion’이라는 표현이 맞다고 생각함 ### Comment 45697 - Author: chinnotching - Created: 2025-10-31T16:04:27+09:00 - Points: 1 - Parent comment: 45678 - Depth: 1 텍스트는 빼고, 영상만 강당에서 강의한다는 인터렉티브 비디오로의 접근으로, 강단을 찢어버릴정도의 폭풍간지 아이템입니다. 이미지 그레이스케일을 3d로 레이어화 시켜 보여주는 장면은 굉장히 친절한 설명이라 생각 됩니다