타이포그래피

제품 화면에서 글자는 오랫동안 설계 대상이 아니었습니다. 문구가 정해지면 그대로 넣으면 되는 것이었고, 크기나 줄 간격은 쓰던 도구의 기본값을 따라갔습니다. 그래서 화면마다 값이 달라졌습니다. 한 화면의 본문은 14픽셀이고 옆 화면은 15픽셀이고, 제목은 18과 20과 22가 섞여 있었습니다. 만든 사람이 매번 달랐고 기준이 적혀 있는 곳이 없었으니 당연한 결과였습니다.

값이 흩어져 있다는 사실보다 나쁜 것은 문제를 지목할 말이 없다는 쪽이었습니다. 시안을 두고 나오는 말은 대개 "글씨가 좀 답답해 보여요" 였습니다. 받는 쪽은 답답하다는 말을 크다 작다로 번역할 수밖에 없어서 글자를 한 단계 키우고, 키우면 한 줄에 들어가는 글자가 줄어 문단이 더 길어지고, 그러면 다시 답답해 보입니다. 정작 답답함의 원인은 글자 크기가 아니라 줄과 줄 사이가 붙어 있는 데 있었는데, 그 간격을 부르는 이름을 회의실의 누구도 갖고 있지 않았습니다.

이름이 없으니 고친 것도 남지 않았습니다. 어느 화면에서 한 번 잘 잡아 놓아도 그 값이 어디에 적혀 있지 않으니 다음 화면을 그리는 사람은 처음부터 다시 골랐습니다. 같은 제품 안에서 목록 화면의 제목은 20픽셀 굵은 글자인데 상세 화면의 제목은 18픽셀 보통 글자인 일이 벌어지고, 사용자는 그 차이를 말로 설명하지는 못해도 두 화면이 한 제품 같지 않다는 느낌은 받습니다. 개발자 쪽에서도 같은 일이 벌어졌습니다. 화면마다 숫자를 직접 적어 넣었으니 본문 크기 하나를 바꾸려면 파일 수십 개를 열어야 했고, 그래서 대개 바꾸지 않았습니다.

타이포그래피는 글자에 걸린 결정을 한 덩어리로 묶고 그 안의 값마다 이름을 붙인 이름입니다. 답답함은 행간으로, 제목이 제목처럼 안 보이는 문제는 웨이트와 크기 단계로, 윈도우에서만 화면이 달라 보이는 문제는 폴백으로 옮겨 놓습니다. 이름이 붙고 나면 같은 대화가 "행간을 1.6으로 올리죠" 로 끝납니다. 상위의 비주얼 디자인이 시각적 위계를 만드는 요소 일곱을 두고 있는데, 제품 화면의 정보가 거의 전부 글자로 전달되는 만큼 그중 가장 자주 쓰이는 재료가 이쪽입니다.

타이포그래피 아래 용어는 두 갈래입니다. 시안에서 값을 고르는 속성이 다섯이고, 고른 값이 사용자 화면까지 무사히 도착하게 만드는 구현이 둘입니다. 속성 쪽은 디자이너가 결정하고 구현 쪽은 개발자가 다루지만, 구현이 빠지면 속성에서 고른 값은 만든 사람의 화면에서만 맞습니다.

속성 다섯은 시안에서 집는 값입니다. 다섯이 서로 독립돼 있지 않아서 하나를 바꾸면 나머지가 따라 움직입니다.

