이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹 글꼴 크기 줄이기

Ilya Grigorik

Jeremy Wagner

서체는 좋은 디자인, 브랜딩, 가독성, 접근성의 핵심입니다. 웹 글꼴은 위의 모든 기능과 그 이상을 가능하게 합니다. 텍스트는 선택, 검색, 확대/축소가 가능하고 높은 DPI에서도 잘 작동하며 화면 크기 및 해상도에 상관없이 일관되고 선명한 텍스트 렌더링을 제공합니다. 웹 글꼴은 좋은 디자인, UX 및 성능을 실현하는 데 중요합니다.

웹 글꼴 최적화는 전반적인 성능 전략에 중요한 부분입니다. 각 글꼴은 추가 리소스이며, 일부 글꼴은 텍스트 렌더링을 차단할 수 있지만 페이지가 웹 글꼴을 사용하는 것만으로 렌더링 속도가 느려진다고는 볼 수 없습니다. 반대로, 글꼴이 페이지에 로드되고 적용되는 방법에 대한 적절한 전략과 함께 최적화된 글꼴을 사용하면 총 페이지 크기를 줄이고 페이지 렌더링 시간을 향상시키는 데 도움이 될 수 있습니다.

웹 글꼴의 구조

웹 글꼴은 글리프로 구성된 모음이며, 각 글리프는 문자나 기호를 설명하는 벡터 모양입니다. 그 결과, 두 가지 단순한 변수가 특정 글꼴 파일의 크기를 결정합니다. 이 두 변수는 각 글리프의 벡터 경로에 대한 복잡성과 특정 글꼴에 포함된 글리프 수입니다. 예를 들어, 가장 인기 있는 웹 글꼴 중 하나인 Open Sans에는 라틴어, 그리스어 및 키릴어 문자를 포함하는 897개의 글리프가 들어 있습니다.

글꼴을 선택할 때 지원되는 문자 집합을 고려하는 것이 중요합니다. 페이지 콘텐츠를 여러 언어로 현지화해야 하는 경우 사용자에게 일관된 모양과 경험을 제공할 수 있는 글꼴을 사용해야 합니다. 예를 들어 Google의 Noto 글꼴 모음은 전 세계 모든 언어를 지원하는 것을 목표로 합니다. 하지만, 모든 언어가 포함된 Noto의 총 크기는 1.1GB 이상의 ZIP 다운로드를 생성한다는 사실에 유의해야 합니다.

이 게시물에서는 웹 글꼴의 전송 파일 크기를 줄이는 방법을 알아봅니다.

웹 글꼴 형식

오늘날 웹에서는 두 가지 권장 글꼴 컨테이너 형식이 사용됩니다.

WOFF 및 WOFF 2.0은 광범위한 지원과 모든 최신 브라우저에서 지원됩니다.

최신 브라우저에 WOFF 2.0 버전을 제공합니다.
Internet Explorer 11을 계속 지원해야 하는 경우와 같이 절대적으로 필요한 경우에만 WOFF를 대체로 제공합니다.
또는 기존 브라우저에서 웹 글꼴을 사용하지 않고 시스템 글꼴로 대체할 수도 있습니다. 제약이 많은 오래된 기기에서도 더 나은 성능을 보일 수 있습니다.
WOFF 및 WOFF 2.0은 아직 사용 중인 최신 브라우저와 레거시 브라우저의 모든 기반을 포괄하므로, 더 이상 EOT 및 TTF를 사용할 필요가 없으며 웹 글꼴 다운로드 시간이 길어질 수 있습니다.

웹 글꼴 및 압축

WOFF와 WOFF 2.0 모두 압축이 기본 제공됩니다. WOFF 2.0의 내부 압축은 Brotli를 사용하며, WOFF보다 최대 30% 더 우수한 압축 성능을 제공합니다. 자세한 내용은 WOFF 2.0 평가 보고서를 참고하세요.

마지막으로, 일부 글꼴 형식에 특정 플랫폼에서 필요하지 않을 수 있는 글꼴 힌트 및 커닝 정보와 같은 추가적인 메타데이터가 들어 있다는 사실에 주목할 필요가 있습니다. 따라서 추가적인 파일 크기 최적화가 가능합니다. 예를 들어 Google Fonts는 각 글꼴에 30개 이상의 최적화된 버전을 유지하고 각 플랫폼 및 브라우저에 최적의 버전을 자동으로 감지하여 제공합니다.

`@font-face`로 글꼴 모음 정의

@font-face CSS at-rule을 사용하면 특정 글꼴 리소스의 위치, 해당 스타일 특징 및 이 글꼴이 사용되는 유니코드 코드 포인트를 정의할 수 있습니다. 이러한 @font-face 선언의 조합은 '글꼴 모음'을 생성하는 데 사용될 수 있으며, 브라우저는 이 글꼴 모음을 사용하여 어떠한 글꼴 리소스를 다운로드하여 현재 페이지에 적용해야 할지를 평가합니다.

