폰트 최적화

Next.js는 강력한 내장 폰트 최적화 기능을 제공하여 웹 애플리케이션의 성능과 사용자 경험을 향상시킵니다.

이 절에서는 next/font 모듈을 사용한 폰트 최적화 방법, 커스텀 폰트 로딩 전략, 그리고 이들이 웹 폰트 성능에 미치는 영향에 대해 알아보겠습니다.

next/font 모듈 사용법

Next.js의 next/font 모듈은 Google Fonts와 로컬 폰트를 쉽게 사용하고 최적화할 수 있게 해줍니다.

Google Fonts 사용

import { Inter } from 'next/font/google'
 
const inter = Inter({ subsets: ['latin'] })
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

로컬 폰트 사용

import localFont from 'next/font/local'
 
const myFont = localFont({ src: './my-font.woff2' })
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

폰트 서브셋팅

폰트 서브셋팅은 필요한 문자만 포함하여 폰트 파일 크기를 줄이는 기술입니다.

const inter = Inter({ subsets: ['latin'] })

이 코드는 Latin 문자셋만 포함하도록 Inter 폰트를 최적화합니다.

가변 폰트 활용

가변 폰트는 하나의 파일에 여러 폰트 스타일을 포함하여 파일 크기를 줄이고 유연성을 높입니다.

import { Roboto_Flex } from 'next/font/google'
 
const roboto = Roboto_Flex({ subsets: ['latin'] })

폰트 로딩 성능 최적화

Next.js는 자동으로 폰트를 최적화하여 성능에 미치는 영향을 최소화합니다.

폰트 파일을 미리 로드합니다.
폰트 CSS를 인라인으로 삽입하여 추가적인 네트워크 요청을 줄입니다.
레이아웃 시프트를 방지하기 위해 폰트 CSS 조정을 자동으로 수행합니다.

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

display: 'swap' 옵션은 폰트가 로드되는 동안 시스템 폰트를 사용하도록 하여 콘텐츠를 즉시 표시합니다.

13장 SEO 및 메타데이터와의 연관성

폰트 최적화는 13장에서 다룰 SEO 및 메타데이터와 밀접한 관련이 있습니다. 최적화된 폰트는 페이지 로드 속도를 향상시키며, 이는 검색 엔진 랭킹에 긍정적인 영향을 미칩니다. 또한, 적절한 폰트 사용은 사용자 경험을 개선하여 사이트의 체류 시간을 늘리고 간접적으로 SEO에 도움을 줍니다.

실습 : Google Fonts와 커스텀 폰트 효율적으로 로드하기

이 실습에서는 Google Fonts의 'Roboto'와 로컬 커스텀 폰트를 효율적으로 로드하고 적용해보겠습니다.

Google Fonts 설정 :

// app/fonts.js
import { Roboto } from 'next/font/google'
 
export const roboto = Roboto({
  weight: ['400', '700'],
  subsets: ['latin'],
  display: 'swap',
})

로컬 커스텀 폰트 설정 :

// app/fonts.js
import localFont from 'next/font/local'
 
export const customFont = localFont({ 
  src: [
    {
      path: './fonts/CustomFont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/CustomFont-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  display: 'swap',
})

폰트 적용 :

// app/layout.js
import { roboto, customFont } from './fonts'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={roboto.className}>
        <main className={customFont.className}>
          {children}
        </main>
      </body>
    </html>
  )
}

컴포넌트에서 폰트 사용 :

// app/page.js
import { roboto, customFont } from './fonts'
 
export default function Home() {
  return (
    <div>
      <h1 className={roboto.className}>Welcome to my site</h1>
      <p className={customFont.className}>This text uses my custom font.</p>
    </div>
  )
}

이 실습을 통해 Google Fonts와 커스텀 폰트를 효율적으로 로드하고 적용하는 방법을 익힐 수 있습니다. Next.js의 폰트 최적화 기능을 활용하여 웹 폰트 사용으로 인한 성능 저하를 최소화하면서도 다양한 폰트를 사용할 수 있습니다.

Next.js의 폰트 최적화 기능은 웹 애플리케이션의 성능과 사용자 경험을 크게 향상시킬 수 있습니다. 자동 최적화, 서브셋팅, 가변 폰트 지원 등의 기능을 통해 개발자는 복잡한 폰트 최적화 작업 없이도 효율적으로 다양한 폰트를 사용할 수 있습니다.

이미지 최적화 코드 분할 및 지연 로딩