한글 웹폰트가 늦게 뜰 때: 대체 글꼴과 로딩 전후 화면 확인

글꼴이 준비되기 전 화면도 콘텐츠입니다

한글 웹페이지를 열었을 때 문장이 잠깐 사라졌다가 나타나거나, 처음 보인 제목이 다른 글꼴로 바뀌며 두 줄에서 세 줄로 늘어날 수 있습니다. 완성된 디자인 파일만 보면 이런 중간 상태를 놓치기 쉽습니다. 웹폰트 검수는 선택한 글꼴이 예쁜지와 별개로, 파일을 기다리는 동안 무엇이 보이는지, 나중에 글꼴이 바뀌면 주변 요소가 어떻게 달라지는지를 확인하는 작업입니다.

이 글은 실제 서비스의 로딩 시간을 측정한 결과가 아니라 한글 문서의 검수 절차를 설명합니다. 외부 글꼴이 준비되지 않아도 핵심 내용을 읽을 수 있는지, 준비된 뒤에도 가격과 버튼 이름이 잘리지 않는지, 요청이 실패하면 어떤 글꼴로 남는지 세 상태를 나누어 살펴봅니다. 빠르다는 인상을 만들기 위해 단순히 글자를 숨기거나, 한 번 정상 표시됐다는 이유로 모든 기기에서 검증됐다고 표현하지 않습니다.

글꼴 이름 목록과 실제로 그린 글꼴을 구분합니다

CSS의 font-family에는 우선 사용할 글꼴과 대체 후보를 적을 수 있습니다. 그러나 목록의 첫 이름이 화면의 모든 글자를 실제로 그렸다는 뜻은 아닙니다. 해당 글꼴이 아직 준비되지 않았거나 특정 문자를 포함하지 않으면 다른 후보가 사용될 수 있습니다. 브라우저에서 선언된 목록을 봤다는 기록과 실제로 표시된 글꼴을 확인했다는 기록을 구분해야 합니다.

설명용 이름인 “Guide Korean”을 첫 후보로 쓰고 system-ui와 sans-serif를 뒤에 두었다고 가정해 보겠습니다. 이 이름은 실제 제공하는 글꼴 파일이나 특정 브랜드를 추천하는 것이 아닙니다. 첫 후보가 준비되기 전에는 환경에서 이용 가능한 대체 글꼴이 사용될 수 있습니다. 그 결과는 운영체제와 브라우저, 설치된 글꼴, 표시하는 문자에 따라 달라질 수 있으므로 대체 후보가 있다는 사실을 같은 화면 보장의 근거로 삼지 않습니다.

.guide-text {
  font-family: "Guide Korean", system-ui, sans-serif;
  line-height: 1.7;
}

이 코드의 행간은 설명용 값입니다. 모든 한글 본문에 같은 값을 권하는 기준이 아닙니다. 실제 문서에서 제목, 본문, 도움말, 버튼은 크기와 줄 수가 다르므로 각각 확인해야 합니다. 글꼴을 바꾼 뒤 행간만 넓혀 모든 문제를 해결하려 하면 버튼의 높이나 카드의 균형이 달라질 수도 있습니다. 먼저 어떤 요소에서 무엇이 어긋나는지를 분리합니다.

font-display는 글꼴의 준비 시점을 다루는 선택입니다

font-display는 @font-face 안에서 글꼴을 언제 어떻게 보여줄지에 관계되는 설정입니다. swap은 매우 짧은 차단 기간과 글꼴 교체 기간을, optional은 매우 짧은 차단 기간과 교체 없는 방식을 설명합니다. 세부 동작과 기간은 사용자 에이전트의 처리에 영향을 받으므로 이 글에서는 몇 초 뒤에 반드시 바뀐다는 고정 시간표를 제시하지 않습니다. 값의 정의는 MDN font-display 문서에서 확인할 수 있습니다.

