여백

빈자리는 오래 낭비로 취급됐습니다. 화면은 좁고 담을 것은 많으니 비어 있는 곳이 보이면 무언가를 넣으려는 압력이 늘 생깁니다. 한 화면에 더 많이 보이면 사용자가 덜 움직인다는 계산도 그럴듯합니다.

페이지덱 문서 목록에서 그 계산을 해 본 적이 있습니다. 한 화면에 스무 건을 담으려고 행 사이 간격을 8픽셀로 줄였고, 목적대로 스크롤이 사라졌습니다. 그런데 문의가 늘었습니다. 목록에서 자기 문서를 못 찾겠다는 말이었고, 잘못된 문서를 열어 놓고 왜 내용이 다른지 묻는 경우도 있었습니다.

화면을 열어 보면 이유가 보였습니다. 한 행에는 제목과 마지막 수정자와 날짜가 있었는데, 세 값 사이 간격과 행 사이 간격이 모두 8픽셀이었습니다. 어디까지가 한 문서인지 표시가 없어진 것입니다. 사용자는 다른 문서의 제목과 자기 문서의 날짜를 한 줄로 읽었습니다.

간격을 바깥쪽만 24픽셀로 벌리자 문의가 사라졌습니다. 담은 정보는 그대로인데 읽는 방식만 달라진 것입니다.

사람은 가까이 놓인 것을 한 덩어리로 봅니다. 선을 그어 주지 않아도 거리만으로 묶음이 생기는데, 이것을 다루는 것이 게슈탈트 원리의 근접성입니다. 여백은 이 성질을 이용해 선이나 상자 없이 구조를 만듭니다.

그래서 값을 정할 때 중요한 것은 간격의 크기가 아니라 간격의 차이입니다.

1. 차이가 있어야 묶음이 생깁니다. 제목과 본문 사이가 8픽셀이고 본문과 다음 제목 사이가 32픽셀이면, 아무 설명이 없어도 앞의 둘이 한 덩어리로 읽힙니다. 전부 16픽셀로 같으면 열 줄이 그냥 열 줄로 보입니다.
2. 안쪽이 바깥쪽보다 좁아야 합니다. 이 관계가 뒤집히면 묶음이 반대로 읽힙니다. 카드 안쪽 여백이 24픽셀이고 카드 사이가 12픽셀이면 사용자는 인접한 두 카드의 가장자리를 한 묶음으로 봅니다.
3. 주변을 비우면 그 요소가 떠오릅니다. 크기나 색을 건드리지 않고도 강조가 되는 방법이라, 먼저 볼 것을 정해 주는 시각적 위계를 만드는 수단으로 씁니다. 결제 버튼 하나만 위아래로 넉넉히 띄워 두면 그 버튼이 화면에서 가장 먼저 읽힙니다.

다루는 자리는 두 층입니다. 글자와 아이콘처럼 붙어 있는 것들 사이의 좁은 간격이 한 층이고, 화면 테두리와 큰 덩어리 사이의 넓은 간격이 다른 층입니다. 줄과 줄 사이의 간격인 행간도 같은 원리로 다룹니다. 글자 크기의 1.5배쯤이 본문에서 편하게 읽히고, 1.0배로 붙이면 줄이 섞여 읽는 속도가 떨어집니다.

값은 화면마다 새로 고르지 않습니다. 쓸 간격을 단계표로 미리 정해 둔 간격 스케일을 만들고 그 안에서만 집습니다. 4의 배수로 4·8·12·16·24·32·48을 두는 방식이 흔합니다. 각 값에 이름을 붙여 코드와 나눠 쓰는 디자인 토큰으로 옮기면 개발자도 같은 값을 집습니다.

목록과 표가 가장 자주 걸리는 자리입니다. 한 항목 안의 값들은 붙이고 항목과 항목 사이는 벌립니다. 두 간격의 비가 1.5배 안쪽이면 어디까지가 한 줄인지 흐려집니다.

