한글 웹폰트 용량 줄이기, 서브셋과 가변 폰트 활용법

한글 웹폰트는 글자 수가 많아 파일이 무겁기 때문에, 실제로 쓰는 글자만 남기는 서브셋과 압축률이 높은 woff2 형식을 쓰면 용량을 크게 줄일 수 있습니다. 여러 굵기를 쓰는 사이트라면 굵기마다 파일을 따로 받기보다 하나의 파일로 여러 굵기를 표현하는 가변 폰트가 도움이 됩니다. 폰트가 늦게 받아져도 글자가 먼저 보이도록 표시 방식을 정해 두면 사용자가 빈 화면을 보는 시간이 줄어듭니다.

웹폰트는 방문자의 컴퓨터에 설치되지 않은 글꼴을 인터넷으로 내려받아 웹페이지에 보여 주는 방식입니다. 디자인을 원하는 서체로 통일할 수 있지만, 파일이 무거우면 페이지가 느려집니다.

한글 폰트는 왜 무거운가요?

영문 폰트는 알파벳과 숫자, 기호를 합쳐도 수백 자면 충분합니다. 한글은 자음과 모음을 조합한 완성형 글자가 유니코드에 1만 1천 자가 넘게 들어 있어, 이 글자들을 모두 담은 폰트는 영문 폰트보다 훨씬 무겁습니다. 굵기가 여러 개라면 그만큼 파일도 늘어납니다.

그러나 실제 문장에서 쓰이는 한글 글자는 그보다 훨씬 적습니다. 자주 쓰는 글자를 모은 2,350자 정도면 일반적인 글 대부분을 표현할 수 있어, 쓰지 않는 글자를 빼는 것만으로도 용량이 크게 줄어듭니다.

방법	줄이는 원리	주의할 점
서브셋	쓰는 글자만 남김	빠진 글자는 다른 서체로 보임
woff2 형식	압축률 높은 파일 형식	아주 오래된 브라우저 확인
가변 폰트	여러 굵기를 한 파일에	지원 서체가 제한적
굵기 줄이기	꼭 필요한 굵기만 사용	디자인 단계에서 정하기

서브셋은 어떻게 적용하나요?

서브셋은 폰트 파일에서 필요한 글자만 골라 새 파일을 만드는 작업입니다. 자주 쓰는 글자 묶음을 기준으로 만들 수도 있고, 사이트에 실제로 쓰인 글자만 모아 만들 수도 있습니다. 메뉴와 제목처럼 글자가 정해진 곳은 사이트 글자만 모은 서브셋이 가장 가볍습니다.

다만 사용자가 직접 입력하거나 새 글이 계속 올라오는 사이트라면 서브셋에 없는 글자가 나올 수 있습니다. 이때 그 글자만 기본 서체로 보여 어색할 수 있으므로, 자주 쓰는 글자 묶음 서브셋을 기본으로 쓰는 편이 안전합니다. 폰트 사용 허락에서 파일을 고쳐 쓰는 것을 허용하는지도 먼저 확인해야 합니다.

가변 폰트와 표시 방식은 어떻게 쓰나요?

가변 폰트는 굵기 같은 속성을 하나의 파일 안에서 연속적으로 바꿀 수 있는 폰트입니다. 본문, 소제목, 제목에 서로 다른 굵기를 쓴다면 굵기별 파일을 셋 받는 대신 가변 폰트 하나만 받으면 됩니다. 한글 가변 폰트는 아직 종류가 많지 않으니, 쓰려는 서체가 가변 버전을 제공하는지 확인합니다.

폰트를 내려받는 동안 글자가 보이지 않으면 사용자는 빈 화면을 보게 됩니다. CSS에서 폰트 표시 방식을 swap으로 지정하면 기본 서체로 글자를 먼저 보여 주고, 웹폰트가 도착하면 바꿔 줍니다. 처음 보이는 서체와 웹폰트의 크기 차이가 크면 글자가 바뀔 때 화면이 흔들릴 수 있어, 비슷한 크기의 기본 서체를 함께 지정해 두면 좋습니다.

자주 묻는 질문

서브셋을 만들면 글자가 깨지지 않나요?
서브셋에 없는 글자는 기본 서체로 보입니다. 새 글이 자주 올라오는 사이트는 자주 쓰는 글자 묶음을 기준으로 만드는 것이 안전합니다.

woff2 형식은 모든 브라우저에서 되나요?
요즘 쓰이는 대부분의 브라우저는 지원합니다. 아주 오래된 환경을 함께 지원해야 한다면 다른 형식을 함께 준비합니다.

웹폰트 대신 시스템 서체를 쓰면 어떤가요?
가장 빠르지만 기기마다 서체가 달라 보일 수 있습니다. 본문은 시스템 서체, 제목만 웹폰트로 쓰는 방법도 있습니다.