swap이라는 이름만 보고 글자가 빨리 보이니 모든 문제가 끝났다고 판단하지 않습니다. 대체 글꼴과 웹폰트의 글자 폭이 다르면 바뀌는 순간 제목의 줄 수나 버튼의 너비가 달라질 수 있습니다. 반대로 글꼴 교체가 없는 상태를 선택했다고 본문이 잘 읽힌다는 뜻도 아닙니다. 웹폰트를 사용하지 못한 상태에서도 필요한 한글과 숫자, 기호가 자연스럽게 보이는지 확인해야 합니다.

선택할 때는 화면의 역할을 먼저 정리합니다. 긴 정보 문서에서 글자를 읽을 수 있는 시점, 짧은 버튼 이름에서 공간이 유지되는 조건, 로고처럼 별도로 관리하는 표기는 같은 문제가 아닙니다. 특정 값을 사이트 전체에 적용하기 전에 제목·본문·가격·입력 도움말의 중간 상태를 비교하면 디자인 취향과 읽기 문제를 구분하기 쉽습니다.

검수 문장은 한글만 고르게 넣지 않습니다

검수 문장에는 실제 페이지가 다루는 문자 종류를 넣습니다. 한글 제목만 확인하면 가격의 숫자, 영문 모델명, 괄호와 단위, 하이픈, 긴 파일 이름이 다른 글꼴로 표시되는 상황을 놓칠 수 있습니다. 그렇다고 고객 이름이나 연락처 같은 개인정보를 테스트 문서에 가져올 필요는 없습니다. 같은 길이와 문자 구성을 가진 설명용 문장을 별도로 만들어 검사합니다.

표의 가격과 모델명은 문자 구성을 설명하는 가상 값이며 상품을 소개하거나 가격을 안내하는 자료가 아닙니다. 실제 검수에서는 사용 구간에 가까운 길이의 문장을 고릅니다. 짧은 이름만 넣어 통과한 버튼에 운영자가 긴 문구를 입력하면 결과가 달라질 수 있으므로 문구를 바꿀 수 있는 범위도 함께 기록합니다.

단어 사이의 간격이나 숫자 폭이 달라졌다면 전부 같은 문제로 취급하지 않습니다. 일부 문자만 다른 글꼴로 표시됐는지, 실제 굵기에 해당하는 파일이 준비됐는지, CSS에서 지정한 간격이 함께 작동하고 있는지 살펴봅니다. 이 과정을 실제 브라우저에서 확인하지 않고 글꼴 이름 목록만 비교해 완료로 표시하지 않습니다.

처음 방문·재방문·글꼴 실패 상태를 나눕니다

처음 방문에서는 필요한 글꼴 파일이 아직 캐시에 없을 수 있습니다. 재방문에서는 이미 준비된 파일을 이용해 중간 상태가 짧아지거나 관찰하기 어려울 수 있습니다. 따라서 두 방문 조건을 구분하지 않고 한 장의 완성 화면으로 로딩 중 상태를 검증하지 않습니다. 검사 기록에는 페이지 주소, 브라우저, 화면 폭, 확대 상태, 캐시 사용 여부를 같이 적습니다.

글꼴 실패 상태에서는 본문이 끝까지 남는지부터 확인합니다. 사이트 제목과 메뉴 이름이 사라지지 않는지, 핵심 조건을 담은 도움말이 빈 영역이 되지 않는지, 버튼 이름이 읽힐 수 있는지 봅니다. 글꼴 요청이 실패해도 기존 콘텐츠를 읽을 수 있어야 한다는 편집 목표와 어떤 로딩 전략을 사용할지는 구분해서 기록합니다.

검수 도구에서 글꼴 요청을 일시적으로 차단하는 방법을 사용할 때는 자신의 테스트 환경에서만 검사합니다. 실제 방문자에게 영향을 주는 서버 설정이나 인증·보안 보호를 꺼서 테스트하지 않습니다. 차단한 URL과 검사 목적을 기록하고 조건을 원래대로 복원해야 다음 검사에서 실패 상태와 정상 상태를 혼동하지 않습니다.

