사진을 픽셀 아트로

01

쓸 색을 먼저 고릅니다.

사진에는 수만 가지 색이 있지만 도트 그림은 16~32색으로 그립니다. 어떤 색을 남길지는 k-means++ 방식으로 사진에서 직접 뽑고, 두 색이 비슷한지 판단할 때는 RGB 대신 OKLab 좌표계에서 거리를 잽니다. 사람이 느끼는 색 차이에 더 가깝기 때문입니다.

02

없는 색은 점을 흩어 만듭니다.

팔레트에 없는 중간색은 디더링으로 표현합니다. Floyd–Steinberg와 Atkinson은 담지 못한 오차를 옆 픽셀로 넘기는 방식이라 자연스럽고, Bayer는 4×4 격자의 문턱값을 쓰는 방식이라 규칙적인 무늬가 남아 레트로한 느낌이 납니다. ‘클린’ 컨셉은 디더링을 아예 끕니다.

03

무거운 계산은 따로 돌립니다.

픽셀 수만큼 반복하는 계산이라 그대로 실행하면 화면이 멈춥니다. 그래서 변환은 Web Worker로 옮겨 별도 스레드에서 처리하고, 그동안에도 설정을 계속 만질 수 있게 했습니다.

04

먼저 줄이고 나중에 키웁니다.

원본 해상도에서 색만 줄이면 도트 그림이 되지 않습니다. 먼저 가로 칸 수를 크게 줄여 실제로 작은 그림을 만든 다음, 저장할 때 그 칸을 그대로 확대합니다. 칸 하나가 여러 픽셀이 되도록 확대하기 때문에 화면에서 봐도 격자가 또렷하게 남습니다. 줄이는 단계 없이 확대만 하면 그냥 흐릿한 사진이 됩니다.

05

확대할 때 색을 섞지 않습니다.

보통 이미지를 키우면 중간 색을 만들어 부드럽게 이어 줍니다. 그런데 도트 그림에서는 그 처리가 격자를 뭉개 버립니다. 그래서 확대 단계에서는 이웃 색을 섞지 않고 같은 색을 그대로 채우는 방식을 씁니다. 결과물을 다른 프로그램에서 다시 키울 때도 같은 설정을 써야 모양이 유지됩니다.

06

컨셉이 설정 묶음입니다.

인물과 풍경은 필요한 색 수와 디더링 강도가 다릅니다. 인물은 피부 계조가 뭉개지면 바로 어색해지고 풍경은 넓은 면적의 색 전환이 중요합니다. 값을 하나씩 조절하게 만들면 원하는 결과까지 오래 걸리므로, 자주 쓰는 조합을 컨셉으로 묶어 버튼 하나로 만들었습니다.

07

결과는 원본보다 작습니다.

도트 격자로 줄이는 과정에서 원본의 세부는 되돌릴 수 없게 사라집니다. 저장되는 파일의 크기는 확대 때문에 커 보이지만 담긴 정보량은 훨씬 적습니다. 원본을 대체할 수 있는 결과물이 아니므로 원본을 따로 보관해 두는 편이 좋습니다.

08

비교선을 남겨 두었습니다.

결과만 보여주면 무엇이 바뀌었는지 판단하기 어렵습니다. 원본과 결과를 한 화면에서 겹쳐 두고 경계를 움직일 수 있게 하면, 어느 부분이 살아남고 어느 부분이 사라졌는지 바로 보입니다. 설정을 고를 때도 이 비교가 있어야 판단이 빨라집니다.

09

입력 크기를 제한합니다.

픽셀 수만큼 반복하는 계산이라 아주 큰 사진을 넣으면 브라우저가 감당하지 못합니다. 그래서 파일 크기와 화소 수에 상한을 두고 그보다 크면 받지 않습니다. 처리 중에 멈춰 버리는 것보다 미리 거절하는 편이 낫다고 봤습니다.

10

올리는 방법을 세 가지 둡니다.

클릭해서 고르는 것 말고도 끌어다 놓거나 붙여 넣을 수 있습니다. 화면을 캡처해서 바로 붙여 넣는 경우가 많은데 그때마다 파일로 저장했다 다시 고르게 하면 번거롭습니다. 같은 일을 하는 경로를 여러 개 두는 것이 도구에서는 대체로 이득입니다.

11

결과를 저장해야 남습니다.

변환 결과는 브라우저 메모리에만 있고 사이트가 보관하지 않습니다. 페이지를 닫거나 새로 고치면 사라지므로 마음에 드는 결과가 나왔을 때 바로 저장해야 합니다. 보관하지 않는 것이 개인정보 측면에서는 안전하지만 실수로 잃기도 쉬운 구조입니다.