한글에 최적화된 최고의 폰트, 프리텐다드를 Next.js 프로젝트 적용하면서 습득한 내용들을 정리해보려고한다.
Variable Font
Next.js는 최고의 성능과 유연성을 위해 Variable Font 사용을 추천한다.
Variable Font란 font-weight, letter-spacing 등의 속성들을 통해 가변적으로 변할 수 있는 폰트를 의미한다.
Light, Bold, SemiBold 등의 정적인 형태의 폰트를 모두 설치했어야 하는 전통적인 방식과는 다르게 하나의 폰트만 로드하면 된다.
따라서 네트워크 요청수를 단 하나로 줄일 수 있다.
프리텐다드를 설치하고 압출 파일을 풀어봤더니 static 폴더와 variable 폴더가 나왔다.
이 내용을 바탕으로 static을 제외시킬 수 있었다.
woff2 vs ttf
variable 폴더를 열어봤더니 woff2, ttf 형태의 폰트 파일이 존재했다.
사용자 측면에서의 차이를 느껴보고자 하나씩 적용을 해봤더니, 너무 확연하게 차이가 났다.
woff2는 바로 적용되는 반면, ttf 파일은 0.5초 정도의 시간이 걸렸다.
이에 대한 자료를 찾아보니 ttf는 벡터기반의 폰트라서 줌을 엄청 땡겨도 깨지지 않는 장점이 있고, woff2는 압축률 엄청 높아서 로딩속도가 빠른 장점이 있다고한다. 프로젝트에 걸맞는 방식을 택하면 될 것 같다.
font-display
Next.js에서 제공하는 localFont라는 API를 사용하면, display 옵션이 있다.
이는 font-display를 의미하는데, 이 속성에는 5가지 값이 있다.
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;하나씩 살펴보면
block : 폰트가 로딩이 완료될때까지 글자를 그리지 않는다.
swap : fallback 글꼴로 우선 그리고, 폰트가 로딩이 완료되면 적용한다.
fallback : 100ms안에 폰트 로딩이 완료되면 글자를 그리고, 100ms안에 폰트 로딩에 실패하면 fallback 글꼴로 그린다. 그리고 2초 안에 폰트 로딩에 성공하면 폰트를 적용시키고, 실패하면 fallback을 유지한다. 2초가 지나서 로딩이 완료되는 경우 캐싱해두고 있다가, 페이지 전환 시 적용시킨다.
optional : fallback과 유사하지만 2초 후에 로딩이 완료되더라도 브라우저가 판단했을 때 네트워크 상태가 좋지않다고 느끼면 이후에 적용시키지도 않는다.
font-preload
기본적으로 Next.js API는 font-preload를 지원한다.
font-preload는 화면을 그리기 전에 폰트를 우선적으로 로드하는 행위를 의미한다.
