아이콘이 흐릿해 보이는 이유는 0.5px이었다

작은 앱 화면에 쓸 아이콘을 직접 그려 보다가 이상한 걸 겪었다. 분명히 같은 두께로 그렸는데 어떤 아이콘은 또렷하고 어떤 건 뿌옇다. 확대해서 보면 멀쩡한데 100%로 보면 흐리다. 원인을 찾는 데 한참 걸렸고, 결론은 허무하게도 좌표가 0.5만큼 어긋나 있었다는 것이다.

선은 좌표를 중심으로 그려진다

벡터에서 선은 좌표를 가운데에 두고 양쪽으로 두께의 절반씩 퍼진다. 그래서 선 두께와 좌표의 조합에 따라 화면 픽셀에 걸치는 방식이 달라진다.

두께 2px, 좌표가 정수(예: x=12): 11~13 구간을 차지해서 픽셀 두 칸을 꽉 채운다. 또렷하다.
두께 1px, 좌표가 정수(예: x=12): 11.5~12.5 구간이라 픽셀 두 칸에 절반씩 걸친다. 흐려 보인다.
두께 1px, 좌표가 x=12.5: 12~13 구간이라 한 칸을 정확히 채운다.

즉 두께가 홀수면 좌표를 0.5 단위로, 짝수면 정수로 맞춰야 한다. 내 아이콘은 1.5px 선을 쓰면서 좌표는 정수에 올려 두었으니 어디서든 흐릿할 수밖에 없었다. 두께를 2px로 바꾸고 좌표를 정수에 정렬하니 거짓말처럼 선명해졌다.

24px 격자와 여백

아이콘은 24x24 캔버스에 그리되, 가장자리에서 2px 정도 안쪽의 20x20 영역을 “라이브 영역”으로 두고 그 안에서 그리는 게 편했다. 캔버스를 꽉 채우면 같은 줄에 놓았을 때 아이콘끼리 붙어 보인다. 규칙을 단순하게 유지하려고 이렇게만 정했다.

기본 캔버스 24x24, 라이브 영역 20x20
선 두께 2px, 끝은 둥글게
모서리 반경은 2px 하나로 통일

수학적 중앙과 눈의 중앙은 다르다

재생 버튼 아이콘을 원 안에 넣을 때 또 막혔다. 삼각형을 원의 정중앙에 놓았더니 왼쪽으로 쏠려 보인다. 삼각형은 무게중심이 밑변에서 높이의 3분의 1 지점에 있어서, 외곽 상자의 중앙에 놓으면 시각적 무게가 왼쪽에 몰린다. 그래서 오른쪽으로 1px 정도 밀어 주니 자연스러워졌다.

반대로 둥근 아이콘은 사각 아이콘과 같은 크기로 그리면 작아 보인다. 원은 모서리가 없어서 같은 상자 안에서 면적이 작기 때문이다. 원을 한두 px 키워서 균형을 맞췄다. 이런 보정은 숫자로 정답이 나오지 않아서, 결국 아이콘을 한 줄에 나란히 놓고 눈을 가늘게 뜨고 보는 방식으로 했다.

확인하는 방법

100%와 200%로 번갈아 보면서 흐린 선을 찾는다.
비슷한 아이콘 여러 개를 한 줄에 놓고 크기와 무게가 튀는 것을 찾는다.
배경을 어둡게도 바꿔서 본다. 얇은 선은 어두운 배경에서 더 가늘어 보인다.

직접 해 보니 이랬다

처음에는 이 모든 걸 규칙 없이 감으로 했다. 아이콘 열 개쯤 그렸을 때 선 끝 모양이 제각각이고 모서리가 둥근 것과 각진 것이 섞여 있는 걸 발견했다. 하나하나는 괜찮은데 나란히 놓으면 한 세트로 안 보였다. 아이콘은 개별 그림이 아니라 한 가족이라는 걸 그때 알았다. 그래서 위의 규칙을 문서 한 장으로 적어 두고, 새 아이콘을 그릴 때마다 그걸 열어 본다.

정리

아이콘 하나에 시간을 많이 쓰는 게 비효율처럼 느껴졌는데, 한 번 기준을 세워 두니 이후 아이콘은 훨씬 빨리 그려진다. “선 두께와 좌표의 짝을 맞춘다”는 한 줄만 기억해도 흐릿한 아이콘의 절반은 해결된다고 생각한다.