폰트 폴백

시안에 쓴 서체는 그 시안을 만든 사람의 컴퓨터에 깔려 있습니다. 사용자 기기에는 없습니다. 이 당연한 사실이 화면에서 문제로 나타나는 데는 시간이 걸립니다. 만든 사람과 검수한 사람의 화면에서는 늘 맞게 보이기 때문입니다.

그래서 어긋남은 다른 환경에서 처음 드러납니다. 맥에서 확인할 때 멀쩡했던 문단이 윈도우에서만 줄 수가 하나 늘어나고, 버튼 안의 글자가 두 줄이 되면서 버튼 모양이 깨집니다. 지정한 서체가 없어 한글이 명조체 계열로 뜨는 경우도 흔합니다. 화면은 같은 코드로 그려졌는데 결과가 기기마다 다릅니다.

폰트 폴백은 서체 이름 하나만 적는 대신 없을 때의 차례를 함께 적어 두는 일입니다. 어느 기기에서 어떤 서체로 보일지를 만든 쪽이 정하는 것입니다.

서체를 하나가 아니라 목록으로 적고, 앞에서부터 쓸 수 있는 것을 찾아 씁니다. 첫 항목을 쓸 수 없으면 둘째로, 둘째도 없으면 셋째로 내려갑니다.

순서는 보통 셋으로 짭니다. 먼저 내려받아 쓰는 웹폰트를 적고, 그다음 기기에 흔히 깔려 있는 서체를 적고, 마지막에 계열 이름을 적습니다. 마지막 칸을 비워 두면 브라우저 기본값으로 떨어지는데, 한글에서는 그것이 대개 명조체 계열입니다.

한글에서 자주 나는 사고가 하나 있습니다. 영문 서체를 목록 맨 앞에 두면 그 서체에 한글 글자가 없어서, 영문은 지정한 서체로 뜨고 한글만 다음 항목으로 넘어갑니다. 한 문장 안에서 두 서체가 섞이는 것입니다. 그래서 영문 서체, 한글 서체, 계열 이름 순으로 적습니다.

대체 서체를 고를 때는 모양보다 글자 폭을 봅니다. 폭이 다른 서체로 넘어가면 같은 문장이 차지하는 줄 수가 달라져서 배치가 흔들립니다. 내려받기가 끝나기 전 잠깐 대체 서체로 보여 주는 구간이 있는데, 이때 폭이 크게 다르면 글자가 한 번 출렁이는 것이 눈에 보입니다.

"윈도우에서만 줄이 하나 더 늘어요. 폴백 확인해 주세요."

기기에 따라 다른 서체가 쓰이고 있다는 진단입니다.

"폰트 받기 전에 글자가 아예 안 보이는데, 대체 서체로 먼저 띄우죠."

빈 화면을 보여 주는 대신 읽을 수 있게 하자는 제안입니다.

"폴백 목록에 한글 서체가 없어요."

한글이 어느 서체로 뜰지 정해지지 않은 상태라는 지적입니다.

페이지덱에서 태오가 폴백 목록을 다시 적었습니다. 영문 서체 하나, 한글 서체 하나, 계열 이름 하나로 세 칸을 채우고, 대체 서체로 보이는 동안에도 줄 수가 바뀌지 않도록 글자 폭이 비슷한 것을 골랐습니다.

민서는 그 목록으로 그려진 화면을 윈도우와 맥에서 각각 확인했습니다. 시안 검수를 한 기기에서만 하면 이 차이는 끝까지 보이지 않기 때문입니다.