• About

아래로 당겨서 새로고침

웹 폰트(WebFont)가 궁금하다

date
Feb 28, 2023
thumbnail
og-image-1536x768.png
gsc
Done
public
public
slug
web-font
author
tags
Web
Frontend
summary
웹 페이지 성능에 영향을 주는 웹 폰트
type
Post
updatedAt
Oct 20, 2023 01:42 AM
Introdution웹 폰트의 문제점웹 폰트 FOIT, FOUTFOIT (Flash of Invisible Text)FOUT (Flash of Unstyled Text)FOUT 방식의 브라우저FOIT 방식의 브라우저CSS의 font-display 속성autoblockswapfallbackoptionalfont-display 속성 사용 예제웹 폰트 성능 최적화성능 지표FCPLCPCLS웹 폰트 포맷 종류 폰트 적용 방법 (@font-face)CDN 웹 폰트CDN 폰트 호스팅CDN 웹 폰트 장단점블로그에 적용마무리참고

Introdution

최근 글 웹 페이지 로딩 속도 최적화에서 웹 페이지 성능 개선을 진행하던 중, 웹 폰트의 문제점과 해결방안에 대해 살펴보게 되었다. 어떠한 경우에 웹 폰트의 최적화가 필요한지 그리고 어떻게 적용하는지 기록하고자 한다.
 

웹 폰트의 문제점

웹 폰트는 사이트 디자인에 있어서 큰 역할을 한다. 하지만 웹 폰트를 사용하면서 발생하는 몇 가지 문제점이 있다.
  • 로딩 시간이 느려짐
      • 웹 폰트를 사용하면 추가적인 HTTP 요청이 발생하게 되어 사이트의 로딩 속도가 느려질 수 있다. 이로 인해 사용자들은 사이트를 방문하는 것을 꺼릴 수도 있다.
  • 성능 저하
      • 웹 폰트를 사용하면 브라우저에서 폰트를 렌더링하는 시간이 길어질 수 있다. 특히 모바일 기기에서는 이러한 성능 저하가 더욱 두드러집니다.
  • 웹 폰트 지원 문제
      • 모든 브라우저에서 웹 폰트가 지원되지 않을 수 있다. 이 경우에는 대체 폰트가 사용되므로 사이트의 일관성이 깨질 수 있다.
  • 검색 엔진 최적화 문제
      • 웹 폰트를 사용하면 검색 엔진 최적화에 문제가 생길 수 있다. 특히, 폰트 파일이 큰 경우에는 이러한 문제가 더욱 심각해질 수 있다.

웹 폰트 FOIT, FOUT

FOIT (Flash of Invisible Text)

FOIT는 웹 폰트를 불러오는 과정에서 브라우저가 폰트를 렌더링하기 전까지 텍스트가 보이지 않는 현상을 말한다. 이는 폰트를 불러오는 시간이 길어질 때 발생할 수 있다. 사용자가 폰트가 로드될 때까지 대기해야 하므로 사용성을 저해할 수 있다.

FOUT (Flash of Unstyled Text)

FOUT는 FOIT와는 반대로 폰트를 로드하기 전에 브라우저가 대체 폰트를 사용해 텍스트를 렌더링하는 현상을 말한다. 이는 폰트가 로드되기 전에 사용자가 텍스트를 볼 수 있다는 장점이 있지만, 폰트가 로드될 때까지 대체 폰트와 원래 폰트가 서로 달라 사용자 경험이 일관성 없는 것처럼 느껴질 수 있다.
 
텍스트가 중요하지 않은 경우에는 FOIT를, 텍스트의 역할이 중요한 경우에는 FOUT를 적용하면 될 것 같다.

FOUT 방식의 브라우저

Internet Explorer는 웹 폰트가 로딩될 때까지 우선 fallback 폰트로 텍스트를 렌더링한다. 웹 폰트 로딩이 완료되면 텍스트를 웹 폰트로 전환한다. 이 방식은 웹 폰트 로딩 여부에 관계없이 텍스트가 항상 보이는 장점이 있다. 하지만 글꼴의 자간, 높이 등 서식이 달라 웹 폰트 적용 전과 후에 레이아웃이 변경될 수 있다.

FOIT 방식의 브라우저

Firefox와 Chrome 등의 브라우저는 웹 폰트가 로딩되기 전까지 해당 텍스트를 화면에 보여 주지 않는다. 웹 폰트 로딩이 완료되면 텍스트를 웹 폰트로 전환한다. 한 번에 웹 폰트를 보여줄 수 있다는 장점이 있지만, 웹 폰트의 로딩이 늦으면 빈 텍스트가 노출되는 문제점이 있다. 웹 폰트가 로딩되지 않은 상태로 3초가 지나면 fallback 폰트로 우선 렌더링해서 브라우저 자체적으로 웹 폰트의 로딩 시간이 과도하게 오래 걸리는 상황에 대비한다.

CSS의 font-display 속성

