씨알로그
LATEST POST

Next.js: Geist와 Pretendard로 완성하는 모던 웹 타이포그래피

발행일: 2026년 3월 3일

1. 폰트 선택의 이유

  • Geist (Google Fonts): Vercel에서 제작한 폰트로, 기하학적이고 현대적인 디자인을 제공한다. 기술 문서와 대시보드에 최적화되어 있다.

  • Pretendard (Local Font): Apple의 시스템 폰트와 이질감이 없으며, 한글 가독성이 현존하는 오픈소스 폰트 중 최상위권이다. 가변 폰트(Variable Font)를 지원해 용량 효율이 좋다.

2. 폰트 파일 준비 및 배치

Pretendard는 구글 폰트 라이브러리에 없으므로 로컬 파일을 직접 호스팅한다. CDN보다 서버 로컬 로딩이 Next.js의 폰트 최적화 기능을 활용하기에 훨씬 유리하다.

  • 경로: public/fonts/PretendardVariable.woff2

  • 이유: next/font/local을 사용하면 빌드 타임에 폰트를 프리로딩하여 **LCP(Largest Contentful Paint)**를 개선하고 **CLS(Layout Shift)**를 방지한다.

3. Next.js Layout 설정 (Next.js 15 기준)

app/layout.tsx에서 두 폰트를 정의하고 CSS 변수(Variable)를 통해 HTML 전체에 주입한다.

TypeScript

import { Geist } from "next/font/google";
import localFont from "next/font/local";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

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

export default function RootLayout({ children }) {
  return (
    <html lang="ko" className={`${geistSans.variable} ${pretendard.variable}`}>
      <body>{children}</body>
    </html>
  );
}

4. Global CSS 최적화 전략

MUI나 Tailwind CSS 같은 라이브러리의 기본 스타일 간섭을 이겨내고 웹 폰트를 강제 적용하기 위해 globals.css를 다음과 같이 구성한다.

폰트 스택 정의

영문/숫자는 Geist를, 한글은 Pretendard를 사용하도록 우선순위를 배치한다.

CSS

body {
  font-family: var(--font-geist-sans), var(--font-pretendard), sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em; /* 한글 가독성 핵심 */
}

기술 블로그 전용 코드 스타일

본문(article) 내부의 코드 블록은 개발자에게 익숙한 모노스페이스 계열을 유지하되, 배경색을 부드럽게 조정한다.

CSS

article pre {
  background-color: #282c34;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #3e4451;
}

article code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 0.9rem;
}

5. 핵심 요약 및 결과

  1. 영한 혼용 최적화: font-family 선언 순서에 따라 영문은 Geist, 한글은 Pretendard가 담당하게 설계함.

  2. 가변 폰트 활용: 하나의 파일(woff2)로 모든 굵기를 표현하여 성능 최적화 달성.

  3. 가독성 디테일: 한글 특유의 여백을 줄이기 위해 letter-spacing을 미세하게 조정하여 밀도 있는 레이아웃 완성.