In this chapter...
Here are the topics we’ll cover
next/font.next/image.font는 웹사이트 디자인에서 중요한 요소이지만, 프로젝트에서 custom font를 사용하는 것은 폰트 파일을 불러오는 과정에서 성능에 영향을 끼칠 수 있다.
예를들어 구글에서는 Cumulative Layout Shift라는 측정지표를 사용하는데, 이는 예기치 않은 레이아웃 변경이 얼마나 많이 일어나는지를 측정하는 지표이다.
이런 지표가 있다는 것은 예기치 않은 레이아웃 변경이 얼마나 유저에게 불편함을 제공할 수 있는지를 나타낸다고 볼 수 있고(이미지가 늦게 로딩이 되어서 내가 클릭/터치 하려고 했던게 밀려나서 다른걸 누르게 된다던지. 이런 불편함을 실제로 겪은적이 많다. 이런건 신경안쓰나 싶었는데 이런걸 측정하는 지표도 있다니 놀랍다.), 폰트의 최적화도 이 CLS에 영향을 줄 수 있는 작업인 것이다.
폰트의 경우, 브라우저가 최초 렌더 시에는 fallback(대비)이나 system font를 렌더한 후, 이후 custom font가 로딩되면 폰트를 변경(swap)하는 식으로 동작할때, layout shift가 일어날 수 있다고 한다. 이 font swap은 layout, text size, spacing 등에 영향을 줄 수 있다.

Next.js에서는 next/font 모듈을 사용하면 자동적으로 애플리케이션 내의 폰트 최적화를 할 수 있다고 한다.
⇒ 느낀점: 이런 요소들은 Next.js를 사용할때만 필요한 내용이 아님에도 불구하고, 그동안 웹 개발을 공부하면서 이런 내용은 생각하지도 못했다. Next.js를 사용하지 않을 때도 이런 내용을 고려해야 한다는 것을 기억해야 겠다.
custom Google font를 추가하여 이게 어떻게 동작하는지 알아보자.
/app/ui 폴더에 fonts.ts라는 파일을 새로 만들고, 아래 내용을 추가한다. 이 파일에서 앱 전체에 사용될 폰트를 관리하면 된다.
import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
/app/layout.tsx 파일에 import하여 <body> element의 className에 폰트 정보를 추가하면 된다.
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>
);
}