프론트엔드 노트

웹 폰트 로딩 지연으로 인한 FOUT 문제 해결 방법 =======

웹 폰트는 현대 웹 디자인에서 필수 요소로 자리 잡고 있습니다. 하지만, 웹 폰트가 로드되는 과정에서 발생하는 FOUT(Flash of Unstyled Text) 문제는 사용자 경험에 부정적인 영향을 미칠 수 있습니다. FOUT는 사용자가 페이지를 열었을 때, 폰트가 로드되지 않아 기본 폰트로 표시되었다가 나중에 웹 폰트로 변경되는 현상을 말합니다. 이번 글에서는 FOUT 문제를 해결하기 위한 여러 방법을 살펴보겠습니다.

FOUT 문제 이해하기

FOUT 문제는 주로 다음과 같은 이유로 발생합니다:

폰트 파일의 다운로드 지연: 폰트 파일이 서버에서 다운로드되는 데 시간이 걸릴 수 있습니다.
CSS 렌더링 차단: CSS가 먼저 로드되기 때문에 폰트가 준비되지 않은 상태에서 기본 폰트로 렌더링됩니다.

이 문제를 피하기 위해 다양한 전략을 사용할 수 있습니다.

해결 방법

1. `font-display` 속성 활용하기

CSS의 font-display 속성은 폰트가 로드되는 방식을 제어하는 데 사용됩니다. 이 속성은 FOUT 문제를 완화하는 데 도움이 됩니다. 예를 들어, font-display: swap;을 사용하면, 폰트가 로드되기 전에는 기본 폰트를 사용하고, 로드가 완료되면 웹 폰트로 즉시 교체됩니다.

@font-face {
    font-family: 'MyWebFont';
    src: url('mywebfont.woff2') format('woff2');
    font-display: swap;
}

2. 폰트 파일 최적화하기

웹 폰트 파일의 크기를 줄이면 로딩 속도를 개선할 수 있습니다. 다음과 같은 방법으로 폰트 파일을 최적화하세요:

사용하지 않는 글리프 제거: 필요한 문자만 포함된 폰트 파일을 생성합니다.
포맷 최적화: WOFF2 포맷과 같이 압축된 파일 형식을 사용합니다.

3. Preload을 활용한 사전 로딩

<link rel="preload"> 태그를 사용하여 폰트 파일을 사전 로드하면 페이지 로드 시점에서 폰트 로딩을 미리 시작할 수 있습니다. 이를 통해 FOUT 현상을 줄일 수 있습니다.

<link rel="preload" href="mywebfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

4. 웹폰트 로딩 패턴 변경하기

폰트를 사용하는 CSS를 문서의 헤드에서 미리 로드하는 방법도 있습니다. 폰트를 사용하는 CSS 규칙을 페이지의 최상단에 배치하면 브라우저가 폰트를 더 빨리 로드할 수 있습니다.

<style>
    @font-face {
        font-family: 'MyWebFont';
        src: url('mywebfont.woff2') format('woff2');
        font-display: swap;
    }
</style>

5. 자바스크립트로 로딩 관리하기

자바스크립트를 이용해 폰트를 동적으로 로드하고, 로딩이 완료된 후에 스타일을 적용하는 방법도 고려할 수 있습니다. 다음은 폰트가 로드된 후에 특정 클래스를 추가하는 예제입니다.

const font = new FontFace('MyWebFont', 'url(mywebfont.woff2)');

font.load().then(function(loadedFont) {
    document.fonts.add(loadedFont);
    document.body.classList.add('font-loaded');
}).catch(function(error) {
    console.error('폰트 로드 실패:', error);
});

마무리

FOUT 문제는 사용자 경험에 큰 영향을 미칠 수 있으며, 이를 해결하기 위해 다양한 방법을 사용할 수 있습니다. font-display 속성을 활용하고, 폰트 파일을 최적화하며, 사전 로딩(preload) 기술을 적용하는 등의 전략이 효과적입니다. 또한 자바스크립트를 통해 로딩을 더 잘 관리함으로써 웹 폰트를 원활하게 사용할 수 있습니다. 이러한 방법들을 통해 보다 매끄러운 사용자 경험을 제공하는 웹사이트를 만드시길 바랍니다.

웹 폰트 로딩 지연으로 인한 FOUT 문제 해결 방법