프로젝트를 시작할 때마다 폰트를 고르는 데만 몇 시간씩 걸리던 적 있죠. Noto Sans KR, 본고딕, 프리텐다드. 이름만 들어도 익숙한 이 세 폰트는 디자인 완성도를 높여주지만, 한 줄의 CSS가 전체 웹사이트 속도를 3초 이상 늦추는 함정이 될 수도 있습니다. 로딩 속도를 희생하지 않으면서도 디자인을 극대화할 수 있는 최적의 선택은 무엇일까요. 단순한 취향 차이를 넘어, 각 폰트가 가진 기술적 DNA와 성능 데이터를 파헤쳐 보겠습니다.
이 글의 핵심 요약
1. Noto Sans KR은 글로벌 호환성 최고지만, 전체 글리프를 로드하면 로딩 속도를 심각하게 저하시킵니다. 반드시 서브셋 최적화가 필요하죠.
2. 프리텐다드는 Apple San Francisco와의 일관성을 추구하며, 초기 설정이 간편하고 다국어 환경에서의 렌더링 균형이 뛰어납니다.
3. 폰트 선택은 단순 디자인이 아닌, Core Web Vitals(LCP, CLS)에 직접 영향을 미치는 SEO 전략입니다. 프로젝트 성격에 맞는 선택이 필수입니다.
한글 웹폰트, 왜 선택이 중요한가요?
폰트 하나가 사이트 로딩 속도와 사용자 이탈률을 결정합니다. 잘못 고르면 LCP(Largest Contentful Paint)가 3초 넘게 증가해 SEO 순위에 직접적인 타격을 줍니다. 단순히 ‘이뻐 보이는’ 폰트를 고르는 시대는 지났죠. 브라우저가 폰트 파일을 다운로드하고 화면에 그려내는 전 과정이 사용자 경험의 핵심이 되었습니다.
Noto Sans KR, 본고딕, 프리텐다드의 탄생 배경과 철학 비교
세 폰트는 각기 다른 문제의식을 바탕으로 태어났어요. 그 출발점을 알면 선택이 훨씬 수월해집니다.
| 폰트명 | 제작사/주체 | 코어 목적 | 출시 연도 |
|---|---|---|---|
| Noto Sans KR (본고딕) | 구글 & 어도비 합작 | 전세계 모든 언어의 ‘깨짐(□, Tofu)’ 현상 제거 | 2014년 |
| 본고딕 | 어도비, 산돌, 카카오 | 한글 웹폰트의 가독성과 디자인 품질 표준 제시 | 2014년 |
| 프리텐다드(Pretendard) | 길형진 디자이너 | Apple San Francisco의 다국어 밸런스를 웹에 적용, 자간 문제 해결 | 2020년 |
Noto Sans KR과 본고딕은 사실상 같은 뿌리를 가진 형제라고 보시면 됩니다. 구글과 어도비가 합작해 만든 Noto Sans의 한국어 버전이 Noto Sans KR이고, 이를 국내에 ‘본고딕’이라는 이름으로 소개한 거죠. 문제의식은 훌륭했습니다. 언어마다 다른 폰트를 써서 생기는 깨짐 현상을 하나의 통일된 폰트 패밀리로 해결하자. 그래서 한글 11,172자 전부를 완벽 지원하게 만들었어요.
그러다 보니 생긴 게 바로 용량 문제였습니다. 프리텐다드는 여기서 출발했어요. “완벽한 모든 글자를 지원하는 무거운 폰트보다, 실제 웹에서 자주 쓰이는 글자만 최적화해도 되지 않을까?” 길형진 디자이너는 Apple의 시스템 폰트가 가지는 깔끔한 자간과 행간 밸런스에 주목했고, 이를 웹에서도 구현하기 위해 프리텐다드를 만들었죠.
Noto Sans KR(본고딕)의 진짜 장점과 한계는 무엇인가요?
글로벌 호환성 최강자지만, 용량 문제를 해결하지 않으면 오히려 악영향을 줍니다. 모든 한글을 지원한다는 건 장점이자 최대의 함정이에요.
서브셋 폰트 사용법: 용량을 70% 줄이는 구체적인 방법
구글 폰트에서 Noto Sans KR 전체 패밀리를 다운로드하면 약 16MB에 달합니다. 이걸 그대로 웹에 올린다면 로딩이 3~5초 지연되는 건 당연한 결과죠. 해결책은 서브셋(Subset)입니다. 내 사이트에서 실제로 쓰이는 문자만 추려내는 작업이에요.
실전 코드: unicode-range로 서브셋 지정하기
CSS의 `unicode-range` 속성을 이용하면 브라우저가 필요한 글리프만 선택적으로 다운로드하게 할 수 있습니다. 아래는 영문, 숫자, 한글 기본 자모만을 지정한 예시입니다.
@font-face {
font-family: 'Noto Sans KR Subset';
src: url('NotoSansKR-subset.woff2') format('woff2');
unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+AC00-D7A3;
font-display: swap;
}이렇게 하면 파일 크기를 기존 대비 60% 이상 줄일 수 있습니다. 서브셋 생성에는 `glyphhanger`나 `pyftsubset` 같은 도구를 사용하시면 됩니다.
서브셋 작업이 번거롭다고 느껴지시나요? 그게 바로 Noto Sans KR의 가장 큰 진입 장벽입니다. 초기 세팅에 시간을 투자할 수 있는 대형 프로젝트나, 반드시 모든 한자·구결 표기까지 지원해야 하는 학술 사이트라면 최고의 선택일 수 있어요. 하지만 빠른 프로토타이핑이 필요한 스타트업이나 소규모 프로젝트에는 부담스러운 요소가 분명합니다.
주의: macOS에서의 렌더링 차이
Noto Sans KR은 Windows와 Android 환경에서는 뛰어난 가독성을 보이지만, macOS와 iOS의 Safari에서는 폰트 힌팅(hinting) 방식 차이로 인해 굵기가 다소 가늘고 흐릿하게 렌더링될 수 있습니다. 디자인 시안과 실제 결과물이 다를 수 있다는 점을 꼭 염두에 두고, 크로스 브라우징 테스트를 철저히 해야 합니다.
프리텐다드는 왜 디자이너와 개발자 모두에게 사랑받나요?
Apple San Francisco와 동일한 자간·행간을 제공하며, 서브셋 없이도 가볽고 일관된 렌더링을 보장합니다. 편의성이라는 무기가 정말 강력하죠.
프리텐다드의 가장 큰 장점은 ‘기본값이 잘 맞는다’는 점입니다. 길형진 디자이너가 목표로 한 것은 Apple 생태계의 그 느낌을 웹으로 가져오는 거였어요. 덕분에 별도의 `letter-spacing`이나 `line-height` 조정 없이도, 특히 macOS 사용자에게는 매우 친숙하고 안정적인 타이포그래피를 제공할 수 있습니다.
CSS 적용 방법 비교: npm, CDN, 다운로드
적용 난이도가 가장 낮은 것도 매력입니다. 여러 방법 중 하나만 골라도 바로 쓸 수 있어요.
| 방식 | 장점 | 단점 | 추천 상황 |
|---|---|---|---|
| CDN (jsDelivr) | 가장 간단함. HTML의 link 태그 한 줄로 끝. | CDN 서비스 장애 시 영향 받음. | 빠른 프로토타입, 소규모 프로젝트. |
| npm 설치 | 빌드 프로세스에 통합 가능. 버전 관리 쉬움. | Node.js 환경 필요. | React, Vue 등 현대 프론트엔드 프로젝트. |
| 직접 다운로드 | 완전한 오프라인 제어, 외부 의존성 제로. | 수동 업데이트 필요, WOFF2 변환 등 추가 작업. | 네트워크 제한이 엄격한 내부 시스템. |
CDN을 이용한 적용은 정말 간단합니다. 아래 한 줄을 `head`에 추가하세요.
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />그리고 CSS에서 `font-family: ‘Pretendard’;`를 지정하면 끝입니다. 이 간결함이 개발자들의 마음을 사로잡은 비결이죠.
셋 중 어떤 폰트를 선택해야 프로젝트 성능이 최적화될까요?
콘텐츠 성격과 타겟 플랫폼에 따라 정답이 달라집니다. 폰트 선택에 정답은 없지만, 더 나은 선택은 분명히 있습니다.
프로젝트 유형별 폰트 선택 가이드
아래 기준은 순수한 기술적 장단점과 실무 경험을 바탕으로 한 제안입니다.
| 프로젝트 유형 | 1순위 추천 | 주요 이유 | 대체 보조안 |
|---|---|---|---|
| 뉴스/블로그 (장문 텍스트) | Noto Sans KR (서브셋 적용) | 가독성 연구를 거친 전통적 고딕체, 장시간 읽기에 적합. | 프리텐다드 (행간 1.6 이상 조정 필수) |
| 이커머스/쇼핑몰 | 프리텐다드 | Apple 사용자에게 친숙함 제공, 빠른 로딩이 전환율에 직결. | 본고딕 (Medium 가중치 강조) |
| 대시보드/관리자 패널 | 프리텐다드 | 숫자와 라벨의 가독성 우수, 인터페이스 밀도 높임. | Noto Sans KR (Light 가중치 주의) |
| 모바일 앱 (React Native 등) | 시스템 기본 폰트 | 성능 최적화, 배터리 소모 최소화가 최우선. | 프리텐다드 (필요 시 선택적 적용) |
모바일 환경을 고려한다면 파일 크기는 절대적 기준이 됩니다. WOFF2 포맷 기준으로, 프리텐다드의 기본 변수 폰트(Variable Font) 파일은 약 500KB 내외입니다. 반면, Noto Sans KR의 전체 Regular 가중치 하나만 해도 1.5MB를 훌쩍 넘어요. 3G나 불안정한 와이파이 환경을 고려한다면 이 수치는 선택을 뒤집을 만큼 중요합니다.
SEO 관점에서 폰트가 Core Web Vitals에 미치는 영향
구글은 사용자 경험을 수치화한 Core Web Vitals로 검색 순위를 조정합니다. 그중 LCP(Largest Contentful Paint)는 페이지의 주요 콘텐츠가 표시되는 데 걸리는 시간을 측정하는데, 웹폰트는 여기에 지대한 영향을 미칩니다.
`font-display: swap`을 사용하지 않은 채 무거운 폰트를 적용하면, 브라우저는 텍스트를 보여주기 전에 폰트 다운로드가 끝나길 기다립니다(FOIT). 이 대기 시간이 LCP 점수를 악화시키죠. 반면, `swap`을 사용하면 시스템 폰트로 먼저 표시한 후(FOUT), 폰트 로딩이 완료되면 교체합니다. 사용자는 콘텐츠를 빨리 볼 수 있지만, 레이아웃이 뒤틀리는 CLS(Cumulative Layout Shift)가 발생할 수 있어요.
따라서 진짜 최적화는 `preload`와 `font-display: optional`의 조합에서 나옵니다. `preload`로 브라우저에게 폰트를 최우선적으로 다운로드하라고 알려주고, `optional` 값은 매우 짧은 차단 기간(보통 100ms) 내에 폰트가 준비되지 않으면 사용자 환경의 기본 폰트로 영구히 표시하게 합니다. 이렇게 하면 FOUT도 CLS도 발생시키지 않으면서, 빠른 네트워크 사용자에게만 최적의 폰트를 제공하는 하이브리드 전략이 완성되죠.
웹폰트 최적화를 위한 실전 꿀팁 3가지
어떤 폰트를 쓰든 아래 세 가지만 적용해도 체감 속도가 눈에 띄게 빨라집니다. 복잡한 이론은 잠시 접어두고, 바로 CSS에 복사해 붙여넣을 수 있는 코드 중심으로 설명할게요.
1. WOFF2 포맷과 `preload` 속성으로 초기 로딩 시간 단축
WOFF2는 현재 가장 효율적인 웹폰트 압축 포맷입니다. `preload`는 브라우저의 리소스 우선순위 힌트예요. 둘을 함께 쓰면 폰트가 스타일시트보다 먼저 로드되어 렌더링 차단을 최소화합니다.
<!-- HTML의 head 부분에 추가 -->
<link rel="preload" as="font" href="/fonts/your-font.woff2" type="font/woff2" crossorigin="anonymous">주의할 점은, 정말 필요한 폰트(보통 Regular, Bold 1~2개)에만 preload를 적용해야 한다는 거예요. 모든 변형을 preload하면 오히려 중요한 리소스 다운로드를 방해할 수 있습니다.
2. `font-display: swap`과 폴백 폰트 조합 전략
`swap`은 필수가 되었지만, 폴백 폰트를 잘 설정해야 깔끔한 FOUT를 구현할 수 있습니다. 폴백 폰트는 로딩 전에 임시로 보여줄 시스템 폰트를 말하는데, 미리 정해진 `font-family` 목록 중 사용자 환경에 존재하는 첫 번째 폰트가 선택됩니다.
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;이 선언의 의미는 “Pretendard를 쓰고, 없으면 Apple 시스템 폰트, 그것도 없으면 Windows의 Segoe UI, 그다음 Roboto…” 순으로 찾아서 보여달라는 거죠. `-apple-system`과 `BlinkMacSystemFont`는 각각 macOS/iOS와 Windows/macOS의 크롬 계열 브라우저에서 시스템 산세리프 폰트를 호출하는 키워드입니다. 이렇게 하면 웹폰트가 로딩되는 동안에도 시스템 최적의 폰트로 자연스럽게 표시됩니다.
폰트 선택이 SEO와 브랜드 신뢰도에 미치는 진짜 영향
폰트는 단순한 디자인 요소가 아니라, 사용자의 인지적 부하와 검색 순위를 결정짓는 핵심 요소입니다. 행동경제학에서는 ‘인지적 유창성(Cognitive Fluency)’이라는 개념이 있어요. 정보를 처리하기가 쉬울수록, 사람들은 그 내용을 더 진실하다고 믿고 선호하는 경향이 있습니다.
Noto Sans KR은 획의 굵기 변화가 적고 전통적인 고딕체의 안정된 구조를 가지고 있습니다. 이는 무의식적으로 ‘신뢰감’과 ‘권위’를 전달하는 데 유리하죠. 그래서 금융 기관, 정부 사이트, 뉴스 매체에서 많이 찾는 모습을 보입니다. 반면, 프리텐다드는 Apple 제품을 쓰는 사용자에게는 굉장히 ‘친숙’하고 ‘현대적’인 느낌을 줍니다. 이는 브랜드 이미지와의 정서적 연결을 강화하는 데 도움이 되죠.
렌더링 차이는 이탈률로 이어집니다. macOS Safari에서 가늘게 보이는 Noto Sans KR은 사용자가 “뭔가 흐릿하고 불편하다”고 느끼게 만들 수 있어요. 눈에 띄지 않는 미세한 차이가 모여 사용자의 머무름 시간을 결정합니다. 페이지 속도가 1초 늦어질 때마다 이탈률은 평균 7% 증가한다는 연구 결과도 있습니다. 폰트 최적화는 결국 사용자를 사이트에 붙잡아두는 마지막 1초를 위한 투자입니다.
2026년 웹폰트 트렌드: 가변 폰트(Variable Font)와 AI 기반 자동 서브셋
앞으로의 핵심은 ‘가변 폰트’입니다. 하나의 파일에 굵기(Weight), 너비(Width), 기울기(Italic) 등 다양한 축을 담아, 여러 개의 정적 폰트 파일을 대체할 수 있습니다. 프리텐다드도 가변 폰트를 제공하고 있어요. 이는 네트워크 요청 수를 획기적으로 줄여주는 장점이 있습니다.
더 나아가, AI가 실시간으로 페이지의 콘텐츠를 분석해 필요한 글리프만 동적으로 서브셋 생성해 주는 시대가 올지도 모릅니다. 사용자가 방문할 때마다 최소한의 폰트 데이터만 전송하는 거죠. 기술은 점점 더 ‘개인화된 최적화’를 향해 나아가고 있습니다. 오늘 Noto Sans KR과 프리텐다드 사이에서 고민하는 이 선택은, 결국 더 빠르고, 더 개인화된 웹 경험을 만드는 첫걸음입니다.
자주 묻는 질문 (FAQ)
1. Noto Sans KR과 프리텐다드 중 어떤 폰트가 더 가벼운가요?
기본 제공되는 전체 파일 기준으로는 프리텐다드가 훨씬 가볍습니다. Noto Sans KR은 서브셋 최적화를 거쳐야 비슷한 수준의 용량을 맞출 수 있습니다.
2. 본고딕은 상업용으로 무료인가요?
예, Noto Sans KR(본고딕)은 SIL Open Font License 1.1을 따릅니다. 상업적 무료 사용, 수정, 재배포가 모두 가능합니다.
3. CSS에서 프리텐다드를 적용하는 가장 간단한 방법은?
위에서 설명한 jsDelivr CDN 링크를 HTML `head`에 추가하는 방법이 가장 빠릅니다. npm 프로젝트라면 `npm install pretendard` 후 CSS에서 import하세요.
4. Noto Sans KR의 서브셋 폰트는 어디서 받을 수 있나요?
구글 폰트 웹사이트에서 사용자 정의 시 ‘Characters’를 ‘Korean’으로 선택하면 기본 서브셋을 제공합니다. 더 세밀한 제어를 원하면 `glyphhanger` 같은 CLI 도구를 사용해 직접 생성해야 합니다.
5. 모바일 앱에서도 이 세 폰트를 사용할 수 있나요?
네, 가능합니다. 하지만 네이티브 앱에 웹폰트를 임베드하면 앱 크기가 증가하고 성능에 영향을 줄 수 있습니다. 앱의 경우 시스템 폰트 사용을 우선 고려하고, 브랜딩이 반드시 필요할 때만 커스텀 폰트를 적용하는 것이 좋습니다.
6. FOUT와 FOIT 중 어떤 방식을 선택하는 것이 좋나요?
현대적인 접근법은 `font-display: optional`을 통해 두 문제를 모두 회피하는 것입니다. 짧은 차단 기간 후 폰트가 준비되지 않으면 시스템 폰트로 영구 표시하므로, 레이아웃 이동이나 보이지 않는 텍스트 문제를 근본적으로 방지합니다.
7. 세 폰트 모두 구글 폰트에서 제공하나요?
Noto Sans KR은 구글 폰트에서 제공합니다. 프리텐다드는 서드파티 폰트로, 구글 폰트에는 없습니다. 본고딕은 Noto Sans KR과 동일한 폰트를 지칭하는 한국 내 별칭입니다.
