한글 웹 타이포그래피의 새로운 표준, Pretendard 완벽 가이드
한글 웹 환경에서 최적의 가독성을 제공하는 Pretendard 폰트. 다양한 플랫폼에서 일관된 타이포그래피 경험을 구현하는 방법과 실무 적용 팁을 상세히 알아보세요.
한글 웹 타이포그래피, 이제 고민 끝
웹사이트나 앱을 개발할 때 폰트 선택으로 고민해본 적 있으신가요? 특히 한글 타이포그래피는 영문에 비해 선택지가 제한적이고, 플랫폼별로 다른 렌더링으로 인해 일관성 있는 디자인을 구현하기 어려웠습니다.
Pretendard는 이러한 문제를 해결하기 위해 탄생한 폰트로, 한국의 디지털 환경에 최적화된 현대적인 sans-serif 폰트입니다.
Pretendard란 무엇인가?
Pretendard는 Inter 폰트를 기반으로 한글을 새롭게 디자인한 오픈소스 폰트입니다. 2021년 공개된 이후 카카오, 토스, 당근마켓 등 주요 서비스에서 채택되며 한글 웹 타이포그래피의 새로운 표준으로 자리잡고 있습니다.
주요 특징
1. 뛰어난 가독성
- 한글 특성을 고려한 자간과 행간 최적화
- 다양한 화면 크기에서 일관된 가독성 보장
- 본문용과 제목용 모두 적합한 균형잡힌 디자인
2. 광범위한 언어 지원
- 한글 11,172자 완벽 지원
- 영문, 숫자, 기호 포함 총 45,000여 글리프 제공
- 일본어 히라가나, 가타카나까지 지원
3. 다양한 굵기 옵션
- Thin(100)부터 Black(900)까지 9단계 굵기
- Variable Font 형태로도 제공
- 세밀한 타이포그래피 조정 가능
4. 크로스 플랫폼 호환성
- Windows, macOS, Android, iOS 모든 환경에서 일관된 렌더링
- 웹폰트, 시스템 폰트 모두 지원
- Fallback 폰트 체계 완벽 구축
실무에서 Pretendard 활용하기
1. 웹폰트로 사용하기
가장 간단한 방법은 CDN을 통한 로딩입니다:
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
body {
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}성능을 고려한다면 필요한 굵기만 선택적으로 로드:
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');2. 로컬 폰트 설치
시스템 폰트로 설치하면 웹폰트 로딩 시간을 단축할 수 있습니다:
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;3. Variable Font 활용
보다 세밀한 타이포그래피 조정이 필요하다면:
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
.custom-weight {
font-family: "Pretendard Variable", sans-serif;
font-weight: 350; /* 임의의 굵기 값 사용 가능 */
}타 폰트와의 비교
vs 시스템 기본 폰트
- Apple SD Gothic Neo: iOS/macOS 기본 폰트보다 현대적이고 균형잡힌 디자인
- Malgun Gothic: Windows 맑은 고딕보다 웹 환경에 최적화
- Roboto: 영문 Roboto와 자연스럽게 조화
vs 기존 웹폰트들
- Noto Sans KR: Google Fonts의 대표 한글 폰트보다 경량화되고 빠른 로딩
- Spoqa Han Sans: 비슷한 컨셉이지만 Pretendard가 더 넓은 문자 지원과 최신 기술 적용
실제 사용 사례
카카오톡: 메신저 인터페이스 전반에 적용하여 가독성 개선
토스: 금융 정보의 명확한 전달을 위해 본문과 UI에 활용
당근마켓: 친근하면서도 신뢰감 있는 브랜드 이미지 구축
성능 최적화 팁
1. Subset 활용
필요한 문자만 포함한 subset을 사용하면 파일 크기를 대폭 줄일 수 있습니다:
<link rel="preload" href="pretendard-subset.woff2" as="font" type="font/woff2" crossorigin>2. Font Display 설정
@font-face {
font-family: 'Pretendard';
font-display: swap; /* 폰트 로딩 중에도 텍스트 표시 */
src: url('pretendard.woff2') format('woff2');
}3. 적절한 Fallback 설정
font-family: "Pretendard",
/* 시스템 폰트 */
-apple-system, BlinkMacSystemFont,
/* 안드로이드 */
"Segoe UI", Roboto,
/* 윈도우 */
"Malgun Gothic",
/* 일반적인 대체 */
sans-serif;라이선스와 사용 시 주의사항
Pretendard는 SIL Open Font License 1.1 하에 배포되어 상업적 용도를 포함해 자유롭게 사용 가능합니다. 단, 폰트 자체를 판매하거나 폰트명을 변경하여 재배포하는 것은 금지됩니다.
미래의 한글 타이포그래피
Pretendard의 등장은 단순히 새로운 폰트 하나의 출시를 넘어, 한국의 디지털 타이포그래피 생태계에 긍정적인 변화를 가져오고 있습니다. 오픈소스 방식의 개발과 활발한 커뮤니티 참여로 지속적인 개선이 이루어지고 있으며, 향후 더 많은 서비스에서 표준으로 자리잡을 것으로 예상됩니다.
웹사이트나 앱의 사용자 경험을 개선하고 싶다면, Pretendard 도입을 적극 검토해보시기 바랍니다. 작은 변화가 만드는 큰 차이를 경험할 수 있을 것입니다.
더 자세한 정보와 다운로드
Noonnu
orioncactus
길형진
