웹 UI·개발의 국민 폰트 '프리텐다드(Pretendard)': 탄생 배경, 핵심 장점, 웹폰트 적용법 및 활용 팁 총정리

by덕근닷컴 •
0
웹사이트나 모바일 앱을 제작할 때, 혹은 디자인 작업이나 프레젠테이션 문서를 만들 때 가장 고민되는 요소 중 하나가 바로 '폰트(Typography)'입니다. 특히 한글과 영문이 혼용되는 국내 웹 환경에서는 운영체제(OS)마다 기본 서체가 달라 화면이 다르게 보이거나, 영문과 한글의 글자 높이(베이스라인)와 자간이 맞지 않아 시각적 완성도가 떨어지는 문제가 오랫동안 디자이너와 개발자들을 괴롭혀왔습니다.

이러한 고질적인 문제를 단숨에 해결하며 현재 국내 IT 업계와 웹 디자인 생태계의 '사실상 표준(De facto standard)'으로 자리 잡은 폰트가 있습니다. 바로 길형진 디자이너가 오픈소스로 공개한 '프리텐다드(Pretendard)'입니다.

오늘은 토스, 당근, 우아한형제들 등 수많은 기업과 디자이너들이 프리텐다드를 선택하는 이유와 핵심 장점, 웹폰트 적용법 및 실전 활용 팁을 총정리해 드립니다.

Pretendard

1. 프리텐다드(Pretendard)란? 탄생 배경과 정체성

프리텐다드는 본고딕(Source Han Sans / Noto Sans KR)의 한글 글리프와 세계적인 오픈소스 영문 폰트인 '인터(Inter)'를 기반으로 정교하게 결합하고 다듬은 산세리프 폰트입니다.

* 본 시스템 폰트 대체: 애플 생태계의 대표 서체인 'Apple SD 산돌고딕 Neo'와 윈도우/안드로이드의 다양한 기본 서체 간 이질감을 줄이고, 어느 기기에서 접속하든 동일하고 세련된 인상을 주기 위해 제작되었습니다.
* 오픈소스 라이선스: SIL Open Font License(OFL 1.1)를 채택하여 개인 및 기업 사용자 모두 상업적·비상업적 용도로 완전 무료 사용, 수정, 재배포가 가능합니다. (웹사이트, 인쇄물, CI/BI, 영상, 앱 임베딩 모두 자유롭게 활용 가능)

2. 프리텐다드가 국민 폰트가 된 5가지 핵심 장점

1. 완벽한 한글·영문 조화와 광학적 정렬

 * 일반적인 한글 폰트에 영문 텍스트가 섞이면 글자 크기가 맞지 않거나 베이스라인이 어긋나 부자연스러운 경우가 많습니다. 프리텐다드는 Inter 폰트의 글리프를 바탕으로 한글과 완벽하게 수평선 및 자간 비율을 맞추어 별도의 자간 조정 없이도 뛰어난 가독성을 제공합니다.

2. 폭넓은 두께(9 Weights)와 가변 폰트(Variable Font) 지원

 * Thin(100)부터 Black(900)까지 총 9가지 웨이트를 제공하여 제목, 본문, 캡션 등 정보의 위계(Hierarchy)를 섬세하게 표현할 수 있습니다. 또한 폰트 파일 하나로 두께를 유연하게 조절할 수 있는 Variable 폰트 포맷도 완벽히 지원합니다.

3. 압도적인 웹폰트 용량 최적화 (경량화)

* 한글 폰트는 기본 11,172자를 포함해야 하므로 파일 용량이 수 MB에 달해 웹사이트 로딩 속도를 저하시키기 쉽습니다. 프리텐다드는 현대 한글 2,350자와 필수 자모만을 선별한 경량 서브셋(Subset)과 WOFF2 압축 포맷을 제공하여 수백 KB 수준으로 웹 성능 저하 없이 빠르게 렌더링됩니다.

4. 크로스 플랫폼 일관성

 * macOS, iOS, Windows, Android 등 사용자의 디바이스나 브라우저에 상관없이 픽셀 단위로 일관된 레이아웃과 서체 렌더링을 보장합니다.

5. 다양한 패밀리 확장 (Pretendard GOV, JP 등)

 * 표준형 외에도 공공기관 웹 표준 가이드라인에 맞춘 'Pretendard GOV', 일본어 환경을 지원하는 'Pretendard JP' 등 다양한 파생 패밀리를 갖추고 있어 확장성이 뛰어납니다.

3. 실전 웹폰트 적용 및 개발자 가이드

웹사이트나 블로그(Tistory, Blogger, 워드프레스 등)에 프리텐다드를 적용하는 가장 쉬운 방법은 공식 CDN(jsDelivr)을 활용하는 것입니다.

(1) HTML `<head>`에 링크 추가
html
<link rel="stylesheet" as="style" crossorigin href="https://www.google.com/url?q=https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css&source=gmail&ust=1790810739881000&sa=E" />


(2) CSS 설정 (Font-Family 선언)
css
body {
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
word-break: keep-all; /* 한글 줄바꿈 자연스럽게 처리 */
}
 * 팁: `word-break: keep-all;` 속성을 함께 주면 한글 단어가 어색하게 중간에서 끊기지 않아 가독성이 한층 향상됩니다.

4. 디자인·문서 작성 실전 활용 팁

  1. Figma UI/UX 디자인: 국내 디자인 실무에서 피그마 프로젝트의 기본 타이포그래피 스타일로 가장 권장되는 폰트입니다. 개발자와의 소통 시 폰트 명칭 불일치 문제가 사라집니다.
  2. PT 및 보고서 문서: 윈도우 환경에서 PPT를 제작한 후 맥북이나 다른 PC에서 열었을 때 글꼴이 깨지는 현상을 방지하기 위해 '파일 내 글꼴 포함' 옵션과 함께 사용하면 세련된 인상을 남길 수 있습니다.
  3. 노션(Notion) 및 개인 블로그: 브라우저 확장 프로그램이나 커스텀 스타일을 통해 노션의 기본 폰트를 프리텐다드로 변경하면 글쓰기 및 문서 검토 시 피로도가 크게 줄어듭니다.

5. 총평 및 3줄 요약

프리텐다드는 단순한 폰트를 넘어 '한국형 디지털 프로덕트 디자인과 웹 타이포그래피의 표준을 한 단계 끌어올린 걸작'으로 평가받고 있습니다.

  1. 한/영 완벽 조화, 9개 두께 지원, 무료 상업적 라이선스로 누구나 안심하고 사용 가능
  2. 용량 최적화(WOFF2 서브셋)로 웹사이트 로딩 속도 저하 없이 깔끔한 산세리프 구현
  3. HTML/CSS에 CDN 코드 한 줄 추가만으로 세련된 웹 UI 완성

새로운 웹 프로젝트나 문서 디자인을 준비 중이시라면 가독성과 심미성을 모두 갖춘 프리텐다드를 적극 활용해 보시기 바랍니다.



Written by dukgun.com with Gemini
Tags:

댓글 쓰기

다음 이전