1. 서체 — 글자의 생김새를 규정한 디자인입니다. 고르는 일이 취향 문제처럼 보이지만 제품 화면에서는 판독성이 먼저 걸립니다. 숫자 0과 대문자 O가 구분되는지, 소문자 l과 숫자 1이 구분되는지를 확인합니다. 결제 금액과 인증번호를 띄우는 제품에서는 이 구분 하나가 문의 건수를 바꿉니다. 한글은 한 벌에 들어가야 할 글자 수가 영문보다 훨씬 많아서 만들다 만 서체가 흔하고, 잘 안 쓰는 글자에서 모양이 무너지는 일이 있으니 고르기 전에 사람 이름과 주소를 넣어 봅니다.
2. 웨이트 — 획의 굵기 단계입니다. 100부터 900까지 아홉 단계로 나누는 것이 보통이지만 제품에서 실제로 쓰는 것은 서넛입니다. 본문 400, 소제목 600, 강조 700처럼 정해 두고 그 밖을 쓰지 않습니다. 400과 500처럼 한 단계만 벌리면 나란히 놓였을 때 차이가 읽히지 않아 굵게 쓴 의미가 사라집니다. 반대로 300 이하로 내려간 얇은 획은 시안에서는 정갈해 보이지만 밝은 곳에서 휴대폰을 볼 때 획이 배경에 묻힙니다.
3. 타입 스케일 — 제목부터 본문까지 쓸 크기를 미리 정해 둔 단계표입니다. 12·14·16·20·24·32처럼 여섯 칸쯤을 잡아 두고 새 화면에서는 그 안에서만 고릅니다. 칸 사이를 일정한 비율로 벌려 두면 어느 두 칸을 붙여 놓아도 차이가 읽힙니다. 13이나 15가 필요해 보이는 순간이 오는데, 그때 한 번 열어 주면 반년 뒤 본문 크기가 네 가지로 늘어 있습니다.
4. 행간 — 줄과 줄 사이의 간격입니다. 본문은 글자 크기의 1.5배에서 1.7배 사이가 통용되는 선이라, 16픽셀 본문이면 24에서 27픽셀을 줍니다. 같은 문단을 16픽셀 행간으로 두면 글자와 글자가 위아래로 붙어 문단이 벽처럼 보이고, 반대로 2배를 넘기면 줄이 서로 떨어져 한 덩어리로 읽히지 않습니다. 제목은 본문과 규칙이 달라서, 32픽셀 제목에 1.6배를 그대로 주면 두 줄짜리 제목의 위아래가 헐거워집니다. 큰 글자일수록 배수를 낮춥니다.
5. 자간 — 글자와 글자 사이의 간격입니다. 큰 제목은 기본값 그대로 두면 글자 사이가 벌어져 보여 살짝 좁히고, 작은 대문자 라벨은 반대로 넓혀야 읽힙니다. 본문에서는 건드리지 않는 것이 기본이고, 여기를 만지고 있다면 대개 서체 선택이나 크기 쪽이 잘못돼 있습니다. 한글은 글자 하나가 네모 칸을 꽉 채우는 구조라 영문에서 쓰던 값을 그대로 옮기면 지나치게 벌어져 보이는 일이 흔합니다.

구현 둘은 그 값을 사용자 기기까지 옮기는 장치입니다. 시안에는 나타나지 않는 갈래라 늦게 발견되는 문제가 여기서 나옵니다.

1. 폰트 폴백 — 지정한 서체가 없을 때 대신 쓸 서체를 순서대로 적어 둔 목록입니다. 사용자 기기에 그 서체가 깔려 있지 않거나 내려받기가 실패하면 목록의 다음 것으로 넘어갑니다. 목록을 비워 두면 브라우저 기본값으로 떨어져 한글이 명조체로 뜨고, 맥에서 확인할 때는 멀쩡하던 화면이 윈도우에서만 줄 수가 늘어납니다. 서체마다 같은 크기에서 차지하는 폭이 달라서 대신 뜬 서체가 더 넓으면 두 줄이던 제목이 세 줄이 됩니다. 한글과 영문의 폴백을 따로 적어 두는 이유도 여기 있습니다.
2. 가변 폰트 — 파일 하나로 굵기와 너비를 연속해서 조절할 수 있게 만든 서체입니다. 예전에는 400·600·700을 쓰려면 파일을 셋 내려받아야 했고 그만큼 첫 화면이 늦게 떴습니다. 가변 폰트는 한 파일 안에서 그 사이 값을 다 만들어 내므로 내려받을 것이 하나로 줄고, 450처럼 단계표에 없던 굵기도 쓸 수 있습니다. 대신 파일 하나가 예전 한 벌보다 크기 때문에 웨이트를 두 가지만 쓰는 제품에서는 오히려 손해입니다.

두 갈래는 한 줄로 이어집니다. 속성에서 값을 고르고, 구현이 그 값을 사용자 화면에 도착시키고, 도착한 결과가 시각적 위계를 만듭니다. 무엇을 먼저 읽게 할지를 정해 주는 그 순서가 화면 위에서는 대개 글자 크기와 굵기의 차이로 나타나기 때문입니다. 그래서 값을 화면마다 새로 고르지 않도록 크기와 굵기와 행간을 한 벌로 묶어 이름을 붙여 두는데, 그 묶음이 디자인 시스템에 들어가는 순간부터 새 화면은 고르는 일이 아니라 꺼내 쓰는 일이 됩니다.

