배경은 떴는데 글자가 늦게 보인다면, 웹 글꼴 로딩을 확인합니다

홈페이지 배경과 사진은 보이는데 제목이나 문의 버튼의 글자가 잠시 나타나지 않을 수 있습니다. 담당자가 같은 페이지를 다시 열면 글꼴이 이미 저장돼 문제가 보이지 않기도 합니다. 글꼴 검수는 최종 서체가 예쁜지뿐 아니라 다운로드를 기다리거나 실패한 상황에서도 내용을 읽을 수 있는지 확인해야 합니다. 첫 방문과 재방문의 차이를 함께 살펴봅니다.

글자가 늦는 원인을 먼저 분리합니다

텍스트 자체가 늦게 전달되는지, 이미 전달된 텍스트가 글꼴 적용을 기다리는지 구분합니다. 빈 영역이 보인다는 이유만으로 글꼴 문제라고 확정하지 않습니다. 개발 담당자에게 해당 영역의 콘텐츠 도착과 글꼴 요청 상태를 함께 확인하도록 요청합니다. 원인에 따라 수정할 위치가 달라질 수 있습니다.

MDN은 font-display가 글꼴 다운로드와 사용 가능 시점에 따라 표시 방식을 결정한다고 설명합니다. 글꼴을 기다리는 구간, 대체 글꼴을 표시하며 교체를 기다리는 구간, 로딩 실패 후의 처리 구간을 구분합니다. 글꼴 표시 방식 설명 따라서 같은 글꼴 파일을 사용해도 설정에 따라 방문자가 처음 보는 상태가 달라질 수 있습니다.

글꼴 요청이 느리거나 실패한 상태를 시험합니다

시험 환경에서 글꼴 요청만 늦추거나 차단하고 본문과 버튼 문구가 어떻게 표시되는지 확인합니다. 인터넷 전체를 끊으면 다른 자료까지 불러오지 못해 원인을 구분하기 어려울 수 있습니다. 시험 조건을 명확히 정하고 운영 사이트 설정을 무작정 바꾸는 방식으로 재현하지 않습니다.

가정으로 제목·본문·버튼이라는 3개 영역을 글꼴 정상 로딩과 요청 실패라는 2개 상태에서 확인하면 6개 대조 항목을 만들 수 있습니다. 이는 검수 범위 예시입니다. 각 항목에서 문자가 읽히는지, 빈 사각형이나 알아볼 수 없는 기호가 나오는지, 영역 높이가 달라지는지 기록합니다. 실제 사용자가 겪은 비율로 이 숫자를 표현하지 않습니다.

한글만 있는 문장뿐 아니라 숫자와 영문이 섞인 문장도 확인합니다. 일부 문자만 다른 글꼴로 표시될 때 줄 높이나 굵기가 어색해질 수 있습니다. 모든 문자를 같은 서체로 강제하는 것이 목적은 아니며, 필요한 내용이 빠짐없이 읽히는지와 의미 구분이 유지되는지가 중요합니다.

대체 글꼴에서 최종 글꼴로 바뀐 결과를 비교합니다

먼저 글자가 보이는 방식이라도 나중에 글꼴이 교체되면 줄바꿈과 버튼 폭이 달라질 수 있습니다. MDN은 swap이 매우 짧은 차단 구간과 제한 없는 교체 구간을, optional이 매우 짧은 차단 구간과 교체 구간이 없는 방식을 갖는다고 설명합니다. 어떤 설정을 선택할지는 표시 시점과 서체 일관성의 요구를 함께 검토합니다. 특정 값을 넣으면 모든 문제가 해결된다고 보지 않습니다.

검수에서는 짧은 제목만 보지 말고 긴 제목과 여러 줄 버튼 문구를 함께 확인합니다. 글꼴 교체 전후에 글자가 잘리거나 옆 요소를 덮는지, 읽던 문단이 크게 움직이는지 기록합니다. 대체 글꼴이 다른 운영체제에서는 결과도 달라질 수 있으므로 사용한 기기와 브라우저를 남깁니다.

강조 문구와 일반 본문도 구분합니다. 기본 굵기는 정상인데 굵은 글자용 파일만 실패할 수 있습니다. 화면에서 강조가 유지되는지 실제 적용 상태를 확인하고, 파일이 존재한다는 사실만으로 모든 굵기가 정상이라고 판단하지 않습니다. 필요한 굵기와 사용하지 않는 굵기를 정리하는 작업은 별도 변경으로 기록합니다.

첫 방문 조건으로 수정 결과를 재확인합니다

캐시된 글꼴로 빠르게 보인 결과와 새로 내려받는 결과를 따로 기록합니다. 개발 도구에서 시험 조건을 바꿨다면 어떤 설정을 사용했는지 남겨 다음 담당자도 재현할 수 있도록 합니다. 새 배포에 글꼴 설정이 실제 적용됐는지도 확인합니다. 소스 파일만 바뀌고 제공 중인 스타일이 이전 상태라면 검수 결과가 달라질 수 있습니다.

완료 보고에는 텍스트가 보이지 않던 영역, 요청 상태, 적용한 표시 방식과 남은 차이를 적습니다. 글꼴의 모양을 맞추기 위해 본문을 이미지로 바꾸는 방식은 읽기와 수정 등 다른 문제를 만들 수 있으므로 별도의 검토가 필요합니다. 목적은 지정 서체가 항상 먼저 보이게 하는 것이 아니라 필요한 내용을 읽을 수 있는 상태를 유지하는 데 있습니다.

출처 확인일: 2026-10-26. 시험 영역과 수량은 설명용 가정이며 실제 글꼴 로딩 시간이나 사이트 개선 성과가 아닙니다.