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

반응형

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

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

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

 

 

 

[ QA건 ]

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

 

[ 다이나믹 서브셋(Dynamic Subset) 이란? ]

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

 

[ 다이나믹 서브셋 사용 이유 ]

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

 

 

[ 다이나믹 서브셋 적용 확인하기 ]

<크롬브라우저 기준>

1. 개발자도구
2. Network(네트워크) 패널
3. Font Filter
4. 컨텐츠에 사용된 유니코드가 해당 웹폰트로 노출 확인

크롬브라우저 기준 다이나믹 서브셋 적용 확인하기

 

 

[ 서브셋폰트 적용 확인하기 ]

<크롬브라우저 기준>

1. 개발자도구
2. Network(네트워크) 패널
3. Font Filter
4. 서버에 올려진 웹폰트 설정파일만 로드 확인

크롬브라우저 기준 서브셋폰트 적용 확인하기

 

[ 다이나믹 서브셋 사용처 ]

• 대표적 : Meta, Google, Adobe와 같은 글로벌 기업에서 사용중

 

<Google>

• Google Fonts : https://fonts.google.com/
  • 2018.09 구글에서 한글폰트 지원 : https://www.googblogs.com/tag/korean/
• google developers API 활용 : https://developers.google.com/fonts/docs/developer_api?hl=ko 
  • 글꼴에 대한 커스텀 가능
  • 사이트간 캐싱을 통해 해당 폰트가 여러 웹사이트에서 사용될수록 전체 다운로드 시간 단축 가능
• ex) Noto Sans KR : https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap 

 

<Adobe>

• Adobe Fonts : https://fonts.adobe.com/
  • 2022.11.16 어도비에서 다이나믹 서브세팅 가능 : https://helpx.adobe.com/fonts/using/dynamic-subsetting.html

 

 

[ 다이나믹 서브셋 만들기 ]

• black7375님의 font-range : https://github.com/black7375/font-range

 

 

[참고자료]

- https://www.googblogs.com/tag/korean/

- https://helpx.adobe.com/fonts/using/dynamic-subsetting.html

- https://blog.fonts.com/2010/12/02/web-font-language-support-a-global-solution/

- https://blog.fonts.com/2015/05/28/new-improvements-to-dynamic-subsetting/

 

유익하셨다면,

채널 추가 / 블로그 구독 / 공감 부탁드려요 🙏