font-display와 서브셋 적용 체크리스트: 깜빡임과 늦은 교체 줄이기

font-display를 바꾸면 폰트가 보이는 시점은 달라지지만 파일 크기나 폴백과의 모양 차이가 사라지지는 않는다. 서브셋도 필요한 글자를 나눠 받을 뿐 모든 페이지의 교체 문제를 자동으로 해결하지 않는다. 두 설정은 실제 네트워크와 문구를 보며 함께 조정해야 한다.

회원 정보를 불러오는 동안 기본 글꼴로 먼저 표시합니다

표시 목표를 한 문장으로 정한다

첫 화면의 글을 곧바로 읽게 할지, 짧게 기다려 브랜드 폰트를 우선할지 정한다. MDN이 설명하는 swap, fallback, optional은 차단·교체 기간이 서로 다르므로 이름의 인상만 보고 고르지 않는다. 서비스가 허용할 행동을 먼저 적는다.

본문과 캠페인 제목이 같은 전략을 쓸 필요도 없다. 결제 안내는 즉시 읽히는 편이 중요하고, 짧은 브랜드 제목은 폰트 교체를 줄이는 편이 나을 수 있다. 역할별 정책이 다르면 CSS와 디자인 문서에 함께 남긴다.

서브셋 CSS와 실제 요청을 대조한다

Spoqa Han Sans Neo 공식 배포는 원본과 서브셋 웹폰트를 제공한다. CSS 파일을 열어 어떤 font-face와 URL이 선언됐는지 보고, 네트워크 패널에서 현재 문구가 어느 파일을 요청했는지 확인한다. 선언 수를 실제 요청 수로 착각하지 않는다.

페이지를 새로 열 때와 캐시된 뒤를 나눠 측정한다. 화면을 이동하며 새로운 한글 조각이 늦게 불리는지, 폴백 글자가 섞여 남는지도 본다. 사용자 이름과 주소가 있는 화면은 고정 카피만 있는 랜딩보다 더 넓은 표본이 필요하다.

홍길동 · 뷁 · 體 · café · 2026-09-29

preload는 첫 화면의 필수 파일만 고른다

사용할지 모르는 굵기와 서브셋을 모두 미리 받으면 이미지나 스크립트와 네트워크 우선순위를 다툰다. 첫 화면에서 바로 그리는 글자와 굵기를 확인하고, preload 전후의 요청 시작 시점과 렌더링을 비교한다. 링크 하나를 더했다는 사실은 성능 근거가 아니다.

교차 출처 파일이라면 배포 문서와 응답 헤더도 확인한다. 설정 오류로 preload와 실제 CSS 요청이 서로 다른 자원으로 잡히면 같은 파일을 두 번 받는 것처럼 보일 수 있다.

계산 스타일과 레이아웃 이동을 본다

폰트가 바뀌는 순간만 눈으로 찾기보다 계산 스타일에서 실제 font-family를 읽는다. 버튼 폭, 카드 높이, 제목 줄 수를 로딩 전후로 기록하면 작은 교체도 잡을 수 있다. 특히 고정 높이와 말줄임이 있는 컴포넌트를 먼저 본다.

느린 네트워크, 오프라인, 캐시 비움 상태를 각각 시험한다. 테스트 도중 개발자 도구 자체가 캐시 정책을 바꾸고 있지 않은지도 확인해야 결과를 다시 만들 수 있다.

정상 로딩 · 느린 3G · 폰트 요청 실패, 세 화면을 나란히 비교

누락 글자를 마지막에 따로 검사한다

서브셋 밖 문자가 시스템 폰트로 보이면 페이지는 깨지지 않은 것처럼 보인다. 사람 이름, 지역명, 단위, 괄호, 이모지를 넣고 글자마다 적용 폰트를 확인한다. 문제가 있으면 전체 파일로 바꾸기 전에 필요한 문자 범위와 폴백 목표를 다시 정한다.

스포카 한 산스 네오 상세에서 대표 후보를 살펴보고 폰트 시뮬레이터로 문구 폭을 먼저 확인하자. 이후 네트워크와 계산 스타일을 붙이면 깜빡임, 늦은 교체, 문자 누락을 서로 다른 원인으로 나눌 수 있다.