티스토리 뷰
오늘은 웹 폰트에 관하여 간단히 요약한 후 뱅크샐러드 블로그에서 제시한 웹 폰트를 서빙하는 방법을 말씀드릴까 합니다.
간단히 말해서 웹폰트는 웹 브라우저에서 사용할 때 사용자에게 글꼴을 제공해주는 것을 의미합니다. 요새 많은 기업들이 웹 개발에 힘을 쓰고 있는 와중, 브랜딩을 목표로 잡고 있는 웹 서비스에서 주로 사용하는 글꼴이 다양한데, 이렇게 사용자가 봤을 때 웹에서 보는 가독성이 좋은 또는 기업에서 밀고 있는 서체를 전달해주기 위함입니다.
웹 폰트가 다운로드 받아지는 시점
이 시점은 처음에 브라우저에서 웹 페이지에 진입 할 때 다운로드를 시작합니다. 가장 대표적으로 우리는 웹 서버를 경유할 때 서버에서 사용하고 있는 리소스를 다운로드받게 되고, 이 때 다운로드 받는 리소스는 아래와 같습니다.
- 웹 페이지 정적 소스 -> 여기에는 HTML, CSS, JavaScript 등이 들어갑니다.
- 웹 페이지에서 사용하는 이미지
- 웹 아이콘
- 웹 폰트
순서는 상관없고, 최상단에 있는 <html> 부터 시작하여 순차적으로 다운로드를 받을 수도 있고, 스트리밍하게 여러 태그를 다같이 받을 수 있습니다. 우리가 책을 읽기 전에 책을 사게 되고 책에는 다양한 그림과 글이 있듯이 다운로드를 받는 것도 이와 같은 케이스라고 이해하시면 됩니다.
사실 웹 페이지는 특성상 글자들의 조합을 XML 방식으로 전달하고 이것을 이해하기 위한 인터프리터가 웹 브라우저에서 해독해서 사용자에게 그 모습을 보여주는 것이기 때문에 이런 절차는 필수적으로 갖추게 되고, 그렇기 위해서 우리가 다운로드를 받게 됩니다.
웹 폰트와 리소스를 다운받는 공간
우리는 보통 웹 서버에서도 이런 정보들을 제공받습니다. 하지만 서버가 내려가게 되는 경우 웹 브라우저도 보이지 않게 되고, 덩달아 이 서버 내의 리소스를 참조하고 있던 다른 웹 서버들까지도 영향을 받게 됩니다.
웹 폰트 리소스가 그 중 대표적입니다. 웹 폰트를 다운로드받기 위해 요청을 보내어 응답이 없는 경우 브라우저에서 제공하는 기본 서체를 인식하기 때문에 자간이 맞지 않는다거나, 잘못하면 페이지 단위로 되어 있는 화면이 서체가 맞지 않아 뒤틀릴 수 있습니다.
그래서 우리는 보통 CDN (Content Delivery Network의 약자) 를 사용하여 이런 리소스들을 저장하는 클라우드 서비스를 사용하곤 합니다. 왜냐면 폰트는 서버 내에서 돌고 있는 정적 리소스이기 때문에 구글 드라이브나 다른 외장 하드에 있는 것을 참조만 하여도 가능하기 때문입니다. 정적 리소스는 리소스의 성질 또는 데이터가 변하지 않음을 의미합니다.
CDN의 장점은 여러 가지가 존재합니다. 그 중 특별하게 장점이라고 할 수 있는 점은, 지연 시간을 감소시키기 때문에 클라이언트가 리소스를 다운로드 받는 동안 대기하는 시간이 감소한다는 것입니다. 이전에 작성해둔 글이 있는데 여기에 보다 CDN에 대한 내용이 자세히 나와 있습니다.
로드 밸런싱과 CDN
Author: 주니용 2019년 기준으로 한국과 미국 간의 비행기 거리는 비행기 시간으로 18시간이 걸린다. 하지만 김포공항에서 출발한 비행기는 제주도까지 불과 1시간밖에 걸리지 않는다. 갑자기 뜬금
abbo.tistory.com
지연 시간 없이 웹 폰트 서빙하기
이 내용은 제가 뱅크샐러드가 운영하는 블로그에서 확인한 내용입니다. 보다 자세하게 나와있고, 친절하게 설명되어 있어 제가 읽기 편한 부분 + 그동안 생각하지 못했던 리소스를 줄이는 방법 및 다운로드 비용을 최소화시킬 수 있는 방법에 대해 자세히 나와있어 좋았습니다.
https://blog.banksalad.com/tech/font-preload-on-safari/
지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions | 뱅크샐러드
안녕하세요 뱅크샐러드 Web Front-End Engineer 민찬기입니다. 여러분들은 운영하시는 서비스의 폰트를 바꾸신 적이 있으신가요? 바꾸시는 과정에서 어떤 어려움을 겪으셨나요? 눈썰미가 남다르신 분
blog.banksalad.com
이 글의 맨 하단의 요약에는 이렇게 나와 있습니다.
요약
- 웹 폰트를 적용할 때 Subset Font를 사용하여 용량을 줄일 수 있습니다.
- 폰트, 스크린 상단에 표시되는 이미지 등 최대한 빨리 가져와야 하는 리소스는 preload link를 사용할 수 있습니다.
- 자주 사용하는 CDN 등 최초 연결 이후 10초 이내에 요청할 가능성이 높은 Domain에 대하여 preconnect link를 사용할 수 있습니다.
- 브라우저 이슈로 인해 Cache가 동작하지 않는 경우 CloudFront Function 등 Edge function을 사용할 수 있습니다.
최근 네이버와 같은 대기업에서도 웹 폰트를 자주 사용하고 있고, 브랜딩 이미지를 위해 '나눔고딕'과 같은 서체를 배포하고 사용하도록 하고 있습니다. 물론 이러한 리소스에는 저작권이 존재하고 웹 페이지가 더 아름다워 보이고 좋은 퀄리티를 유지하기 위해 웹 폰트를 자주 사용하고 있고, 실제로 웹 폰트를 사용하면서 최적화하는 방법에 대해 많은 연구가 이루어지고 있습니다.
네이버 개발자 포럼인 네이버 d2 에서도 이와 같이 설명하고 있습니다.
https://d2.naver.com/helloworld/4969726
CDN을 사용한다고 하더라도 사용자들이 체감할 수 있는 부분이 있기 때문에 이런 부분을 보완하기 위해 폰트 파일 및 리소스를 경량화시키는 방법에 대해 저도 몰랐던 부분을 알게 된 것 같습니다. 글 읽어주셔서 감사합니다!
'Client' 카테고리의 다른 글
| [Flutter] Android Studio SDK 설치 방법 및 호환되는 SDK 체크 (2) | 2023.03.04 |
|---|---|
| [Flutter] 개요 및 환경 세팅하기 (0) | 2023.03.04 |
| [Javascript] 배열의 순회 방법 (forEach) 정리하기 (0) | 2023.02.23 |
| [JS] 이미지 프리뷰 적용하기 (0) | 2022.12.06 |
| [Java] Full Calendar 추가 옵션 내용 (0) | 2022.10.21 |
| [JavaScript] Full Calendar 사용방법과 내가 삽질한 내용 (0) | 2022.10.19 |