가변 글꼴 고려

가변 글꼴을 사용하면 글꼴의 여러 변형이 필요한 경우 글꼴 파일 크기를 크게 줄일 수 있습니다. 일반 및 굵은 스타일과 기울임꼴 버전을 모두 로드하는 대신 모든 정보가 포함된 단일 파일을 로드할 수 있습니다. 그러나 가변 글꼴 파일 크기는 개별 글꼴 버전보다 크지만 여러 버전을 조합한 크기보다는 작습니다. 하나의 큰 가변 글꼴을 사용하는 대신 중요한 글꼴 변형을 먼저 제공하고 나중에 다른 변형을 다운로드하는 것이 좋습니다.

이제 모든 최신 브라우저에서 가변 글꼴을 지원합니다. 웹상의 가변 글꼴 소개에서 자세히 알아보세요.

올바른 형식 선택

각 @font-face 선언은 여러 선언의 논리적 그룹으로 작용하는 글꼴 모음의 이름, 스타일, 두께, 스트레치와 같은 글꼴 속성, 글꼴 리소스의 위치에 대해 우선순위가 지정된 목록을 지정하는 src 설명자를 제공합니다.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

우선, 위의 예시에서는 두 가지 스타일(normal 및 italic)을 가지는 단일 Awesome Font 모음을 정의합니다. 이러한 스타일은 각각 다른 글꼴 리소스 집합을 가리킵니다. 각각의 src 설명자에는 우선순위가 지정되고 쉼표로 구분된 리소스 버전 목록이 포함되어 있습니다.

local() 지시어를 사용하면 로컬에 설치된 글꼴을 참조, 로드, 사용할 수 있습니다. 사용자가 이미 시스템에 글꼴을 설치한 경우 네트워크를 완전히 우회하므로 가장 빠릅니다.
url() 지시문을 사용하면 외부 글꼴을 로드할 수 있으며, 이 지시문은 제공된 URL에서 참조하는 글꼴의 형식을 나타내는 format() 힌트(선택 항목)를 포함할 수 있습니다.

참고: 기본 시스템 글꼴 중 하나를 참조하지 않을 경우, 사용자가 글꼴을 로컬로 설치하는 경우는 드물며, 특히 추가 글꼴을 '설치'하는 것이 사실상 불가능한 휴대기기에서 더 그렇습니다. local() 항목으로 시작하는 경우에도 항상 다운로드되지 않은 항목의 url() 항목 목록을 제공해야 합니다.

브라우저가 글꼴이 필요한지 여부를 결정할 때에는 지정된 순서대로 제공된 리소스 목록의 항목에 대해 확인 절차를 반복하여 적절한 리소스를 로드하려고 시도합니다. 예를 들어, 위의 예시를 실행한 후에는 다음 작업이 수행됩니다.

브라우저가 페이지 레이아웃을 실행하고 페이지에 지정된 텍스트를 렌더링하는 데 필요한 글꼴 버전을 결정합니다. 페이지의 CSS 객체 모델(CSSOM)에 포함되지 않은 글꼴은 필요하지 않으므로 브라우저에서 다운로드하지 않습니다.
각 필요한 글꼴에 대해 브라우저가 이 글꼴을 로컬로 사용할 수 있는지 여부를 확인합니다.
글꼴을 로컬에서 사용할 수 없는 경우 브라우저는 외부 정의에서 이 과정을 반복합니다.
- 형식 힌트가 존재하면 브라우저는 다운로드를 시작하기 전에 이 힌트를 지원하는지 여부를 확인합니다. 브라우저가 힌트를 지원하지 않을 경우 그 다음 항목으로 진행합니다.
- 형식 힌트가 없을 경우 브라우저는 리소스를 다운로드합니다.

로컬 및 외부 지시문을 적절한 형식 힌트와 함께 사용하면, 모든 사용 가능한 글꼴 형식을 직접 지정할 수 있으며 나머지는 브라우저가 처리하도록 맡길 수 있습니다. 브라우저가 필요한 리소스를 결정하고 최적의 형식을 선택합니다.

유니코드 범위 서브세팅

스타일, 두께, 스트레치와 같은 글꼴 속성 외에도 @font-face 규칙을 사용하면 각 리소스에서 지원하는 유니코드 코드 포인트 집합을 정의할 수 있습니다. 이를 통해 대규모 유니코드 글꼴을 더 작은 하위 집합(예: 라틴어, 키릴어, 그리스어 하위 집합)으로 분할하여 특정 페이지에서 텍스트를 렌더링하는 데 필요한 글리프만 다운로드할 수 있습니다.

