[CSS] 웹폰트 - 다이나믹 서브셋(Dynamic Subset) / 동적분할 다운로드 / 동적 하위 집합

CSS

여니노트 2023. 8. 25. 16:28

728x90

폰트 호출에 그동안 의구심을 갖지 않고 통상적으로 사용하고 있던 웹폰트 설정중, 다이나믹 서브셋에 알아보았다.

프로젝트 중, QA에서 먼저 이슈제기를 해주셔서 찾아보게되었고

덕분에 새로운 지식을 습득하게 되었다. 👍

항목	내용
QA 이슈	폰트 호출 확인 건
QA 내용	개발자도구 > 네트워크 > 로드된 폰트 확인시, 다량의 폰트가 호출됨 -> 필요한 폰트만 호출돼야 함
QA 캡쳐
QA Close	다이나믹 서브셋으로 실제 컨텐츠에 담긴 문자만 유니코드 방식으로 로드되므로 이슈없음 Close

웹폰트를 사용할 때, CSS의 unicode-range 속서을 이용해 유니코드 영역의 문자가 사용될 때 실제 컨텐츠에 담긴 문자만 유니코드 방식으로 로드되는 형태
동일 의미 단어 : 동적분할 다운로드, 동적 하위 집합, 다이나믹 서브셋

배경 :
- 일어, 중국어, 한국어와 같은 동아시아 국가들의 문자는 조합해 만들어 낼 수 있는 문자 수가 상당
  - 한국어 : 약 11172개
- 영어, 로마어와 달리 동아시아 국가들의 폰트용량이 커 페이지 로딩을 느리게 함
  - 한국어 : 모든 조합 문자수 담은 폰트용량 2MB 이상
  - 중국어 : 모든 조합 문자수 담은 폰트용량 8MB 이상
- 로딩을 빠르게 하기 위해 폰트용량을 줄인 서브셋 폰트를 사용하고 있음
- 대부분 서브셋 폰트를 사용해 일반적으로 사용하지 않는 문자를 제거 후 적은 용량의 폰트파일을 서버에 올려 사용 중
  - 서브셋 폰트( subset font ) : 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트
- 서브셋 폰트파일로 적은 용량으로 사용 가능하지만,
  사용자가 임의로 글을 작성할 수 있는 게시글과 채팅영역에서는 제거한 문자가 노출되지 않는 이슈가 발생할 수 있음
결론 :
- 사용자가 임의의 글을 작성할 수 있는 영역에서 서브셋의 단점을 보완하고자 사용
- 폰트 전체를 로드하는 대신 필요한 문자만 포함하는 폰트만 로드해 로딩속도를 높이고자 사용