가변 글꼴(Variable Fonts)로 구현하는 디자인 시스템 타이포그래피 성능 최적화
웹사이트의 첫인상을 결정짓는 폰트, 하지만 디자인 퀄리티를 위해 Light, Regular, Semi-Bold, Bold 등 서너 개의 폰트 파일을 로드하다가 페이지 로딩 속도가 눈에 띄게 느려졌던 경험 한 번쯤 있으실 겁니다. 사용자 입장에서 글자가 뒤늦게 나타나거나(FOIT), 기본 폰트에서 웹 폰트로 바뀌며 화면이 울렁이는 현상(FOUT)은 서비스의 신뢰도를 떨어뜨리는 치명적인 요소가 되기도 해요.
이런 성능 문제를 근본적으로 해결하면서도 디자인의 유연성을 극대화할 수 있는 기술이 바로 **가변 글꼴(Variable Fonts)**입니다. 오늘은 디자인 시스템 엔지니어링 관점에서 가변 글꼴을 어떻게 토큰화하고, 이를 통해 사용자 경험과 웹 성능이라는 두 마리 토끼를 어떻게 잡을 수 있는지 실무적인 노하우를 풀어보겠습니다.
가변 글꼴: 수십 개의 스타일을 단 하나의 파일로
가변 글꼴은 기존에 각각의 파일로 분리되어 있던 두께(Weight), 너비(Width), 기울기(Slant) 등의 속성을 단 하나의 폰트 파일 안에 ‘축(Axis)’이라는 개념으로 통합한 기술입니다. 예전에는 Bold 체가 필요하면 font-bold.woff2 파일을 추가로 다운로드해야 했지만, 가변 글꼴은 font-variable.woff2 파일 하나만 있으면 1부터 1000까지 원하는 두께를 자유자재로 렌더링할 수 있습니다.
이 기술이 디자인 시스템에서 강력한 이유는 중간 단계의 디자인을 완벽하게 지원하기 때문입니다. 예를 들어, 일반적인 볼드(700)는 너무 두껍고 세미볼드(600)는 너무 가늘어 보이는 애매한 상황에서 가변 글꼴을 쓰면 font-weight: 642와 같은 세밀한 값을 토큰으로 정의해 사용할 수 있습니다. 이는 특히 고해상도 디스플레이가 보편화된 현재, 정교한 타이포그래피를 구현하는 데 큰 강점이 됩니다.
[💡 에디터의 실무 팁: 가변 글꼴 파일 하나는 단일 정적 폰트 파일보다 용량이 조금 더 크지만, 보통 3개 이상의 스타일을 사용할 계획이라면 가변 글꼴을 사용하는 것이 전체 네트워크 전송량 측면에서 훨씬 유리합니다.]
성능 최적화의 핵심, 폰트 로딩 전략과 CSS 매칭
아무리 좋은 가변 글꼴이라도 로딩 방식이 잘못되면 성능 이점을 누릴 수 없습니다. 가장 먼저 신경 써야 할 부분은 @font-face 설정입니다. 가변 글꼴은 일반 폰트와 달리 font-weight 범위를 명시해 주어야 브라우저가 이를 가변형으로 인식합니다.
@font-face {
font-family: ‘Pretendard Variable’;
src: url(‘/fonts/PretendardVariable.woff2’) format(‘woff2-variations’);
font-weight: 100 900; /* 지원하는 두께의 범위를 명시 */
font-display: swap; /* 폰트 로딩 중에도 텍스트를 먼저 보여줌 */
}
여기서 font-display: swap은 필수입니다. 폰트가 로드되는 동안 시스템 폰트를 먼저 보여주어 사용자가 콘텐츠를 즉시 읽을 수 있게 하고, 로딩이 완료되면 부드럽게 가변 글꼴로 교체해 줍니다.
또한, 성능 최적화를 위해 서브셋(Subset) 처리를 강력히 권장합니다. 한글 폰트는 글자 수가 방대해 용량이 큰 편인데, 실무에서는 자주 쓰이지 않는 고어나 특수문자를 제거한 서브셋 가변 글꼴을 제작해 사용하면 파일 용량을 1MB 단위에서 수백 KB 단위로 획기적으로 줄일 수 있습니다.
트러블슈팅: 다크 모드에서의 시각적 보정 (Grade 축 활용)
실제로 프로젝트를 진행하다 보면 다크 모드에서 글자가 라이트 모드보다 미세하게 더 두꺼워 보이는 현상을 목격하게 됩니다. 이는 어두운 배경에서 밝은 글자가 빛 번짐 현상 때문에 더 팽창해 보이기 때문인데요. 가변 글꼴의 Grade(GRAD) 축을 지원하는 폰트를 사용하면 이 문제를 코드로 우아하게 해결할 수 있습니다.
Grade 축은 글자의 폭(Width)에 영향을 주지 않으면서 오직 두께감만 미세하게 조절하는 기능입니다. 라이트 모드에서는 font-variation-settings: 'GRAD' 0을 사용하고, 다크 모드에서는 이를 -50 정도로 낮게 설정하면 글자가 차지하는 공간은 그대로 유지하면서 시각적인 두께감만 보정되어 레이아웃이 틀어지지 않는 완벽한 다크 모드 타이포그래피를 완성할 수 있습니다.
[💡 에디터의 실무 팁: font-variation-settings는 가독성이 떨어지므로, 가급적 font-weight나 font-stretch 같은 표준 CSS 속성을 먼저 사용하고 표준 속성이 지원하지 않는 특수 축(Grade 등)에만 사용하는 것이 유지보수에 좋습니다.]
타이포그래피 토큰 시스템과 가변 글꼴의 결합
이제 이 기술을 디자인 토큰 시스템에 이식해 봅시다. 우리는 더 이상 font-weight-bold: 700과 같은 고정된 값에 갇힐 필요가 없습니다. 대신 디자인 시스템의 ‘모드’에 따라 가변적인 값을 주입하는 토큰 구조를 가질 수 있습니다.
| 토큰명 (Semantic) | 기본 설정 (Light) | 보정 설정 (Dark) | 비고 |
--ds-font-weight-bold |
700 | 680 | 다크 모드 가독성 보정 |
--ds-font-grade-ui |
0 | -20 | 빛 번짐 방지 |
--ds-font-width-condensed |
100% | 95% | 좁은 화면에서의 가변 너비 |
이런 식으로 토큰을 설계하면 개발자는 단순히 --ds-font-weight-bold만 사용하면 되고, 시스템 파이프라인(Style Dictionary 등)이 환경에 맞는 최적의 수치를 계산하여 배포하게 됩니다. 이것이 기술이 디자인을 자유롭게 하는 진정한 DesignOps의 모습입니다.
자주 묻는 질문(FAQ)
Q1. 가변 글꼴은 모든 브라우저에서 사용할 수 있나요? 현재 최신 브라우저(Chrome 62+, Safari 11+, Firefox 62+, Edge 17+)는 모두 가변 글꼴을 완벽히 지원합니다. 아주 오래된 레거시 브라우저를 대응해야 한다면 @supports (font-variation-settings: normal)를 사용해 분기 처리를 하거나 정적 폰트를 폴백(Fallback)으로 제공하면 됩니다.
Q2. 가변 글꼴 파일 하나가 너무 무겁지는 않나요? 보통 한글 가변 글꼴 서브셋 파일은 300~500KB 정도입니다. 만약 프로젝트에서 Regular와 Bold 두 가지만 쓴다면 각각 150KB인 정적 파일 두 개를 쓰는 것과 차이가 없지만, Semi-Bold 등 세 가지 이상의 스타일을 쓰는 순간 가변 글꼴의 효율이 급격히 좋아집니다.
Q3. 구글 폰트에서도 가변 글꼴을 지원하나요? 네, 구글 폰트(Google Fonts) 라이브러리에서 필터를 통해 가변 글꼴(Variable Fonts)만 따로 모아 볼 수 있습니다. Noto Sans KR 등 대중적인 폰트들도 가변 버전을 제공하므로 쉽게 도입해 보실 수 있습니다.