글자 깜빡임 ( FOIT , FOUT ) [ 크래프톤 정글 6일차 ]

크래프톤 정글은 자기주도적 학습을 지향합니다.

크래프톤 정글에서는 입소하는 0일차부터 3일차까지 미니 프로젝트를 진행한다.
해당 미니프로젝트에는 여러가지 목표가있는데

• 서로 친해져라
• SSR렌더링을 구현해보면서 CSR 렌더링과 어떤차이점이 있는지 느껴라

였다.

이 중 우리조에서 발표한 내용중에

폰트 깜빡임 현상이 발생했다.

그래서 코치님이
"폰트 깜빡임 현상은 왜 일어날까요? 이걸 CSR과 SSR 관점에서 설명할 수 있어요?"
라고 하셨는데..

헤헤 몰라영! 공부해볼게여! > < ^_^ 하고 들어왔다...

그래서 공부해봤다.

1. 폰트는 왜 깜빡일까?
2. CSR 환경과 SSR 환경에서 어떻게 다를까?
3. 어떻게 해결할까?

1. 폰트는 왜 깜빡일까?

원인은 브라우저의 렌더링 과정 에서 살펴볼 수 있다.

브라우저의 렌더링 과정 은 여러분이 안다고 가정하고 설명하지 않겠다.

이 중 CSSOM 트리를 생성할 때, 문제가 발생하게 되는데 발생원인은 다음과 같다

• 웹 폰트를 다운로드 받을때 link 태그 혹은 @font-face를 통해 비동기로 다운로드한다.
• 텍스트 렌더링은 폰트가 준비되기 전에는 텍스트를 렌더링 하지 않거나 , 기본 폰트로 대체된다.
• 어떤 방식으로 처리할지는 브라우저와 CSS 설정에 따라 (font-display,pre-load) 등에 따라 달라진다.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* swap이면 FOUT 유도, block이면 FOIT 발생 가능  auto 는 브라우저의 기본 동작으로 설정한다.*/
}

이렇게 font-display 옵션으로 auto, swap, block 등의 옵션을 선택할 수 있는데
이들은 FOIT 되거나 FOUT 브라우저의 기본 설정값으로 작동한다.

FOIT 와 FOUT 가 뭐냐고?

안알랴줌

뻥이다 알려준다.

1-1 FOIT

FOIT 는 Flash of Invisible Text 의 약자다.
해석하자면 보이지 않는 텍스트의 섬광 인데 말 그대로
텍스트 깜빡임을 보여주지 않겠다는 뜻으로,

• 웹 폰트를 비동기로 로딩되는 동안 텍스트를 "아예 안 보여준다"

폰트가 로딩될 때까지는 display: none; 상태가 계속된다.

1-2 FOUT

!! 얘가 사실은 깜빡임의 정체다.
FOUT 는 Flash Of Unstyled Text 는 해석하자면
스타일 없는 텍스트가 깜빡인단 뜻인데

• 웹 폰트가 로딩되는 동안 "기본 시스템 폰트로 보여준다"

폰트 깜빡임 현상은 기본폰트가 보이다가 개발자가 설정한 폰트로 바뀌면서 깜빡이는 것처럼 보이는 것이다. it's flash

2. CSR 환경과 SSR 환경에서는 어떻게 다를까?

SSR 과 CSR 의 큰 차이점은 HTML 을 서버에서 렌더링하냐 혹은 클라이언트 사이드에서 렌더링 하냐에 있다.

SSR 에서는

• 서버에서 HTML 을 내려서 보내주므로 HTML 과 함께 폰트 리소스를 빠르게 요청할 수 있다.
• link 태그에 pre-load 를 설정해서 다른 리소스보다 빨리 "해줘" 할 수 있다.

CSR 에서는

• JS 가 DOM 구성후 렌더링 되기 때문에 로딩에 딜레이가있다.
• JS 번들은 우선 로딩하고 HTML 구성후 폰트 요청이 되기때문에 딜레이가 체감된다.

결국 FOUT 문제는 텍스트렌더링 시점과 폰트렌더링 시점의 차이때문에 발생하므로 두 방법 모두 문제가 존재한다. 하지만 해결은 SSR 환경이 더 편하다.

3. 그럼 어떻게 해결할까?

1. font-display 설정하기

폰트가 깜빡이는게 싫다면
font-display 를 설정한 경우 폰트가 로드되지 않으면 텍스트가 보이지 않기 때문에 깜빡임이 없을 수 있다. 다만, 조금 미세하게 늦게 렌더링 될 수 있을것이다

2. font-display: optional

만약 폰트가 빠르게 로드되지않으면 그냥 기본폰트를 유지하는 옵션이다.

3. pre-load 사용

link rel="preload" 방식으로 렌더링한다. 브라우저에게 빠르게 요청할 수 있다.

4. CDN 방식대신 로컬에 직접 넣자!

CDN 방식으로 폰트를 로드할 수도 있지만, 아무래도 외부 서버에 요청하니만큼
로컬 폰트파일을 가지고 있는 것보다 느리다.

이번에 유독 깜빡임 현상이 발생했던 것도 3일만에 급하게 만드느라 폰트 그냥 CDN 으로했더니 이렇게 된 거 같다.ㅠㅠ

회고

여러가지 검색해 본 결과 폰트 깜빡임 문제에 SSR이나 CSR 이 방식이 크게 다르진 않은 것 같았다.(아니에요? 아니면 알려줘요 댓글 달아줘요 나 몰라서 그래 내 지식을 바로잡아줘)

그래도 한번더 SSR과 CSR 의 개념을 되새겨서 좋았고, 폰트 깜빡임 현상에 대해 인지하고 브라우저 렌더링 과정 한 번 더 보고, 이런게 있다는 걸 알았으니 다음에 같은 문제를 마주치더라도 해결 할 수 있을 것이다.

모든 문제는 문제를 인식하는 데에서 출발한다.

문제를 인식하지 못한다면 문제를 해결할 수 없다.

그래서 나는 코치님들이 이렇게 공부할 키워드들을 던져주는게 너무 좋다.