개발새발

프로젝트에서 app 폴더 내의 fonts 폴더를 public 폴더로 이동하는 작업을 수행했다.

폰트 설정은 다른 팀원분이 맡으셨고, next/font를 사용한 코드가 아래와 같았다.

import localFont from 'next/font/local';
import '@/globals.css';

const pretendard = localFont({
  src: '../fonts/PretendardVariable.woff2',
  display: 'swap',
  weight: '45 920',
  variable: '--font-pretendard',
});

...

const RootLayout = async ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  return (
    <html lang="ko">
      <body className={`${pretendard.variable} antialiased`}>
        ...
        {children}
      </body>
    </html>
  );
};

export default RootLayout;

이 작업을 진행하면서 두 가지 의문점이 생겼다.

왜 global.css 대신 next/font를 사용할까?
갑자기 발생한 에러의 원인은?

이 두가지를 정리보고자 한다.

왜 global.css 대신 next/font를 사용할까?

Next.js 13버전부터 추가된 next/font는 font를 가져오는데 최적화 해주는 기능이 추가되었다.

성능 최적화

1. 자동 서브셋팅

사용자가 사용하는 문자만 포함된 서브셋을 생성해 폰트 파일 크기를 줄인다.
만약 사이트에서 영어만 사용한다면, 영어 문자만 포함된 폰트 파일을 만들어 불필요한 다른 언어 문자를 뺀다. 이렇게 하면 페이지 로딩이 훨씬 빨라진다

2. 렌더링 최적화

폰트가 로드될 때 화면이 깜빡이거나 텍스트가 안 보이는 현상을 방지한다.
display: swap설정으로 폰트가 로딩될 때까지 기본 폰트로 먼저 텍스트를 보여줘서, 사용자가 빈 화면을 보지 않도록 한다.

간편한 폰트 관리

1. 불필요한 외부 요청 방지

Google Fonts 같은 외부 서비스를 불러오는 대신, 폰트를 프로젝트 안에 직접 포함시켜서 외부 요청을 줄일 수 있다.

2. 빌드 타임 최적화

폰트가 웹사이트를 빌드할 때 처리되어, 사이트가 실제로 실행될 때 더 빠르게 작동한다.

유연한 커스텀 옵션

1. 가변 폰트 지원

하나의 폰트 파일로 여러 굵기와 스타일을 지원할 수 있다.
굵은 글씨와 얇은 글씨를 따로 로드하지 않고, 하나의 파일로 다양한 스타일을 표현할 수 있어서 로딩 속도가 빨라진다.

2. 커스텀 폰트

로컬에 저장된 폰트나 다른 웹 폰트 제공자의 폰트도 쉽게 사용할 수 있다.

next/font설정 중 발생한 에러

폰트 파일 위치를 public폴더로 옮기고 src 경로를 다음과 같이 수정했다.

const pretendard = localFont({
  src: '/public/fonts/PretendardVariable.woff2',
  display: 'swap',
  weight: '45 920',
  variable: '--font-pretendard',
});

하지만 에러 발생😥 갑자기 ./는 어디서 나타난 거지..?

다양한 시도

/public/fonts → 실패
../public/fonts → 실패
@/public/fonts → 실패
/fonts → 실패
../fonts → 실패
../../public/fonts → 성공!🎉

원인 : 상대 경로의 중요성

localFont에서는 src는 상대 경로로 설정해야 한다. public폴더 안에 있는 폰트 파일도 상대 경로로 접근해야 했다.

const pretendard = localFont({
  src: '../../public/fonts/PretendardVariable.woff2',
  display: 'swap',
  weight: '45 920',
  variable: '--font-pretendard',
});

결론

next/font는 성능 최적화, 서브셋팅, 렌더링 개선 등으로 global.css보다 효율적이다.
localFont는 상대 경로로 접근해야 한다.

허무한 결말이지만, 해결했으니 만족한다…🙃

'Project' 카테고리의 다른 글

JWT 토큰 어디에 저장하는게 좋을까? (1)	2024.12.16
SVGR jest 테스팅 에러 (0)	2024.12.07
React Query와 SSR: 서버 사이드 데이터 관리와 Hydration 활용 (1)	2024.12.07
Swiper 사용 후기 (feat. 테일윈드) (0)	2024.12.07
웹 소켓과 Socket.io (1)	2024.11.25