반응형
Why optimize fonts?(글꼴 최적화)
웹사이트 디자인에서 폰트의 중요성
- 폰트는 웹사이트의 가독성을 높이고, 브랜드 아이덴티티를 강화할 수 있습니다.
성능에 대한 영향
- 폰트 파일을 로드하는 데 시간이 걸리면 페이지 로딩 속도가 느려질 수 있습니다.
- 누적 레이아웃 이동(Cumulative Layout Shift, CLS): 폰트가 로드되기 전까지 브라우저가 텍스트를 시스템 폰트나 폴백 폰트로 렌더링하고, 이후 커스텀 폰트로 교체될 때 레이아웃 이동이 발생할 수 있습니다. 이 이동은 사용자 경험을 저하시킬 수 있으며, 특히 구글이 페이지 성능을 평가할 때 중요한 지표로 사용됩니다.
Next.js에서의 폰트 최적화
- Next.js는 next/font 모듈을 사용하여 폰트를 자동으로 최적화합니다. 폰트 파일을 빌드 타임에 다운로드하고, 이 파일들을 다른 정적 자산과 함께 호스팅합니다.
폰트 추가 방법
예시코드
fonts.ts에서 text의 폰트 설정을 정한 후 layout.tsx에서 정의된 폰트에 맞게 적용될 수 있도록 설정할 수 있습니다.
/* /app/ui/fonts.ts */
import { Inter } from 'next/font/google';
/* Inter 폰트를 'next/font/google' 모듈에서 가져옵니다.
이 모듈은 Next.js에서 제공하는 구글 폰트 로더로, 폰트를 효율적으로 관리하고 최적화할 수 있습니다. */
export const inter = Inter({ subsets: ['latin'] });
/* Inter 폰트를 설정하고, 'latin' 서브셋(라틴 문자 집합)을 로드합니다.
이 설정은 나중에 애플리케이션에서 이 폰트를 사용할 수 있도록 합니다. */
/* /app/layout.tsx */
import { inter } from '@/app/ui/fonts';
/* 'fonts.ts' 파일에서 정의한 Inter 폰트를 가져옵니다.
이 폰트를 애플리케이션의 레이아웃에 적용할 수 있게 합니다. */
<body className={`${inter.className} antialiased`}>
/* className에 `${inter.className}`를 사용하여 Inter 폰트를 <body> 요소에 적용합니다.
이로 인해 애플리케이션 전반에 걸쳐 이 폰트가 사용됩니다. */보조 폰트 추가
아래 코드와 같이 className의 속성을 활용하여 적용할 수 있습니다.
이런식으로 Lusitana 폰트를 설정한다면 AcmeLogo를 활성화할 수 있습니다!
/* /app/ui/fonts.ts */
import { Lusitana } from 'next/font/google';
/* Lusitana 폰트를 'next/font/google' 모듈에서 가져옵니다.
이 모듈은 Next.js에서 제공하는 구글 폰트 로더로, 폰트를 효율적으로 관리하고 최적화할 수 있습니다. */
export const lusitana = Lusitana({ subsets: ['latin'], weight: '400' });
/* Lusitana 폰트를 설정하고, 'latin' 서브셋(라틴 문자 집합)과 폰트 가중치 400을 로드합니다.
이 설정은 나중에 애플리케이션에서 특정 요소에 이 폰트를 사용할 수 있도록 합니다. */
/* /app/page.tsx */
import { lusitana } from '@/app/ui/fonts';
/* 'fonts.ts' 파일에서 정의한 Lusitana 폰트를 가져옵니다.
이 폰트를 특정 요소에 적용할 수 있게 합니다. */
export default function Page() {
return (
<main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
<AcmeLogo />
<p className={lusitana.className}>
This paragraph uses the Lusitana font.
</p>
{/* Lusitana 폰트를 <p> 요소에 적용하여, 이 요소 내의 텍스트가 Lusitana 폰트로 렌더링되도록 합니다. */}
{/* ... 다른 콘텐츠가 여기에 추가될 수 있습니다 */}
</div>
</main>
);
}Why optimize images?(이미지 최적화)
기본적인 HTML 이미지 태그의 한계
- HTML의 <img> 태그를 사용하면 이미지를 수동으로 관리해야 하는데, 이때 다양한 화면 크기에 대응하는 반응형 이미지 설정, 이미지 크기 지정, 로드 중 레이아웃 이동 방지, 뷰포트에 없는 이미지의 지연 로드(lazy load) 등이 문제가 생길 수 있습니다.
- width, height, aspect-ratio, srcset 등을 통해 직접 설정해두어야 한다.
next/image 컴포넌트의 장점
- 이미지를 로드하는 동안 레이아웃 이동(CLS)을 방지하고, 디바이스의 뷰포트 크기에 맞게 이미지를 자동으로 조정합니다.
- 뷰포트 밖에 있는 이미지는 지연 로드되어 성능을 향상시킵니다.
- 브라우저가 지원하는 경우 WebP, AVIF 같은 최신 포맷으로 이미지를 제공하여 더 나은 압축과 성능을 제공합니다.
예시 코드
import Image from 'next/image';
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
반응형
'코딩 > NextJS' 카테고리의 다른 글
| NextJS 공식문서 Chapter 4 관련 용어 및 정리 (0) | 2024.08.14 |
|---|---|
| NextJS 공식문서 Chapter 2 관련 용어 및 정리 (0) | 2024.08.14 |
| NextJS 공식문서 Chapter 1 관련 용어 및 정리 (0) | 2024.08.12 |
| [Next.js] Hydration와 use client (2) | 2024.07.22 |