FOIT 방식 브라우저에서 FOUT 방식처럼 동작하도록 구현할 수 있다. CSS의 font-display 속성을 사용하면 웹 폰트 로딩 사태에 따른 동작을 설정할 수 있다.
 
font-display 속성은 웹 폰트가 로드되는 동안 브라우저가 취할 행동을 정의하는 데 사용되는 CSS 속성이다. 다음은 font-display 속성의 다섯 가지 값과 각각의 의미이다.

auto

브라우저가 최적의 방법으로 웹 폰트를 로드한다. 일반적으로 swap과 같은 동작을 함께 사용한다.

block

notion image
웹 폰트가 로드될 때까지 브라우저가 폴백 폰트를 사용하지 않는다. 웹 폰트가 로딩되지 않았을 때는 텍스트를 렌더링하지 않는다(최대 3초). 웹 폰트 로딩이 완료되면 웹 폰트를 적용한다.

swap

notion image
웹 폰트가 로드될 때까지 폴백 폰트를 사용한다. 이것은 FOUT방식과 동일하게 동작한다.

fallback

fallback옵션을 사용하면 우선 100ms 동안 텍스트가 보이지 않고, 그 후 fallback폰트로 렌더링한다. 특이한 점은 약 2초의 전환(swap) 시간이 있다는 점이다. 이 시간 안에 로딩이 완료되면 웹 폰트로 전환한다. 지만 이 시간이 지나면 웹 폰트 다운로드가 완료되어도 웹 폰트로 전환하지 않고 fallback 폰트를 유지한다.

optional

notion image
fallback옵션과 비슷하지만 다르게 작동하는 옵션이다. 우선 100ms 동안 텍스트가 보이지 않고 그 후 폴백 폰트로 전환한다. 웹 폰트를 다운로드하지만 브라우저가 네트워크 상태를 파악해 웹 폰트 전환 여부를 결정한다는 점이 이 옵션의 특이한 점이다. 예를 들어 네트워크의 연결 상태가 안 좋으면 웹 폰트의 다운로드가 완료되어도 캐시에 저장만 하고 전환은 하지 않는다.

font-display 속성 사용 예제

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/noto-sans-kr-v13-korean-regular.woff2') format('woff2'),
       url('/fonts/noto-sans-kr-v13-korean-regular.woff') format('woff');
  /* fallback */
  font-display: swap;
}
위 코드에서 font-display: swap은 폴백 폰트를 사용하다가 웹 폰트가 로드되면 웹 폰트로 전환하도록 설정했다.

웹 폰트 성능 최적화

웹 폰트는 성능에 다양한 영향을 미친다. 웹 폰트가 로드되지 않으면 브라우저는 일반적으로 텍스트 렌더링을 지연킨다. 이로 인해 First Contentful Paint (FCP)가 지연되기도 하고, 일부 상황에서는 Largest Contentful Paint (LCP)가 지연된다. 또한, 폰트 교체의 적용은 레이아웃 이동을 유발할 수 있으며, Cumulative Layout Shift (CLS)에 영향을 미칠 수 있다.

성능 지표

FCP

  • FCP(First Contentful Paint) 브라우저가 페이지의 첫 번째 요소(일반적으로 텍스트)를 렌더링한 시점이다. 사용자가 페이지를 요청한 후 FCP까지 걸리는 시간이 짧을수록 페이지는 빠르게 로드된 것으로 간주된다.

LCP

  • LCP(Largest Contentful Paint) 페이지에서 가장 큰 요소(일반적으로 이미지 또는 비디오)가 렌더링된 시점이다. LCP 시간은 페이지의 로딩 시간과 사용자 경험에 큰 영향을 미친다.

CLS

  • CLS(Cumulative Layout Shift) 페이지가 로드되는 동안 레이아웃의 이동 및 변경이 일어날 때 발생하는 시각적 불안정성을 측정하는 지표다. 사용자가 페이지를 볼 때 레이아웃의 이동이 있으면 혼란스러울 수 있으므로, CLS를 낮추는 것이 좋다.

웹 폰트 포맷 종류

폰트 파일의 확장자는 아래와 같은 종류가 있다. 각 확장자별 장단점이 있고, 어떠한 종류를 사용해야 하는지 알아보자.
다음은 NanumSquareRoundR 폰트의 웹 폰트 파일의 크기를 비교한 것이다.

폰트 적용 방법 (@font-face)

@font-face 규칙에서는 여러 가지 폰트 확장자를 제공할 수 있다. 이를 통해 브라우저가 지원하는 폰트 확장자를 사용하게 할 수 있고, 브라우저가 지원하지 않는 폰트 확장자에 대해서는 대체 폰트를 사용하도록 할 수 있다.
아래는 @font-face 규칙에서 여러 가지 폰트 확장자를 제공하는 예시다.
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
       url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
       url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
			 local('Nanum Gothic');  /* local 적용 */
  font-weight: normal;
  font-style: normal;
}

