독자가 페이지를 이용하는 데 필요한 글은 대체 텍스트로 신속하게 표시하세요. 잠시 숨기는 방식은 정당한 이유가 있는 작은 글꼴 의존 요소에만 선택하세요. Mac에서 관리하는 페이지의 정책을 선택하고 텍스트 흐름에 미치는 영향을 테스트하는 방법을 이 가이드에서 설명합니다.

글꼴이 로딩되는 동안 실제로 무엇이 달라질까요?

요청한 글꼴을 사용할 수 없는 동안 대체 글꼴은 같은 텍스트를 다른 서체로 렌더링합니다. 잠시 숨겨진 텍스트는 글꼴 로딩의 차단 기간에 해당합니다. 이때 브라우저는 보이지 않는 대체 서체로 레이아웃을 계산합니다. 브라우저가 다운로드 가능한 서체를 처음 사용하려 시도할 때 로딩 타임라인이 시작됩니다. MDN의 font-display 참고 자료에서 이러한 단계를 설명합니다.

페이지를 검토할 때 이 차이가 중요합니다. 제목이 비어 있다고 해서 최종 크기를 확보해 둔 것은 아닙니다. 차단 기간에는 브라우저가 여전히 대체 글꼴로 레이아웃을 계산하며, 글자를 숨겨도 다운로드한 글꼴의 최종 줄바꿈이 정해지는 것은 아닙니다. 표시 여부와 레이아웃 안정성은 따로 판단하세요.

관련 설정은 font-display 설명자이며, @font-face 규칙 안에 지정합니다. 일반 문단 선택자가 아니라 글꼴 면 정의에 속합니다. 이는 페이지 작성 시의 선택입니다. 관리하는 페이지에서 사용할 수 있는 스타일시트나 글꼴 설정을 이용하세요. MDN에서 font-display 적용 위치를 설명합니다.

독자의 작업에는 어떤 font-display 값이 적합할까요?

수정하기 전에 두 가지를 결정하세요. 단어를 다른 글꼴로 신속하게 표시해야 하는지, 나중에 그 글꼴로 교체해도 괜찮은지입니다. 다음 표는 문서화된 로딩 기간을 추상적인 공개 페이지에 적용할 선택지로 정리한 것입니다. MDN의 값 정의에서 기본 동작을 설명합니다.

값 글꼴을 사용할 수 없는 동안 대체 글꼴을 교체할 수 있는 기간 적합한 시작점
swap 극히 짧은 차단 후 대체 글꼴 표시 제한 없는 교체 기간 의도한 서체가 중요한 짧은 제목
fallback 극히 짧은 차단 후 대체 글꼴 표시 짧은 교체 기간 조기 변경이 허용되는 읽기용 텍스트
optional 극히 짧은 차단 교체 기간 없음 처음 표시된 글꼴을 유지하는 것이 가장 중요한 텍스트
block 짧은 차단 기간 동안 보이지 않는 대체 글꼴을 사용한 뒤 대체 글꼴 표시 제한 없는 교체 기간 특정 글꼴에 의존하는 작은 요소
auto 브라우저가 정책 선택 브라우저가 정책 선택 브라우저의 기본 동작을 허용하는 경우

이 값들은 정책 범주이며, 사용자가 설정할 수 있는 정확한 타이머가 아닙니다. W3C의 최신 CSS Fonts Level 4 작업 초안은 일반적인 기간을 권장하지만 브라우저마다 다를 수 있다고 명시합니다. 또한 block은 사용성에 특정 글꼴이 필요한 작은 텍스트에만 사용하도록 제한합니다. 제목의 모양이 더 낫다는 이유만으로 제목을 비워 두는 것은 타당성이 약합니다. W3C: 글꼴별 글꼴 표시 제어.

“Sample Collection”이라는 제목, “Section One”이라는 탐색 항목, 여러 문단이 있는 가상 페이지에서는 읽기용 텍스트에 fallback를 먼저 고려하세요. 서체를 최종적으로 사용하는 것이 중요하다면 짧은 제목에는 swap를 고려하세요. 처음 렌더링된 상태를 유지하는 것이 우선이라면 optional을 선택하세요. 이 권장 사항은 문서화된 정책을 독자의 작업에 적용한 것이며, 측정 결과가 아닙니다.

표시 여부와 재배치를 판단하는 방법

각 텍스트 역할을 따로 평가하세요. 탐색 레이블과 문단은 같은 글꼴 모음을 사용할 수 있지만 레이아웃 제약은 서로 다릅니다. 유용한 질문은 글꼴 변경 때문에 작업을 계속할 수 없게 되는지, 아니면 모양만 달라지는지입니다.

  1. 대체 글꼴로 페이지를 읽어 보세요. “Section One”을 이해하고, 제목을 알아보고, 문단을 읽을 수 있나요? 그렇다면 대체 글꼴을 표시하는 것이 적절한 시작점입니다.
  2. 글꼴이 교체되는 모습을 살펴보세요. 제목이 한 줄 늘어나나요? 레이블이 줄바꿈되나요? 다음 문단이 이동하나요?
  3. 허용할 교체 기간을 선택하세요. 늦은 교체도 괜찮다면 swap, 조기 교체만 허용한다면 fallback, 처음 표시된 글꼴을 유지해야 한다면 optional을 사용하세요.
  4. 텍스트를 비워 둘 구체적인 이유를 확인하세요. block를 선택하기 전에 대체 글꼴로 무엇을 사용할 수 없게 되는지, 그리고 그 의존성을 없앨 수 없는 이유가 무엇인지 확인하세요.

