Why optimize fonts?

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 모듈을 사용하면 자동적으로 애플리케이션 내의 폰트 최적화를 할 수 있다고 한다.
- build time에 폰트 파일을 다운로드 받아서 다른 static assets과 함께 호스팅 하는 방식이다.
- 즉 유저가 앱을 방문할때, 폰트를 위한 추가적인 네트워크 요청이 없다는 것이고, 따라서 성능에 영향을 주지 않는다는 것이다.

⇒ 느낀점: 이런 요소들은 Next.js를 사용할때만 필요한 내용이 아님에도 불구하고, 그동안 웹 개발을 공부하면서 이런 내용은 생각하지도 못했다. Next.js를 사용하지 않을 때도 이런 내용을 고려해야 한다는 것을 기억해야 겠다.

Adding a primary font

custom Google font를 추가하여 이게 어떻게 동작하는지 알아보자.
/app/ui 폴더에 fonts.ts라는 파일을 새로 만들고, 아래 내용을 추가한다. 이 파일에서 앱 전체에 사용될 폰트를 관리하면 된다.
```
import { Inter } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });
```
- subset을 설정해주는 모습이다.
  - 읽어봐도 subset이 왜 필요한건지는 잘 모르겠네? 지금 우리 앱에 해당되는 내용은 없어보이는데..
/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>
  );
}
```
- 정상적으로 작동했다면 폰트가 바뀐 것을 확인할 수 있다.
  - antialiased는 Tailwind 클래스이다. 폰트 테두리를 부드럽게? 해주는 클래스라고 한다.
- 개발자 도구를 열어 style이 적용된 것을 확인해보면 Inter와 Inter_Fallback으로 시작하는 폰트 패밀리가 있는 것을 확인할 수 있다.