웹사이트를 방문할 때 디자인만큼 중요한 요소가 바로 웹 폰트입니다. 사이트의 분위기와 어울리지 않는 웹 폰트는 전체적인 경험에 부정적인 영향을 미칠 수 있어, 웹 폰트의 선택과 사용은 웹 개발 과정에서 매우 중요합니다. 웹 폰트는 단순히 글자를 보여주는 것 이상의 역할을 하며, 사용자에게 사이트의 톤과 매너를 전달하는 중요한 수단입니다. 이에 본문에서는 웹 폰트의 중요성을 인지하고, 리액트 환경에서 웹 폰트 사용 시 성능을 어떻게 최적화할 수 있는지에 대한 심층적인 정보와 방법을 공유하려 합니다.
웹 폰트 동작 방식
웹 폰트를 사용하면, 로컬 시스템에 저장된 폰트가 아닌 온라인 상의 폰트 파일을 다운로드하여 사용하게 됩니다. 즉, 사용자가 웹 페이지에 접근할 때는 웹 서버뿐만 아니라 추가적으로 CDN(Content Delivery Network)을 통해 웹 폰트를 요청하게 됩니다.
브라우저가 작동하는 과정을 살펴보면, CSSOM(Tree of styled objects)이 구성된 후에야 폰트 다운로드가 시작됨을 알 수 있습니다. 이 단계에서, 브라우저는 폰트의 다운로드 응답을 기다리지 않고 렌더링을 계속 진행합니다. 만약 폰트가 아직 준비되지 않았다면, 브라우저는 대체 폰트로 렌더링하거나 아예 렌더링을 하지 않는 경우도 발생할 수 있습니다. 이러한 과정은 사용자가 웹 페이지의 콘텐츠를 더 빠르게 볼 수 있게 하지만, 동시에 웹 폰트 로딩 시간에 따라 시각적인 일관성이 달라질 수 있음을 의미합니다.
웹 폰트를 렌더링 함에 있어 야기될수 있는 현상
앞서 설명드린 웹폰트의 동작 방식으로 인하여, 사용자 경험 측면에서 고려될만한 상황은 두가지 있습니다. 바로 FOIT(Flash of Invisible Text)와 FOUT (Flash of Unstyled Text) 입니다.
FOIT (Flash of Invisible Text)
FOIT는 웹페이지가 렌더링 되었을때, 필요한 폰트가 아직 준비 되지 않아서 사용자에게 text자체가 화면에 보여지지 않는 현상을 말합니다.
FOUT (Flash of Unstyled Text)
FOUT는 FOIT와 달리 text는 렌더링 되지만, 기본 시스템 폰트로 적용되는 현상을 말합니다. text가 안보이는 FOIT의 문제점을 해결하고자 글씨라도 보이게 하게끔 대안적인 현상 입니다. 이는 설정된 폰트가 다운로드 된후 대안으로 사용되었던 시스템 폰트에서 설정된 폰트로 변경될때 꿈틀거리는 현상이 발생할수 있고, 이는 사용자 경험을 저하시키는 원인이 될수 있습니다.
웹 폰트 최적화 해보기
1. 웹 폰트 용량 줄이기
웹 폰트 파일 형식은 eof, ttf, woff, woff2가 있다. 용량순으로 나열하면 아래와 같이 분류 할수 있습니다.
eot > ttf/otf > woff > woff2
woff
OTF와 TTF의 무단배포 등의 문제 등을 해결하기 위해 모질라 재단과 오페라 소프트웨어, 마이크로소프트에서 제안한 웹 폰트 파일 형식 이라고 합니다. 기본적으로 OTF, TTF를 이용한 구조를 하고 있으며, 압축된 버전이라 웹에서 다운받아가며 사용하기에 최적화 되어있습니다.
woff2
woff2는 이름에 걸맞게 woff에비해 30%~50% 더 압축되어 훨씬 가볍습니다.
브라우저별 지원 가능 웹폰트는 아래와 같습니다. woff2에 비해 woff가 지원하는 브라우저의수가 많기 때문에, woff2를 우선순위로 쓰되 지원안되는 부라우저에서는 woff가 적용되게끔 설정해야 됩니다.
2. 미리 웹폰트를 로딩해서 최적화 하기
앞서 말씀드렸다시피 브라우저가 동작할때, 웹폰트는 cssom트리가 생성되고 웹폰트를 다운받게 됩니다. cssom트리가 생성되기전 웹폰트를 로딩하게끔 해서 최적화 하는 방법이 있습니다. head 태그 내부에 세팅된 폰트에 preload 속성을 추가하는 방법 입니다.
<html lang="en">
<head>
<link rel="preload" href="https://fonts.googleapis.com">
<link rel="preload" href="https://fonts.gstatic.com" crossorigin>
</head>리액트에서 웹 폰트 성능 최적화 해보기
저는 앞서 말씀드린 방안중 첫번째 방법을 활용하여 프로젝트에 세팅해 보았습니다.
1. 웹 폰트 사이트에서 TTF, WOFF, WOFF2 파일을 다운 받고, cdn을 복사 합니다.
폰트 파일 형식을 지원하는 브라우저의 범위를 비교해보면, TTF가 가장 많은 브라우저에서 지원됩니다. 다음으로는 WOFF, 그리고 WOFF2 순입니다. 하지만 파일 크기 측면에서 살펴보면, WOFF2가 가장 작고, 그 다음이 WOFF, 마지막으로 TTF가 가장 큽니다. 따라서 프로젝트에 웹 폰트를 설정할 때는 파일 크기가 작고 로딩 속도에 유리한 WOFF2를 가장 우선적으로 사용하도록 하고, 그 다음으로 WOFF, 그리고 TTF 순으로 지원하도록 구성하는 것이 좋습니다. 이렇게 세팅하면, 성능 최적화는 물론 다양한 브라우저에서의 호환성도 확보할 수 있습니다.
2. public/index.html 파일에 cdn 설정 합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>3. src/asset 폴더를 만들고, 해당폴더 안에 폰트 파일을 세팅합니다.
src 폴더 내에 폰트 파일을 배치하는 이유는 리액트 프로젝트가 빌드 과정을 거칠 때, src 폴더 내의 리소스들이 자동으로 번들링되며 최적화가 진행되기 때문입니다. 이 구조를 활용하면, 폰트 파일들 역시 프로젝트의 나머지 부분과 함께 효율적으로 관리되고 최적화됩니다.
4. 전역 css에 font를 적용합니다.
@font-face {
font-family: 'NanumBrush';
src:
url('../assets/fonts/NanumBrush.woff2') format('woff2'),
url('../assets/fonts/NanumBrush.woff') format('woff'),
url('../assets/fonts/NanumBrush.ttf') format('truetype');
}
