프리텐다드 vs 노토산스 vs 스포카 vs 인터롭 -2
본고딕 폰트 4종 비교 - 2편. 경량화
지난 글에 이어, 이번에는 본고딕 기반 본문 폰트 4종의 파일 사이즈와 용량을 중심으로 비교해보겠습니다.
폰트 파일 사이즈는 사용성과 밀접한 관련이 있습니다. 파일 크기가 작을수록 페이지 로딩 속도가 빨라져 사용자에게 더 쾌적한 경험을 제공할 수 있습니다.
따라서 디자인이 유사한 폰트라면 가벼운 쪽을 선택하는 것이 유리합니다. 지난 글에서 살펴본 노토 산스, 스포카, 프리텐다드, 인터롭은 한글 디자인에는 큰 차이가 없었지만, 자간, 행간, 영문, 숫자에서 약간의 차이를 보였습니다. 만약 한글 콘텐츠 중심의 웹 서비스라면, 글자의 형태보다는 폰트의 경량성을 더 중요하게 고려해야 합니다.
폰트의 경량성은 단순히 디자이너가 사용한 폰트 파일의 크기로 판단할 수 없습니다. 실제 사용자가 다운로드하는 크기를 확인해야 합니다. 웹에서는 다양한 기술을 통해 원본 폰트 파일보다 더 작고 빠르게 폰트를 처리할 수 있기 때문입니다.
실제 사용자가 다운로드하는 크기를 비교하기 위해 다음과 같은 방법을 사용했습니다.
폰트 사이즈 비교 방법
✦ 비교 폰트
① 노토 산스 KR (Noto Sans KR)
② 스포카 한 산스 네오 (Spoqa Han Sans Neo)
③ 프리텐다드 (Pretendard) - 가변 다이나믹 서브셋
④ 프리텐다드 (Pretendard) - 전체 기능
⑤ 인터롭 (Interop)
✦ 측정 방법
① 약 1,000자 분량의 한글 웹 콘텐츠 준비 (Regular, Medium, Bold 3종 weight 사용)
② 동일한 웹 페이지를 5개 만들어 각 비교 폰트를 적용
③ 공식 문서에서 웹폰트 CDN을 제공하는 경우 해당 경로 적용
④ 브라우저(크롬)에서 각 웹페이지를 열어 다운로드한 파일 크기를 비교
콘텐츠 내용 출처 : 네이버 프라이버시 센터 https://privacy.naver.com/측정결과
1. 네트워크 전송량(Transferred)
사용자의 브라우저가 폰트를 다운로드할 때 실제로 전송되는 데이터의 크기입니다. 이는 다운로드 속도에 직접적인 영향을 미칩니다.
네트워크 전송량 기준으로는 노토 산스와 프리텐다드의 가변 다이나믹 서브셋이 가장 가벼웠습니다.
*유의 사항
노토 산스와 프리텐다드는 다이나믹 서브셋을 지원하여 필요한 글자만 불러오는 방식을 사용합니다. 따라서 더 다양한 글자를 포함한 콘텐츠로 테스트하면 결과가 달라질 수 있습니다.
브라우저 환경에 따라 지원하는 폰트 포맷이나 압축 방식이 다르므로 결과에 차이가 있을 수 있습니다.
2. 압축 해제 후 크기(Resources)
브라우저가 압축된 폰트를 다운로드한 후 실제 사용을 위해 해제한 크기입니다. 이는 메모리 사용량에 영향을 줄 수 있습니다.
압축 해제 후 크기 기준으로는 노토 산스가 가장 가벼웠습니다.
일반적으로 웹사이트 성능에는 압축 해제 후 크기(Resources)보다 네트워크 전송량(Transferred)이 더 큰 영향을 미칩니다.
참고) 로드 시간 (Load)
폰트가 다운로드되고 렌더링되는 속도를 의미합니다. 이는 폰트 파일뿐만 아니라 페이지의 모든 요소를 불러오는 시간을 포함하므로 참고용으로만 봐주세요.
로드 시간은 스포카 한 산스 네오와 프리텐다드 가변 다이나믹 서브셋이 가장 빨랐습니다.
경량화 방식 차이
노토 산스와 프리텐다드는 다이나믹 서브셋을,
스포카 한 산스 네오는 고정 서브셋("뙎"과 같이 잘 사용하지 않는 글자를 폰트에 포함시키지 않는 방식)을 사용합니다.
정리
본고딕 계열 중 크기가 작은 폰트는?(woff2, 1000자 기준)
⇒ 노토산스 KR
⇒ 스포카 한 산스 네오
⇒ 프리텐다드 가변 다이나믹 서브셋
본고딕 계열 중 빠른 폰트는?
⇒ 글자 수, 브라우저 환경, 최적화 기술에 따라 차이
본고딕 계열 중 크고 느린 폰트는?
⇒ 프리텐다드 전체 기능 지원 버전
⇒ 인터롭
결론적으로, 노토 산스, 스포카, 프리텐다드 다이나믹 서브셋은 성능 면에서 큰 차이가 없어 보입니다. 다만 프리텐다드 전체 기능과 인터롭을 그대로 적용하는 것은 웹 서비스에 적합하지 않을 수 있습니다. 저라면 이 폰트들의 사용을 가급적 지양하거나, 추가 경량화 방안을 모색해볼 것입니다.
사실 웹폰트의 성능은 단순히 파일 크기만으로 결정되지 않습니다. 서비스 환경, 콘텐츠 특성, 경량화 기술 등 다양한 요소가 작용하기 때문입니다. 따라서 폰트를 고를 때는 심미적 요소와 함께 서브셋 사용·표현 제한 등을 종합적으로 고려해야 합니다. 폰트 자체도 계속 업데이트되고 있으므로, 프로젝트에 도입하기 전 간단한 성능·호환성 테스트를 해 본다면, 의사결정에 더 유의미한 자료가 될 것입니다.
