다시 보이는 디더링
최근 SNS에 흐르는 피드들을 살펴보다보니 흥미로운 현상이 있었습니다. 평소에 취미삼아 많은 UI/UX 관련 계정들을 팔로우 해두고 작업물들을 보며 이런저런 영감을 받는 편인데, 최근에 올라오는 웹 또는 그래픽 작업들에 디더링이 포함된 작업들이 눈에 띄기 시작한 것입니다. 실제로 구글 트렌드를 살펴보면 지난 몇년간 꾸준히 디더링에 대한 관심도가 증가해왔던 것을 볼 수 있습니다.
2020년부터 2025년까지의 구글 트렌드
물론 아직까지도 아주 매끈한 그래픽들이 피드의 대부분을 차지하는만큼 제가 직관적으로 느낀 이 흐름은 주류로 보기는 어렵습니다. 하지만 80년대 신스웨이브 스타일을 포함하는, 즉 레트로 트렌드를 포착한 이런 아티클들을 보면 제가 느낀 흐름이 아주 잘못된 것은 아닌 듯 합니다. 다만 저는 디더링이라는 특정한 질감에 집중했던 것이고 실제로는 더 큰 트렌드 속에 있었던 것이지요.
이처럼 처음엔 요즘 유행하는 레트로 트렌드의 한 축이겠거니 했지만, 단순히 그렇게 치부하기에는 좀 더 생각해볼만한 지점들이 있었습니다. 그리고 그 지점들은 디더링이 갖는 특성들을 더 탐구해보면 다른 사람들과도 공유할만한 흥미로운 내용이 될 수 있겠다는 생각이 들어 이 글을 써보기로 했습니다.
요즘 X에서 자주 눈에 띄는 디더링 관련 작업물들
디더링이란 무엇인가
그렇다면 디더링이란 무엇일까요? 위키피디아에 따르면 디더링(Dithering)이란 제한된 색을 이용하여 음영이나 색을 나타내는 것이라 설명합니다. 쉽게 설명하면 색이 부족한 환경에서 픽셀을 섞어 배치해 눈속임으로 다양한 색을 만들어내는 기술인 것이지요.
현실 세계의 색상을 디지털로 옮기는 과정에서 자연스럽게 표현 가능한 색상이 줄어들 수 밖에 없는데, 이 처리 과정을 양자화라고 부른다고 합니다. 그리고 이 양자화 과정에서 발생하는 밴딩 패턴(띠처럼 색상 그룹이 나뉘어지는 현상) 등의 시각적인 거친 표현들을 자연스럽게 보이도록 하는 것이 디더링의 역할이라고 볼 수 있겠습니다.
과거 16색, 256색만 사용할 수 있던 시절의 고전 게임들을 기억하시나요? 마치 점묘법처럼 픽셀을 배치하여 묘한 입체감으로 몰입감을 주던 고전 게임들은 이 디더링 기법 덕분에 단조로운 화면에서도 풍부한 색감과 깊이감을 표현할 수 있었습니다. 물론 최근 게임에서도 3D 최적화 및 의도한 시각 효과 연출을 위해 사용되고 있는 것으로 보입니다.
흥미로운 점은 색표현이 자유로워진 현재도 디더링이 우리 일상에서 자주 쓰인다는 점인데요, 우리가 메신저나 커뮤니티에서 큭큭대며 공유하는 GIF 움짤이 그 예입니다. GIF 포맷은 최대 256색만 지원하기 때문에, 영상을 변환 하는 과정에서 색을 줄이는 동시에 디더링이 적용되어야 자연스러운 화면을 표현할 수가 있는 것입니다.
미드저니 홈페이지
최근에는 아스키(ASCII) 아트를 활용한 사례도 많이보이는데, 문자의 명암과 밀도를 이용해 이미지를 표현한다는 점에서 디더링과 닮아 있습니다. 다만 정확히 디더링의 하나라기보단, 디더링적인 원리를 차용한 표현 방식에 가깝다고 보는 편이 좋을 것 같습니다.
디더링 기법
개념적인 내용을 살펴보았으니 실제 디더링을 표현하는 기법들에 대해서도 알아보면 좋겠습니다. 디더링을 만드는데는 여러 알고리즘이 있으나 처리 방식에 따라 크게 평균 디더링(임계값 디더링), 순차적 디더링, 그리고 오차 확산 디더링으로 나누어 볼 수 있습니다.
우선 예시 이미지를 하나 준비했습니다. 원리를 더 쉽게 이해하기 위해 먼저 이 이미지를 그레이스케일한 뒤 그 이미지를 기준으로 각 디더링 기법을 적용하며 살펴보겠습니다.
원본(640x360) / Unsplash 의 Miltiadis Fragkidis
그래이스케일(640x360) / Unsplash 의 Miltiadis Fragkidis
그리고 공통적으로 표현할 색상의 레벨을 10단계로 정해보겠습니다. 이는 0부터 255의 색상값을 10개의 레벨로 나누어 색이 제한된 환경을 구성하는 것입니다.
10단계 색상 레벨을 구분
평균 디더링(임계값 디더링)
먼저 가장 단순한 방법은 각 픽셀의 밝기나 색상 값을 미리 정해둔 단일 임계값과 비교해, 그 값이 크면 한 가지 색상으로, 작으면 다른 색상으로 변환하는 임계값 디더링 방식입니다. 이 방법은 계산이 매우 빠르고 간단하다는 장점이 있지만, 결과적으로 규칙적인 패턴이 드러나거나 이미지의 계조 표현(이미지에서 가장 어두운 부분부터 가장 밝은 부분까지의 명암 단계)이 거칠게 처리되어 전체적인 품질이 떨어지는 단점이 있습니다.
평균 디더링이 이뤄지는 순서는 다음과 같습니다.
- 이미지를 픽셀 블록으로 구획화합니다. 이 블록의 크기가 이미지를 전체적으로 부드럽게 하는 기준이 됩니다.
2x2 블록으로 구성한 예 - 각 블록 내 픽셀의 색상값을 확인합니다.
- 각 블록 내 픽셀의 평균값을 계산합니다.
- 10개 색상 레벨에 가까운 값으로 변환합니다. 나머지 블록도 동일하게 처리합니다.
위 과정을 적용한 결과는 다음과 같습니다. 확실히 이미지를 표현하는 색상의 수는 줄어들었으나 표현이 너무 거칠게 보입니다.
2x2 픽셀 블록
1x1 픽셀 블록
순차적 디더링
순차적 디더링은 임계값 디더링의 한계를 보완하기 위해 고정된 패턴, 보통 ’바이어 행렬(Bayer matrix)’을 활용해 각 픽셀마다 다른 임계값을 적용하는 방식입니다. 이 기법은 규칙적인 패턴을 통해 계조 표현을 개선하면서, 단순 임계값 디더링보다 훨씬 좋은 품질을 제공하고 오차 확산 디더링보다 계산 속도가 빠르다는 장점이 있습니다. 다만 패턴이 눈에 띄게 드러날 수 있고, 오차 확산 방식에 비해 결과가 덜 자연스럽다는 단점이 있습니다.
디더링이 적용되는 과정을 소개하기 전에 바이어 행렬을 간단히 소개하자면, 바이어 행렬은 1973년 브루스 바이어가 개발한 4×4 숫자 패턴입니다. 0부터 15까지의 숫자들이 마치 무작위로 배치된 것 같지만, 수많은 실험을 통해 찾아낸 시각적으로 자연스러운 최적의 조합이라고 합니다. 바이어 행렬을 이용한 순차적 디더링은 이 패턴을 활용하여 자연스러운 중간톤을 표현하게 됩니다.
4×4 바이어 행렬 (참고용)
| 0 | 8 | 2 | 10 |
| 12 | 4 | 14 | 6 |
| 3 | 11 | 1 | 9 |
| 15 | 7 | 13 | 5 |
- 각 픽셀의 개별 색상값을 확인합니다.
- 각 픽셀 위치에 해당하는 바이어 값을 매핑합니다.
- 바이어 값으로 노이즈를 생성하여 원본에 적용합니다.
- 조정된 값을 10개 색상 레벨로 변환합니다.
이때 기본 바이어 값에 노이즈 강도 값을 추가해서 표현하고자하는 적당한 수치를 찾을 수 있습니다. 이렇게 적용된 결과는 다음과 같습니다.
오차 확산 디더링
오차 확산(Error-Diffusion) 디더링은 한 픽셀의 색상을 양자화할 때 발생하는 오차를 계산해 아직 처리되지 않은 주변 픽셀에 분산시키는 방식으로, 이를 통해 주변 픽셀의 값을 보정하며 전체적인 이미지 품질을 높입니다. 대표적으로 플로이드-스테인버그(Floyd-Steinberg) 알고리즘이 잘 알려져 있으며, 이 기법은 이미지의 연속적인 색조 변화를 가장 자연스럽게 표현하고 규칙적인 패턴으로 인한 인위적인 느낌이 적다는 장점이 있습니다. 다만 주변 픽셀의 값을 참조해야 하므로 다른 방식에 비해 계산 속도가 느리다는 단점이 있습니다.
여기서는 플로이드-스테인버그 알고리즘을 기준으로 디더링 과정을 살펴보겠습니다. 이 방식에서는 각 픽셀에서 발생하는 오차를 주변의 4군데로 분배하고, 분배 패턴은 다음과 같습니다.
| 현재 픽셀 | 7/16 | |
| 3/16 | 5/16 | 1/16 |
- 이미지를 좌상단에서 우하단으로 순차적으로 처리합니다. 각 행은 왼쪽에서 오른쪽으로 진행하며, 이미 처리된 픽셀로는 되돌아가지 않습니다.
- 현재 픽셀의 그레이스케일 값(0-255)에 이전 픽셀들로부터 전달받은 누적 오차를 더합니다. 이 조정된 값을 10개 색상 레벨 중 가장 가까운 값으로 변환합니다.
- 양자화 과정에서 발생한 차이를 오차로 계산합니다.
- 계산된 오차를 인접한 미처리 픽셀 4곳에 정해진 비율로 분배합니다.
- 이미지 가장자리에서는 오차를 분산할 픽셀이 없는 경우가 발생합니다. 이때는 미미한 차이로 보고 생략합니다.
이러한 방식으로 디더링을 적용한 결과는 다음과 같습니다. 확실히 앞선 두 방식에 비해 패턴이 덜 드러나면서도 자연스럽게 표현이 된 것을 확인할 수 있습니다.
요즘, 왜 디더링일까?
다시 처음으로 돌아가서 왜 요즘 디자인에 디더링이 많이 등장하는지 생각해봤습니다. 색 표현에 제약이 없는 시대이니만큼 기술적인 문제로보긴 어렵습니다. 의도가 있다면 디더링이 가지는 특성을 이용해 어떤 느낌이나 상징으로 담아내기 위함이겠지요. 그리고 디더링이 표현할 수 있는 것들이 지금의 시대가 갖는 특성들과 무관하지 않은 것 같습니다.
첫째, 노이즈의 시대
생성형 AI는 노이즈를 통해 결과물을 도출합니다. Stable Diffusion이나 Midjourney 같은 도구들은 무작위 노이즈에서 시작해서 점진적으로 이미지를 만들어갑니다. 디더링 역시 노이즈가 본질적인 역할을 합니다. 그런 측면에서 노이즈는 AI 시대를 나타내는 상징으로 활용하기에 적합해 보입니다.
둘째, 경계를 흐리는 특성
디더링은 본질적으로 경계를 흐리고 형태를 입체적으로 표현하는 기술입니다. 명확한 구분선 대신 점진적인 전환을 만들어냅니다. 지금 우리가 살고 있는 시대 역시 모든 것의 경계가 흐려지고 있습니다. 디지털과 물리적 세계, 인간과 AI, 개발자와 디자이너 경계가 점점 모호해지고 있지요. 디더링은 이런 전환, 또는 전환을 도와주는 서비스를 표현하기에 적절한 메타포가 될 수 있을 것 같습니다.
셋째, 불완전함에 대한 갈망
어쩌면 모든 것이 4K, 8K로 선명해지고 표현에 제약이 거의 없어진 시대에, 오히려 불완전함과 제약에서 나오는 향수가 생기는 것 같습니다. 특히 AI가 생성하는 특유의 빤딱빤딱한 느낌의 이미지들 사이에서, 불완전하고 거친 이미지는 유독 눈에 들어오게 됩니다. 아직까지는 AI에게 적당한 자리만 내주고, 인간다움을 유지하고 싶은 우리들의 마음을 건드리는 것이지요. 이런 인간다운, 불완전함에 대한 갈망을 잘 상징화한 것이 디더링이 아닐까하는 생각도 듭니다.
디더링적 인간
한편, Dither 라는 단어를 찾아보니, 망설이다, 초조하다란 뜻을 갖고 있었습니다. AI가 많은 것을 대체할 거라는 이야기가 쏟아져나오고, 경제는 IMF때보다 더 심각하다는 요즘, 어쩌면 많은 사람들의 마음에는 작은 ‘디더링’ 하나쯤은 품고 있을 것 같습니다.
저 역시 디자인에서 개발로 넘어왔다보니 커리어 초반에는 “나는 디자이너인가, 개발자인가?”라는 질문을 자주 던졌습니다. 역할이 더 명확하게 분리되어 있던 당시에는 더더욱 정체성에 혼란을 느꼈던 것이지요.
하지만 지금은 그 애매함을 다르게 바라봅니다. 디더링이 제한된 색상으로 더 풍부한 표현을 만들어내는 것처럼, 저 역시 디자인적 사고와 개발적 구현을 오가며 저만의 시각과 방식을 고민할 수 있었다고 생각합니다.
물론 아직도 부족함이 많습니다만 점묘법 화가가 하나하나의 점을 찍어가며 전체 그림을 완성하듯, 저 역시 그 점묘적 과정을 통해 나만의 결과물을 만들어가고 있는 중입니다. 그런 측면에서 저 자신을 디더링적 인간이라 표현해볼 수 있을 것 같습니다.
마무리
지금까지 최근들어 온라인에서 포착되는 디더링 트렌드에서 시작해서 디더링의 정의와 표현 방법, 그리고 나 자신까지 돌아보는 거창한 시간을 가져보았습니다.
문득 얼마 전 한 유튜브 채널에서 카이스트 김대식 교수님이 등장하신 콘텐츠가 떠오릅니다. 그리고 교수님은 다가올 AGI시대 우리는 무엇을 준비해야하나요? 라는 질문에 다소 충격적인 다음과 같은 답변을 남겼습니다.
“앞으로 5-10년간은 버킷리스트를 하세요.”
이것은 상상못할 정도로 큰 변화가 우리를 기다리고 있을 것이라는, 마치 지금까지 우리가 알던 세상이 곧 끝난다는 의미로 들립니다. 그러나 10년 뒤에도 여전히 나는 나로 살아가며 지금과 다르면서도, 또 비슷한 고민들을 해나가고 있지는 않을까요?
세상이 변하더라도 두 간극을 메우는 디더링처럼, 변화하는 세상에서 내가 만드는 결과물들이 문제를 해결하고, 사랑을 채우고, 더 나은 일상을 만드는데 기여하는 삶을 살아가길 희망하며 글을 마칩니다.
참고
https://en.wikipedia.org/wiki/Dither
https://en.wikipedia.org/wiki/Ordered_dithering
https://en.wikipedia.org/wiki/Error_diffusion
https://hbyacademic.medium.com/how-to-deceive-your-eyes-image-dithering-172966d372b0
https://www.leadtools.com/help/sdk/v20/dh/to/introduction-color-resolution-and-dithering.html
Average Dithering / VISGRAF LAB, IMPA
Ordered Dithering / VISGRAF LAB, IMPA