정렬

시안을 앞에 두고 "뭔가 정돈이 안 된 느낌인데요" 라는 말이 오가던 시절이 있었습니다. 보는 사람 대부분이 같은 인상을 받는데 아무도 어디를 고치라고 말하지 못하니, 디자이너는 색을 바꾸고 폰트를 바꾸고 그림자를 넣어 보다가 결국 처음 시안으로 돌아왔습니다.

그 어수선함의 원인은 대개 색이 아니라 어긋난 선이었습니다. 카드 세 장의 제목이 각각 왼쪽에서 16픽셀, 18픽셀, 16픽셀 떨어져 있고, 그 아래 버튼만 20픽셀에 있는 식입니다. 2픽셀 차이는 눈으로 짚어 낼 수 없지만 전체를 볼 때는 분명히 느껴집니다. 사람의 눈이 늘어선 요소에서 선을 찾아내려 하기 때문에, 그 선이 중간에 끊기면 이유를 모른 채 불편해집니다.

이름이 붙기 전까지 이 문제는 감각의 영역에 남아 있었습니다. 눈썰미가 좋아 잘 맞추는 사람과 못 맞추는 사람이 있을 뿐인 재능 문제로 다뤄졌고, 리뷰는 취향 싸움이 됐습니다. 비주얼 디자인이 다루는 원리 넷 가운데 이것에 이름이 붙은 덕에, 지금은 어수선하다는 말 대신 기준선이 몇 개로 흩어져 있다는 말을 쓸 수 있습니다. 고칠 자리가 특정되면 그때부터는 취향이 아니라 값의 문제가 됩니다.

요소마다 기준이 될 모서리나 축을 하나 정하고, 그 좌표를 여러 요소에서 같은 값으로 맞춥니다. 기준으로 삼는 축은 가로에서 셋, 세로에서 셋입니다.

1. 왼쪽 — 요소들의 왼쪽 끝을 한 줄에 세웁니다. 한글과 영문은 왼쪽에서 읽기 시작하므로, 줄이 바뀔 때 눈이 돌아올 자리가 늘 같아집니다. 본문과 목록의 기본값입니다.
2. 가운데 — 요소의 중심을 한 축에 모읍니다. 줄마다 시작점이 달라지므로 한두 줄짜리 제목이나 빈 화면 안내문처럼 짧은 덩어리에만 씁니다.
3. 오른쪽 — 오른쪽 끝을 맞춥니다. 숫자를 표에 넣을 때 씁니다. 1,200과 980을 오른쪽에 붙여 두면 자릿수가 그대로 길이로 보여서 어느 쪽이 큰지 읽지 않고도 압니다.

세로에서는 위·가운데·아래 가운데 하나를 고릅니다. 버튼 안의 아이콘과 글자를 세로 가운데에 맞추는 일이 여기 해당합니다. 글자끼리는 상자의 가운데가 아니라 글자가 서 있는 바닥선을 기준으로 맞춰야 크기가 다른 두 글자가 한 줄로 읽힙니다.

축을 정하는 일보다 중요한 것은 축의 개수를 줄이는 일입니다. 한 화면에서 왼쪽 기준선이 하나면 그 선이 눈에 보이지 않는 벽처럼 작동해 아래로 쭉 이어집니다. 기준선이 여섯 개로 흩어지면 같은 요소를 놓고도 어디까지가 한 묶음인지 알 수 없습니다. 요소 사이를 비우는 여백이 묶음의 위아래를 나눈다면, 정렬은 묶음의 좌우를 붙잡아 둡니다.

축을 사람마다 다르게 잡지 않도록 열과 간격을 미리 정해 둔 것이 그리드 시스템입니다. 화면을 12칸으로 나누고 요소를 칸에 얹으면 기준선이 자동으로 같은 값이 됩니다. 정렬을 매번 손으로 맞추는 대신 틀이 대신하게 만드는 방식입니다.

가장 자주 손이 가는 자리는 입력 화면입니다. 라벨과 입력창의 왼쪽 끝을 같은 축에 두면 열 줄짜리 양식도 한 덩어리로 읽히고, 라벨을 입력창 왼쪽에 붙일 때는 라벨의 오른쪽 끝을 맞춰야 입력창의 시작점이 한 줄에 섭니다.

