이 글은 사실 CSS에 대한 내용보다는 더 근본적인 문제에 대해 다룹니다.

배경과 역사

원래 CSS에서는 폰트 지정은 가능했지만 폰트 이름만 지정이 가능했지 웹폰트의 개념이 없었습니다. 그래서 사용자 시스템에 설치되어 있는 폰트를 최대한 활용하려고 font-family 속성에 온갖 시스템 폰트들의 이름을 나열하는 게 유행이었습니다. 폰트가 중요하다고 생각하면 그냥 이미지로 구워서 사용했습니다. alt 텍스트를 잘 써놓지도 않는 문제가 있었지만, 그런 문제는 귀여운 수준이었구요.

그러다가 웹폰트가 등장했습니다. woff2 등의 포맷으로 된 폰트 파일을 서버에 올려놓고 그 폰트 파일을 사용할 수 있게 되었고, 브라우저가 충분히 최신이라면 디자이너가 원하는 폰트를 사용자에게 보여줄 수 있게 되었습니다.

그러면 웹 폰트를 로딩하는 동안은 그 텍스트를 어떻게 하느냐, 여기서 font-display 속성이 등장하게 됩니다. 폰트 파일을 다운로드 받는 도중에 텍스트를 어떻게 보여줄지를 결정하는 속성이고 이것에 대해 이야기를 하려고 합니다.

font-display

font-display 속성은 다음과 같은 값들을 가질 수 있습니다.
부가설명은 모두 웹폰트가 느리게 다운로드되는 상황을 가정합니다. 웹폰트가 미리 다운로드 되어 있었거나 0.1초 안에 다운로드가 완료된다면 그냥 그 시점에 웹폰트가 적용이 됩니다.

  1. auto
    자동입니다. 브라우저가 알아서 하라고 냅두고 신경쓰지 않습니다.
  2. block
    폰트가 로딩될 때까지 텍스트를 절대로 안 보여줍니다. 폰트가 로딩되면 그 때 보여줍니다.
  3. swap
    대체폰트로 보여주다가 웹폰트가 로딩되면 그 폰트로 바꿔치기 합니다.
  4. fallback
    처음 0.1초 동안은 텍스트를 안 보여줍니다. 이후엔 대체폰트로 보여주다가 웹폰트가 로딩되면 그 폰트로 바꿔치기 합니다. 3초 안에 다운로드가 안 되면 그냥 대체폰트를 유지합니다.
  5. optional
    처음 0.1초까지는 폰트를 안 보여주고 그 때까지 웹폰트 다운로드가 안 됐으면 대체폰트만 사용합니다.

뭔데 이렇게 옵션이 많냐 하면, 폰트가 바뀌는 그 순간에 사용자가 느끼는 불편함도 있고 성능 문제도 있기 때문인데 그 부분은 다른 분들이 많이 설명해 놓았으니 여기서는 생략하겠습니다.
“깜빡이지 말아야 하고 폰트가 반드시 적용되어야만 할 정도로 중요하다”면 block을 쓴다는 것만 알아두시면 충분합니다.

그게 왜 문제가 되냐

대부분의 웹개발 문서들은 영문 기준입니다. 영문 폰트는 무궁무진하고 심지어 용량도 얼마 안 됩니다. 숫자+대문자+소문자 다 합쳐봐야 70자도 안 됩니다. 그에 반해 한글은 숫자나 기호 다 빼고 한글 자체만 봐도 10000 글자가 넘습니다. 용량이 얼마나 큰지는 말 할 필요도 없죠.
이 큰 폰트를 다운로드 받는 동안 텍스트 자체를 안 보여준다는 건 꽤나 다른 문제가 됩니다. 대체폰트가 보이다가 폰트가 적용되느라 깜빡이는 게 아무리 보기 안 좋다 해도 그냥 폰트가 안 보이는 것보다는 비교하기도 부끄러울 정도입니다.

한국 인터넷 속도도 빠른데 왜?라고 할 수도 있겠지만, 한국 인터넷은 그렇게 마냥 빠르지도 않고 모바일 환경에선 더 문제가 됩니다. 수도권 전철 1호선 퇴근시간에 한번 켜보시면 인터넷이 되는지 안 되는지도 분간이 안 됩니다. 심지어 인터넷이 아예 끊어질 때도 있는데 이러면 그냥 영영 글자는 못 읽게 되는 겁니다.
폰트가 중요하긴 하지만 당신이 만든 웹사이트에 폰트가 그 정도로 중요하진 않습니다. 모든 페이지 최상단에 항상 뜨는 웹사이트 이름 같은 건 폰트가 중요하겠죠. 역설적으로 아예 안 떠도 문제가 없구요. 근데 페이지 내용은 아닙니다. 페이지 내용이 특정 폰트로 보여져야만 하는 예술작품이 아닌 이상 웬만한 상황에선 일단 읽을 수 있는 게 훨씬 중요합니다.

0.x초 안에 웹페이지가 안 뜨면 사용자 이탈율이 높아지는 걸 신경 쓰는데 폰트가 중요하다고 빈 페이지를 멍하니 쳐다보게 만드는 건 모순이죠.

그래서 무슨 말이 하고 싶었냐

이 현상을 목격한 곳이 대부분 뉴스 사이트였습니다. 뉴스 사이트에서 가독성이 좋은 폰트를 사용하는 것은 좋지만 기사 내용을 읽을 수 있는 게 훨씬 중요합니다. 가독성을 중요시하는 이유도 기사 내용을 읽을 수 있게 하기 위함이니까요.
폰트가 상당히 중요한 웹소설 플랫폼 같은 경우는 block 속성을 써도 이해합니다. 같은 “You’ll always be mine”을 다른 폰트로 쓰기만 해도 뜻이 완전히 달라지니까요.

font-display: block;을 아예 쓰지 말라는 게 아닙니다. 쓰라고 만들어진 옵션이겠죠. 다만 생각 없이 남들이 하라고 했다고 막 쓰지 말라는 겁니다. 옵션이 여러가지 있다는 건 상황에 맞는 것을 골라서 쓰라는 이야기지 항상 어떤 하나가 다른 하나보다 좋은 게 아닙니다.