이 표에는 가짜 로딩 시간이나 점수를 넣지 않았습니다. 관찰 조건과 확인 항목을 정리하는 양식입니다. 검수자가 직접 측정했다면 사용한 도구와 조건을 별도 기록하고, 가상의 설명용 표와 실제 관측 결과가 섞이지 않게 합니다.

글꼴 교체 뒤의 줄 수와 행동 요소를 함께 봅니다

대체 글꼴과 웹폰트에서 제목 줄 수가 달라지면 그 아래의 요약과 버튼도 내려갈 수 있습니다. 고정 높이의 카드에서는 문장 끝이 잘리거나 다른 요소와 겹칠 수 있습니다. 먼저 로딩 전후의 제목 줄 수, 카드 높이, 버튼 위치를 기록합니다. 파일을 빨리 받게 만드는 조치와 레이아웃을 바뀐 문자 폭에 견디게 만드는 조치는 서로 다른 수정입니다.

버튼을 일정 높이로 유지하겠다고 문구를 잘라내면 행동의 의미가 없어질 수 있습니다. “선택한 구성 확인하기”의 끝이 잘렸을 때 무엇을 확인하는지 여전히 읽을 수 있는지 봅니다. 줄바꿈을 허용할지, 문구를 더 정확하고 간결하게 바꿀지, 배치 폭을 조정할지는 페이지의 과업에 따라 결정합니다. 글꼴 문제를 숨기기 위해 핵심 조건을 삭제하지 않습니다.

가격과 안내 문장을 한 줄로 묶는 화면에서는 글꼴 교체 뒤 단위가 숫자에서 떨어져 보이지 않는지도 확인합니다. 숫자만 앞줄에 남고 “원”이나 “mm”가 다른 곳으로 이동하면 독자가 값을 읽는 방식이 달라질 수 있습니다. 필요한 값과 단위의 관계를 유지하는 편집과 CSS 처리를 검토하되, 실제 문장을 다른 화면 폭에서도 다시 살펴봅니다.

키보드 초점이 있는 버튼이나 입력창에서는 글꼴이 바뀐 뒤 초점 표시가 가려지지 않는지 확인합니다. 요소의 위치가 변해도 현재 행동할 수 있는 곳을 찾을 수 있어야 합니다. 다만 로딩 중 위치가 변하는 상황을 한 번 관찰했다고 사이트 전체 접근성을 검증했다고 주장하지 않습니다. 초점, 읽기 순서, 확대 상태는 별도의 검사 항목입니다.

파일 수를 줄이기 전에 필요한 문자와 사용권을 확인합니다

한글 글꼴은 필요한 문자와 굵기의 범위를 잘못 줄이면 특정 문구에서만 다른 글꼴이 나타날 수 있습니다. 일부 문자를 제외한 파일을 사용한다면 실제로 공개될 제목, 본문, 숫자, 특수기호가 포함되는지 확인해야 합니다. 글꼴을 몇 개의 파일로 나눌지는 전송 전략뿐 아니라 편집자가 나중에 입력할 수 있는 문자 범위와 연결됩니다.

불필요한 굵기나 사용하지 않는 글꼴을 요청하지 않도록 살펴볼 수 있지만, 현재 본문에 없다는 이유만으로 향후 필요한 문자를 제외하지 않습니다. 운영자가 자유롭게 글을 작성하는 사이트라면 테스트 문장 하나의 통과와 앞으로 모든 문장이 표시된다는 보장은 다릅니다. 정기적인 문구 추가나 콘텐츠 입력 뒤의 검수 범위를 정리합니다.

글꼴 파일을 직접 올리거나 수정·분할할 때는 사용권을 먼저 확인합니다. 데스크톱 사용권, 웹 임베딩, 재배포, 파일 수정이 같은 조건이라고 가정하지 않습니다. 이 글은 특정 글꼴의 라이선스를 평가하거나 유료 파일 구매를 권하는 글이 아닙니다. 실제 사용할 파일의 제공처와 라이선스 원문, 허용된 작업을 운영 기록에 남겨야 합니다.

