디자인 시스템의 Typography 계층구조
핵심 아이디어
디자인 시스템은 폰트 선택으로 시작하여 크기, 색상, 줄 간격 등을 통해 시각적 계층구조를 확립하고, 이를 다양한 컴포넌트에 일관되게 적용합니다.
요약
폰트 파운데이션은 font family, weight, fallback 옵션으로 구성되며, 계층구조는 body text(small/medium/large), heading level, text color(primary, secondary, interactive, disabled, error) 등으로 세분화됩니다. 이러한 타이포그래피 규칙은 Header, Article 같은 특정 컴포넌트에 적용될 때 추가적인 맥락과 규칙을 가지며, 시스템은 개발자가 커스텀 컴포넌트를 만들 때 사용할 수 있는 mixin과 같은 도구를 제공해야 합니다.
견해
타이포그래피는 단순히 폰트 선택을 넘어 전체 디자인 시스템의 시각적 언어와 사용성의 핵심 요소이며, UI component의 타이포그래피와 long-form reading을 위한 타이포그래피는 다른 접근 방식이 필요합니다.