next/font — 폰트 최적화, FOUT 제거, 커스텀 폰트
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. next/font의 핵심 장점이 아닌 것은?
💡 next/font는 빌드 타임에 폰트를 최적화합니다. 런타임에 동적으로 굵기를 생성하지 않으며, 필요한 굵기는 빌드 시 미리 지정해야 합니다.
Q2. 폰트 CSS 변수(variable)를 사용하는 주된 이유는?
💡 variable 옵션으로 CSS 커스텀 변수(예: --font-inter)를 생성하면, Tailwind config에서 fontFamily를 var(--font-inter)로 참조할 수 있습니다.
Q3. FOUT(Flash of Unstyled Text)란?
💡 FOUT는 폴백 폰트로 텍스트를 먼저 표시했다가 웹폰트가 로드되면 교체될 때 크기나 자간 차이로 레이아웃이 변하는 현상입니다. next/font는 size-adjust로 이를 최소화합니다.
Q4. 로컬 폰트를 사용하기 위한 올바른 import는?
💡 로컬 폰트 파일(woff2 등)을 사용하려면 next/font/local에서 default export인 localFont를 import합니다.
Q5. 한국어 사이트에서 Noto_Sans_KR의 weight를 ["400","700"]으로만 지정하는 이유는?
💡 Noto Sans KR 같은 한국어 폰트는 각 굵기마다 수천 개의 글리프를 포함하여 파일 크기가 큽니다. 실제 UI에서 사용하는 굵기만 지정하면 불필요한 리소스 로드를 줄여 성능을 향상시킬 수 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.