unicode-range 설명자를 사용하면 쉼표로 구분된 범위 값 목록을 지정할 수 있습니다. 각 범위 값은 다음 세 가지 형식 중 하나일 수 있습니다.

단일 코드 포인트(예: U+416)
간격 범위(예: U+400-4ff): 범위의 시작 및 끝 코드 포인트를 나타냅니다.
와일드 카드 범위(예: U+4??): ? 문자는 임의의 16진수를 나타냅니다.

예를 들어 Awesome Font 모음을 라틴어 및 일본어 하위 집합으로 분할할 수 있으며, 브라우저가 필요에 따라 이 하위 집합을 각각 다운로드합니다.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

유니코드 범위 하위 집합과 글꼴의 각 스타일 버전에 대해 별도의 파일을 사용하면 다운로드하기에 더욱 빠르면서도 더욱 효율적인 합성 글꼴 모음을 정의할 수 있습니다. 방문자는 필요한 버전과 하위 집합만 다운로드하면 되고, 페이지에서 절대로 보거나 사용하지 않을 하위 집합은 다운로드할 필요가 없습니다.

거의 모든 브라우저가 unicode-range를 지원합니다. 이전 브라우저와의 호환성을 위해 '수동 서브세팅'으로 대체해야 할 수 있습니다. 이 경우 필요한 모든 하위 집합을 포함하는 단일 글꼴 리소스를 제공하는 것으로 대체하고 나머지는 브라우저에서 숨겨야 합니다. 예를 들어 페이지에서 라틴어 문자만 사용하는 경우 다른 글리프를 제거하고 해당 특정 하위 집합을 독립형 리소스로 제공할 수 있습니다.

필요한 하위 집합을 결정합니다.
- 브라우저가 유니코드 범위 하위 집합을 지원하는 경우 올바른 하위 집합을 자동으로 선택합니다. 페이지는 하위 집합 파일을 제공하고 @font-face 규칙에 적절한 유니코드 범위만 지정하면 됩니다.
- 브라우저가 유니코드 범위 하위 집합을 지원하지 않으면 페이지에서 모든 불필요한 하위 집합을 숨겨야 합니다. 즉, 개발자가 필수 하위 집합을 지정해야 합니다.
글꼴 하위 집합 생성:
- 오픈소스 pyftsubset 도구를 사용하여 글꼴을 서브세팅하고 최적화합니다.
- Google Font와 같은 일부 글꼴 서버는 기본적으로 자동으로 하위 집합을 만듭니다.
- 일부 글꼴 서비스에서는 페이지에 필요한 하위 집합을 수동으로 지정하는 데 사용할 수 있는 사용자설정 쿼리 매개변수를 통한 수동 서브세팅을 허용합니다. 글꼴 제공업체의 문서를 참고하세요.

글꼴 선택 및 합성

각 글꼴 모음은 여러 스타일 버전 (일반, 굵게, 기울임꼴)과 각 스타일에 대한 여러 두께로 구성될 수 있습니다. 각 스타일에는 서로 아주 다른 글리프 모양(예: 공백, 크기 또는 모양이 서로 다름)이 포함될 수 있습니다.

위의 다이어그램은 세 가지 서로 다른 두께를 제공하는 글꼴 모음을 보여줍니다.

400(일반)
700(굵은꼴)
900(아주 굵은꼴)을 제공하는 글꼴 모음을 보여줍니다.

그 사이에 있는 기타 모든 버전(회색으로 표시되어 있음)은 브라우저에 의해 가장 가까운 버전으로 자동으로 매핑됩니다.

글꼴이 존재하지 않는 상태에서 두께가 지정되면 가까운 두께를 가진 글꼴이 사용됩니다. 일반적으로, 굵은 두께는 두꺼운 두께를 가진 글꼴에 매핑되고, 얇은 두께는 얇은 두께를 가진 글꼴에 매핑됩니다.
CSS 글꼴 일치 알고리즘

기울임꼴 변형에도 유사한 로직이 적용됩니다. 글꼴 디자이너는 생성할 변형을 제어하고 개발자는 페이지에서 사용할 변형을 제어합니다. 버전은 각각 개별적인 다운로드이므로 버전 수를 적게 유지하는 것이 좋습니다. 예를 들어 Awesome Font 모음에 대해 두 가지 굵은 글꼴 버전을 정의할 수 있습니다.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

위의 예시에서는 동일한 라틴어 글리프 집합(U+000-5FF)을 포함하되, 두 가지 다른 '두께', 즉 일반(400) 및 굵은꼴(700)을 제공하는 두 가지 리소스로 구성된 Awesome Font 모음을 선언합니다. 하지만 CSS 규칙 중 하나가 다른 글꼴 두께를 지정하거나 font-style 속성을 italic로 설정하면 어떻게 될까요?

