폰트 크기를 어떻게 정해야 할 지 몰라서 고민해 본 적 있으신가요? 도대체 왜 이 폰트 값을 사용해야 하는 지 몰라 디자이너에게 질문했다면요? 그렇다면 잘 오셨습니다! 오늘은 디자인 시스템 내에서 폰트 시스템을 정의하는 방법을 알려드립니다.
폰트 시스템은 무엇인가요?
폰트 시스템은 서비스 전반에 사용되는 폰트에 부여한 계층 구조입니다. 폰트를 시스템화 해두는 이유는 화면을 만들 때, 사이즈 별로의 대응에 유리하게 만들기 위한 점도 있지만 가장 우선적으로는 가독성과 일관성입니다.
폰트의 계층 구조는 어떻게 정의하나요?
폰트 시스템을 정의할 때에는 계층 구조가 필요합니다. 명확히 말하면, 시각적 중요도를 결정하기 위한 크기와 굵기의 차이를 주는 것이 중요합니다. 이렇게 계층 구조를 만들어두면 서비스를 디자인하고 개발하는 과정에서의 시각적 위계를 잡기 수월합니다.
폰트 시스템은 단순히 16px, 20px과 같은 수치를 나열하는 것이 아니라 명확한 계층을 잡아 주어야 하는데, 이는 다음과 같습니다.
계층 구조
Display / Title : 브랜딩이나 큰 임팩트를 주는 영역
Heading (H1~H6) : 콘텐츠 섹션을 구분하는 주요 제목
Body : 일반적인 본문 텍스트
Caption / Lable : 작은 보조 텍스트나 라벨각 계층에 주로 어떤 폰트 사이즈를 쓰는 지 궁금하시다면, 다양한 디자인 시스템을 뜯어보면서 직접 서비스에 적합한 사이즈를 학습하시는 것을 추천드립니다.
폰트의 네이밍은 어떻게 정의하나요?
네이밍의 경우도 상당히 중요한 역할을 합니다. 주로 다음과 같은 방법이 있습니다.
폰트 시스템 네이밍
역할 기반 네이밍 : heading-lg, body-sm, caption-xs
의미 기반 네이밍 : title-primary, text-secondary
단, pretendard_16, text_16과 같은수치 기반의 네이밍은 유지 보수에 불리하기에, 지양하는 것을 권합니다.중요한 것은 어디서 쓰이는 지, 즉 역할을 기반으로 네이밍하는 것이 중요합니다. 그래야 디자이너와 개발자가 빠르게 반영할 수 있기 때문입니다. 특히 기존의 수치값이 아니라 사이즈 값(lg, md, s 등)을 사용하는 이유는 직관성을 가지고 있고, 컴포넌트의 사이즈 값에 따라 연결해 매칭할 수도 있기 때문입니다.
이때 lg, md, s, xs는 라지, 미디움, 스몰과 같은 사이즈를 약어로 표현한 것입니다.
실제 작업한 폰트 네이밍과 그 사이즈 정의
폰트를 정의할 때에는 스타일과 배리어블 중 어떤 것을 사용해야 하나요?
피그마에서 폰트를 정의할 때에는 두 가지 접근이 있습니다.
1. Style 기반
2. 배리어블 기반배리어블 값이 있음에도 텍스트의 경우 주로 style을 이용해서 정의하게 되는데요. 이는 다음과 같은 이유가 있습니다.
배리어블은 아직 의미가 부여되지 않은 숫자, Hex값과 같은 원시값을 저장합니다. 그리고 이를 Primary, Secondary와 같은 역할에 매핑하면서 시맨틱이라는 의미 부여 단계를 만듭니다. 주로 시맨틱에 정의된 값을 컴포넌트에 주로 매칭합니다. 하지만 폰트의 경우, 원시값 자체만으로는 폰트의 사이즈와 행간, 자간정도만 정의할 수 있습니다. 그렇기에 의미가 정의되지 않습니다. 이는 해당 폰트가 어디에 사용되는 지 알 수 없다는 문제를 불러일으킵니다.
그렇기에 디자이너는 폰트 사이즈나 행간, 자간과 같은 값은 배리어블로 정의해뒀더라도, 이를 다시 스타일로 정의하는 작업을 진행하는 것입니다.
폰트 시스템을 정의해두면 어떤 게 좋을까요?
폰트 시스템을 정의하는 일은 귀찮고도 많은 분석력을 요합니다. 어떤 사이즈가 가장 적절하고, 모든 기기에 잘 대응하고 있는 지 확인해야 하니까요. 하지만 한 번 본인만의 최적의 시스템을 만들어둔다면, 다양한 방법으로 응용 가능한 것도 폰트 시스템입니다.
다음에는 화면의 기초가 되는 패딩, 마진, 스페이싱 시스템에 대해서 소개하겠습니다.
감사합니다.
