남의 집 스타일시트를 열어본 적이 있습니까.
어떤 사이트의 영문 글씨체가 마음에 들었습니다. 픽셀로 깎아낸 글자였습니다. 곡선이 없고, 획이 격자 위에 딱딱 얹혀 있고, 오래된 게임기 화면에서 방금 꺼낸 것 같았습니다.
가져다 쓰고 싶었습니다.
그래서 그 집 안을 봤습니다.
78과 4
폰트 설정은 단정했습니다.
본문 Pretendard Variable
제목 Pixelify Sans
폴백 "Courier New", monospace
한글은 한글 폰트로, 영문 제목은 픽셀로. 나눠져 있었습니다.
그런데 픽셀 폰트가 걸린 요소를 세어보다가 손이 멈췄습니다.
78개.
그중 4개에 한글이 들어 있었습니다.
그 넷은 자기가 어떤 얼굴로 나오는지 모르고 있었습니다.
만들 수 없는 글자
픽셀 폰트에 한글이 없는 건 게을러서가 아닙니다.
라틴 알파벳은 스물여섯 자입니다. 대문자와 소문자, 숫자와 기호를 더해도 백 자를 넘지 않습니다. 격자 위에 하나씩 얹으면 끝납니다.
한글은 초성과 중성과 종성이 서로를 밀고 당기며 만 자를 넘깁니다. 받침이 있으면 위쪽이 눌리고, 없으면 아래로 늘어집니다. 같은 ㄱ이 자리마다 다른 크기로 앉습니다.
그걸 7×9 격자에 전부 앉히는 일은, 스물여섯 자를 앉히는 일과 같은 종류의 일이 아닙니다.
그래서 대부분의 영문 디스플레이 폰트에는 한글이 없습니다.
문제는 없을 때 벌어지는 일입니다.
파일이 없으면 404가 뜹니다. 코드가 틀리면 빌드가 멈춥니다. 무언가 잘못되면 화면이 그걸 알려줍니다.
글리프는 다릅니다.
브라우저는 지정된 폰트에서 그 글자를 찾다가, 없으면 아무 말 없이 다음 폰트로 내려갑니다. 그다음에도 없으면 또 내려갑니다. 결국 어딘가에서 찾아내고, 그걸 그립니다.
경고도 로그도 없습니다. 그냥 다른 얼굴이 됩니다.
그 사이트의 네 제목은 픽셀 폰트를 받았습니다. 받았지만 픽셀로 그려지지 않았습니다. 옆의 영문 제목은 격자 위에 앉아 있고, 그 넷만 시스템 고딕으로 앉아 있었을 겁니다.
한 화면 안에서 제목이 두 얼굴을 갖습니다.
만든 사람은 몰랐을 겁니다. 저도 세기 전에는 몰랐습니다.
지금 맞는 것과 앞으로도 맞는 것
제 사이트에 그 폰트를 들이면서, 먼저 한 문장을 적었습니다.
한글이 섞일 수 있는 자리에는 쓰지 않는다.
적고 나니 판단할 게 줄줄이 나왔습니다.
Notes from the work 같은 문구는 안전합니다. 제가 손으로 박아 넣은 영문이고, 내일도 영문일 겁니다.
문제는 데이터에서 오는 값이었습니다.
아이디어 글 목록의 부제를 픽셀로 바꾸려다 멈췄습니다. 지금 다섯 개가 전부 영문입니다. 그런데 언젠가 한글 부제를 하나 쓰는 날이 옵니다. 그날 그 한 줄만 다른 얼굴이 되고, 저는 몇 달 뒤에나 알아차릴 겁니다.
지금 맞는 것과 앞으로도 맞는 것은 다릅니다.
변수로 들어오는 자리는 전부 뺐습니다.
열두 픽셀의 격자
참조한 사이트는 그 폰트를 12px 아래에서도 쓰고 있었습니다. 투명도 35%까지 얹은 채로요.
픽셀 폰트는 격자로 만들어집니다. 한 글자가 7×9 위에 그려져 있다면, 그 배수로 커질 때 가장 깨끗합니다. 격자가 화면의 픽셀과 정확히 겹치니까요.
12px은 그 배수가 아닙니다.
획이 반 픽셀씩 걸칩니다. 브라우저는 걸친 부분을 회색으로 흐려서 메웁니다. 날이 서 있어야 할 모서리가 뭉개지고, 그 위에 투명도까지 내려가면 읽는 게 아니라 짐작하게 됩니다.
제 사이트에는 대문자 라벨이 138곳 있었습니다.
FOCUS SERVICES CURRENTLY FOCUSED ON
전부 10~12px입니다. 가장 많고 가장 눈에 띄는 자리였습니다. 여기에 넣었으면 사이트 전체에 픽셀 리듬이 깔렸을 겁니다.
한 곳도 넣지 않았습니다.
대신 클래스 주석에 이렇게 적어뒀습니다.
/* 고정 픽셀 그리드라 작은 크기에서 획이 뭉개진다.
13px 아래로는 쓰지 않는다. 한글 글리프 없음 — 영문 전용. */
몇 달 뒤의 제가 같은 유혹을 다시 겪지 않도록.
예순여덟 픽셀에서
작은 글자를 무너뜨리던 그 격자가, 커지면 반대로 작동합니다.
68px에서는 어긋날 반 픽셀이 없습니다. 모서리가 칼처럼 섭니다. 세리프체의 섬세한 곡선이 만들지 못하는 종류의 단호함이 나옵니다.
제 홈 화면 첫 문장이 이렇습니다.
Reduce the noise. Build what truly matters.
군더더기를 걷어내자는 말입니다.
그 말을, 획을 가장 단순한 격자로 환원한 글씨로 하게 됐습니다. 계산한 건 아니었는데 맞아떨어졌습니다.
같은 글씨체가 12px에서는 결함이고 68px에서는 주장이 됩니다.
기울일 수 없는 것
세 번째로 부딪힌 건 예상하지 못한 자리였습니다.
제 큰 제목들은 이탤릭으로 숨을 골랐습니다.
The work speaks
before the words do. ← 이탤릭
세리프체의 이탤릭은 그냥 기울어진 글자가 아닙니다. 획의 연결이 달라지고, 붓이 지나간 흔적이 살아납니다. 그래서 강조가 아니라 목소리가 낮아지는 것처럼 읽힙니다.
픽셀에는 이탤릭이 없습니다.
없는 걸 요구하면 브라우저가 만들어줍니다. 글자를 통째로 비틀어서요. 격자가 사선으로 눕고, 매끄러워야 할 획의 옆면에 계단이 생깁니다.
기울임을 버렸습니다. 대신 색으로 갔습니다.
The work speaks
before the words do. ← 파랑
그리고 이걸 사이트 전체에 똑같이 걸었습니다. 히어로에도, 섹션 제목에도, 부제에도.
방문자가 규칙을 읽을 수 있게 됐습니다. 픽셀에 파랑이 얹히면 그 줄이 중요한 줄입니다.
하나를 잃고 체계가 생겼습니다.
떨어질 자리를 정해두기
마지막으로 고친 건 폴백이었습니다.
참조한 사이트는 픽셀이 실패하면 Courier New로 내려가게 되어 있었습니다. 타자기 글씨입니다.
폰트 파일이 늦게 오는 몇 초 동안, 방문자는 픽셀 대신 타자기를 봅니다. 폭이 다르니 줄바꿈이 밀리고, 인상은 아예 다른 사이트가 됩니다.
폴백은 아무거나 나오면 되는 자리가 아닙니다. 이게 나와도 같은 집으로 보이는가를 묻는 자리입니다.
모노 산세리프 계열로 바꿨습니다.
다리 하나를 남겨두고
전부 정리하고 나서, 한 곳만 손대지 않았습니다.
로고입니다. DMS.Labs.
내비게이션의 나머지 항목은 전부 픽셀이 됐는데 로고만 세리프로 남았습니다. 처음엔 빠뜨린 것처럼 보였습니다.
블로그를 열어보고 알았습니다.
그 페이지는 본문이 전부 한글입니다. 픽셀이 하나도 없습니다. 로고까지 픽셀이면 그 여덟 글자만 화면 위에 홀로 떠 있게 됩니다.
세리프 로고는 픽셀 헤더와 한글 본문 사이에 걸쳐 있습니다. 양쪽 어디에도 완전히 속하지 않으면서, 둘을 이어놓습니다.
규칙을 세우는 시간의 절반은 예외를 어디에 둘지 고르는 데 들어갔습니다.
네 개의 제목
끝나고 보니 제가 한 일은 폰트를 고른 게 아니었습니다.
두 문자가 만나는 자리에 어디까지 선을 그을지 정한 일이었습니다.
한국어로 화면을 만드는 동안 이 선은 계속 따라옵니다. 영문 글씨체는 표정이 수천 가지인데 한글은 그렇지 않고, 좋은 영문 폰트를 만날 때마다 같은 질문이 돌아옵니다.
여기 한글이 섞이면 어떻게 되는가.
에러가 나면 차라리 낫습니다. 나지 않으니까 직접 세어봐야 합니다.
그 사이트의 네 제목처럼, 지금도 어딘가에서 자기가 픽셀인 줄 알고 있는 글자들이 있을 겁니다.