정확한 글꼴 일치를 사용할 수 없는 경우 브라우저는 가장 가까운 일치 항목을 대신 사용합니다.
스타일 일치 항목이 없으면(예: 위의 예에서는 기울임꼴 버전이 선언되지 않음) 브라우저가 자체 글꼴 버전을 합성합니다.

위의 예시에서는 Open Sans에 대한 실제 글꼴 결과와 합성 글꼴 결과 사이의 차이점을 보여줍니다. 합성된 모든 버전은 400 두께의 단일 글꼴로부터 생성됩니다. 보시다시피, 결과가 눈에 띄게 차이가 납니다. 굵은 글꼴 버전과 기울임꼴 글꼴 버전을 생성하는 방법에 대한 세부정보는 명시되어 있지 않습니다. 따라서 결과는 브라우저마다 다르며 글꼴에 따라 크게 달라집니다.

웹 글꼴 크기 최적화 체크리스트

글꼴 사용 감사 및 모니터링: 페이지에 너무 많은 글꼴을 사용하지 말고, 각 글꼴마다 사용된 글꼴 버전의 수를 최소화합니다. 이렇게 하면 사용자에게 더욱 일관되고 빠른 경험을 제공할 수 있습니다.
가능하면 기존 형식을 사용하지 않음: EOT, TTF, WOFF 형식은 WOFF 2.0보다 큽니다. EOT 및 TTF는 엄격히 불필요한 형식이지만 Internet Explorer 11을 지원해야 하는 경우 WOFF를 사용할 수 있습니다. 최신 브라우저만 타겟팅하는 경우 WOFF 2.0만 사용하는 것이 가장 간단하고 성능이 우수한 옵션입니다.
글꼴 리소스 서브세팅: 많은 글꼴을 서브세팅하거나 여러 유니코드 범위로 분할하면 특정 페이지에 필요한 글리프만 제공할 수 있습니다. 그러면 파일 크기가 줄어들고 리소스의 다운로드 속도가 향상됩니다. 하지만 하위 집합을 정의할 때 글꼴 재사용을 위해 최적화하도록 주의를 기울이세요. 예를 들어, 각 페이지에서 서로 다르지만 겹치는 문자 집합은 다운로드하지 마세요. 좋은 방법은 스크립트(예: 라틴어, 키릴어)를 기반으로 서브세팅하는 것입니다.
src 목록에서 local() 우선 적용: src 목록에 local('Font Name')을 먼저 나열하면 이미 설치된 글꼴에 대한 HTTP 요청이 생성되지 않습니다.
Lighthouse를 사용하여 텍스트 압축을 테스트합니다.

최대 콘텐츠 페인트(LCP) 및 누적 레이아웃 이동(CLS)에 미치는 영향

페이지의 콘텐츠에 따라 텍스트 노드는 최대 콘텐츠 페인트 (LCP) 후보로 간주될 수 있습니다. 따라서 사용자가 페이지의 텍스트를 가능한 한 빨리 볼 수 있도록 이 도움말의 조언에 따라 웹 글꼴을 최대한 작게 유지하는 것이 중요합니다.

최적화 작업을 수행했음에도 불구하고 웹 글꼴 리소스가 너무 커서 페이지 텍스트가 표시되는 데 시간이 너무 오래 걸릴 수 있다고 우려되는 경우 font-display 속성에는 글꼴이 다운로드되는 동안 텍스트가 표시되지 않도록 하는 데 도움이 되는 여러 설정이 있습니다. 그러나 swap 값을 사용하면 사이트의 누적 레이아웃 이동(CLS)에 영향을 미치는 상당한 레이아웃 이동이 발생할 수 있습니다. 가능하면 optional 또는 fallback 값을 사용하는 것이 좋습니다.

웹 글꼴이 브랜딩과 더 나아가 사용자 환경에 중요한 경우 브라우저에서 글꼴을 요청할 때 유리하도록 글꼴을 미리 로드하는 것이 좋습니다. 이렇게 하면 font-display: swap를 사용하는 경우 스왑 기간이 줄고 font-display를 사용하지 않는 경우 차단 기간이 줄어듭니다.

웹 글꼴 크기 줄이기

웹 글꼴의 구조

웹 글꼴 형식

웹 글꼴 및 압축

@font-face로 글꼴 모음 정의

가변 글꼴 고려

올바른 형식 선택

유니코드 범위 서브세팅

글꼴 선택 및 합성

웹 글꼴 크기 최적화 체크리스트

최대 콘텐츠 페인트(LCP) 및 누적 레이아웃 이동(CLS)에 미치는 영향

`@font-face`로 글꼴 모음 정의