[Next.js] 폰트 최적화 : next/font(Google Font & Local Font)

Front-End/Next.js 2024. 11. 13. 14:59

 

Next.js는 성능 최적화를 위해 Google Fonts를 비롯한 웹 폰트를 효율적으로 관리할 수 있는 다양한 기능을 제공한다.

Next.js의 next/font 패키지를 활용하면 폰트 로드 성능을 향상시킬 수 있다.

 

이번 포스팅에서는 Next.js에서 폰트와 이미지를 최적화하는 방법에 대해 알아보고자 한다.

 

01. 왜 폰트를 최적화해야 할까?

웹사이트에서 폰트는 사용자 경험과 디자인의 핵심 요소 중 하나이다. 그러나 사용자 정의 폰트를 사용하게 되면 폰트 파일을 다운로드하는 과정에서 네트워크 요청이 발생하여 성능에 영향을 줄 수 있다. 특히 폰트 로딩 과정에서 사용자 경험을 저해할 수 있는 문제들이 있다.

 

◼︎ Cumulative Layout Shift 

CLS는 Google이 웹사이트 성능과 사용자 경험을 평가하는 핵심 지표 중 하나이다.

페이지가 로드될 때 브라우저는 시스템 폰트로 텍스트를 먼저 렌더링한 후, 사용자 정의 폰트가 로드되면 폰트 교체가 이루어진다.

이때 텍스트 크기나 간격이 변경되면서 레이아웃 이동이 발생할 수 있다.

이러한 레이아웃 이동은 사용자가 콘텐츠를 읽는 중에 텍스트가 움직이게 되어 사용자 경험에 부정적인 영향을 미칠 것이다.

 

◼︎ FOUT와 FOIT 문제

  • FOUT(Flash of Unstyled Text) : 폰트가 로드되기 전 시스템 폰트로 텍스트가 잠깐 보였다가 사용자 정의 폰트로 변경되는 현상
  • FOIT(Flash of Invisible Text) : 폰트가 로드되기 전 텍스트가 보이지 않다가 사용자 정의 폰트가 로드된 후 텍스트가 나타나는 현상

FOUT와 FOIT와 같은 문제들은 웹 폰트 로드 방식과 브라우저 처리 방식에 따라 발생하며 사용자 경험을 저해할 수 있다.

 

 

 

02. next/font 패키지란?

Next.js는 13.2 버전부터 next/font라는 패키지를 도입하여 웹 폰트와 자동 최적화를 제공한다.

이전에는 폰트를 추가하기 위해 Google Fonts, Adobe Fonts 등의 외부 서비스를 사용하거나, 로컬 폰트를 직접 설정해야 했다.

이 과정에서 폰트 로딩으로 인해 성능 이슈나 CLS 같은 문제를 발생시킬 수 있었다

next/font는 이러한 문제를 해결하고자 다음과 같은 기능을 제공한다.

 

◼︎ 자동 최적화

next/font는 빌드 시점에 폰트 파일을 다운로드하여 정적 자산으로 번들링한다.

즉, 폰트 파일을 외부에서 가져오는 대신, Next.js가 빌드한 정적 파일과 함께 배포된다.

이를 통해 초기 페이지 로드 시, 별도의 폰트 서버에 요청하지 않고 로컬에서 즉시 로드가 가능해져 네트워크 요청을 줄일 수 있다.

폰트 파일을 정적 자산과 함께 제공함으로써 초기 로드 성능이 개선된다.

 

◼︎ 서브셋 자동 생성

next/font는 폰트의 서브셋을 자동으로 생성한다.

서브셋은 필요한 글리프(문자)만 포함된 축소된 폰트 파일을 의미한다.

모든 글리프를 포함한 큰 폰트 파일 대신, 필요한 글리프만 포함하여 폰트 크기를 줄인다.

작은 서브셋 폰트를 사용함으로써 페이지 로딩 속도가 빨라지고 데이터 사용량이 줄어든다.

 

◼︎ 서버 사이드 렌더링(SSR) 지원

폰트가 서버에서 렌더링된 후 클라이언트로 전달되기 때문에, 사용자에게 초기 로딩 중에 폰트가 적용된 페이지를 빠르게 보여줄 수 있다.

폰트 로딩이 서버에서 이루어지기 때문에 클라이언트에서 폰트 로드로 인해 발생하는 레이아웃 이동이 최소화된다.

 

◼︎ 로컬 폰트와 Google Fonts 모두 지원

  • Google Fonts : next/font/google 모듈을 사용하여 Google Fonts를 쉽게 가져와 사용 가능하다.
  • 로컬 폰트 : next/font/local 모듈을 통해 프로젝트 내 로컬 폰트를 자겨와 사용 가능하다. 네트워크 연결 없이도 로컬 폰트를 빠르게 사용할 수 있다.

 

 

 

03. next/font 사용 방법 - Google Fonts

next/font/google은 Next.js 13.2 버전 이후 도입된 폰트 모듈이다.

Google Fonts에서 폰트를 가져와 자동으로 최적화하고, 어플리케이션에 적용할 수 있게 도와준다.

next/font/google은 아래와 같이 사용할 수 있다.

