한글 웹폰트가 느린 이유: 전체 파일·서브셋·가변 폰트 비교

한글 웹폰트가 늦게 보일 때 가장 먼저 파일 크기를 탓하기 쉽다. 한글은 필요한 글자 수가 많고 서비스마다 쓰는 문자가 다르며, 굵기까지 여러 개면 요청 수가 늘어난다. 전체 파일, 서브셋, 가변 폰트는 서로 다른 문제를 푸는 방식이라 한 가지가 언제나 가장 빠르다고 말할 수 없다.

배송지를 확인하는 중입니다 · 잠시만 기다려 주세요

전체 파일은 문자 범위를 우선한다

사용자 이름과 주소처럼 입력을 통제하기 어려운 서비스는 넓은 문자 범위가 필요하다. 전체 파일은 예측 밖의 글자를 같은 패밀리로 표시하기 쉽지만, 페이지가 실제로 쓰는 문자보다 많은 데이터를 받을 수 있다. 필요한 범위와 전송 비용을 함께 봐야 한다.

획획클럽 카탈로그에는 패밀리의 문자 범위와 미리보기 자산이 따로 기록돼 있다. 서브셋 미리보기에서 보였다는 이유로 공식 패밀리 전체가 같은 범위라고 단정하거나, 반대로 한 파일의 범위를 서비스 전체 보장으로 읽지 않는다.

서브셋은 작게 나누는 방식부터 확인한다

서브셋은 자주 쓰는 글자를 분리해 첫 요청을 줄일 수 있다. 프리텐다드 공식 배포는 동적 서브셋 방식을 제공하고, Spoqa Han Sans Neo도 원본과 서브셋 웹폰트를 안내한다. 어떤 파일이 언제 요청되는지는 각 배포 CSS와 네트워크 패널에서 확인해야 한다.

조각 수가 많아지면 페이지 이동 때 새 파일이 이어서 필요할 수 있다. 캐시가 잘 작동하는지, 늦게 들어온 글자가 폴백에서 본 폰트로 바뀌며 레이아웃을 흔드는지까지 봐야 서브셋의 효과를 판단할 수 있다.

서울·제주·Ålesund · 주문번호 HH-2048

가변 폰트는 굵기 파일을 묶는다

가변 폰트는 한 파일 안에 굵기 축을 담을 수 있다. 프리텐다드는 가변 배포본과 정적 굵기 파일을 함께 제공한다. 여러 굵기를 실제로 쓰는 제품이라면 요청 구성을 단순하게 만들 수 있지만, 본문 400 한 단계만 쓰는 페이지에서는 정적 파일과 직접 비교해야 한다.

디자인 도구와 브라우저가 같은 축 범위를 쓰는지도 확인한다. 중간 굵기를 자유롭게 고를 수 있다는 이유로 토큰을 세밀하게 늘리면 시각 위계와 캐시 전략이 오히려 복잡해진다.

페이지별 문구와 굵기로 계산한다

홈, 로그인, 상품 목록, 긴 글 페이지는 필요한 글자와 굵기가 다르다. 대표 페이지 세 곳을 골라 최초 방문과 재방문 네트워크 기록을 비교하고, 실제로 받은 파일 수와 전송량, 폰트 교체 시점을 적는다. 전체 사이트의 인상을 한 화면의 점수로 대신하지 않는다.

preload를 추가하기 전에 첫 화면에서 정말 필요한 파일인지 확인한다. 사용하지 않는 굵기를 미리 받으면 다른 핵심 자원과 경쟁할 수 있다. CSS에 선언됐다는 사실과 현재 화면이 요청했다는 사실도 구분한다.

본문 400 · 강조 600 · 제목 800, 이 페이지에 셋 다 필요한가?

속도와 문자 안정성을 함께 결정한다

후보 전략마다 느린 네트워크와 캐시가 빈 상태를 재현한다. 글자가 처음부터 보이는지, 폰트가 바뀔 때 줄이 움직이는지, 드문 이름이 폴백으로 남는지 확인한다. 최종 선택은 전송량과 문자 안정성 두 축으로 남긴다.

프리텐다드 상세에서 배포 경로와 지원 정보를 확인하고 폰트 시뮬레이터에 실제 카피를 넣어 보자. “서브셋이라 빠르다” 같은 결론보다 어떤 페이지에서 어떤 파일이 요청됐는지를 기록하는 편이 다음 결정에도 쓸모가 있다.