이미지 도트 변환

도트로 바뀌는 과정

세 단계를 거칩니다. 먼저 사진을 가로 수십 픽셀짜리로 아주 작게 줄입니다. 이때 여러 픽셀의 색이 하나로 뭉쳐지면서 잔털이나 미세한 무늬가 사라집니다.

다음으로 색 수를 줄입니다. 사진에는 보통 수만 가지 색이 들어 있는데, 이걸 몇 가지로 묶어야 손으로 찍은 그림처럼 보입니다.

마지막으로 다시 크게 확대합니다. 이때 브라우저의 부드럽게 늘리기 기능을 꺼야 합니다. 켜둔 채로 늘리면 색이 서로 번져서 그냥 흐릿한 사진이 됩니다. 도트가 각지게 남는 건 이 설정 하나 덕분입니다.

도트 수 고르기

가로 도트 수가 작을수록 그림에 가깝고, 클수록 원본에 가깝습니다. 사진이 무엇을 담고 있느냐에 따라 적당한 값이 달라집니다.

가로 도트 수	어울리는 사진
32	아이콘, 단순한 로고. 형태만 남습니다
48 · 64	인물 얼굴, 캐릭터. 도트 느낌이 가장 잘 삽니다
96 · 128	풍경처럼 넓은 사진. 무엇을 찍었는지가 남습니다

한 가지 값이 정답은 아니니 몇 개를 눌러보고 고르시면 됩니다. 다만 인물이 화면에서 작게 나온 사진이라면 먼저 얼굴 위주로 잘라내고 넣는 편이 낫습니다. 도트 수는 화면 전체에 걸리는 값이라, 얼굴이 작으면 얼굴에 배정되는 칸도 몇 개 안 됩니다.

색 수와 팔레트

색 수를 줄이면 비슷한 색들이 한 덩어리로 묶여 면이 넓어집니다. 16색 언저리가 사진과 도트 그림 사이 어디쯤이고, 4색이나 8색으로 내리면 원본을 알아보기는 어려워지는 대신 그림 쪽으로 확 기웁니다.

원본색을 고르면 사진에 많이 쓰인 색을 골라 팔레트를 만듭니다. 색 공간을 가장 넓게 퍼진 방향에서 계속 반으로 잘라 나가는 방식(메디안 컷)이라, 넓게 깔린 하늘색 같은 색이 먼저 자리를 차지합니다.

나머지 셋은 정해진 색만 씁니다. 흑백과 세피아는 밝기에 따라 계단을 만들고, 게임보이는 초기 게임보이 화면의 녹색 네 가지만 씁니다. 이 셋은 색 수 설정을 따르지 않습니다.

디더링은 무엇인가

색 수를 줄이면 그러데이션이 있던 자리에 경계선이 생깁니다. 하늘처럼 서서히 변하는 면이 띠 모양으로 끊기는 것입니다. 디더링은 경계 부근에서 두 색을 규칙적으로 섞어 찍어 그 띠를 흩뜨리는 방법입니다.

이 도구는 베이어 행렬을 쓰는 방식이라 격자 무늬가 눈에 보입니다. 옛날 게임기 화면에서 보던 그 무늬입니다. 사진 쪽에 가깝게 만들고 싶으면 켜고, 면이 깔끔하게 떨어지는 그림을 원하면 꺼두시면 됩니다.

PNG로만 저장하는 이유

JPG는 사진을 위한 형식이라 사람 눈에 잘 안 띄는 미세한 차이를 버리면서 용량을 줄입니다. 그런데 도트 그림은 그 미세한 차이가 아니라 각진 경계 자체가 내용입니다. JPG로 저장하면 도트 테두리에 지저분한 얼룩이 끼고, 애써 4색으로 줄인 그림에 없던 색이 다시 생깁니다.

PNG는 픽셀을 그대로 보존하고, 색 수가 적을수록 오히려 용량이 작아집니다. 도트 그림에는 이쪽이 맞아서 저장 형식을 PNG 하나로 두었습니다.

알아두실 점

• 확대는 정수 배율로만 합니다. 1.5배 같은 값으로 늘리면 어떤 도트는 두 칸, 어떤 도트는 세 칸이 되어 크기가 들쭉날쭉해집니다. 그래서 저장 크기는 원본과 정확히 같지 않고 가장 가까운 배수가 됩니다
• 투명한 부분은 그대로 남습니다. 다만 반투명한 가장자리는 투명하거나 불투명하거나 둘 중 하나로 정리합니다. 반투명이 남아 있으면 도트 윤곽이 흐려지기 때문입니다
• 너무 어둡거나 대비가 낮은 사진은 색을 줄였을 때 형태가 뭉개집니다. 밝고 대비가 뚜렷한 사진이 잘 나옵니다
• 움직이는 GIF는 첫 장면만 남습니다. 한 장의 그림으로만 나옵니다
• 도트 크기 그대로 저장한 파일을 나중에 다른 곳에서 키우면 대개 흐리게 늘어납니다. 바로 쓸 이미지가 필요하면 원본 크기 쪽을 고르세요