"본문 행간이 1.3이라 문단이 벽처럼 보여요. 1.6으로 올리죠."

글자 크기는 그대로 두고 줄 사이만 벌려 읽기 편하게 하자는 제안입니다.

"이 라벨만 13인데 스케일에 없는 값이에요. 12나 14로 맞춰 주세요."

정해 둔 단계표 밖의 크기가 들어와 있으니 되돌리자는 지적입니다.

"윈도우에서 폴백이 다른 서체로 떨어져서 줄 수가 하나 늘었습니다."

지정한 서체가 그 기기에 없어 대신 뜬 서체 때문에 화면이 달라졌다는 보고입니다.

페이지덱에서 이 말이 처음 크게 오간 것은 민서가 화면 전수 조사를 돌렸을 때였습니다. 본문으로 쓰인 크기가 13·14·15·16 네 가지였고 제목은 일곱 가지였습니다. 태오가 코드에서 확인해 보니 같은 컴포넌트의 복사본이 화면마다 조금씩 다른 값을 들고 있었습니다. 어느 쪽도 일부러 그런 것이 아니라 급할 때마다 그 자리에서 숫자를 적어 넣은 결과였습니다.

민서는 여섯 단계짜리 표를 만들어 12·14·16·20·24·32만 남기고 나머지를 전부 가까운 칸으로 옮겼습니다. 지현이 15를 14로 내리면 정보가 작아 보이지 않겠느냐고 물었고, 민서는 한 화면 안에서 본문과 제목의 차이가 벌어지면 오히려 본문이 더 잘 읽힌다고 답했습니다. 옮기는 동안 가장 오래 걸린 것은 숫자를 고르는 일이 아니라 15픽셀을 쓰던 자리가 왜 15픽셀이어야 했는지를 묻는 일이었습니다. 대부분은 이유가 없었고, 이유가 있던 두 자리는 글자 크기가 아니라 그 옆 여백 문제였습니다.

정리 뒤에 바뀐 것은 화면 모양만이 아니었습니다. 새 화면을 그릴 때 크기를 두고 오가던 대화가 사라졌고, 본문을 한 단계 키워 보자는 실험도 값 하나를 고쳐 전 화면에서 확인할 수 있게 됐습니다.

타이포그래피를 서체 고르기로 줄여 읽는 경우가 가장 많습니다. 일곱 갈래 중 눈에 가장 먼저 띄는 결정이고, 서체 이름은 브랜드 문서에 적어 둘 만한 자랑거리라 그렇게 굳기 쉽습니다. 실제로 읽기 편한지를 가르는 것은 대부분 크기와 행간과 한 줄 길이 쪽입니다. 서체만 바꾸고 나머지 값을 그대로 두면 화면은 거의 그대로이고, 서체마다 같은 픽셀에서 실제로 보이는 크기가 달라 전보다 답답해지는 일까지 생깁니다. 서체 교체에 두 달을 쓴 뒤에도 사용자 반응이 그대로라면 대개 이 자리에 걸린 것입니다. 순서를 뒤집어 크기와 행간부터 손보면 서체를 그대로 두고도 차이가 나고, 그 뒤에 서체를 바꾸면 무엇이 무엇을 바꿨는지 구분해서 볼 수 있습니다.

글자를 키우면 읽기 편해진다고 보는 오해도 자주 나옵니다. 안 보인다는 말에 가장 빠르게 내놓을 수 있는 대응이라 반사적으로 나옵니다. 그런데 한 줄에 들어가는 글자 수가 함께 늘어나면 읽기는 오히려 나빠집니다. 한글 본문은 한 줄에 30자에서 40자쯤일 때 편하게 읽히는데, 1440픽셀짜리 화면에 16픽셀 본문을 전체 폭으로 깔면 한 줄이 100자를 넘깁니다. 줄이 길어지면 눈이 오른쪽 끝에서 왼쪽으로 돌아올 때 다음 줄의 시작을 놓치고, 같은 줄을 두 번 읽게 됩니다. 이럴 때 손봐야 할 것은 글자 크기가 아니라 글이 놓인 자리의 최대 폭입니다. 본문 영역을 680픽셀쯤에서 끊어 두면 크기를 그대로 둔 채로도 읽기가 나아집니다. 폭을 그대로 둔 채 키우기만 반복하면 요청이 분기마다 다시 들어오고 그때마다 한 단계씩 올려 주다가, 화면에 들어가던 정보가 절반으로 줄어든 뒤에야 폭 쪽을 보게 됩니다.