시각보정: 디자인이 숫자를 배신할 때

1. 정렬했는데 왜 어색할까

피그마를 쓰다 보면 한 번씩 이런 순간이 온다. 분명히 수평·수직 중앙 정렬을 눌렀는데, 아이콘이 왼쪽으로 쏠려 보인다. 사각형과 원을 나란히 놓고 같은 크기로 맞췄는데, 원이 더 작아 보인다. 수치는 완벽한데 눈은 뭔가 틀렸다고 말한다.

이 현상은 개인의 감각이 예민해서가 아니다. 기계가 계산하는 기하학적 중심과, 사람이 인식하는 시각적 중심이 서로 다른 곳에 있기 때문에 생긴다. 이 간극을 메우는 작업을 시각보정이라고 부른다.

2. 눈은 수학자가 아니다

우리의 시각 시스템은 물체의 좌표를 읽는 게 아니라 밀도와 무게를 감지한다. 같은 면적이라도 꼭짓점이 날카로운 도형은 날씬해 보이고, 곡선으로 이루어진 도형은 작아 보인다. 같은 두께의 선이라도 가로선은 세로선보다 굵어 보인다.

게슈탈트 심리학은 이 현상을 오래전부터 설명해왔다. 사람의 눈은 형태를 개별 좌표의 집합이 아니라 하나의 덩어리로 인식한다. 그래서 픽셀 수가 같아도 시각적 무게감이 다르면 크기가 달라 보이고, 좌표가 같아도 시각적 밀도가 다르면 위치가 달라 보인다.

기계는 이 차이를 모른다. 피그마의 정렬 버튼은 바운딩 박스의 중심을 맞출 뿐, 눈이 느끼는 무게중심을 맞추지는 않는다. 그래서 정렬 버튼을 누른 결과가 항상 옳아 보이지는 않는다.

3. 시각보정의 세 가지 얼굴

3.1. 오버슛

원과 삼각형을 사각형과 나란히 놓으면, 바운딩 박스를 같은 크기로 맞춰도 원과 삼각형이 더 작아 보인다. 꼭짓점이나 곡선으로 이루어진 형태는 그 자체로 빈 공간을 더 많이 가지고 있기 때문이다.

그래서 타이포그래피와 아이콘 디자인에서는 오버슛이라는 기법이 생겼다. 원과 삼각형의 외곽선을 사각형의 경계선보다 미세하게 바깥으로 튀어나오게 하는 것이다. 실제 치수는 더 크지만, 눈에는 같은 크기로 읽힌다. 대문자 O와 대문자 H를 같은 크기로 설정해도 O가 약간 위아래로 더 큰 이유가 바로 이것이다.

3.2. 무게중심 정렬

음악 플레이어의 재생 버튼은 오른쪽을 향한 삼각형이다. 이 삼각형을 원 안에 수학적으로 정중앙에 놓으면, 왼쪽으로 치우쳐 보인다. 삼각형은 꼭짓점이 오른쪽 하나, 왼쪽 두 개인 비대칭 형태라 시각적 무게가 왼쪽에 더 실리기 때문이다.

그래서 실제로 잘 만들어진 재생 버튼을 열어보면, 삼각형이 기하학적 중심보다 살짝 오른쪽에 놓여 있다. 수치를 보면 어긋나 있지만, 눈으로 보면 딱 중앙처럼 느껴진다. 기계의 수치가 아닌, 눈이 느끼는 무게중심에 맞춘 결과다.

3.3. 획 대비

같은 두께로 그린 십자가(+)를 보면, 가로선이 세로선보다 굵어 보인다. 이것 역시 눈의 착각이다. 눈의 수평 방향 해상도가 수직 방향보다 낮아서 생기는 현상으로, 오래전 타이포그래퍼들이 발견했다.

이를 보정하기 위해 세리프 서체의 대부분은 가로획을 세로획보다 얇게 설계한다. 화면에서 1픽셀짜리 가로선과 세로선이 달리 보이는 것도 같은 이유다. 정사각형 픽셀에 담겼음에도, 눈은 이 둘을 다른 두께로 읽는다.

4. 수치는 시작이고, 눈이 마감이다

시각보정은 디자이너의 주관적인 감각이 아니다. 수백 년의 타이포그래피 역사가 그렇게 말한다. 오버슛, 무게중심 정렬, 획 대비는 모두 같은 전제에서 출발한다. 수학적 정확함이 시각적 정확함과 항상 일치하지는 않는다는 것.

개발 과정에서 디자이너가 픽셀 하나만 오른쪽으로 옮겨 달라고 말할 때, 그것은 강박이 아니라 근거가 있는 보정이다. 도구가 정렬을 끝냈다는 신호를 보내더라도, 눈이 어색하다고 말한다면 눈이 옳다.