웹폰트 로딩과 대체 글꼴, 리뷰에서 함께 확인할 질문

웹폰트가 내려오기 전 텍스트가 보이지 않거나 줄바꿈이 갑자기 달라질 수 있다.

작성자에게 당연한 전제도 리뷰어에게는 보이지 않을 수 있다. 파일의 차이만 보여 주면 변경 이유와 확인 범위를 추측하게 된다. 이번 기록에서는 결과를 판단하는 데 필요한 맥락을 짧게 전달하고, 질문이 실제 개선으로 이어지도록 확인 순서를 정리한다.

코드 밖의 맥락 전달하기

폰트 로딩 중에도 읽을 수 있는 대체 글꼴을 정하고 font-display 정책을 선택한다. 글꼴이 바뀔 때 제목과 버튼의 공간이 얼마나 달라지는지도 살펴본다.

이번에 확인할 질문: 리뷰어가 변경 이유와 남아 있는 제약을 코드만 추측하지 않고 이해할 수 있는가?

작게 확인하는 예제

다음 예제는 핵심 조건을 드러내기 위한 출발점이다. 서비스의 전체 구현을 대신하지 않으므로 실제 입력 범위와 실패 처리 규칙을 함께 읽어야 한다.

@font-face {
  font-family: 'ArticleSans';
  src: url('/fonts/article.woff2') format('woff2');
  font-display: swap;
}
body { font-family: 'ArticleSans', system-ui, sans-serif; }

폰트 요청을 차단한 상태에서도 본문을 읽을 수 있는지, 요청 완료 전후에 버튼과 제목이 잘리지 않는지 확인한다.

놓치기 쉬운 조건

사용하지 않는 굵기와 문자 범위까지 모두 내려받으면 폰트 비용이 커진다. 대체 글꼴의 폭이 크게 다르면 로딩 후 줄 수가 바뀔 수 있다.

확인할 부분	살펴볼 내용
기준 동작	폰트 요청을 차단한 상태에서도 본문을 읽을 수 있는지, 요청 완료 전후에 버튼과 제목이 잘리지 않는지 확인한다.
비교 조건	입력과 실행 순서를 고정하고 한 번에 한 조건만 바꾼다.
적용 범위	예제가 생략한 의존성과 실제 서비스의 제약을 구분한다.

다음 변경에 적용할 순서

1. 이번 변경이 해결하는 구체적인 상황을 먼저 설명한다.
2. 재현 예제와 확인한 결과를 한곳에서 볼 수 있게 남긴다.
3. 취향에 대한 제안과 지켜야 할 계약의 위반을 구분한다.

리뷰는 작성자의 지식을 시험하는 자리가 아니라 변경을 함께 책임지는 과정이다. 답변이 반복되는 질문은 설명이 부족한 신호일 수 있다. 대화가 끝난 뒤 가장 중요한 전제를 코드 가까이 남기면 다음 리뷰의 질문도 더 구체적이 된다.