이 글은 코드잇 스프린트 부트캠프를 수강하면서 작성된 내용입니다.

• 2주차 위클리 미션을 진행하면서 발생한 문제와 해결 과정입니다.
• 원래 노션에 적어놓은 글을 옮긴 내용이라 업로드 간격이 이상할 예정입니다.

문제의 발견

위클리 미션 2주차의 코드리뷰를 받으면서 멘토님께 지적 받았던 점.

FOUC가 뭐임

FOUC(T)란 무엇인가

FOUC(Flash Of Unstyled Content)는 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다.

위키피디아의 FOUC 문제 : 못생긴 HTML 기본 스타일만 있다. 으악 으악
출처 : https://ko.wikipedia.org/wiki/FOUC

FOUT(Flash Of Unstyled Text는 의도한 서체 로 전환하기 전에 시스템 글꼴을 사용하여 설정된 서체 로 웹 페이지가 로드되는 현상이다. 이러한 지연은 사용자 장치에 다운로드되는 웹 글꼴 로 인해 발생한다.
"CSS font-display속성을 사용하면 효과를 방지할 수 있지만 내용을 숨겨 FOIT 가 발생하므로 권장되지 않습니다." FOIT는 또 뭐야

구글 폰트 사이트에서 예시로 설명하는 FOUT 문제 : 잠깐동안 폰트가 적용되지 않는 상황

출처 : https://fonts.google.com/knowledge/glossary/fout

즉 외부의 스타일을 불러오는 과정에서 발생하는 찰나의 스타일 미적용 상태이고, 그 반짝임으로 인해 사용자 입장에서 약간의 위화감을 느끼게 된다. 보기에 불편함

특히 저때 웹 폰트 적용 전의 기본 폰트를 그냥 손가는대로 집은게 하필 궁서체여서 더 이상했음.

해결을 위한 여정

일단 큰 제약사항이 하나 있었는데, 아직 JS를 쓴다는 얘기가 없었다.
인터넷에서 찾아봤을 때는 JS를 사용해서 해결하는 방법이 많았고, 가능하면 HTML과 CSS단 안에서 해결하고 싶었다.

폰트 깃허브 정독하기

https://github.com/orioncactus/pretendard
일단 사용한 폰트가 Pretendard였기 때문에, Pretendard 폰트를 개발한 공식 깃허브에 들어갔다.

오

가변 다이나믹 서브셋이란 무엇인가

다이나믹 서브셋은 CSS의 unicode-range 속성을 이용하여 해당 유니코드 영역의 문자가 사용될 때 브라우저가 폰트 파일를 다운로드 하는 방식을 말합니다. 이를 통해 커다란 통짜 폰트 파일이 아닌, 실제 사용되는 글자가 담긴 폰트 파일만을 다운로드 할 수 있습니다.
출처 : https://leetaewook.github.io/dynamic-subset-font

다이나믹 서브셋은 즉 문자 전체를 담은 통짜의 폰트 파일이 아니라, 실제로 쓰인 문자만이 담긴 폰트파일만 가져온다 라는 것.

가변 글꼴은 사용 가능한 모든 스타일에 별도 파일을 사용하는 고정 글꼴이 아니라 한 개의 파일을 사용하여 여러 글꼴 스타일을 저장합니다. 이를 통해 글꼴의 각 디자인 축에 대한 값을 지정하여 고정 글꼴이 제어할 수 없는 글꼴 모양을 제어할 수 있습니다.
출처 : https://helpx.adobe.com/kr/fonts/using/using-variable-fonts.html

가변 폰트는 하나의 파일로 font-weight를 조정할 수 있다는 것.

깨달음

아 그럼 다이나믹 서브셋은 기본 폰트 파일보다 용량이 적으니 빠를 것이고, 가변 폰트는 font-weight도 임의로 조절할 수 있으니, 다이나믹 서브셋보다 가변 다이나믹 서브셋이 더 빠르겠구나

적용 결과

기존 통짜 폰트 cdn을 사용해 불러왔을 때의 개발자 도구 네트워크 상황
pretendard.css의 컨텐츠 다운로드 속도는 1.8밀리초가 걸렸다.

가변 다이나믹 서브셋의 폰트 컨텐츠 다운로드 속도는 0.18밀리초로 기존보다 대략 10배 빠른 확실한 성능 차이를 보여주었다.

느낀점

이 방법이 꼭 정답은 아니라고 생각한다. 찾아본 것 처럼 JS를 이용해서 폰트나 이미지들이 모두 로딩될 때 까지 페이지에 로딩중 애니메이션을 집어넣어 FOUT문제를 안보이게 가릴 수도 있고, 아니면 정말 단순하게 폰트 파일을 개발중인 폴더에 넣어서 바로 적용시켜버려도 될 것이다.
특히 JS를 사용하지 않았기 때문에 다양한 라이브러리와 프레임워크를 배워가면서 더 나은 해결법은 없을지 고민 해 볼 필요가 있어보인다.