입력 화면도 같습니다. 라벨과 입력 칸은 붙이고 칸과 칸 사이는 벌립니다. 라벨이 아래 칸에 붙어 있으면 사용자가 다른 항목의 설명을 읽고 값을 넣습니다. 이름과 전화번호를 바꿔 적는 일이 대개 여기서 생깁니다.

손으로 만지는 화면에서는 여백이 읽는 문제를 넘어 누르는 문제가 됩니다. 버튼이 서로 4픽셀 떨어져 있으면 엉뚱한 것이 눌립니다. 손가락이 닿는 영역은 보이는 크기보다 넓게 잡고, 위험한 동작의 버튼은 옆 버튼과 더 벌려 둡니다.

바깥으로 보이는 화면에서는 인상을 정합니다. 가격표나 소개 화면에서 여백을 넉넉히 두면 값비싼 제품처럼 읽히고, 촘촘히 채우면 정보량이 많은 제품처럼 읽힙니다.

화면이 좁아질 때 판단이 갈립니다. 여백은 가장 먼저 줄이고 싶어지는 값이지만, 좁은 화면에서 줄일 것은 대개 여백이 아니라 담는 항목 수입니다. 항목을 그대로 두고 간격만 줄이면 작은 화면에서 묶음이 사라져, 정작 정보를 골라 읽기 어려운 쪽이 됩니다. 요소를 어디에 둘지 정한 레이아웃 규칙에서 무엇을 접고 무엇을 뺄지를 먼저 정합니다.

"여기 간격 차이가 없어서 한 덩어리로 안 읽혀요. 바깥쪽만 24로 벌립시다."

간격의 절대값이 아니라 안과 밖의 차이를 만들자는 제안입니다.

"이 값 스케일에 없는 숫자인데요. 20 대신 24로 가죠."

미리 정해 둔 단계표 밖의 값을 쓰지 않기로 했다는 뜻입니다.

"모바일에서 삭제 버튼이 저장에 너무 붙어 있습니다."

간격이 좁아 잘못 누를 위험이 있다는 지적입니다.

페이지덱에서는 민서가 간격 단계표를 들고 시안을 봅니다. 시안에 22픽셀이 들어 있으면 그 자리에서 24로 바꾸는데, 이유는 22가 나빠서가 아니라 값이 늘어나면 다음 화면에서 또 새 값이 생기기 때문입니다.

태오는 같은 표를 코드 쪽에서 씁니다. 시안의 픽셀을 재지 않고 토큰 이름으로 집기 때문에, 표의 값을 한 번 고치면 화면 전체가 같이 움직입니다. 여백 논의가 취향 다툼으로 흐르지 않는 이유도 이 표에 있습니다.

여백을 낭비로 보고 스크롤을 줄일 때 가장 먼저 건드리는 경우가 많습니다. 빈자리를 줄이면 한 화면에 더 담기는 것이 사실이니 자연스러운 판단입니다. 하지만 줄인 결과로 사라지는 것은 빈자리가 아니라 묶음 정보입니다. 스무 건이 보이지만 어느 줄이 한 항목인지 알 수 없는 목록은, 열 건만 보이고 구분이 분명한 목록보다 찾는 데 오래 걸립니다. 화면에 들어간 항목 수와 사용자가 찾아낼 수 있는 항목 수는 다른 값입니다.

넓을수록 좋다고 읽는 것도 흔합니다. 여백이 부족한 화면을 고쳐 본 사람이 쉽게 빠지는 쪽입니다. 그런데 모든 간격을 함께 넓히면 차이가 그대로라 읽히는 구조는 바뀌지 않고, 화면만 길어집니다. 여백을 넓히는 일이 값을 하는 경우는 좁힐 곳을 함께 좁힐 때뿐입니다. 밝기나 크기 차이로 구분을 만드는 대비나 기준선을 맞추는 정렬도 같습니다. 셋 다 양이 아니라 차이로 일합니다.