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

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

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

웹폰트 준비 전, 준비 후, 요청 실패의 세 화면을 나눠 봅니다. 한글 본문뿐 아니라 가격·모델명·버튼 이름이 각 상태에서 끝까지 남는지 확인하는 절차입니다.

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

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에서 지정한 간격이 함께 작동하고 있는지 살펴봅니다. 이 과정을 실제 브라우저에서 확인하지 않고 글꼴 이름 목록만 비교해 완료로 표시하지 않습니다.

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

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

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

테스트 환경에서 글꼴 요청만 차단해 실패 화면을 확인할 수 있습니다. 차단한 주소를 기록하고 시험 뒤 복원해야 다음 관찰에서 정상 요청과 구별할 수 있습니다.

표의 각 상태에서 실제로 보인 줄 수·잘림·대체 글꼴을 기록합니다. 새 방문과 캐시 방문은 별도 행으로 남겨 같은 조건끼리 비교합니다.

자원 요청이 실패했을 때도 내용을 읽을 수 있어야 한다는 원칙은 이미지에도 적용됩니다. 이미지 실패 상태의 대체 안내에서는 무엇이 남아야 하는지 비교합니다.

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

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

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

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

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

글꼴 교체 뒤 문단이 답답해지거나 줄이 과하게 길어졌다면 타이포그래피와 여백을 조정하는 기준으로 행간과 문단 폭을 함께 살펴보세요.

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

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

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

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

전송과 로딩 전략은 web.dev 글꼴 모범 사례를 참고하세요. 전략을 바꾼 뒤에도 글자가 보이는 시점과 교체 뒤의 배치 변화는 각각 확인해야 합니다.

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

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

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

참고 자료와 검토 범위

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