전송 방식과 로딩 전략에 대한 일반적인 논의는 web.dev 글꼴 모범 사례를 참고할 수 있습니다. 이 자료를 참고하더라도 실제 페이지의 성능 개선이나 레이아웃 안정성은 배포 환경에서 별도로 확인해야 합니다. 파일 요청의 우선순위를 바꾸는 작업만으로 글자 폭이나 줄바꿈 문제가 해결된다고 표현하지 않습니다.

디자이너·개발자·편집자가 같은 변경 범위를 봅니다

디자인 단계에서는 선택한 글꼴과 대체 후보, 제목·본문·버튼의 문장 길이를 전달합니다. 구현 단계에서는 실제 파일, 로딩 전략, 요청 실패 상태, 표시된 글꼴을 확인합니다. 편집 단계에서는 운영자가 넣은 최종 문구로 줄 수와 잘림을 다시 봅니다. 한 단계의 승인을 다른 단계의 검수 완료로 가져다 쓰지 않도록 기록을 연결합니다.

글꼴을 교체하는 요청에는 어떤 요소가 바뀌는지도 적습니다. 본문 글꼴만 교체하는지, 버튼의 굵기도 바뀌는지, 숫자에 다른 글꼴을 사용하는지 구분합니다. 사이트 전체에 일괄 적용했다면 예전에 승인한 화면에서도 새 방문·재방문·실패 상태를 다시 확인해야 합니다. 파일 이름이 같아도 내용이나 범위가 달라졌다면 이전 관찰 조건이 그대로 유효하다고 보지 않습니다.

1. 핵심 문장의 사용 위치와 문자 종류를 정합니다.
2. 선언한 글꼴 목록과 실제 표시된 글꼴을 구분합니다.
3. 처음 방문·재방문·실패 상태를 별도로 봅니다.
4. 제목 줄 수, 카드 높이, 버튼 이름과 초점을 대조합니다.
5. 파일 범위·굵기·사용권과 운영자가 입력할 문구를 함께 확인합니다.
6. 변경한 범위와 관찰하지 않은 항목을 검수 기록에 남깁니다.

완성된 화면의 글꼴을 확인한 것만으로 로딩 과정까지 검수했다고 말하지 않습니다. 글꼴을 기다리는 동안에도 문서가 읽히는지, 대체 상태에서 의미가 유지되는지, 교체 뒤에도 행동 요소가 사용 가능한지가 이 검수의 핵심입니다. 실제 로딩 시간과 사용자의 경험은 측정 조건에 따라 달라지며 이 글의 설명용 문장과 표는 성능 결과를 대신하지 않습니다.

참고 자료와 검토 범위

• MDN: font-display — 글꼴 표시·교체 전략의 정의.
• web.dev: 글꼴 모범 사례 — 글꼴 전달과 로딩 전략을 검토하는 출발점.

자료 대조일: 2026-09-13. 코드의 글꼴 이름·행간·검수 문구·가격·모델은 설명용 예제입니다. 실제 글꼴 파일, 제품, 고객 사이트의 관측 자료가 아닙니다. 작성·운영: 오경연 / detailry. 정정·문의로 보완 자료를 전달할 수 있습니다.

함께 읽기: 한글 문서의 행간·줄 길이 검수 · 로딩 전 공간 예약.

글꼴 실패와 글자 누락을 다른 행에 남기는 예시

가상의 안내문에 A-3·12,000원·한글 받침을 넣은 검사 기록입니다. 특정 글꼴이나 기기의 측정 결과가 아닙니다.

제목 줄 수가 줄었다고 개선 판정을 내리지 않습니다. 버튼 높이가 이전 글꼴에 고정되어 마지막 글자가 잘렸다면 기능 이름의 정보 손실입니다. 동일한 문장과 화면 조건을 고정하고 글꼴 준비 여부, 실제 표시 문자, 요소 높이, 초점 가림을 별도 항목으로 남깁니다. 요청 실패에서도 본문을 읽을 수 있게 하는 것과 원래 글꼴로 그려졌다는 것은 서로 다른 결과입니다.