React Academy · 강의

React의 이미지와 글꼴 최적화

올바른 크기와 형식(AVIF/WebP), font-display를 적용해 next/image 또는 지연 로드된 를 사용합니다.

React의 이미지와 글꼴 최적화은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이미지가 중요한 이유

이미지는 일반적으로 페이지에서 가장 큰 리소스입니다. 최적화되지 않은 이미지는 LCP 저하, 느린 페이지 로드, 높은 대역폭 비용을 초래하며 모바일에서 특히 문제가 됩니다.

Next.js Image 컴포넌트

next/image는 이미지를 자동으로 최적화합니다. 기본 지연 로딩, 반응형 srcSet, 최신 형식(WebP/AVIF), CLS 방지를 위한 올바른 크기 지정이 포함됩니다.

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // preload above-the-fold images
  sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>

일반 React에서 지연 로딩하기

기본 <img> 요소에 loading='lazy'를 추가합니다. browser는 화면 밖의 이미지가 뷰포트 가까이 스크롤될 때까지 로드를 지연합니다.

// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />

// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />

srcSet을 사용한 반응형 이미지

여러 크기를 제공하면 browser가 화면에 적합한 해상도를 선택하므로, 너비 400px인 모바일 화면에 2000px 이미지를 다운로드하는 일을 피할 수 있습니다.

<img
  src="/photo-800.jpg"
  srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Photo"
/>

Blurhash / 스켈레톤 자리 표시자

이미지가 로드되는 동안 흐릿한 자리 표시자를 표시하면 레이아웃 이동을 방지하고 사용자가 느끼는 성능을 개선할 수 있습니다.

// With next/image blur placeholder:
<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>

글꼴 로딩 전략

글꼴은 렌더링을 차단합니다. 사용자 지정 글꼴이 로드되는 동안 폴백 글꼴을 표시하도록 font-display: swap을 사용하면 FOIT(보이지 않는 텍스트의 깜박임)를 줄일 수 있습니다.

/* In global CSS: */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.woff2') format('woff2');
  font-display: swap; /* show fallback, swap to MyFont when ready */
}

Next.js 글꼴 최적화

next/font는 빌드 시 Google Fonts를 로드하고 자체 호스팅하며, 글꼴 교체로 인한 CLS를 제거하도록 font-display: optional을 적용합니다.

import { Inter } from 'next/font/google';

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

export default function RootLayout({ children }) {
  return <html className={inter.variable}><body>{children}</body></html>;
}

글꼴 서브셋 만들기

필요한 문자 서브셋만 로드합니다. 전체 Unicode 글꼴은 1MB 이상일 수 있지만, Latin 서브셋은 일반적으로 30~80KB입니다.

// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin

// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });

중요한 글꼴 미리 로드

첫 화면 위쪽에 사용되는 글꼴을 미리 로드하면 HTML 파싱과 동시에 로드할 수 있어 렌더링 차단 시간을 줄일 수 있습니다.

<link
  rel="preload"
  href="/fonts/MyFont.woff2"
  as="font"
  type="font/woff2"
  crossOrigin="anonymous"
/>

CDN 및 캐싱

긴 캐시 TTL을 적용한 CDN에서 이미지와 글꼴을 제공합니다(Cache-Control: max-age=31536000, immutable). 콘텐츠 해시가 포함된 파일 이름을 사용하면 최신 파일이 캐시를 우회하도록 할 수 있습니다.

빠른 확인

font-display: swap은 웹 글꼴에 어떤 역할을 합니까?

요약

자동 최적화에는 next/image를 사용하고, 일반 React에서는 기본 loading='lazy'와 srcSet을 사용합니다. <picture> 폴백과 함께 AVIF/WebP를 제공합니다. 웹 글꼴에는 font-display: swap을 적용하고, Google Fonts를 자체 호스팅하려면 next/font를 사용하며, 첫 화면 위쪽의 중요한 리소스를 미리 로드합니다.

자주 묻는 질문