예를 들어 “Sample Collection”이 대체 글꼴에서는 한 줄, 다운로드한 글꼴에서는 두 줄을 차지한다고 가정해 봅시다. 제목의 줄 높이가 가정상 40픽셀이라면 간격이 그대로인 경우 늘어난 한 줄만큼 높이가 40픽셀 증가합니다. 그 아래 콘텐츠도 그에 따라 이동할 수 있습니다. 이는 설명을 위한 가정값이지 브라우저 측정값이 아닙니다.

잠시 숨기는 방식으로 이 차이를 해결할 수는 없습니다. 현실적인 선택은 대체 글꼴을 더 잘 맞추거나, 테스트 후 레이아웃을 조정하거나, 늦은 교체를 피하는 정책을 선택하는 것입니다. 현재 W3C 초안의 optional 동작에서는 대체 텍스트가 한 번 그려지고 나면 해당 페이지가 유지되는 동안 선택적 글꼴로 교체해서는 안 됩니다. W3C의 optional 정의.

Mac에서 선택을 적용하고 테스트하는 방법

스타일시트를 수정할 수 있고 기존 웹 글꼴이 정상적으로 로딩되는 페이지를 사용하세요. 이 비교에서는 실제 글꼴 파일 참조를 유지하세요. 새 글꼴을 다운로드하거나 대체 에셋을 준비할 필요가 없습니다.

페이지의 소스 스타일시트나 지원되는 글꼴 설정에서 관련 @font-face 선언을 찾으세요. 해당 선언의 font-display 설명자에 font-display: fallback;과 같은 후보 값을 지정하세요. 굵기와 스타일에 사용되는 다른 선언도 검토해 페이지가 실제로 요청하는 서체를 테스트하세요. 설명자의 위치는 MDN의 font-display 예시에서 확인할 수 있습니다.

Mac의 Chrome에서 Command + Option + I을 눌러 DevTools를 여세요. 또는 대상 텍스트를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택하세요. Elements 패널의 Styles에서 적용된 CSS를 확인할 수 있습니다. Chrome의 DevTools 열기 안내에서 두 방법을 설명합니다.

스타일시트를 변경할 때마다 다음 비교를 실행하세요. 글꼴 로딩 정책의 차이를 확인할 수 있도록 창 너비와 확대 비율을 동일하게 유지하세요.

  1. Network를 열고 Disable cache를 활성화한 다음, Throttling 메뉴에서 느린 프리셋을 선택하고 새로고침하세요. 글꼴 요청을 확인하려면 Font 필터를 사용하세요.
  2. 제목, 탐색 항목, 문단의 첫 부분을 살펴보세요. 텍스트가 처음에 비어 있는지, 대체 글꼴로 표시되는지, 나중에 줄바꿈이 바뀌는지 기록하세요.
  3. 전환이 너무 빨라 확인하기 어렵다면 Network 패널 설정에서 Capture screenshots를 활성화하고 새로고침해 로딩 과정을 살펴보세요.
  4. 쓰로틀링을 비활성화하고 Disable cache를 해제하세요. 다시 새로고침해 일반적인 조건에서 재방문했을 때와 비교하세요. Chrome의 Network 기능 참고 자료에서 이러한 설정을 설명합니다.

글꼴을 사용할 수 없는 경우도 별도로 테스트하세요. Network에서 실제 글꼴 요청을 마우스 오른쪽 버튼으로 클릭하고 Block request를 선택한 다음 새로고침하세요. Chrome은 일치하는 패턴을 Request conditions에 표시합니다. 단어가 읽을 수 있는 상태로 표시되고 대체 글꼴로 페이지를 계속 사용할 수 있는지 확인하세요. 테스트가 끝나면 해당 패턴을 제거하거나 비활성화하세요. Chrome의 request conditions 문서에서 요청 차단과 차단된 요청 확인 방법을 설명합니다.

Mac에서 사용할 브라우징 환경에 Safari가 포함된다면 Safari에서도 페이지를 검토하세요. Chrome 테스트는 해당 브라우저의 렌더링을 보여 주는 자료로 취급하세요. 사양에서 브라우저별 차이를 허용하므로 다른 브라우저에서도 타이밍이 같다는 증거는 아닙니다. 브라우저, 후보 값, 최초 표시 여부, 관찰된 줄바꿈을 간단한 비교 기록으로 남기세요.

