폰트 미리보기 도구는 어떤 경우에 사용하나요?

웹사이트나 앱 디자인 시 여러 한글 폰트를 빠르게 비교하고 싶을 때 유용합니다. 본문, 제목, 로고 등 용도에 맞는 폰트를 시각적으로 비교할 수 있으며, 폰트 크기·줄간격·자간까지 조절하여 실제 적용 모습을 미리 확인할 수 있습니다.

여기에 표시되는 폰트는 무료로 사용할 수 있나요?

이 도구에 포함된 폰트는 모두 Google Fonts에서 제공하는 오픈소스 폰트입니다. 개인 및 상업 프로젝트 모두 무료로 사용할 수 있습니다. 다만 각 폰트의 라이선스(주로 SIL Open Font License)를 확인하는 것을 권장합니다.

font-family CSS 값은 어떻게 적용하나요?

각 폰트 카드의 '복사' 버튼을 클릭하면 font-family CSS 속성값이 클립보드에 복사됩니다. 이 값을 CSS 파일의 원하는 선택자에 font-family 속성으로 붙여넣으면 됩니다. Google Fonts CDN 링크도 함께 HTML 에 추가해야 폰트가 올바르게 로드됩니다.

폰트 미리보기/비교 도구

웹 폰트 선택이 비즈니스에 미치는 영향

MIT AgeLab 연구에 따르면 폰트 선택만으로 읽기 속도가 최대 35% 차이날 수 있습니다. 한국어 웹사이트에서는 한글 글리프 수가 11,172자에 달해 영문 폰트(최대 250자) 대비 파일 크기가 5~10배 크므로, 성능과 가독성을 동시에 고려한 폰트 선택이 필수입니다. 이 도구는 Google Fonts 기반 인기 한글 폰트 14종을 실시간으로 비교하고, font-family CSS 값을 원클릭 복사하여 즉시 프로젝트에 적용할 수 있습니다.

한글 웹 폰트 카테고리 분류

카테고리	대표 폰트	특징	추천 용도
고딕(Sans-serif)	Noto Sans KR, Pretendard	깔끔, 현대적	본문, UI, 대시보드
명조(Serif)	Noto Serif KR, Nanum Myeongjo	격식, 전통적	에디토리얼, 브랜드 스토리
둥근 고딕(Rounded)	Gothic A1, Jua	부드럽고 친근	키즈, 커뮤니티, 캐주얼 앱
디스플레이	Black Han Sans, Do Hyeon	강렬, 임팩트	히어로 타이틀, 배너, 로고
손글씨(Handwriting)	Nanum Pen Script, Gaegu	자유분방, 감성적	인사말, 이벤트 페이지

본문에는 x-height(소문자 높이)가 큰 고딕 계열을, 제목에는 디스플레이 계열을 조합하면 시각적 위계(visual hierarchy)가 명확해집니다. 폰트 조합 시 같은 디자이너 또는 같은 패밀리(예: Noto Sans KR + Noto Serif KR) 내에서 선택하면 조화로운 결과를 얻을 수 있습니다.

한글 폰트 주요 소스 비교

플랫폼	폰트 수	라이선스	CDN 제공	서브셋 지원
Google Fonts	한글 40+종	OFL (무료 상업 사용)	O	자동 (unicode-range)
눈누(Noonnu)	한글 700+종	개별 확인 필요	X (자체 호스팅)	수동 서브셋
Adobe Fonts	한글 200+종	CC 구독 포함	O	자동
산돌구름	한글 3,000+종	월 구독	O (JS 임베드)	동적 서브셋

무료 프로젝트라면 Google Fonts가 가장 안전합니다. SIL Open Font License(OFL)로 상업적 사용, 수정, 재배포가 모두 허용됩니다. 눈누(noonnu.cc)는 한국 무료 폰트 아카이브로 700종 이상을 모아두었으나, 각 폰트별 라이선스(상업 가능/개인용/수정 가능 여부)를 개별 확인해야 합니다.

웹 폰트 로딩 전략: FOUT vs FOIT

FOUT (Flash of Unstyled Text): 시스템 폰트가 먼저 표시된 뒤 웹 폰트로 교체. font-display: swap이 이 방식. 텍스트가 즉시 보이므로 사용자 경험에 유리
FOIT (Flash of Invisible Text): 웹 폰트 로딩 완료까지 텍스트가 보이지 않음. font-display: block이 이 방식. 3초 이상 지연 시 CLS(Layout Shift) 악화
권장 설정: 본문은 swap, 디스플레이/로고 폰트는 optional(캐시에 있으면 사용, 없으면 시스템 폰트 유지)

웹 폰트 성능 최적화 5단계

1단계 — 서브셋: 한글 11,172자 중 실제 사용하는 2,350자(KS X 1001 완성형)만 추출하면 파일 크기 70% 절감. pyftsubset 또는 glyphhanger 도구 활용
2단계 — WOFF2 포맷: Brotli 압축 적용으로 WOFF 대비 30% 추가 절감. 2026년 기준 브라우저 지원율 98% 이상
3단계 — preload: <link rel="preload" as="font" type="font/woff2" crossorigin>로 초기 렌더링에 사용되는 폰트를 미리 다운로드
4단계 — unicode-range: Google Fonts는 자동으로 한글을 120개 chunk로 분할. 필요한 글리프 chunk만 다운로드하여 초기 로딩 최소화
5단계 — CDN 캐싱: Cache-Control 1년 설정 + 파일명 해시로 장기 캐시. Vercel/Netlify 배포 시 자동 적용

실무 폰트 선택 시나리오

쇼핑몰 / 이커머스

상품명·가격에는 Pretendard(가독성 최고), 브랜드 스토리에는 Noto Serif KR을 조합합니다. 숫자가 많은 가격표에는 tabular-nums(고정폭 숫자) 지원 여부를 확인하세요.

기업 웹사이트 / SaaS

Noto Sans KR을 기본으로, 영문은 Inter 또는 Pretendard의 라틴 글리프를 사용하면 한영 혼용 시 x-height와 자간이 자연스럽게 맞습니다.브레이크포인트 테스트에서 모바일·데스크탑 폰트 크기별 가독성도 함께 검증하세요.

블로그 / 콘텐츠 사이트

장문 가독성이 중요하므로 본문 line-height 1.8~2.0, letter-spacing -0.01em을 권장합니다. 이 도구에서 줄간격과 자간을 조절하며 최적 조합을 찾으세요.상품 설명 생성기로 만든 텍스트를 샘플로 붙여넣으면 실제 콘텐츠 기반 테스트가 가능합니다.

참고 자료

Google Fonts: fonts.google.com — 한글 폰트 필터(Korean) 제공
눈누: noonnu.cc — 한국 무료 폰트 모음, 라이선스 정보 포함
Web Font Optimization (web.dev): font-display, preload, unicode-range 실전 가이드
Core Web Vitals: CLS 0.1 이하 유지를 위해 폰트 로딩 시 레이아웃 시프트 방지 필수

폰트 미리보기 및 비교

폰트 목록