이전 장에서는 Next.js 애플리케이션의 스타일을 지정하는 방법을 배웠습니다. 사용자 정의 글꼴과 히어로 이미지를 추가하여 홈페이지 작업을 계속해 보겠습니다.
next/font로 커스텀 폰트 추가하는 방법next/image로 이미지를 추가하는 방법- Next.js에서 글꼴과 이미지가 최적화되는 방법
1. 글꼴을 최적화하는 이유는 무엇입니까?
글꼴은 웹 사이트 디자인에서 중요한 역할을 하지만 프로젝트에서 사용자 정의 글꼴을 사용하면 글꼴 파일을 가져와서 로드해야 하는 경우 성능에 영향을 미칠 수 있습니다.
누적 레이아웃 변경은 웹사이트의 성능과 사용자 경험을 평가하기 위해 Google에서 사용하는 측정항목입니다. 글꼴을 사용하면 브라우저가 처음에 대체 글꼴이나 시스템 글꼴로 텍스트를 렌더링한 다음 로드된 후 사용자 지정 글꼴로 교체할 때 레이아웃 변경이 발생합니다. 이 교체로 인해 텍스트 크기, 간격 또는 레이아웃이 변경되고 그 주위의 요소가 이동될 수 있습니다.
Next.js는 next/font 모듈을 사용할 때 애플리케이션의 글꼴을 자동으로 최적화합니다. 빌드 시 글꼴 파일을 다운로드하고 다른 정적 자산과 함께 호스팅합니다. 이는 사용자가 애플리케이션을 방문할 때 성능에 영향을 미칠 수 있는 글꼴에 대한 추가 네트워크 요청이 없음을 의미합니다.
🔍 퀴즈
- Next.js는 글꼴을 어떻게 최적화합니까?
a. 성능을 향상시키는 추가 네트워크 요청이 발생합니다.
b. 모든 사용자 정의 글꼴을 비활성화합니다.
c. 런타임 시 모든 글꼴을 미리 로드합니다.
d. 추가 네트워크 요청이 없도록 다른 정적 자산과 함께 글꼴 파일을 호스팅합니다.
2. 기본 글꼴 추가
애플리케이션에 맞춤 Google 글꼴을 추가하여 이것이 어떻게 작동하는지 살펴보겠습니다.
/app/ui 폴더에 fonts.ts라는 새 파일을 만듭니다. 이 파일을 사용하여 애플리케이션 전체에서 사용될 글꼴을 유지하게 됩니다.
next/font/google 모듈에서 Inter 글꼴을 가져옵니다. 이것이 기본 글꼴이 됩니다. 그런 다음 로드할 하위 집합을 지정합니다. 이 경우 'latin':
import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });마지막으로 /app/layout.tsx의 <body>요소에 글꼴을 추가합니다.
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts'; // 글꼴 추가
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body> // 폰트 적용
</html>
);
}<body>요소에 Inter를 추가하면 해당 글꼴이 애플리케이션 전체에 적용됩니다. 여기에 글꼴을 부드럽게 만들어주는 Tailwind antialiased도 추가합니다. 이 클래스를 사용할 필요는 없지만 멋진 느낌을 더해줍니다.
브라우저로 이동하여 개발 도구를 열고 body 요소를 선택하세요. 이제 Inter와 Inter_Fallback은 스타일로 적용됩니다.
✍ 연습문제: 보조 글꼴 추가하기
애플리케이션의 특정 요소에 글꼴을 추가할 수도 있습니다.
이제 당신 차례입니다. fonts.ts 파일에서 Lusitana이라는 보조 글꼴을 가져와 /app/page.tsx 파일의 <p> 요소 에 전달합니다. 이전과 같이 하위 집합을 지정하는 것 외에도 글꼴 두께도 지정해야 합니다.
힌트:
- 글꼴에 전달할 가중치 옵션이 확실하지 않은 경우 코드 편집기에서 TypeScript 오류를 확인하세요.
- Google 글꼴 웹사이트를 방문하여
Lusitana를 검색해 어떤 옵션을 사용할 수 있는지 알아보세요. - 여러 글꼴 추가 및 전체 옵션 목록에 대한 설명서를 참조하세요.
마지막으로 구성 요소도 Lusitana를 사용합니다. 오류를 방지하기 위해 주석 처리되었습니다. 이제 주석 처리를 해제할 수 있습니다.
// /app/page.tsx
// ...
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 />
{/* ... */}
</div>
</main>
);
}좋습니다. 애플리케이션에 두 개의 사용자 정의 글꼴을 추가했습니다. 다음으로 홈페이지에 히어로 이미지를 추가해 보겠습니다.
3. 이미지를 최적화하는 이유는 무엇입니까?
Next.js는 최상위 /public 폴더 아래에 이미지와 같은 정적 자산을 제공할 수 있습니다. /public 내부의 파일은 애플리케이션에서 참조될 수 있습니다.
일반 HTML을 사용하면 다음과 같이 이미지를 추가할 수 있습니다.
<img
src="/hero.png"
alt="Screenshots of the dashboard project showing desktop version"
/>그러나 이는 수동으로 다음을 수행해야 함을 의미합니다.
- 이미지가 다양한 화면 크기에 반응하는지 확인
- 다양한 장치에 대한 이미지 크기 지정
- 이미지가 로드될 때 레이아웃이 바뀌는 것 방지
- 사용자 뷰포트 외부에 있는 지연 로드 이미지
이미지 최적화는 그 자체로 전문 분야로 간주될 수 있는 웹 개발의 큰 주제입니다. 이러한 최적화를 수동으로 구현하는 대신 next/image 구성 요소를 사용하여 이미지를 자동으로 최적화할 수 있습니다.
4. <Image> 구성 요소
<Image> 구성 요소는 HTML <img> 태그의 확장이며 다음과 같은 자동 이미지 최적화 기능을 제공합니다.
- 이미지가 로드될 때 자동으로 레이아웃 이동을 방지합니다.
- 뷰포트가 더 작은 장치에 큰 이미지가 전달되는 것을 방지하기 위해 이미지 크기를 조정합니다.
- 기본적으로 이미지 지연 로딩(이미지가 뷰포트에 들어갈 때 로드됨)
- 브라우저가 WebP, AVIF와 같은 최신 형식으로 이미지 제공 및 지원
5. 데스크탑 히어로 이미지 추가
<Image> 컴포넌트를 사용해 보겠습니다. /public 폴더 안을 보면 hero-desktop과 pnghero-mobile.png이라는 두 개의 이미지가 있는 것을 볼 수 있습니다. 이 두 이미지는 완전히 다르며 사용자의 기기가 데스크톱인지 모바일인지에 따라 표시됩니다.
/app/page.tsx 파일에서 next/image 구성요소를 가져옵니다. 그런 다음 댓글 아래에 이미지를 추가합니다.
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image'; // Image 불러오기
export default function Page() {
return (
// ...
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
{/* 여기에 히어로 이미지 추가하기 */}
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
</div>
//...
);
}여기서 width는 1000, height는 760 픽셀로 설정하고 있습니다. 레이아웃 변경을 방지하기 위해 이미지의 width와 height를 설정하는 것이 좋습니다. 원본 이미지와 비율이 동일해야 합니다.
또한 모바일 화면의 DOM에서 이미지를 제거하기 위한 hidden 클래스와 데스크톱 화면에 이미지를 표시하는 md:block 클래스도 확인할 수 있습니다 .
이제 귀하의 홈 페이지는 다음과 같습니다.
✍ 연습문제: 모바일 히어로 이미지 추가하기
이제 당신 차례입니다. 방금 추가한 이미지 아래에 <Image>에 대한 또 다른 구성 요소 hero-mobile.png를 추가합니다.
- 이미지는
width가560,height가620픽셀이어야 합니다. - 모바일 화면에는 표시되고 데스크탑에서는 숨겨져야 합니다. 개발 도구를 사용하여 데스크탑과 모바일 이미지가 올바르게 교체되었는지 확인할 수 있습니다.
좋아요. 이제 홈 페이지에 사용자 정의 글꼴과 히어로 이미지가 있습니다.
🔍 퀴즈
- 참 또는 거짓: 치수와 웹 글꼴이 없는 이미지는 레이아웃 변경의 일반적인 원인이 됩니다.
a. 참
b. 거짓
6. 추천도서
원격 이미지 최적화 및 로컬 글꼴 파일 사용을 포함하여 이러한 주제에 대해 더 많은 내용을 배울 수 있습니다. 글꼴과 이미지에 대해 더 자세히 알아보려면 다음을 참조하세요.
