폰트 로딩 실수를 피하는 방법

검색으로 찾아온 폰트 로딩 코드를 복사-붙여넣기 할 때 작은 실수가 큰 문제가 되곤 한다. 로컬에서는 잘 보이는데 배포하면 폰트가 로드되지 않거나 깜빡거린다.

설정부터 확인하기

폰트 로딩이 제대로 되는지 확인하려면 로그만 봐서는 부족하다. 화면과 로그, 빌드 결과를 함께 봐야 한다.

npm run build

빌드 결과에서 폰트 파일이 제대로 포함되었는지, CSS가 올바르게 생성되었는지 확인할 수 있다.

로컬과 운영 환경 비교하기

폰트 문제가 자주 반복된다면 확인 순서를 고정해두는 게 낫다. 로컬과 운영 환경에서 폰트 로드 방식이 다를 수 있기 때문이다.

• 먼저 볼 것: 빌드 로그의 폰트 파일 처리 부분
• 같이 비교할 것: 정상적으로 로드될 때의 설정
• 기록해둘 것: 폰트 경로, 브라우저 캐시 상태, 문제 재현 조건

실제 화면에서 검증하기

사용자가 보는 화면이 최종 기준이다. 빌드가 성공해도 폰트가 로드되지 않으면 문제가 있는 것이다.

1. 설정이 올바른지 확인한다
2. 로그에서 폰트 로드 관련 에러를 찾아본다
3. 공개 URL에서 폰트가 실제로 보이는지 확인한다

다음을 위해 기록하기

폰트 로딩은 캐시의 영향을 많이 받는다. 어떤 버전의 설정에서 문제가 생겼는지 기록해두면 다음 번에 빠르게 대응할 수 있다.