웹사이트 성능 저하의 숨은 원인은 '잘못된 폰트 로딩'...전문가 "대부분 웹사이트가 폰트를 잘못 사용해 성능 악화"

[한국정보기술신문] 웹사이트 성능 최적화 전문가 조노 앨더슨(Jono Alderson)이 최근 발표한 보고서에 따르면, 대부분의 웹사이트가 폰트를 잘못 로딩해 사이트 성능을 크게 저하시키고 있는 것으로 나타났다. 앨더슨은 "폰트는 단순한 장식이 아니라 웹사이트의 핵심 인프라"라며 현재의 폰트 사용 방식에 대한 전면적인 재검토가 필요하다고 주장했다.

웹폰트 역사와 현재의 문제점

웹폰트의 역사는 제약과 타협의 연속이었다. 초기 웹에서는 아리얼, 타임스 뉴 로만 등 제한된 '웹 안전' 폰트만 사용할 수 있었고, 디자이너들은 브랜드 타이포그래피를 구현하기 위해 이미지로 텍스트를 만들거나 플래시 기반 솔루션을 사용해야 했다. 이후 @font-face 규칙이 도입되었지만 브라우저마다 다른 포맷을 요구해 개발자들은 하나의 폰트를 여러 형식으로 제공해야 했다.

구글 폰트의 등장으로 상황이 개선된 듯 보였지만, 새로운 문제들이 발생했다. 많은 개발자들이 무료이고 사용하기 쉬운 구글 폰트에 의존하게 되면서 제3자 CDN에서 폰트를 로딩하는 것이 당연하게 여겨졌다. 하지만 이는 성능과 개인정보보호 측면에서 심각한 문제를 야기했다.

폰트 로딩은 겉보기와 달리 매우 복잡한 과정이다. 브라우저가 CSS를 파싱하고 @font-face 규칙을 등록한 후, 실제로 필요한 글리프가 있을 때만 폰트 파일을 다운로드한다. 이 과정에서 폰트가 도착하기 전까지 텍스트를 숨기거나(FOIT) 대체 폰트를 보여주다가 바뀌는(FOUT) 현상이 발생한다.

특히 대체 폰트와 웹폰트의 크기나 높이가 다르면 폰트가 로딩될 때 레이아웃이 급격히 변화하는 누적 레이아웃 이동(CLS) 현상이 나타난다. 이는 구글의 핵심 웹 바이탈 지표에 부정적인 영향을 미쳐 검색 순위 하락으로 이어질 수 있다.

현재 웹사이트들의 주요 실수들

앨더슨은 대부분의 웹사이트가 범하는 주요 실수들을 지적했다. 첫째, 필요 이상으로 큰 폰트 파일을 제공한다는 것이다. 하나의 '완전한' 폰트 패밀리가 스타일당 400-800KB에 달할 수 있으며, 굵게, 기울임체 등을 추가하면 수 메가바이트의 데이터를 다운로드해야 한다. 하지만 실제로는 이 중 극히 일부만 사용된다.

둘째, 구식 폰트 형식을 여전히 사용하고 있다. 현재는 WOFF2 형식만 있으면 충분하지만 많은 사이트들이 구형 브라우저 지원을 위해 여러 형식을 동시에 제공해 불필요한 용량 증가를 초래하고 있다.

보고서는 여러 최적화 방안을 제시했다. 가장 중요한 것은 폰트 서브셋팅이다. 라틴 문자만 필요한 사이트가 키릴 문자나 중국어 글리프까지 포함된 폰트를 로딩할 필요가 없다는 것이다. unicode-range 속성을 활용해 필요한 문자 집합만 다운로드하도록 설정하면 수백 킬로바이트를 절약할 수 있다.

또한 폰트 디스플레이 속성을 적절히 설정해야 한다. font-display: swap을 사용하면 대체 폰트를 즉시 표시하고 웹폰트가 로딩되면 교체하는 방식으로 사용자 경험을 개선할 수 있다.

가변 폰트의 가능성과 한계

가변 폰트(Variable Fonts)는 하나의 파일로 여러 굵기와 스타일을 제공할 수 있어 이론적으로는 이상적인 해결책으로 보인다. 하지만 실제로는 두세 개의 굵기만 필요한 경우 가변 폰트가 정적 폰트보다 용량이 클 수 있으며, 라이선스 문제나 브라우저 지원 이슈도 고려해야 한다.