/* h1 태그에 폰트 적용 */
h1 {
  font-family: "Open Sans"
}
위 예시에서는 Open Sans폰트를 woff2, woff, ttf 확장자로 제공한다. 이렇게 여러 가지 폰트 확장자를 제공하면 브라우저에서는 지원하는 확장자를 사용하여 폰트를 불러올 수 있다. 여기서 woff2 폰트 확장자를 사용하는 것이 가장 효율적인 방법이다. woff2는 woff보다 더욱 효율적인 압축 기술을 사용하기 때문에, 더 작은 파일 크기로 더 빠르게 로드될 수 있다. 또한, local 속성은 사용자가 이미 해당 폰트를 가지고 있는 경우에는 로드하지 않고 사용하도록 한다. 이를 통해 폰트 파일의 로딩 속도를 더욱 빠르게 할 수 있다. 위 예시에서는 local('Nanum Gothic')을 사용하여 사용자가 이미 Nanum Gothic 폰트를 가지고 있는 경우에는 해당 폰트를 사용하도록 설정했다.
 

CDN 웹 폰트

CDN 웹 폰트란, Content Delivery Network의 약자인 CDN을 이용해서 웹 폰트를 불러오는 것을 말한다. CDN은 전 세계에 여러 곳에 위치한 서버에 같은 파일을 저장해 놓고, 사용자가 요청했을 때 가장 가까운 서버에서 파일을 불러오는 방법이다. 이를 이용하면 웹 폰트 파일을 불러올 때, 사용자의 지연 시간을 줄이는 데 도움을 줄 수 있다. 또한, 웹 폰트 파일이 CDN에 저장되어 있으면, 서버의 부하가 줄어들어 성능을 향상 시킬 수 있다.

CDN 폰트 호스팅

아래는 Google Fonts CDN을 이용한 폰트 호스팅 적용 코드 예제이다.
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Noto Sans KR', sans-serif;
    }
  </style>
</head>
<body>
  <p>안녕하세요, 웹 폰트 CDN 적용 예제입니다.</p>
</body>
</html>
위 코드에서 href 값은 Noto Sans KR 폰트를 가져오기 위한 Google Fonts CDN 주소이다. 해당 주소를 <link> 태그를 이용해 head 태그에 추가하면, 해당 폰트를 사용할 수 있다. 그리고 body 태그에 font-family 속성을 이용하여 폰트를 적용하면 된다.

CDN 웹 폰트 장단점

장점
  • 불필요한 중복 다운로드 방지
  • 빠른 페이지 로딩 속도
  • 전세계적으로 분산되어 있어 빠른 폰트 로딩 가능
  • 브라우저 캐시에 저장되며, 기존 사용자의 브라우저에 캐싱된 경우 요청은 생략한다.
  • CDN의 캐싱 정책을 활용하여 불필요한 네트워크 트래픽 감소
단점
  • CDN 서버와의 연결 상태에 따라 폰트 로딩 속도가 달라짐
  • CDN 서버 다운 또는 네트워크 상태 불안정 시 폰트 로딩 지연 가능
 

블로그에 적용

본 블로그는 Pretendard의 Subnet 폰트를 사용하고 있다. 해당 폰트는 무료 폰트로 다양한 곳에서 사용되고 있으므로, 사용자 브라우저에 캐싱된 데이터가 존재할 수 있다고 판단하고 CDN 방식으로 적용하였다.
기본 폰트는 영문과 한글을 모두 포함하고 있으며, 전체 문자의 수는 약 114,000개이다. (어마어마하다..) Subset 폰트는 전체 폰트 중에서 필요한 문자만 선택하여 사용하는 폰트이다. 이를 통해 사용되지 않는 문자를 로드하지 않아 폰트 파일의 용량을 줄이고, 폰트 로딩 속도를 빠르게 할 수 있다.
 

마무리

웹 폰트를 사용할 때는 @font-face 규칙을 사용하여 여러 가지 폰트 확장자를 제공하는 것이 좋다. woff2 폰트 확장자를 사용하는 것이 가장 효율적이며, local 속성을 사용하여 이미 해당 폰트를 가지고 있는 경우에는 로드하지 않아 로딩 속도를 더욱 빠르게 할 수 있다. 또한, CDN 웹 폰트를 사용하면 불필요한 중복 다운로드를 방지하여 빠른 페이지 로딩 속도를 보장할 수 있다.
 
이전 블로그의 성능을 개선하는 글을 작성하면서, 웹 폰트 최적화에 대해 조사해 보았다. 웹 폰트에 관한 많은 내용들이 존재하기에, 궁금한 내용은 아래 참고한 사이트 들을 통해 살펴보면 좋을 것 같다.
 
궁금한 것도 많은데.. 역시나.. 함께 알아야 할 것도 많다.. 🙃
 

참고

긴 글 읽어주셔서 감사합니다.
오탈자 및 내용 피드백은 언제나 환영합니다.

#Frontend#Web