Pretendard 공식 GitHub 둘러보기: 한글 폰트 하나가 통째로 열려 있는 곳

한글 글꼴 하나를 제대로 만들려면 최소 11,172자를 그려야 한다. 자음과 모음이 조합되는 경우의 수가 그렇다. 라틴 알파벳 26자와는 자릿수가 다른 일이다.

그 일을 한 사람이 혼자 해냈고, 결과물을 통째로 깃허브에 열어뒀다. github.com/orioncactus/pretendard — Pretendard 공식 저장소다.

웹에서 한국어 사이트를 만들어 본 사람이라면 이미 쓰고 있을 확률이 높다. 그런데 저장소를 직접 열어본 사람은 의외로 적다. 폰트 파일만 받아 가기 때문이다. 안에 뭐가 들어 있는지 한 번 훑어두면, 나중에 헤맬 일이 줄어든다.

무슨 글꼴인가

Pretendard는 세 글꼴을 바탕으로 다시 그린 글꼴이다. 라틴은 Inter, 한글은 본고딕(Source Han Sans), 가나는 M PLUS 1p. 리디자인과 제작은 길형진이 했다.

바탕이 이렇게 짜인 이유는 저장소 소개문에 그대로 적혀 있다. 크로스 플랫폼으로 제품을 낼 때, 그리고 여러 언어를 한 화면에서 섞어 쓸 때 자연스럽게 보이게 하려는 것이다. 한글과 영문을 섞어 쓰면 크기나 무게가 안 맞아 보이는 일이 흔한데, Pretendard는 그 보정을 미리 해뒀다는 게 핵심 주장이다.

굵기는 9종이고, 가변 글꼴도 함께 제공한다.

저장소 한 장 정리

웹에서 가져다 쓰는 법

저장소는 CDN 주소를 그냥 알려준다. 링크 한 줄이면 끝난다. 기본으로 권하는 곳은 jsDelivr이고, cdnjs와 UNPKG도 같이 안내한다. 셋 중 편한 걸 쓰면 된다.

<link rel="stylesheet" as="style" crossorigin
  href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />

위 주소가 아까 도식에서 파랗게 칠한 것, 그러니까 가변 다이나믹 서브셋이다. 굵기를 연속으로 쓸 수 있으면서 용량도 가장 적다.

여기서 한 가지만 조심하면 된다. family 이름이 방식마다 다르다. 가변을 받았으면 "Pretendard Variable", 정적을 받았으면 Pretendard다. 잘못 적어도 에러가 안 뜬다. 그냥 조용히 다른 글꼴로 표시될 뿐이라, 눈치채기까지 오래 걸린다.

설치해서 쓰려면

패키지 매니저와 시스템 폰트로도 배포한다.

npm i pretendard
yarn add pretendard

brew install font-pretendard     # macOS
yay -S otf-pretendard            # Arch

NixOS는 fonts.packages에 pretendard를 넣으면 된다. 디자인 툴에서 쓰려고 그냥 설치하는 경우에도 이 경로가 편하다.

Next.js를 쓴다면

저장소에 Next.js 항목이 따로 있다. 이 코드를 그대로 옮기면 된다.

const pretendard = localFont({
  src: './fonts/PretendardVariable.woff2',
  display: 'swap',
  weight: '45 920',
})

여기서 weight는 빼면 안 된다. 문서가 직접 경고를 달아뒀다.

weight 옵션을 지정하지 않으면 WebKit 기반의 브라우저에서 굵기가 잘못 렌더링 될 수 있으니 주의해 주세요.

즉 빼먹으면 사파리와 iOS에서만 굵기가 깨진다. 크롬으로 확인하는 동안에는 안 보이는 종류의 문제다. 그리고 45–920이라는 숫자도 눈여겨볼 만하다. 흔히 쓰는 100–900이 아니다.

라이선스가 넉넉하다

SIL 오픈 폰트 라이선스로 배포한다. 문서에 적힌 표현을 그대로 옮기면, 글꼴 단독 판매를 제외한 모든 상업적 행위 및 수정, 재배포가 가능하다.

상업 프로젝트에 넣어도 되고, 고쳐서 써도 되고, 앱에 묶어 배포해도 된다. 안 되는 건 글꼴 파일 자체를 상품으로 파는 것 하나다. 한글 글꼴 중에 이 정도로 조건이 단순한 경우는 드물다.

저장소를 열어볼 만한 이유

문서가 한국어·영어·일본어 세 가지로 관리된다. 웹폰트 빌드와 CDN 배포, 서브셋 생성은 기여자들이 자동화해뒀고, 그 내역이 README 기여자 항목에 사람 이름과 함께 적혀 있다. 개인 프로젝트로 시작한 글꼴이 어떻게 유지보수되는 물건이 됐는지가 그 목록에 보인다.

만든 사람이 배경과 특징, OpenType 기능을 따로 정리해둔 글도 링크돼 있다. 글꼴을 왜 이렇게 그렸는지 궁금하다면 그쪽이 더 재미있다.

정리

폰트를 쓰다 값이 헷갈리면 블로그 글을 검색하는 대신 저장소를 여는 게 빠르다. 굵기 축이 45–920이라는 것, family 이름이 방식마다 다르다는 것, 폴백 체인을 어떻게 짜야 하는지 — 전부 README에 이미 적혀 있다.

기억으로 쓰면 대체로 틀린다. 원본이 열려 있는데 굳이 외울 이유도 없다.