앨더슨은 "가변 폰트는 도구일 뿐 기본값이 아니다"라며 실제 필요에 따라 신중히 선택해야 한다고 조언했다.

흥미롭게도 보고서는 때로는 커스텀 폰트를 사용하지 않는 것이 최선일 수 있다고 제안했다. 운영체제에 기본 탑재된 시스템 폰트들은 무료이고 즉시 사용 가능하며 친숙하다. 적절한 시스템 폰트 스택을 구성하면 대부분의 플랫폼에서 일관성 있는 결과를 얻을 수 있다.

시스템 폰트는 또한 이모지 처리에서도 우수하다. 웹폰트로 이모지를 제공하는 것은 용량이 크고 일관성이 떨어지므로 권장하지 않는다.

제3자 CDN 사용의 문제점

구글 폰트와 같은 제3자 CDN 사용도 재검토가 필요하다. 과거에는 "이미 캐시된 폰트를 재사용할 수 있다"는 장점이 있었지만, 현대 브라우저들은 개인정보보호를 위해 사이트별로 캐시를 분리하므로 이 장점은 사라졌다. 오히려 제3자 서버로의 추가 요청으로 인한 지연과 개인정보 유출 위험만 남았다.

유럽 법원은 구글 폰트 사용이 GDPR 위반이라고 판결하기도 했다. 따라서 폰트를 자체 호스팅하는 것이 성능과 개인정보보호 측면에서 모두 유리하다.

다국어 웹사이트의 경우 더욱 복잡한 고려사항들이 있다. 아랍어, 힌디어, 태국어 등 비라틴 문자들은 라틴 문자보다 훨씬 복잡한 렌더링 규칙을 가지고 있어 무분별한 서브셋팅이 텍스트를 깨뜨릴 수 있다. 또한 우측에서 좌측으로 쓰는 언어들(RTL)은 별도의 처리가 필요하다.

중국어, 일본어, 한국어(CJK) 폰트는 전체 기능을 포함하면 5-10MB에 달할 수 있어 이 경우 가변 폰트나 점진적 로딩이 더욱 중요해진다.

아이콘 폰트 사용 중단 권고

보고서는 Font Awesome 같은 아이콘 폰트 사용을 강력히 반대했다. 아이콘 폰트는 접근성 문제(스크린 리더가 의미없는 문자로 읽음), 폰트 로딩 실패 시 깨진 표시, 수백 개의 불필요한 아이콘을 다운로드하는 성능 문제 등을 야기한다. 대신 인라인 SVG나 SVG 스프라이트 사용을 권장했다.

현대 CSS는 폰트 최적화를 위한 강력한 도구들을 제공한다. size-adjust, ascent-override, descent-override 등의 속성을 사용하면 대체 폰트와 웹폰트의 크기와 위치를 정확히 맞춰 레이아웃 이동을 방지할 수 있다. 또한 preload 링크와 Early Hints(HTTP 103)를 활용하면 폰트 다운로드를 더욱 앞당길 수 있다.

앨더슨은 폰트를 "장식"이 아닌 "인프라"로 취급할 것을 강조했다. 폰트는 성능, 접근성, 국제화에 모두 영향을 미치는 핵심 요소이므로 코드나 분석 도구와 같은 수준의 주의와 관리가 필요하다고 말했다.

그는 웹폰트 최적화를 위한 핵심 원칙으로 ▲시스템 폰트 우선 사용 ▲적극적이되 지능적인 서브셋팅 ▲WOFF2 형식만 사용 ▲아이콘은 SVG로 대체 ▲대체 폰트 디자인 고려 ▲다양한 환경에서의 테스트 등을 제시했다.

보고서는 "폰트는 콘텐츠이자 브랜드이며 사용자 경험"이라며 "여전히 폰트를 단순한 자산으로 취급한다면 잘못 로딩하고 있는 것"이라고 결론지었다. 웹 성능 개선을 위해 폰트 로딩 전략의 전면적인 재검토가 시급한 상황이다.

한국정보기술신문 정보보안분과 안서진 기자 news@kitpa.org