폰트로 인한 layout shift 방지하기

브라우저에서 레이아웃 변형layout shift 이 일어났다고 하면 단순히 화면상의 배치가 바뀌었다는 것만을 뜻하지 않습니다. 실제로 변형된 것은 단 하나의 객체만 바뀌었다고 하더라도, 전체적인 화면상의 위치를 재계산해야할 필요가 있을 때 레이아웃 변형이 일어났다고 표현합니다. 따라서 레이아웃 변형이 일어났다고 하면, 일반적으로 사용자 입장에서는 전체 화면이 한꺼번에 움직이므로 깜박거리는 화면이나 느려진 인터페이스를 경험하게 됩니다.

코드나 알고리즘상의 퍼포먼스 하락은 빠르게 탐지할 수 있습니다. 그러나 레이아웃 변형의 경우 스타일이나 HTML 태그 배치의 문제로 인해서 발생하는 경우가 많기 때문에 해당 내용을 놓치기 쉽습니다. 마침 해커뉴스에 레이아웃 변형의 가장 흔한 유형 중 하나인 폰트로 인한 레이아웃 변형을 막는 법에 대해 블로그 포스팅이 올라왔기에 간단히 요약하여 공유드립니다. 아이콘 폰트 및 시스템 폰트 활용에 대한 이야기는 디자이너분들도 알아두시면 좋을 내용인 것 같습니다.

폰트로 인한 레이아웃 변형(layout shift)을 방지하는 법 본문 링크(영문)

• 레이아웃 변형을 탐지하는 법: 크롬 개발자 도구 내부에서 Performance탭에 들어가서 시간을 두고 스냅샷을 찍으면 워터폴 차트에서 layout shift로 표현해준다.
• CSS에서 font-display:optional 을 사용하면 폰트 바뀜(font swap) 현상을 막고 폰트가 있을 때만 렌더하기 때문에 레이아웃 변형을 막을 수 있다.

역주: 이 경우는 FCP(First Contentful Paint)는 느려질 수 있기 때문에 논의를 거쳐 사용해야할 것 같습니다.

• 폰트 자체의 볼드, 이탤릭체도 하나의 폰트로 간주되어 그만큼 자원을 소모한다. 따라서 브라우저에서 자체 제공하는 즉시 생성된 볼드, 이탤릭체(faux bold, faux italic)를 이용하여 불필요한 폰트 불러오기를 막을 수 있다.

역주: 이 경우는 원본과 비교했을 때 자체 생성된 볼드와 이탤릭체의 심미성을 고려하여 적용해야 할 것 같습니다.

• 가변형 폰트(variable font)를 이용하자
• 아이콘 폰트는 불필요한 리소스를 모두 가져와서 사용하는데다가, 용량 자체도 크기 때문에 사용을 자제하고 svg를 사용하자 가능한 부분에서는 최대한 OS에 기본 탑재되어 있는 폰트(system font)를 이용하자. 물론 그대로 사용하지 않고 자간 및 폭을 조정하여 완전히 다른 글자처럼 만들 수 있다.
• 폰트를 외부에서 가져올 경우(i.g. 구글폰트) 불필요한 특수문자를 subset 옵션을 설정하여 제거하고 필요한 문자만 가져올 수 있다. woff, woff2는 기본적으로 압축(gzip 및 brotli)이 적용되어 있다. 따라서 ttf 및 otf 사용을 자제하고 가능하면 최대한 woff, woff2를 사용하자.

역주: 이 경우는 수동으로 압축을 적용하면 되고, 간혹 브라우저 및 기기에 따라 woff, woff2를 지원하지 않는 경우도 있어서 상황에 맞게 사용해야할 것 같습니다.

• 최대한 CDN을 사용하자
• <link rel="preload" /> 옵션을 이용하여 통신 대역폭이 확보된 상황에서는 빠르게 폰트를 가져올 수 있도록 하자.

그 외에도 현재 크롬에서 최근 도입된 CSS속성 모음인 f-mods를 이용하여 폰트를 최적화하는 방법도 소개하고 있습니다. 이 경우 사파리와 IE에서는 아직 사용이 불가능합니다. 그러나 PWA를 비롯해 대부분의 크롬 자체 기술이 다른 브라우저에서도 채용된 것을 보았을 때 기대해봐도 좋을 것 같습니다.