밤하늘이나 동굴이 나오는 게임 장면에서 매끈해야 할 배경이 줄무늬처럼 보인 적이 있다면, 그림이 깨진 게 아닙니다. 아주 어두운 동굴 벽을 위에서 아래로 서서히 밝아지게 그려 봤더니, 세로 1080칸 안에 쓸 수 있는 색이 21가지뿐이었습니다. 같은 색이 이어지는 띠 하나가 평균 51.4칸이나 됐다는 것을 의미하죠. 색연필 21자루로 벽 하나를 칠한 것과 비슷합니다.
이 글은 그 줄무늬가 왜 생기는지, 어떤 장면에서 더 심한지, 어떻게 지우는지를 숫자로 세어 본 기록이라고 할 수 있습니다. 참고로 어려운 말은 하나씩 풀어서 썼으니 걱정하지 않으셔도 됩니다.
색은 256단계뿐
컴퓨터 화면의 작은 점 하나(픽셀)는 빨강, 초록, 파랑 불빛 세 개를 섞어서 색을 냅니다. 불빛 하나의 세기는 0부터 255까지, 모두 256단계로만 정할 수 있죠. 이걸 8비트라고 부릅니다. 256단계면 충분해 보이는데, 아주 부드럽게 변하는 그림 앞에서는 모자랄 때가 있어요.
미끄럼틀과 계단을 떠올리면 쉬운데요. 하늘은 원래 미끄럼틀처럼 매끈하게 변하지만, 화면은 계단만 지을 수 있습니다. 계산해서 7.3이 나왔다면 화면은 7.3이라는 칸이 없으니 가장 가까운 7로 바꿔 버립니다.
이런 현상을 밴딩이라고 부릅니다. 띠가 생긴다는 뜻입니다. 위키백과의 색 띠 항목도 부드럽게 바뀌는 색을 보여 주기에 색 종류가 모자랄 때 생기고, 노을이나 하늘 같은 그라데이션에서 잘 보인다고 말해줍니다.
어두울수록 계단이 거칠다
같은 한 단계라도 높이가 다릅니다. 화면이 실제로 내는 빛의 양으로 계산해 보니, 어두운 쪽 값 10에서 11로 올라갈 때는 빛이 10.3% 늘어났습니다. 값 128에서 129로 갈 때는 1.7%, 가장 밝은 254에서 255로 갈 때는 0.9%였습니다. 일반적인 모니터가 쓰는 sRGB라는 색 규칙을 가정한 계산이죠.
캄캄한 방에서 촛불을 하나 더 켜면 확 밝아지지만, 환한 형광등 방에서는 촛불 하나가 티도 안 나는 것과 같다고 비유할 수 있습니다. 그래서 어두운 장면은 계단 한 칸이 더 높게 느껴집니다. 이 높이를 사람 눈이 몇 %부터 알아채는지는 재지 않았습니다. 다만 10%와 0.9%가 같은 크기의 계단일 리는 없었습니다.
하늘 다섯 장을 카운트해봤다
화면은 1920×1080으로 잡고, 위쪽 색에서 아래쪽 색으로 서서히 변하는 하늘을 다섯 장 만들어봤는데요. 한밤 하늘, 새벽 안개, 노을 하늘, 맑은 낮 하늘, 어두운 동굴을 만들어봤습니다. 색 값은 제가 임의로 정했습니다. 먼저 아주 부드러운 값을 계산하고, 그걸 256단계로 반올림한 뒤 화면 한가운데 세로 한 줄에서 같은 색이 몇 칸 이어지는지 세봤습니다.
결과는 다음과 같습니다. 어두운 동굴은 색이 21가지라서 띠 평균이 51.4칸이었고 가장 긴 띠는 54칸이었습니다. 한밤 하늘은 77가지, 14.0칸(가장 긴 띠 27칸)이었습니다. 새벽 안개는 157가지로 6.9칸, 맑은 낮 하늘은 226가지로 4.8칸, 노을 하늘은 301가지로 3.6칸이었죠. 색이 적게 바뀌는 장면일수록 계단 수가 모자라서 띠가 두꺼워지는 것을 확인할 수 있었습니다. 동굴은 색 값이 6에서 26까지, 겨우 20단계 사이에서 1080칸을 채워야 했던 셈이죠.
개인적으로는 낮 하늘보다 아무 색도 없어 보이는 까만 동굴이 훨씬 심하다는 점이 가장 눈에 들어왔습니다. 파랗고 화려한 하늘이 아니라 어둡고 색 폭이 좁은 장면이 줄무늬에 약한 거죠.
점을 섞으면 계단이 사라진다
줄무늬를 지우는 방법은 디더링이라는 방법입니다. 점을 흩뿌려 섞는다는 뜻이죠. 신문 사진이나 점으로 그린 그림을 가까이서 보면 점뿐인데, 멀리서 보면 중간 색으로 보이는 것과 같은 원리입니다. 7.3이라면 열 칸 중 일곱 칸은 7로, 세 칸은 8로 칠한다. 이렇게 하면 멀리서 보는 평균은 7.3에 가까워집니다.
두 가지로 해 봤습니다. 하나는 칸마다 무작위로 반올림을 흔드는 방식이고, 다른 하나는 8×8 규칙 무늬(베이어 행렬)를 쓰는 방식입니다. 같은 색이 이어지는 띠의 평균 폭은 무작위 방식에서 1.4칸, 동굴만 따로 보면 2.3칸이었고, 규칙 무늬 방식에서는 1.0칸에서 1.3칸이었습니다. 동굴에서 가장 길던 띠 54칸은 무작위 방식에서 20칸, 규칙 무늬 방식에서 6칸으로 줄었습니다. 한 게임 개발 블로그(애니소프테라 게임즈)도 같은 규칙 무늬를 색을 깎기 직전에 더해서 어두운 우주 배경의 계단을 없앤다고 소개합니다.
그래도 공짜는 아니었다
점을 섞는다고 무조건 더 정확해지지는 않습니다. 한 칸씩 정답과 비교하면 틀린 정도의 평균이 반올림은 0.29단계, 무작위 섞기는 0.50단계, 규칙 무늬는 0.41단계로 오히려 커졌습니다. 대신 16×16칸을 묶어서 평균을 내면(눈을 가늘게 뜨고 멀리서 보는 것과 비슷합니다) 달라집니다. 어두운 동굴은 0.20단계였던 오차가 무작위 섞기에서 0.03, 규칙 무늬에서 0.009로 줄었습니다. 새벽 안개는 반올림만 해도 0.06이라서, 무작위 섞기 0.03으로 두 배 줄어드는 데 그쳤죠.
한계도 분명한데요. 점이 만드는 자글자글한 느낌이 가까이서 얼마나 거슬리는지는 재지를 않았습니다. 사람 눈이 띠를 알아채는 기준도, 10비트 모니터나 HDR 화면도 다루지 않았죠. 게임 엔진이 이미 디더링을 쓰는지도 확인하지 못했습니다. 위의 블로그는 이미 8비트로 깎인 그림에 나중에 점을 섞어서는 잃어버린 부분을 되살릴 수 없다고 적고 있습니다. 색 다섯 장은 제가 정한 값이라서 실제 게임의 하늘과 다를 수 있다는 점도 한계입니다.
한 장으로 모아 보면
세 가지를 그림 하나에 모아봤습니다. 왼쪽은 색 한 단계가 바꾸는 밝기, 가운데는 하늘 다섯 장의 띠 폭, 오른쪽은 동굴 그라데이션을 12배 밝게 키워서 본 모습입니다.
오른쪽 그림에서 반올림만 한 줄은 계단 모양이 뚜렷하고, 점을 섞은 두 줄은 부드럽게 이어집니다. 또, 줄무늬는 그림이 깨져서 생기는 게 아니라 계단 수가 모자라서 생기는 겁니다. 그리고 어두운 곳은 같은 계단도 더 높습니다. 개인적인 생각으로 디더링은 계단을 없애는 게 아니라, 계단의 모서리를 눈이 알아채지 못하도록 흩어 놓는 일이었다는 것이 이번 글에서 깨달을 수 있는 점인 거 같습니다.