표에서는 열마다 기준이 달라집니다. 글자는 왼쪽, 숫자는 오른쪽에 두고 머리글은 그 열의 값과 같은 쪽에 맞춥니다. 숫자 열의 머리글만 왼쪽에 있으면 눈이 열을 따라 내려가다 한 번 튑니다.

목록과 카드에서는 정렬이 시각적 위계를 떠받칩니다. 제목과 설명과 날짜의 왼쪽 끝이 같으면 셋이 한 항목이라는 사실이 선으로 드러나고, 크기와 굵기 차이로 만든 대비가 그 안에서 순서를 만듭니다. 축이 흔들리면 항목 사이의 경계가 흐려져 위계가 먼저 무너집니다.

화면 크기가 바뀔 때도 이 축이 기준입니다. 반응형 디자인에서 창이 좁아지면 옆으로 놓였던 요소가 아래로 접히는데, 새로 생기는 줄이 어느 축에 붙을지 정해 두지 않으면 좁은 화면에서만 어긋난 배치가 나옵니다.

한 번 정한 값을 화면마다 다시 고르지 않도록 간격과 열 규칙을 디자인 시스템에 적어 둡니다. 레이아웃 규칙과 타이포그래피의 줄 간격이 같은 문서에 들어 있어야 서로 다른 팀이 만든 화면에서도 기준선이 맞습니다.

"여기 라벨이랑 입력창 왼쪽 끝이 2픽셀 어긋나 있어요."

값이 다르게 들어갔으니 같은 값으로 맞춰 달라는 말입니다.

"이 표 숫자는 오른쪽 정렬로 바꿔 주세요. 자릿수 비교가 안 돼요."

숫자를 읽는 방식에 맞지 않는 기준을 쓰고 있다는 지적입니다.

"가운데 말고 왼쪽으로 붙이죠. 네 줄이라 읽기 불편해요."

짧은 덩어리에만 쓰는 방식을 긴 글에 썼다는 뜻입니다.

페이지덱의 시안 리뷰에서 민서와 태오가 자주 주고받는 말이기도 합니다. 민서가 만든 화면에서는 카드 안의 요소가 모두 한 축에 서 있는데, 구현된 화면에서는 아이콘이 들어간 줄만 3픽셀 밀려 있는 식입니다. 카드 한 장으로는 잘 안 보이지만 열 장을 늘어놓으면 오른쪽 줄만 흔들려 보입니다.

이런 차이를 매번 잡아내는 대신 민서는 간격 값을 네 종류로 줄이고 이름을 붙여 태오에게 넘깁니다. 고를 수 있는 값이 적으면 어긋날 자리도 줄어듭니다.

가운데 정렬이 더 균형 있어 보인다고 생각하기 쉽습니다. 한 줄짜리 제목만 놓고 보면 실제로 그렇고, 슬라이드에서 익숙해진 감각도 한몫합니다. 그런데 줄이 늘어나는 순간 성질이 달라집니다. 줄마다 시작점이 다르므로 읽는 사람은 줄을 바꿀 때마다 다음 줄이 어디서 시작하는지 눈으로 찾아야 합니다. 네 줄짜리 안내문을 가운데에 두면 읽는 속도가 눈에 띄게 떨어지고, 목록에 쓰면 항목 사이의 경계가 흐려집니다. 그래서 가운데는 두 줄 이하에만 쓰는 것이 기본입니다.

마지막에 다듬는 마무리 작업으로 여기는 것도 흔합니다. 값 하나 고치면 되는 일처럼 보이니 그렇습니다. 하지만 어긋난 축은 대개 배치를 정하는 단계에서 생깁니다. 칸을 나누지 않은 채 요소를 하나씩 얹으면 값이 그때그때 정해지고, 나중에 스무 군데를 손으로 맞추게 됩니다. 틀을 먼저 정하고 그 위에 얹으면 맞추는 일 자체가 사라집니다.