가독성과 성능을 동시에 잡는 웹폰트 최적화 정보
가독성과 성능을 동시에 잡는 웹폰트 최적화본문
웹 디자인에서 타이포그래피는 전체 디자인의 95% 이상을 차지할 만큼 중요합니다. 하지만 무분별한 웹폰트 사용은 페이지 로딩 속도를 저하시키고, 폰트가 늦게 뜨면서 레이아웃이 출렁이는 CLS(Cumulative Layout Shift) 현상을 유발합니다. 이를 방지하기 위한 전문적인 가이드를 정리해 드립니다.
1. WOFF2 형식을 최우선으로 사용하기
폰트 파일 형식은 여러 가지가 있지만, 웹에서는 WOFF2가 가장 표준입니다.
이유: 다른 형식(TTF, OTF, WOFF)보다 압축률이 30~50% 더 높습니다.
적용: @font-face 선언 시 가장 윗줄에 배치하여 브라우저가 먼저 인식하게 합니다.
2. font-display: swap 속성 필수 적용
폰트가 로드되기 전까지 텍스트가 안 보이는 현상(FOIT)을 방지합니다.
@font-face {
font-family: 'Pretendard';
src: url('./fonts/Pretendard-Regular.woff2') format('woff2');
font-display: swap; /* 핵심: 폰트 로드 전에는 시스템 폰트로 먼저 보여줌 */
}
효과: 사용자 경험(UX) 측면에서 텍스트가 즉시 화면에 출력되므로 이탈률을 줄일 수 있습니다.
3. 폰트 서브셋(Subset) 활용
한국어 폰트는 보통 11,172자를 포함하고 있어 용량이 매우 큽니다(수 MB 단위).
전략: 실무에서 거의 쓰이지 않는 고어 등을 제외한 기본 완성형 2,350자만 남긴 '서브셋' 파일을 사용하세요. 용량을 80% 이상 줄일 수 있습니다.
도구: Transfonter나 SubsetFont 같은 웹 도구를 사용해 변환 가능합니다.
4. 레이아웃 시프트(CLS) 방지 디자인 팁
웹폰트가 로드된 후 시스템 폰트와 크기 차이가 나면 글자가 밀리는 현상이 발생합니다.
해결: 시스템 폰트(Fallback Font)를 지정할 때, 내가 사용할 웹폰트와 최대한 높이와 자폭이 유사한 폰트를 순서대로 나열하세요.
예: font-family: 'Pretendard', -apple-system, sans-serif;
1
댓글 1개
좋은 정리된 내용 감사합니다. 참고하겠습니다 :)
새해 복 많이 받으세요~!
