1. 들어가기에 앞서...
FOIT 와 FOUT 라는 용어에 대해 알아보자.
FOIT (Flash of Invisible Text) 란?
브라우저가 웹페이지가 로드될 때, 웹 폰트가 아직 다운로드되지 않았기 때문에, 일시적으로 텍스트가 화면에 표시되지 않는 현상을 말한다.
특히 대체 폰트가 지정되지 않은 경우 브라우저가 폰트를 렌더링하기 위해 다운로드를 기다리는 동안 발생할 수 있다.
FOUT(Flash of Unstyled Text)란?
웹 페이지에서 원하는 글꼴이 로드되기 전에 브라우저에서 기본 글꼴로 표시되는 현상을 의미한다.
이와 같은 폰트 이슈가 생기는 이유는
브라우저 동작에 있어서 폰트 리소스 요청의 경우에는 다른 리소스 요청보다 늦게 처리되기 때문이다.
따라서 웹 사이트를 구성하는 사이에 폰트 리소스 응답이 늦어버리게 되면 해당 폰트 이슈가 발생하게 되는 것이다.
1. Font preload 란 무엇인가?
먼저, preload란 웹 페이지에서 사용될 리소스를 미리 가져오는 기술이다.
즉, 웹 페이지가 로드되기 전에 필요한 리소스를 미리 다운로드하여, 사용자가 페이지를 더 빠르게 볼 수 있도록 돕는다.
예를 들어, CSS 파일이 페이지가 로드될 때 필요하다면, preload를 사용하여 CSS 파일을 미리 가져와 페이지 로드 시간을 줄일 수 있다.
- 대용량 이미지, 비디오, 폰트 등 웹 페이지 로딩 속도에 큰 영향을 미치는 리소스를 preload를 사용하여 미리 가져오면, 페이지 로딩 시간을 크게 단축할 수 있다.
- 예를 들어, 웹 페이지에서 많은 양의 데이터를 보여줄 때, 이를 비동기적으로 불러오기 위해 라이브러리를 사용하는 경우가 있다. 이 때, 필요한 라이브러리 파일을 preload를 사용하여 미리 가져와, 불필요한 로딩 시간을 줄일 수 있습니다.
Font preload란 웹 사이트에서 사용되고 있는 폰트 파일을 브라우저에 미리 로드하는 방법(기술)이다.
1-1. Font를 preload 하는 이유
여러 사이트에서 볼 수 있듯이, 우리는 많은 font들을 접하고 있다.
각 사이트 마다 font를 브라우저에 어떤 방법으로 보이게 하는지가 다르다.
폰트의 큰 틀로는 web font와, local font가 있는데, web font는 local font보다 느릴 수 밖에 없다.
local font는 사용자의 기기에 이미 다운로드되어 있는 font file을 사용하기 떄문에, 로딩자체의 속도가 빠르기 때문이다.
폰트 파일의 용량이 크고 인터넷 연결이 느린 경우에는 폰트 다운로드에 많은 시간이 소요될 수 있다.
이로 인해 웹 페이지의 로딩 속도가 느려지며, 사용자는 긴 대기 시간으로 인해 불편을 느낄 수 있다.
하지만 preload를 사용하면, 웹 페이지가 로드되기 전에 폰트 파일을 미리 다운로드할 수 있다.
이를 통해 웹 페이지 로딩 시간을 단축하고 사용자 경험을 개선할 수 있다.
1-2. Font를 preload를 사용하여 미리 다운로드하면 얻는 장점(이점)
| 이점 | 설명 |
| 빠른 로딩 | Font Preload를 사용하면 폰트를 미리 로드할 수 있으므로 웹사이트의 로딩 속도가 빨라진다. |
| 경험 개선 | 빠른 로딩은 사용자 경험을 향상시키고, 웹사이트의 이탈률을 줄일 수 있다. |
| 캐싱 | font Preload를 사용하면 폰트 파일이 캐시된다. 따라서 다음 방문 시에는 더 빠르게 로드된다. |
| 독립성 | Font Preload는 웹 폰트 서비스에 독립적이다. 따라서 웹 폰트 서비스를 사용하지 않고 자체적으로 제작한 폰트를 사용하는 경우에도 적용할 수 있다. |
| 유연성 | Font Preload는 여러 가지 파일 형식을 지원한다. 이를테면, TrueType, OpenType, WOFF, WOFF2 등이 있다. |
| 지연 시간 감소 | Font Preload를 사용하면 서버와의 지연 시간을 줄일 수 있다. |
| 선저장(pre-fetching) | Font Preload는 폰트 파일을 미리 로드하는 것이므로, 필요하지 않은 폰트 파일을 다운로드할 필요가 없어진다. 이는 대역폭 절약에 도움이 된다. |
| 권장 | Font Preload는 웹사이트의 성능 개선을 권장하는 기술이다. 브라우저의 크로스 브라우저 지원도 잘 되어 있으므로, 대부분의 웹사이트에서 사용할 수 있다. |
2. 로컬 폰트만 있을 때 로딩하는 방법
로컬에 설치된 폰트를 사용할 경우, 폰트를 다운로드할 필요 없이 로컬에서 빠르게 로딩할 수 있다.
이를 이용하기 위해 CSS @font-face 를 사용하여 로컬 폰트를 불러올 수 있다.
local font를 적용하려면 다음과 같은 방법을 사용할 수 있다.
@font-face 를 사용하면 된다.
기본적인 문법은 다음과 같다.
@font-face {
font-family: 'FontName';
src: url('fontname.eot'); /* IE9 Compat Modes */
src: url('fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fontname.woff2') format('woff2'), /* Super Modern Browsers */
url('fontname.woff') format('woff'), /* Modern Browsers */
url('fontname.ttf') format('truetype'), /* Safari, Android, iOS */
url('fontname.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}위 코드에서는 폰트 이름, 폰트 파일의 경로 및 형식, 폰트 굵기 및 스타일을 지정한다.
폰트 파일은 로컬 또는 원격 서버에 위치할 수 있다.
그리고 다음과 같이 폰트를 사용할 수 있다.
body {
font-family: 'FontName', sans-serif;
}1. 위 예제에서 'FontName'은 @font-face 블록에서 정의된 폰트 이름이다.
2. 해당 폰트가 사용 가능하지 않은 경우에는 대체 폰트 (sans-serif)를 사용한다.
3. 웹 폰트만 로딩해야하는 상황에서 최적화 기법
3-1. Preload를 이용한 폰트 리소스 우선적으로 로드하기
앞서 말했듯이 브라우저 동작에 있어서 폰트 리소스 요청의 경우에는 다른 리소스 요청 보다 늦게 실행이 된다.
이러한 이유로 폰트 이슈가 생기는 것이기 때문에 폰트 리소스를 앞당기는 폰트 최적화 방법이 존재한다.
<link rel="preload" href="url" as="font" type="font/woff2" crossorigin />다음 형식의 <link> 태그를 html의 <head>안에 추가하면 된다.
해당 코드를 적용하면 브라우저는 가장 마지막이었던 폰트 리소스를 가장 우선적으로 로드하게 되는 것이다.
하지만 preload를 통한 폰트 최적화가 가장 좋은 방식은 아니다.
만약에 많은 양의 폰트를 리소스 하게 되면 preload 적용 전과 같이 로딩 시간이 다시 길어지기 때문에 해당 방식을 사용한 이유가 없어지게 되는 것이다.
따라서 상황에 맞게 올바른 폰트 최적화를 사용하는 것이 중요하다.
3-2. 압축률이 좋은 웹 폰트 확장자 사용하기
폰트 용량을 줄여서 , 폰트 로딩시간을 줄이는 방법이다.
웹 폰트 확장자 중에서 압축률이 좋은 폰트를 사용하면 되는 것
1. WOFF2 (Web Open Font Format 2): WOFF2는 현재 가장 인기있는 웹 폰트 형식 중 하나이다.
WOFF2는 이전 버전인 WOFF1보다 약 30-50% 더 압축률이 좋다.
또한 대부분의 브라우저에서 지원된다.
따라서 WOFF2 확장자를 사용하여 웹 폰트를 배포하는 것이 좋다,
2. WOFF (Web Open Font Format): WOFF는 WOFF2보다 덜 압축되지만 여전히 압축률이 높은 웹 폰트 형식이다.
대부분의 브라우저에서 지원된다.
WOFF2를 사용할 수 없는 경우 WOFF를 대안으로 사용할 수 있다.
3. TTF/OTF (TrueType/OpenType Font): TTF 및 OTF는 웹 폰트로 사용할 수 있지만, WOFF2 또는 WOFF보다 압축률이 낮다.
또한 모든 브라우저에서 지원되지 않을 수 있다.
그러나 TTF 또는 OTF 확장자를 사용해야하는 경우, Gzip 또는 Brotli와 같은 압축 기술을 사용하여 압축률을 높일 수 있다.
따라서 WOFF2를 사용하는 것이 가장 좋다.
WOFF2가 지원되지 않는 브라우저의 경우, WOFF를 대안으로 사용할 수 있다.
그러나 TTF 또는 OTF 확장자를 사용해야하는 경우에도 압축 기술을 사용하여 압축률을 높이는 것이 좋다.
3-3. 서브셋 폰트 사용
서브셋 폰트는 전체 글꼴에서 필요한 문자만 선택하여 사용하는 것을 말한다.
서브셋 폰트를 사용하면 전체 글꼴의 용량을 줄일 수 있으며, 웹 사이트나 앱 등에서 더 빠른 로딩 속도와 더 적은 대역폭 사용을 가능하게 한다.
서브셋 폰트를 만들기 위해서는 서브셋 폰트를 만들어주는 사이트를 이용하면 된다.
| 사이트명 | 설명 |
| Font Squirrel (https://www.fontsquirrel.com/tools/webfont-generator) | Font Squirrel은 서브셋 폰트 생성뿐만 아니라, 웹에서 사용 가능한 웹 폰트로 변환하는 기능도 제공하는 사이트 폰트 라이선스를 확인하고, 원하는 글자를 선택하면 필요한 글자만 포함된 서브셋 폰트를 생성해줌 |
| Glyphhanger (https://github.com/filamentgroup/glyphhanger) | Glyphhanger는 오픈소스로 공개된 서브셋 폰트 생성 도구 명령 프롬프트에서 실행되는 프로그램 사용자가 지정한 URL의 웹사이트에서 실제 사용되는 글자를 추출해서 서브셋 폰트로 생성해줌 |
| FontSpark (https://fontspark.app/) | FontSpark는 글꼴을 선택하는 데 도움이 되는 웹사이트로, 선택한 글꼴에서 원하는 문자만 선택해서 서브셋 폰트를 생성해줌 무료로 사용 가능한 기능이 제한적이지만, 직관적인 UI와 다양한 글꼴 선택 기능으로 인기가 있다. |
마치며...
font를 preload하는 방법에 대해 알아보았는데, 이를 이해하기 위해서는웹브라우저의 렌더링 과정부터 언제 font가 그려지게되는지 등등 세세하게 이해해야할 부분들이 많은 것을 알게됬다.
앞으로 front-end 개발자로서 사이드 프로젝트를 진행하던, 회사일 등을 진행할때, FOIT와 FOUT현상을 만나게 될 것이라고 본다.
그 때, 발생한 문제가 FOIT, FOUT구나 라는것을 인지하고, 지금 정리한것을 참고하여 문제를 해결한다면, 조금더 수월하지 않을까? 라는 생각이 들었다.
<reference site>
[CSS/JS] 웹 폰트를 최적화하는 5가지 방법
😃 이번시간에는 웹폰트 로딩을 최적화하는 5가지 방법을 알아보았다! (참고1, 참고2, 참고3) 1. 들어가기에 앞서 1) FOIT, FOUT ? 우리가 처음 사이트에 진입했을 때, 글자가 늦게 뜨거나 폰트가 나중
mong-blog.tistory.com
https://qorguswp.com/entry/Font-Preload-font-preload-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%A0%95%EB%A6%AC
[Font Preload] font preload 방법 및 정리
Font Preload란? Font Preload는 웹 사이트에서 사용되고 있는 폰트 파일을 브라우저에 미리 로드하는 방법이다. 여러 사이트에서 볼 수 있듯 우리는 수많은 폰트를 접하고 있는데, 각 사이트마다 폰트
qorguswp.com
Local Font 적용 방법과 Web Font 최적화 기법
Local Font 적용 방법과 Web Font 최적화 기법
velog.io
https://d2.naver.com/helloworld/4969726
'웹 지식' 카테고리의 다른 글
| 🚩브라우저와 브라우저 렌더링과정, 이정도는 알자[웹지식] (4) | 2023.09.09 |
|---|---|
| [브라우저저장소(Web Storage)]localStorage, SessionStorage에 대해 알아보기 (0) | 2023.05.27 |
| [웹개발기술] 크로스 브라우징(Cross Browsing)에 대해 알아보기 (0) | 2023.04.30 |
| Web Standards(웹 표준) 을 지키는 이유 , 그리고 web accessibility(웹 접근성)이란? (0) | 2023.04.24 |