가변 폰트 활용 — 하나의 파일, 무한한 굵기

가변 폰트를 쓰기 전에는 Regular, Medium, Bold, ExtraBold처럼 굵기마다 별도 파일을 내려받아야 했다. 폰트 하나를 네 가지 굵기로 쓰면 네 개의 파일이 로딩되고, 그만큼 페이지는 무거워진다. 가변 폰트는 이 구조를 완전히 바꾼다. 하나의 파일 안에 굵기, 폭, 기울기 같은 축이 연속적으로 들어 있어서, CSS 값 하나만 바꾸면 원하는 굵기를 만들어낼 수 있다.

1. 하나의 파일 안에 담긴 무한한 굵기

여러 굵기의 정적 폰트 파일을 쓰던 시절에는 굵기 단계를 늘릴수록 로딩 시간이 늘어나는 트레이드오프가 있었다. 그래서 대부분의 팀은 Regular와 Bold 두 가지 정도로 타협했다.

가변 폰트가 가능해진 데는 업계 차원의 배경이 있다. 2016년 Adobe, Apple, Google, Microsoft 네 회사가 공동으로 OpenType Font Variations라는 사양을 발표하면서, 하나의 폰트 파일 안에 굵기·폭·기울기 축을 연속적으로 담는 기술이 웹 표준으로 자리 잡았다. 이후 애플의 시스템 폰트인 SF Pro나 구글의 Roboto Flex 같은 주요 시스템 폰트들이 가변 폰트 방식을 채택하면서, 특정 회사의 실험적 기술이 아니라 업계 전반의 기본 선택지로 자리 잡게 되었다.

가변 폰트를 쓰면 이 제약이 사라진다. 파일 하나의 용량은 개별 스타일 파일들을 합친 것보다 작은 경우가 많고, 그 안에서 임의의 굵기 값을 자유롭게 골라 쓸 수 있다. 예를 들어 헤드라인은 720, 본문은 400, 캡션은 380처럼 미묘한 차이를 표현하는 것도 가능해진다.

타이포그래피 시스템에 연결하기

가변 폰트의 진짜 가치는 개별 페이지에서 굵기를 조정하는 것이 아니라, 팀 전체의 타이포그래피 시스템과 연결될 때 드러난다. 모듈러 스케일로 타이포그래피 단계를 정하는 방법에서처럼 글자 크기 단계를 미리 정의해두었다면, 가변 폰트의 굵기 축도 같은 방식으로 몇 개의 표준 값으로 제한해두는 것이 좋다. 무한히 조정 가능하다고 해서 실제로 모든 값을 다 쓰면 오히려 화면마다 굵기가 제각각으로 흐트러진다.

인터랙션에 가변 폰트 활용하기

가변 폰트는 정적인 스타일링뿐 아니라 애니메이션에도 쓸 수 있다. 마우스를 올렸을 때 글자 굵기가 부드럽게 커지거나, 스크롤에 따라 폭 축이 서서히 넓어지는 연출은 기존 정적 폰트로는 만들기 어려웠던 표현이다. 다만 이런 효과는 남용하면 가독성을 해치므로, 브랜드가 손글씨 서체를 선택하는 이유에서 다룬 것과 같은 절제의 원칙을 여기에도 적용해야 한다. 서체 자체가 브랜드 메시지를 전달할 때는 화려한 움직임보다 안정적인 판독성이 우선이다.

2. 가변 폰트가 항상 정답은 아니다

가변 폰트가 대세가 되었다고 해서 모든 프로젝트에 무조건 적용할 필요는 없다. 굵기 두세 단계만 고정적으로 쓰는 단순한 사이트라면, 필요한 굵기만 담은 정적 서브셋 폰트가 오히려 전체 용량이 더 작을 수 있다. 가변 폰트 파일에는 쓰지 않는 중간 굵기 값까지 모두 포함되어 있기 때문이다.

실무에서 자주 나오는 실수는 이런 비교 없이 “요즘 트렌드니까”라는 이유만으로 가변 폰트를 도입하는 것이다. 실제로 파일 용량을 재보지 않고 도입하면, 오히려 이전보다 무거워진 페이지를 마주하게 될 수도 있다. 도입 전에 반드시 실제 파일 크기를 비교해보는 습관이 필요하다.

3. 가변 폰트 도입 체크리스트

4. 마치며

가변 폰트는 단순히 파일 하나를 아끼는 기술이 아니라, 타이포그래피를 고정된 단계가 아닌 연속된 스펙트럼으로 다루게 해주는 도구다. 다음 프로젝트에서 폰트를 고를 때는 굵기별 파일을 몇 개 쓸지보다, 가변 폰트로 시스템 전체를 얼마나 유연하게 만들 수 있을지부터 검토해볼 만하다. Google Fonts의 가변 폰트 설명 문서에서 기술적 배경을 확인할 수 있다.