[Web] 웹폰트 적용 시, 성능 최적화하기

웹폰트 적용 성능 최적화

웹 폰트 렌더링 과정

CSSOM을 생성하는 과정에서 웹 폰트 링크로 정의된 부분을 만나면 해당 폰트 파일을 다운로드한다. 하지만 paint 과정에서 파일이 다운로드되지 않은 상태라면 브라우저는 해당 자원을 사용하는 콘텐츠의 렌더링을 하지 않는다.

이러한 과정 때문에 Mitt Romney 기사에서 NOT이 보이지 않는 사례가 발생한 것이다.

폰트 용량 최적화

WOFF2(Web Open Font Format 2.0)

WOFF형식과 WOFF2은 압축된 폰트 형식이다. 이 중, WOFF2 형식이 30~50% 더 압축된 형식이다

폰트는 형식별로 크기와 지원되는 브라우저가 다르다.

아래는 내가 프로젝트에 적용했던 글꼴 Pretendard의 각 형식별 크기다. 보다시피 .woff2 확장자의 글꼴이 가장 작은 크기를 가지고 있다. 그렇기 때문에 우리는 woff2를 사용함으로써 폰트 다운로드 속도를 감소시키고 사용자에게 빠르게 콘텐츠를 보여줄 수 있는 것이다.

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  src: local("Pretendard") url("../font/pretendard-regular.woff2") format(
        "woff2"
      ), url("../font/pretendard-regular.woff") format("woff"),
    url("../font/pretendard-regular.ttf") format("truetype");
}

브라우저는 선언된 순서대로 지원 가능한 파일 형식을 다운로드 하기 때문에 위와 같이 가장 낮은 woff2 형식을 가장 먼저 선언하는 것이 좋다.

💡 format()을 쓰지 않으면 브라우저는 지원 가능한 파일 형식이 나올 떄까지 순서대로 다운받기 때문에 반드시 써야 한다. 만약, IE8 이하를 지원해야 한다면 IE는 format()을 읽지 못하기 때문에 eot를 가장 앞에 선언해야 한다!

또한, 시스템에 이미 폰트가 설치되어 있다면 local 문법을 선언함으로써 이미 시스템에 설치된 폰트를 불러오고 웹폰트를 다운로드 받지 않기 때문에 local을 사용해주는 것도 성능을 높이는데 도움이 된다.

서브셋 폰트(subset font)

서브셋 폰트란 폰트 파일에서 거의 사용하지 않는 글자를 제거하고 사용할 글자만 남겨둔 폰트다.

서브셋 폰트에 사용하는 데이터

서브셋 폰트를 사용하게 되면 한글 글자같은 경우는 11,172자에서 2,350글자로 줄어들기 때문에 용량을 줄이는 것이 가능하다. 내가 사용하려던 Pretendard 폰트에서는 이미 서브셋 폰트를 제공하고 있다.

woff2 형식으로 작았던 용량이 서브셋을 사용하면서 273kb로 더욱 줄어든 것을 볼 수 있다.

만약 서브셋 폰트를 지원하지 않는 폰트라면 서브셋 폰트 메이커나 fonttools 라이브러리를 사용하면 서브셋 폰트를 만들 수 있다.

unicode-range 속성

unicode-range 속성은 유니코드로 지정한 글자에만 웹 폰트를 적용하는 속성이다. 이 속성은 사용하려는 폰트의 적용 글자 수가 적을 때 유용하게 사용할 수 있다.

@font-face {
  font-family: "gamja-flower";
  src: url("../font/gamja-flower.woff2") format("woff2");
  unicode-range: U+BC14;
}

위와 같이 unicode-range 속성에 사용하려는 글자의 유니코드를 적어주면 해당 글자에만 폰트가 적용된다. 또한 등록된 글자가 텍스트에 없으면 웹 폰트를 다운로드하지 않는 속성이다.

사용자에게 항상 콘텐츠 노출하기

브라우저의 렌더링 차단 방식

FOIT(Flash of Invisible Text)

• 웹 폰트가 적용되지 않은 텍스트가 보이지 않는 상태에서 폰트가 바뀌면서 텍스트를 보여주는 방식
• 웹 폰트의 다운로드 여부와 상관없이 항상 텍스트 노출
• 폰트 적용 전후에 따라 레이아웃이 변경될 수 있다.

FOUT(Flash of Unstyled Text)

• 웹 폰트가 적용되지 않은 폴백 폰트 상태에서 텍스트 번쩍임이 일어나면서 폰트가 적용되는 방식
• 웹 폰트의 다운로드 속도가 느릴 경우, 빈 텍스트를 노출한다.

Internet Explorer 계열 브라우저는 FOUT 방식으로 렌더링을 처리하고, 그 외 브라우저는 FOIT 방식으로 렌더링을 차단한다.

만약 디자인이 중요한 웹이거나, 디자이너가 레이아웃이 변경되는 현상을 원치 않는다면 FOIT 방식을 사용하면 되지만, 그게 아니라면 사용자에게 텍스트를 빨리 출력해줄 수 있는 FOUT 방식을 사용하면 된다.

font-display 속성

css의 font-display 속성은 웹 폰트의 다운로드 상태에 따라 font-face가 표시되는 방법을 결정할 수 있다.

font-display: auto;
/* 브라우저 기본 동작 */

font-display: block;
/* FOIT 방식과 동일. 웹 폰트가 로딩되지 않았다면 렌더링 X(최대 3초) */

font-display: swap;
/* FOUT 방식 */

font-display: fallback;
/*  100ms 동안 텍스트가 보이지 않고, 그 후 폴백 폰트로 렌더링. 약 2초의 전환시간이 있다. 이 시간 안에 다운로드가 되지 않는다면 웹 폰트로 전환되지 않고 폴백 폰트 유지 */

font-display: optional;
/* fallback 옵션과 비슷하지만 다르게 작동하는 옵션. 웹 폰트를 다운로드하지만 브라우저가 네트워크 상태를 파악해 웹 폰트 전환 여부를 결정 */

텍스트가 항상 보이게 하려면 FOUT와 동일하게 작동하는 swap 옵션을 사용하면 된다. font-display 속성은 Internet Explorer 계열 브라우저를 제외한 브라우저가 지원한다. 텍스트가 보이지 않는 문제가 발생하는 브라우저에서는 문제없이 최적화에 font-display 속성을 사용할 수 있다.

위는 swap 방식을 적용했을 때 보여지는 화면이다. 차이를 잘 보여지도록 하기 위해 safari에서 확인해보았다.

preload 옵션

<link
  rel="preload"
  href="../font/pretendard-regular.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

preload 옵션은 <link> 태그 rel 속성에 사용하는 옵션으로 해당 리소스를 다른 리소스보다 빨리 로딩할 수 있도록 하는 옵션이다. 주로 서비스에서 중요한 폰트, 이미지, 비디오 파일과 같은 것을 의도적으로 먼저 로딩하기 위해서 사용한다.

하지만 preload 옵션으로 적용한 리소스의 용량이 크거나 수가 많아질 경우 처음 렌더링 시간이 늘어날 수도 있기 때문에 적당히 서비스에 맞게 사용하는 것이 좋다.

참고로, preload 옵션은 아직 Chrome과 Safari만 지원하고 Internet Explorer와 Edge, Firefox는 지원하지 않는다.