// /app/layout.tsx
import { Roboto } from 'next/font/google';

const roboto = Roboto({
  subsets: ['latin'], // 필요한 서브셋만 가져오기
  weight: ['400', '700'], // 필요한 굵기만 가져오기
  display: 'swap', // FOUT 문제 해결을 위해 swap 사용
  // 또는 'optional'로 변경 가능
});

export const metadata = {
  title: 'Next.js Font Optimization Example',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={roboto.className}>{children}</body>
    </html>
  );
}

 

◼︎ 서브셋 옵션

subsets는 폰트의 언어별 서브셋을 지정한다. latin, latin-ext, cyrillic 등이 있다.

필요한 서브셋만 로드하여 불필요한 데이터 전송을 줄일 수 있다.

 

◼︎ weight 옵션

weight는 사용할 폰트의 굵기만 로드하여 가져오는 기능을 제공한다.

 

◼︎ display 옵션

display 속성을 통해 폰트가 로딩되는 방식을 제어할 수 있다.

display의 속성으로는 'swap'과 'optional'을 사용할 수 있다. 이 두 방식의 차이점은 아래에서 더 자세히 다룬다.

 

◼︎ className 사용

roboto.className은 next/font에서 생성된 클래스로, HTML 요소에 자동으로 폰트를 적용한다.

이 클래스를 body 태그에 추가하여 페이지 전체에 Roboto 폰트가 적용되도록 설정하였다.

 

 

 

🎯 Q. 로드하지 않은 폰트 두께를 요청하면?

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'], // 400, 700 두께만 가져오기
  display: 'swap',
});

Roboto 폰트를 불러올 때 400, 700 두 가지 폰트 굵기만 가져왔다.

만약 코드에서 fontWeight를 400, 700이 아닌 200이나 600으로 지정했을 때 어떻게 동작할 지 궁금하였다.

 

export default function FontPage() {
  return (
    <div>
      <p style={{ fontWeight: 700 }}>Roboto Bold Text (700)</p>
      <p style={{ fontWeight: 600 }}>Roboto Bold Text (600)</p>
      <p style={{ fontWeight: 400 }}>Roboto Regular Text (400)</p>
      <p style={{ fontWeight: 200 }}>Roboto Regular Text (200)</p>
    </div>
  );
}

위와 같이 200, 400, 600, 700 각각의 폰트 굵기로 텍스트를 출력하면 어떤 결과를 가져올까

출력 결과는 다음과 같다.

 

next/font 설정에서 400, 700 두께만 로드했기 때문에 이 외 두께를 로드하면 가장 가까운 굵기로 대체되어 렌더링된다.

 

  • 첫 번째 <p> 태그: fontWeight: 700 → Bold (700) 적용
  • 두 번째 <p> 태그: fontWeight: 600 → Bold (700)으로 대체
  • 세 번째 <p> 태그: fontWeight: 400 → Regular (400) 적용
  • 네 번째 <p> 태그: fontWeight: 200 → Regular (400)으로 대체

 

 

 

 

💡 display: swap과 display: optional 차이

Next.js에서 next/font 모듈을 사용해 폰트를 불러올 때, display 속성을 통해 폰트가 로딩되는 방식을 제어할 수 있다.

display 속성 값으로는 swap과 optional이 있다.

 

◼︎ display: swap

  • 초기 로딩시: 폴백 폰트(ex. 시스템 기본 폰트)가 우선 표시
  • 커스텀 폰트 로드 완료 후: 폴백 폰트를 커스텀 폰트로 교체(swap)

이 방식은 FOUT 문제를 해결하는데 유용하다. 커스텀 폰트가 로딩되기 전에 폴백 폰트를 먼저 표시하여 텍스트를 빠르게 보이게 해준다.

즉, 폰트가 로딩되기 전에 폴백 폰트를 빠르게 보여주어 텍스트가 빈 화면에 나타나는 것을 방지한다.

하지만, 폰트가 교체될 때 레이아웃이 바뀌면서 폴백 폰트와 커스텀 폰트의 크기나 간격 차이로 화면의 요소들이 밀릴 수 있어 CLS가 발생할 수 있다.

 

◼︎ display: optional

  • 초기 로딩시: 폴백 폰트가 표시
  • 커스텀 폰트 로드 완료 후: 커스텀 폰트가 로드되면 로드된 커스텀 폰트를 캐시에 저장. 그리고 다음 방문시에 캐시된 폰트를 적용

만약 네트워크 상황이 좋지 않으면, 브라우저는 폴백 폰트를 계속 보여주고 있으며, 커스텀 폰트는 로드가 완료되면 해당 폰트를 캐시에 저장해둔다. 그리고 다음 방문시에 캐시된 커스텀 폰트를 적용하게 된다.

폴백 폰트 : 웹사이트에서 커스텀 폰트를 불러오는 동안 사용자가 보게 되는 기본 시스템 폰트
커스텀 폰트 : 웹사이트 디자인에 사용자가 직접 지정한 폰트. 구글 폰트나 외부 폰트를 통해 적용하거나, 서버에서 직접 호스팅한 폰트를 사용 가능

 

 