대체 글꼴을 표시했을 때 레이아웃이 너무 많이 달라지면 어떻게 할까요?

실제 텍스트와 사용할 수 있는 너비부터 살펴보세요. 짧은 레이블, 가장 긴 제목, 문단의 여러 줄을 비교하세요. 대체 글꼴이 웹 글꼴과 시각적으로 비슷해도 글자별 폭이 다르면 줄바꿈이 달라질 수 있습니다.

더 가깝게 맞추려면 size-adjust를 사용해 글리프 윤곽선과 글리프 폭을 비롯한 글꼴 면의 측정값을 조정할 수 있습니다. MDN은 로컬 대체 글꼴 면을 정의하고 기본 웹 글꼴과 더 잘 맞도록 조정하는 방법을 보여 줍니다. 실제 글꼴 쌍에 적합한 비율을 찾으세요. 문서 예시에 나온 비율을 모든 경우에 적용할 수 있는 것은 아닙니다. MDN: size-adjust.

수직 측정값도 별도로 확인해야 합니다. ascent-override 설명자는 줄 상자를 배치할 때 기준선 위쪽에 사용할 측정값을 제어하지만, MDN은 현재 이 기능의 지원 범위가 제한적이라고 표시합니다. 이 조정은 개선 사항으로 취급하고, 지원하지 않는 브라우저에서도 읽기 쉬운 대체 레이아웃을 유지하세요. MDN: ascent-override.

텍스트 셰이핑은 브라우저에 맡기세요. 각 문자를 개별적으로 바꾸거나 측정해 제목을 안정화하려고 하지 마세요. CSS 글꼴 매칭은 결합 문자가 붙은 기본 문자와 같은 자소 클러스터를 특별히 처리합니다. 실제 레이아웃에서 전체 레이블과 줄을 살펴보세요. W3C: 클러스터 매칭.

미리 로드하거나 글꼴 로딩 라이브러리를 사용하면 선택이 달라질까요?

미리 로드는 리소스를 발견하는 시점을 앞당깁니다. WHATWG HTML 표준은 preload을 현재 탐색에 필요할 것으로 예상되는 리소스를 미리 가져와 캐시하는 기능으로 정의합니다. 이 기능은 font-display 정책을 선택하지 않습니다. 표시 동작을 결정한 뒤에만 미리 로드를 고려하세요. 글꼴을 더 일찍 가져와도 해당 서체를 여전히 사용할 수 없을 때의 동작을 정하는 일을 대신할 수 없습니다. WHATWG: Link type preload.

일반적인 페이지 텍스트에는 CSS부터 사용하세요. 기존 프로젝트에서 Font Face Observer를 사용한다면, 문서화된 load() 메서드는 글꼴 로딩이 성공하면 이행되고 실패하면 거부되는 프라미스를 반환합니다. 글꼴 모음 이름과 선택적 굵기, 스타일, 폭 설명이 요청한 서체와 일치해야 합니다. 기본 문자 집합이 글꼴에 없는 경우 적절한 테스트 텍스트를 제공하는 방법도 이 라이브러리 문서에 나와 있습니다. Font Face Observer 문서.

라이브러리의 성공 콜백은 로딩 상태를 알리는 신호입니다. 무엇을 표시할지는 여전히 애플리케이션이 결정합니다. 사용자 지정 로직으로 텍스트를 숨긴다면 실패했을 때 읽을 수 있는 대체 글꼴을 표시하도록 하세요. 그렇지 않으면 로딩이 거부되어도 애플리케이션의 숨김 규칙이 그대로 적용될 수 있습니다. 이는 라이브러리에 문서화된 성공 및 실패 경로를 바탕으로 한 구현 권장 사항입니다.

네이티브 API에도 비슷한 한계가 있습니다. document.fonts.ready은 사용 중인 글꼴의 로딩 및 레이아웃 작업이 완료되면 이행됩니다. 선택적 서체처럼 사용할 기회를 놓친 글꼴은 포함 여부가 다를 수 있습니다. 따라서 의도한 모든 서체가 표시된다는 것을 증명하지는 않습니다. MDN: Document fonts 속성.

마찬가지로 document.fonts.load()의 선택적 텍스트 인수는 유니코드 범위를 통해 일치하는 서체를 선택할 뿐, 개별 글리프의 지원 여부를 확인하지 않습니다. 로딩 완료와 전체 샘플의 올바른 렌더링은 별도로 확인해야 합니다. MDN: FontFaceSet의 load() 메서드.

느린 로딩, 글꼴 사용 불가, 재방문 상황에서 같은 페이지를 검토해 정책을 선택하세요. 일반 단어를 읽을 수 있게 유지하고, 늦은 교체를 허용할지 명확하게 결정하세요. 잠시 숨기는 방식은 특정 글꼴에 의존한다는 점이 입증된 작은 요소에만 허용하세요. 테스트한 모든 조건에서 독자가 “Sample Collection”을 편안하게 읽으며 계속 진행할 수 있어야 합니다.

출처