웹 폰트 최적화하기(1)에 이어서 그렇다면 웬 폰트를 어떻게 최적화해야 할까? 이번 포스팅에서는 웹 폰트를 최적화하는 다양한 방법에 대해 알아보고 이해하기 위해 포스팅을 작성한다.
웹 폰트 적용하는 방법
1. CDN을 활용한 웹 폰트 적용 방법
CDN을 활용해 프로젝트 내에서 웹 폰트를 적용하는 방법이다. <link></link> 태그를 통해 간단하게 적용할 수 있다는 장점이 있지만 서버의 상태에 따라 적용되는 시간이 달라질 수 있다는 단점이 있다. Google font를 적용한 간단한 예시이다. CSS내에서 import를 사용해서 CDN을 적용할 수 도 있다.
<head>
<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=Noto+Sans+KR:wght@100..900&display=swap"
rel="stylesheet">
</head>
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&family=Noto+Sans+KR:wght@100..900&display=swap');2. 폰트를 다운받아 프로젝트 내에서 관리하는 방법
@font-face {
font-family: 'NanumGoDigANiGoGoDing';
src: url('../fonts/NanumGoDigANiGoGoDing.woff2') format('woff2'),
url('../fonts/NanumGoDigANiGoGoDing.woff') format('woff'),
url('../fonts/NanumGoDigANiGoGoDing.otf') format('opentype'),
url('../fonts/NanumGoDigANiGoGoDing.ttf') format('turetype');
font-weight: normal;
}
프로젝트 내에서 font를 따로 관리하기 위해 디렉토리를 만들고 CSS의 font-fcae를 통해 웹 폰트를 적용할 수 있다. 가장 먼저 WOFF2 포맷 타입의 폰트가 적용될 수 있도록 하고 그 이후에 다른 포맷 타입의 폰트들이 적용될 수 있도록 순차적으로 작성해 준다. 폰트를 프로젝트 내에서 관리하게 때문에 비교적 균일하게 보일 수 있지만 폰트가 변경되거나 업데이트와 같은 상황이 일어나면 직접 해주어야 한다는 단점이 있다.
웹 폰트 최적화하는 방법
1. rel="preload" 옵션 사용하기
브라우저는 HTML, CSS, font 순으로 다운로드하기 때문에 폰트가 가장 마지막으로 보이게 된다. 이때 필요한 웹 폰트를 미리 로딩할 수 있도록 설정할 수 있는데 이것이 rel="preload" 옵션이다. 이렇게 하게 되면 FOUT 현상을 방지할 수 있다. 주로 폰트, 이미지, 비디오 등과 같은 페이지 내에 중요한 자원을 의도적으로 먼저 로딩하기 위해 사용되는데 이 옵션을 많이 사용하게 되면 웹페이지가 렌더링 되는 시간이 증가할 수 있어 사용자 경험을 해칠 수 있다.
첫 번째 이미지는 rel="preload"를 설정하지 않은 상태에서 네트워크 상태를 살펴보았다. html, css, font 순으로 다운로드가 완료되는 반면에 두 번째 이미지는 rel="preload" 옵션을 설정한 상태에서 네트워크 상태인데 css와 font를 동시에 다운로드하는 것을 알 수 있다.
2. CSS의 font-display 속성 사용하기
CSS의 font-display 속성을 사용하면 웹 폰트의 로딩 상태에 따라 동작을 설정할 수 있다. font-display에는 auto, block, swap, fallback, optional의 값이 있다.
auto
브라우저의 기본 동작 대로 보이는 값으로 오늘날의 최신 브라우저들의 대부분은 FOIT이다.
block
block은 FOIT 현상과 유사하게 동작하는 옵션으로 웹 폰트가 준비되지 않으면 텍스트를 렌더링 하지 않는다. 일반적으로 대략 3초 정도로 이후 웹 폰트가 준비되면 웬 폰트를 적용하여 보여준다. 대략 3초 정도 웹폰트가 준비되지 않으면 텍스트를 렌더링 하지 않고, 이후 웹 폰트가 준비되지 않으면 브라우저 폴백 폰트를 적용하여 렌더링 한 뒤 이후에 웹 폰트가 준비되면 웹 폰트를 적용한다.
swap
swap은 FOUT 현상과 같은 옵션으로 폴백 폰트로 텍스트를 보이다가 웹 폰트가 준비되면 웹폰트를 적용한다. 그렇기 때문에 웹 폰트가 다운로드되지 않아도 폴백 폰트로 항상 보여진다는 장점이 있지만, 폰트 스왑이 일어나는 과정에서 사용자 경험을 해칠 수 있다.
fallback
fallback은 block과 swap을 합쳤다고 볼 수 있는데 이 값을 사용하게 되면 0.1초 동안 텍스트를 보이지 않고 웹 폰트가 준비되면 웹폰트를, 웹 폰트가 준비되지 않으면 폴백 폰트를 보여준다. 하지만 웹 폰트가 준비되는 시간이 3초 이상이라면 웹폰트를 보여주지 않고 폴백 폰트를 유지한다. 만약 그 이후에 웹 폰트가 준비되었다 해도 사용자가 보는 화면에 적용되지 않지만 캐시에 저장되기 때문에 다시 웹 페이지에 방문하게 되면 웹 폰트가 바로 적용된다.
optional
optional은 fallback과 유사하지만 조금 다른 점이 있다. 0.1초 동안 텍스트를 보이지 않고 이후에는 폴백 폰트를 보여준다. 이후 3초 이내에 완료되면 웹 폰트로 스왑이 일어나던 fallback 옵션과 다르게 브라우저가 네트워크 상태를 파악하여 웹 폰트의 전환 여부를 결정한다. 네트워크 연결 상태가 좋지 않다면 웹 폰트로 전환하지 않고 캐시에 저장만 한다.
3. 폰트 용량 줄이기
일반적으로 폰트 용량은 EOT > TTF/OTF > WOFF > WOFF2 EOT형식이 가장크고 WOFF2 형태가 가장 작다. W3C권장 폰트 형식은 WOFF이다. WOFF2만 적용할 순 없기 때문에 Can i use 를 통해 적용가능한 포맷형태를 확인하고 사용자 환경을 고려하여 폰트를 적용하면 된다.
4. unicode-range 속성 사용하기
unicode-range 속성은 @font-face 규칙에 unicode-range 속성을 선언하여 함께 사용하는데 이 속성은 유니코드로 지정한 글자에만 웹 폰트를 적용하는 속성이다. 그렇기 때문에 지정한 글자가 없다면 웹 폰트를 다운로드 요청하지 않는다. 이러한 unicode-range 속성은 다양한 언어 혹은 문자 들을 지원하는 웹페이지에서 언어에 따라 웹폰트를 적용할 때 효과적으로 사용할 수 있다.
5. 서브셋 폰트 사용하기
폰트 파일에서 불필요한 글자들을 제거하고 사용에 필요한 글자들만 남겨놓은 것을 서브셋 폰트라고 하는데 한글의 경우 자음 + 모음의 조합으로 구성할 수 있는 모든 경우의 수는 11.172 자라고 한다. 하지만 11.172 자나 되는 모든 글자를 사용하지 않기 때문에 "갂, 갃, 갅, 갆, 갋, 갘"등과 같은 불필요한 글자들을 제외하여 사용한다. 다만 최근에 출시되는 대부분의 한글 폰트는 서브셋 폰트라고 한다. 아닌 경우도 있기 때문에 서브셋 폰트 메이커와 같은 여러 도구들을 사용해서 서브셋 폰트로 변경해서 사용할 수 있다.
'React' 카테고리의 다른 글
| react-error-boundary 사용해서 함수형 컴포넌트 에러 처리하기 (0) | 2024.07.12 |
|---|---|
| React, ErrorBoundary 사용해서 에러 처리하는 방법 (0) | 2024.07.09 |
| React 웹 폰트 최적화하기(1) (0) | 2024.05.02 |
| React 이해하기 (0) | 2024.04.14 |
| useEffect 정리하기(2) (0) | 2024.03.22 |
댓글