20240502
운영 서버 에서 woff2 웹 폰트 가 Error 가 나서 사이트의 폰트적용이 안되는 이슈가 나타났다
- 다른 압축 형식인 대체 폰트도 설정안해놔서 폰트 적용 안됨 (브라우저에 폰트가 캐싱이 되어 있어서 유저들은 몰랐을 수도..)
로컬에서 다운 받은 파일을 불러와서 해결
해당 이슈 몇시간 후인 GeekNews 에 올라왔다.. 다들 원인 파악 못하고 있었던 듯..
https://news.hada.io/topic?id=14613
웹 폰트?
웹 페이지에서 사용디는 폰트를 온라인상에서 다운로드하여 쓸 수 있는 기술이다.
웹 폰트가 동작하는 방식
웹 폰트는 사용자 로컬 기기에 저장되어 있는 폰트 파일을 사용하는 것이 아닌, 온라인상에서 폰트 파일을 다운로드해서 사용하게 되는 것이다.
즉, 웹 폰트를 사용하는 페이지에 접근 할 때 웹 서버 이외에 또 다른 서버로 웹 폰트를 요청하는 것인데, 이때 브라우저가 렌더링 하는 과정을 알아보자.
중요한 T2 단계부터 보면,
T2 단계 에서 응답받은 css 파일을 확인하여 렌더링에 필요한 폰트 파일을 요청한다. 그리고 브라우저는 렌더링이 가능해졌을 때 이를 진행하는데 이때 폰트를 아직 사용할 수 없는 경우 글자 픽셀은 렌더링 되지 않을 수 있다. 만약 대체 폰트가 설정되어 있다면 대체 폰트로 렌더링되고 기존 폰트가 준비되었을 경우 폰트를 변경하여 렌더링한다.
1. 브라우저가 HTML 을 요청, 응답 받은 HTML로 DOM 구성
2. 브라우저는 필요한 CSS 를 확인하여 요청, 응답 받은 CSS 로 CSSOM 구성
3. 브라우저는 렌더링에 필요한 폰트 요청
4. 브라우저는 폰트 요청의 응답을 기다리지 않고 렌더링 진행 [폰트 준비x -> 대체 폰트 렌더링 or 렌더링 x]
5. 브라우저는 폰트가 준비되면 비어있는 텍스트를 채우거나 대체 폰트를 기존 폰트로 다시 렌더링
웹 폰트 최적화 필요성
웹 폰트를 사용할 때 사용자 경험 측면에서 고려할 만한 2가지 상황이 있다.
FOIT(Flash Of Invisible Text) 와 FOUT(Flash Of Unstyled Text) 이다.
이 두가지 현상은 사용자 경험을 저하시키고, 개발자가 의도하지 않은 동작을 한다.
1️⃣ FOIT(Flash Of Invisible Text)
FOIT 는 웹 페이지가 렌더링 되었을 때, 필요한 폰트가 아직 준비 되지 않아 사용자에게 일시적으로 글자가 보이지 않는 현상이다.
이 같은 현상은 사용자가 페이지 내에 작성된 글을 읽을 수 없어 사용자 경험을 저하시키게 된다.
2️⃣ FOUT(Flash Of Unstyled Text)
FOUT 는 글자는 보이지만, 기본 시스템 폰트로 표시되는 현상이다.
이는 아예 글자가 보이지 않는 FOIT 의 문제점을 해결하고자, 글자라도 보이게 하는 대안적인 현상이다.
해당 현상은 글자가 잘 보이긴 하지만 설정된 폰트와 기본 시스템 폰트 모양이나 간격 등의 차이가 있다. 따라서 의도한 디자인으로 보이지 않거나, 기본 시스템 폰트에서 설정된 폰트로 다시 렌더링될 때 글자들이 꿈틀거리는 현상으로 사용자 경험을 저하시킨다.
개선된 폰트 형식으로 최적화 하기
웹 폰트 사용하는 것은 결국 추가적인 파일을 다운로드하는 것인데 이 다운로드 시간을 단축시키는 방법은 무엇일까?
다운로드할 대상 파일의 크기를 줄이면 되지 않을까? 이러한 형식들이 아래의 웹 폰트 형식이 있다.
1️⃣ WOFF (Web Open Font Format)
woff 는 모질라 파운데이션(Mozila Foundation) 과 오페라 소프트웨어(Opera Sftwar), 타입키트(TypeKit), 마이크로소프트(Microsoft) 가 협력해서 개발한 웹 폰트 형식이다.
이는 기존의 폰트 형식인 TTF, OTF 와 동일하게 동작하지만, 압축을 통해 더 작은 파일 크기를 가진다.
2012년에 W3C(World Wide Web Consortium) 에 권장사항으로 등록되어 현재는 거의 모든 브라우저에서 이 형식을 지원한다.
사용방법
css 에서 font-face 로 폰트를 정의해서 사용하면 된다.
src에 format("WOFF") 로 어떤 형식을 사용할 것인지 명시
2️⃣ WOFF2 (Web Open Font Format2)
woff2 는 woff를 개선한 버전
동일하게 웹 폰트를 압축하고 최적화하기 위한 웹 폰트 형식이지만, WOFF2는 Brotli 압축 알고리즘을 사용하여 폰트 데이터를 압축한다. 이를 통해 WOFF 대비 약 30% ~ 50% 정도 더 작은 파일 크기를 가질 수 있다. 이는 WOFF 보다 우수한 성능을 가졌지만, WOFF 보다 비교적 낮은 호환성을 가지고 있어 WOFF 를 폴백(fallback) 폰트로 같이 사용하곤 한다.
사용방법
src 로 폰트 파일을 부러올 때 format("WOFF2") 명시
다만 WOFF2를 지원하지 않는 브라우저가 있을 수 있어, 폴백 폰트로 WOFF 형식을 같이 사용하곤 한다.
위와 같이 작성하면, WOFF2를 지원하지 않는 브라우저라도 자동으로 WOFF 폰트를 사용해 렌더링을 진행한다.
'frond-end' 카테고리의 다른 글
GitHub Actions를 이용한 ChatGPT 기반 자동 코드 리뷰 기능 추가하기 (0) | 2025.01.07 |
---|---|
크롬 브라우저 비밀번호 자동 완성, 이렇게 하면 완벽 차단 (feat. formkit) (0) | 2025.01.07 |
AWS S3 + CloudFront 배포 생성 (1) | 2024.04.28 |
Bitbucket 배포 환경 만들기 (0) | 2024.04.28 |
jsPDF 이미지파일 pdf에 추가, 한글 깨짐 문제 (base64) (0) | 2024.04.27 |