display: swap은 빠르게 커스텀 폰트를 로드하고 교체하고자 할 때 사용하며, 폰트 교체로 인한 레이아웃 이동을 감수해야 할 때 적합하다.

display: optional은 네트워크가 불안정하거나 폰트 로딩 시간이 긴 경우에 폰트 로딩 실패를 허용하고 대신 폴백 폰트를 대신 보여주게 된다. 하지만 커스텀 폰트가 로드되지 않으면 사용자가 의도한 스타일을 보지 못할 수 있다.

 

 

🔥 adjustFallbackFront : Layout Shift 문제 해결

adjusctFallbackFront는 Next.js 13에서 추가된 기능으로, 폰트 로딩 시 발생할 수 있는 레이아웃 이동(Layout Shift) 문제를 해결하는 방법이다. 이 기능은 폴백 폰트와 실제 커스텀 폰트 간의 스타일 차이로 인한 레이아웃 이동을 최소화한다.

 

웹 폰트를 불러오는 동안, 브라우저는 커스텀 폰트가 로드되기 전까지는 폴백 폰트를 사용한다.

폰트가 다르면 폴백 폰트와 커스텀 폰트 간에 크기, 높이, 간격 등의 차이가 발생할 수 있다. 이로 인해 레이아웃 이동(Layout Shift) 현상이 발생할 수 있다.

 

Next.js는 adjustFallbackFront 옵션을 사용하면 폴백 폰트의 스타일을 커스텀 폰트에 맞게 조정하여 이러한 문제를 방지할 수 있다.

즉, 폰트가 로드되기 전후의 시작적 차이를 최소화하여 레이아웃이 갑작스럽게 이동하지 않도록 한다.

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'], 
  adjustFallbackFront: true, // 폴백 폰트 스타일을 자동으로 조정
});

 

adjustFallbackFront: true를 설정하면 폴백 폰트가 로드될 때 커스텀 폰트의 크기, 높이, 간격 등을 고려하여 스타일을 자동으로 조정한다. 커스텀 폰트가 로드되면, 그 폰트로 부드럽게 교체된다. 이 과정에서 레이아웃이 이동하지 않으며 사용자에게 일관된 디자인을 제공한다.

이 기능을 활성화하면 폰트가 교체될 때 이질적인 크기 차이로 인한 레이아웃 이동을 방지할 수 있어 CLS를 줄일 수 있다.

 

 

 

 

04. next/font 사용 방법 - Local Font

Next.js에서 로컬 폰트를 사용하려면 next/font/local 모듈을 사용하여 폰트를 설정할 수 있다.

로컬 폰트를 사용하면 외부 서버나 폰트 제공 서비스를 통해 폰트를 로드하는 대신, 로컬 파일을 웹사이트에서 직접 사용하는 방식이다.

next/font/local 모듈을 사용하면 직접 제공하는 폰트 파일을 불러와 사용하게 된다.

 

로컬 폰트를 설정할 때는 폰트 파일의 경로, 스타일, 굵기 등의 옵션을 지정할 수 있다.

아래 예시에서는 woff2 포맷을 사용한 두 개의 폰트를 설정한다.

// /app/layout.tsx
import localFont from 'next/font/local';

const myFont = localFont({
  src: [
    {
      path: '/fonts/MyFont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '/fonts/MyFont-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  display: 'swap',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={myFont.className}>{children}</body>
    </html>
  );
}

 

◼︎ src

로컬 폰트를 설정하는 부분이다.

  • path : 로컬 폰트 파일의 경로. 예를 들어, /public/fonts/ 폴더 안에 있는 폰트 파일을 사용하려면 path: '/fonts/MyFont-Regular.woff2'처럼 설정
  • weight: 폰트의 굵기 설정
  • style : 폰트의 스타일 지정. normal이나 italic 등

 

◼︎ className

localFont 함수는 반환값으로 className을 제공한다. 이 className은 로컬 폰트를 사용하는 컴포너트에 적용하여 폰트를 적용할 수 있게 해준다.

 

 

References

https://mong-blog.tistory.com/entry/CSS-font-display-%EA%B8%80%EA%BC%B4-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D%EC%9D%84-%EB%B3%80%EA%B2%BD%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

 

[CSS] font-display, 글꼴 렌더링 방식을 변경하는 방법

🙂 이번 시간에는 글꼴 랜더링 방식을 컨트롤 하는, font-display에 대해 알아보았다! 1. 글꼴 랜더링 방식 우리가 어떤 사이트에 들어갔을 때 글자가 늦게 나타나거나, 혹은 글꼴이 나중에 적용되

mong-blog.tistory.com

 

 

반응형

'Front-End > Next.js' 카테고리의 다른 글

[Next.js] Linking & Navigating : next/link, next/navigation  (0) 2024.11.17
[Next.js] 이미지 최적화 : next/image  (15) 2024.11.14
[Next.js] CSS Styling : Tailwind, CSS Module, clsx  (6) 2024.11.12
[Next.js] SEO와 Metadata  (4) 2024.11.11
[Next.js] Routing : Layout / Route Groups / Dynamic Routes(동적 라우팅)  (11) 2024.10.09