홈페이지 첫 화면 글자 늦게 뜸(투명 현상) 1초 만에 해결하는 법
인터넷이 조금 느린 환경이나 스마트폰에서 홈페이지에 접속했을 때, 배경과 이미지는 다 떴는데 글씨만 투명하게 안 보이다가 1~2초 뒤에 툭! 하고 나타나는 현상 겪어보셨나요?
이것을 개발 용어로 FOIT (Flash of Invisible Text) 현상이라고 부릅니다. 사이트가 무겁고 엉성해 보이게 만드는 가장 큰 원인 중 하나입니다.
💡 도대체 왜 이런 현상이 발생할까요?
웹사이트에 적용된 예쁜 '웹 폰트(글꼴 파일)'의 용량이 커서 다운로드하는 데 시간이 걸리기 때문입니다. 브라우저는 폰트 다운로드가 끝날 때까지 글자를 투명하게 숨겨버리는 습성이 있습니다.
1. 단 한 줄의 CSS로 해결: font-display: swap;
폰트가 다운로드되는 시간을 기다리게 하지 마세요! 폰트를 불러오는 CSS 코드에 font-display: swap; 단 한 줄만 추가하면 마법처럼 문제가 해결됩니다.
이 속성을 주면, 웹 폰트가 다운로드되기 전까지 방문자의 기기에 있는 '기본 폰트'로 글자를 먼저 즉시 보여주고, 다운로드가 완료되면 자연스럽게 예쁜 웹 폰트로 스와핑(교체)해 줍니다. 방문자는 답답함 없이 즉각적으로 내용을 읽을 수 있습니다.
/* CSS 웹 폰트 설정 예시 */
@font-face {
font-family: 'Pretendard';
src: url('Pretendard-Regular.woff2') format('woff2');
/* 폰트 로딩 전 투명해지는 현상 완벽 방지 (핵심 코드) */
font-display: swap;
}
2. 애초에 폰트 용량을 확 줄여버리자! (WOFF2 포맷)
웹사이트에 글꼴을 올릴 때, 윈도우/맥에 설치할 때 쓰는 TTF나 OTF 파일을 그대로 올리면 절대 안 됩니다. 웹 전용으로 압축률이 가장 뛰어난 WOFF2 포맷을 사용해야 합니다.
추가로 불필요한 외계어나 한자 등을 제거하고 실사용 한글만 남긴 '서브셋(Subset)' 폰트를 사용하면, 수 메가바이트(MB)짜리 폰트를 수백 킬로바이트(KB) 수준으로 90% 이상 획기적으로 줄일 수 있습니다.
"사용자는 0.1초의 지연도 기다려주지 않습니다."
나눔웹은 보이지 않는 타이포그래피의 렌더링 과정까지 철저하게 설계하여,
사용자 경험(UX)을 최상으로 끌어올립니다.
