Antigravity Agent
4.4 KiB
디자인 시스템의 타이포그래피 토큰 확장 및 최적화
📌 brief 시 Summary
디자인 시스템에서 타이포그래피 토큰은 폰트 패밀리, 크기, 굵기, 행간 등 시각적 텍스트 속성을 저장하는 핵심적인 구성 요소입니다 [1, 2]. 타이포그래피 토큰의 확장 및 최적화는 단순히 정적인 크기 목록을 만드는 것을 넘어, CSS의 clamp() 함수와 상대 단위를 활용해 기기의 뷰포트나 컨테이너 크기에 맞춰 자연스럽게 크기가 조절되는 유동적 타이포그래피(Fluid Typography)를 구축하는 과정입니다 [3, 4]. 이를 통해 다양한 디바이스 환경과 사용자의 접근성 요구 사항을 모두 충족하면서도 유지보수하기 쉬운 확장 가능한 프론트엔드 아키텍처를 구현할 수 있습니다 [5-7].
📖 Core Content
-
타이포그래피 토큰의 계층적 구조화 타이포그래피 토큰은 재사용성과 유지보수성을 높이기 위해 3단계 계층 구조로 관리됩니다 [8, 9].
- 전역 토큰(Global Tokens):
--font-size-sm,--font-size-xl과 같이 컨텍스트가 없는 원시적인 스케일 값을 정의합니다 [2]. - 시맨틱 토큰/별칭 토큰(Alias Tokens):
--font-heading-1,--font-body-regular등 특정 의도와 컨텍스트를 부여하여 전역 토큰을 참조합니다 [9, 10]. - 컴포넌트 토큰(Component Tokens): 컴포넌트에 특정하여 적용되는 토큰으로, 특정 컴포넌트의 스타일 조정을 가능하게 합니다 [8, 9].
- 전역 토큰(Global Tokens):
-
clamp()함수를 활용한 유동적 타이포그래피(Fluid Typography) 최적화 과거 반응형 웹에서는 뷰포트 크기에 따른 하드 중단점(Breakpoints)을 설정해 폰트 크기를 변경했으나, 이는 화면 전환 시 글꼴 크기가 급격히 변하는 문제(jarring jumps)를 발생시킵니다 [3]. 최신 반응형 디자인에서는 추가적인 중단점 없이clamp(최솟값, 선호값, 최댓값)함수를 사용하여 폰트 크기의 하단 한계선과 상단 한계선을 정해두고 뷰포트의 크기에 비례하여 매끄럽게 확장되도록 최적화합니다 [3, 5, 6]. 예시:h1 { font-size: clamp(1.5rem, 2vw + 1rem, 3rem); }[11] -
사용자 설정 존중 및 웹 접근성(WCAG) 보장 타이포그래피 최적화 시 가장 중요한 것은 사용자의 제어권을 뺏지 않는 것입니다. 폰트 크기를 설정할 때
px같은 절대 단위를 사용하거나vw,cqi와 같은 뷰포트/컨테이너 단위만 단독으로 사용하면, 사용자의 브라우저 기본 폰트 크기 설정이나 화면 확대/축소(Zoom) 기능이 무력화되어 접근성 지침(WCAG 1.4.4)에 위배됩니다 [12, 13]. 따라서clamp()내부에서rem이나em과 같은 상대 단위를 사용하여 사용자 기본 설정을 존중해야 합니다 [14]. 또한 텍스트 크기 확대 시 접근성을 유지하기 위해 최대 폰트 크기가 최소 폰트 크기의 2.5배를 초과하지 않도록 설계하는 '2.5x Rule'을 적용해야 합니다 [7, 14, 15]. -
pow()함수를 통한 수학적 스케일링(Mathematical Scaling) 다양한 폰트 크기 간의 관계를 정의하는 '타이포그래피 스케일'을 설계할 때, 최신 CSS 기능인pow()함수를 사용하면 서드파티 도구나 전처리기 없이도 CSS 내부에서 직접 수학적 비율을 계산하여 타이포그래피 스케일을 생성하고 손쉽게 확장할 수 있습니다 [16-18].
🔗 Knowledge Connections
- Related Topics: Design Tokens, Fluid Typography, CSS clamp(), Web Accessibility (WCAG)
- Projects/Contexts: 반응형 디자인, 디자인 시스템 개념, 실무에서 CSS 관리하는 방법
- Contradictions/Notes: 유동적 글꼴 크기를 만들기 위해 뷰포트나 컨테이너 상대 단위(
vw,cqi등)만을 단독으로 사용하는 것은 화면 크기에 따라 매끄러운 확장을 제공한다는 장점이 있으나, 브라우저 화면 확대(Zoom)를 시도하는 사용자의 의도를 무효화시키는 치명적인 단점이 있습니다. 따라서 사용자 친화적이고 유지보수 가능한 시스템을 위해서는 항상 베이스 픽셀(rem,em)과 결합한calc()또는clamp()구문을 사용해야 한다고 강조합니다 [13, 14, 19].
Last updated: 2026-04-26