웹 성능을 최적화하는 것은 사용자 경험을 크게 향상시키고, 페이지 로딩 속도를 단축하며, SEO 성능을 높이는 데 중요한 역할을 한다. 특히 폰트와 이미지는 웹 페이지의 주요 리소스로 최적화를 통해 불필요한 네트워크 요청을 줄이고 렌더링 성능을 극대화 할 수 있다. Next.js는 이러한 최적화를 쉽게 수행할 수 있는 도구와 설정을 제공하여 개발자가 손쉽게 웹 성능을 개선할 수 있도록 돕는다. 이번 포스팅에서는 next.js에서 글꼴 및 이미지를 적용하는 방법에 대해 작성해보겠다.
1. 글꼴 적용하기
Next.js에서는 next/font 모듈을 사용하여 폰트를 쉽게 적용할 수 있다. 이 모듈은 Google Fonts와 같은 웹 폰트를 쉽게 통합할 수 있게 해주며, 폰트를 서버 측에서 로드하여 클라이언트 측에서 빠르게 사용할 수 있도록 설정할 수 있다.
예를들어 Google Fonts의 Inter , Lusitana 폰트를 사용하려면 아래 코드처럼 설정한 후 글꼴을 적용할 파일에 import 해서 사용해주면 된다.
1. 글꼴 생성
/app/ui/fonts.ts
import {Inter , Lusitana } from 'next/font/google';
export const inter = Inter({subsets: ['latin']});
export const lusitana = Lusitana({
weight: ["400", "700"],
subsets: ['latin'],
})
2. 글꼴 적용
/app/layout.tsx
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 에 적용해준 모습이다. autialiased 는 tailwindCSS )
2. 이미지 적용하기
next.js는 next/image 컴포넌트를 사용하여 이미지를 쉽게 적용할 수 있다. 이 컴포넌트는 이미지의 크기를 자동으로 조절하고, 적절한 형식(WebP ,AVIF.. 등)으로 변환하여 제공함으로써 사용자 경험을 개선할 수 있다.
Image 컴포넌트의 구성 요소
HTML <img> 태그를 확장한 Next.js의 next/image 컴포넌트는 이미지 최적화를 위해 다양한 구성 요소를 제공한다.
| 속성 | 설명 |
| src | 이미지의 경로를 지정합니다. 로컬 파일이나 외부 URL을 사용할 수 있습니다. |
| alt | 이미지의 대체 텍스트를 지정하여 접근성을 높입니다. |
| width와 height | 이미지의 너비와 높이를 지정합니다. 이는 누적 레이아웃 이동(CLS)을 방지하는 데 도움이 됩니다. |
| placeholder | 이미지가 로드되기 전에 보여줄 자리 표시자입니다. 예를 들어, "blur" 값을 사용하여 블러 효과를 줄 수 있습니다. |
| className | CSS 클래스를 추가하여 스타일을 적용할 수 있습니다. |
| loading | 이미지를 로드하는 방식을 설정합니다. 기본값은 "lazy"이며, 이를 통해 사용자가 이미지가 화면에 보일 때만 로드하도록 설정할 수 있습니다. |
정적자산을 저장하는 public 폴더 아래 모바일 , 데스크탑 이미지 두가지가 존재할 때 이미지 적용하려면 아래 코드처럼 설정하면 된다.
1. 이미지 컴포넌트 생성
/app/page.tsx
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';
export default function Page() {
return (
// ...
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
{/* Add Hero Images Here */}
<Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
<Image
src="/hero-mobile.png"
width={560}
height={620}
className="block md:hidden"
alt="Screenshot of the dashboard project showing mobile version"
/>
</div>
//...
);
}
이 코드에서 사용된 className 속성인 "hidden md:block"과 "block md:hidden"은 Tailwind CSS 유틸리티 클래스이다.
hidden은 요소를 화면에서 숨기고, block은 요소를 블록 요소로 표시한다.
md: 접두사는 미디어 쿼리를 의미하며, md:block은 중간 크기 이상의 화면에서 해당 요소를 블록 요소로 표시하라는 의미이다.
따라서 데스크탑 이미지는 중간 크기 이상의 화면(md)에서만 보이도록 하고, 모바일 이미지는 중간 크기 이하의 화면에서만 보이도록 설정하여 반응형 디자인을 구현한 것이다.
더 자세한 방법이 궁금하다면 아래에 첨부한 링크를 참고하면 좋을 것이다 !
본 포스팅은 next.js에서 제공된 학습서를 기반으로 작성되었습니다.
https://nextjs.org/learn/dashboard-app/optimizing-fonts-images
Learn Next.js: Optimizing Fonts and Images | Next.js
Optimize fonts and images with the Next.js built-in components.
nextjs.org
https://nextjs.org/docs/app/building-your-application/optimizing/images
Optimizing: Images | Next.js
Optimize your images with the built-in `next/image` component.
nextjs.org
https://nextjs.org/docs/app/building-your-application/optimizing/fonts
Optimizing: Fonts | Next.js
Optimize your application's web fonts with the built-in `next/font` loaders.
nextjs.org
'Next.js' 카테고리의 다른 글
| [Next.js] Next.js 공식문서 6장 데이터베이스 설정 에러 해결 (1) | 2024.11.26 |
|---|---|
| [Next.js] Next.js 페이지 이동 구현하기 (Link, usePathName 사용 ) (0) | 2024.11.25 |
| [Next.js] Next.js 레이아웃 및 페이지 만들기 (App Router) (0) | 2024.11.22 |
| [Next.js] Next.js CSS 스타일링 (0) | 2024.11.15 |
| [Next.js] Next.js 시작하기 ( ++ node 버전 이슈 해결 ) (4) | 2024.11.14 |
