<aside> 📎

참고 출처

1. Applying the type scale — Material Design 3 — 이 레슨에서 다루는 타입 스케일의 역할(display·headline·title·label·body)과 적용 기준의 공식 출처입니다.
2. Understanding typography — Material Design — 가독성, 자간(트래킹), 줄 길이 등 타이포그래피 기본 개념의 근거입니다. </aside>

앞 레슨에서 시각 위계를 만드는 여러 도구를 살펴봤습니다. 그중에서도 화면 위계를 가장 강력하게 좌우하는 것이 텍스트입니다. UI의 대부분은 글자로 이루어져 있고, 같은 문장도 크기·굵기·간격을 어떻게 다루느냐에 따라 읽기 쉬움이 크게 달라집니다. 이번 레슨에서는 텍스트를 시스템으로 다루는 방법을 익힙니다.

타이포그래피와 폰트 시스템

• 타이포그래피는 텍스트를 읽기 쉽고 위계가 분명하게 다루는 기술입니다. 폰트 자체보다 '어떻게 쓰느냐'가 핵심입니다.
• 잘 설계된 타이포그래피는 브랜드 인상을 전달하고 정보의 우선순위를 한눈에 보여 줍니다.

타이포그래피 기본 용어

• 먼저 기본 용어를 정리합니다.
  • 타입페이스(Typeface)와 폰트(Font): 타입페이스는 글자 디자인의 종류(예: Roboto), 폰트는 그 안의 특정 굵기·크기 묶음을 뜻합니다. 실무에서는 거의 혼용합니다.
  • 웨이트(Weight): 글자의 굵기(Regular, Medium, Bold 등). 굵기 차이만으로도 위계를 만들 수 있습니다.
  • 행간(Line height): 줄 사이 간격. 본문은 글자 크기의 약 1.5배가 읽기 편한 기준입니다.
  • 자간(Letter spacing / Tracking): 글자 사이 간격. 큰 제목은 좁게, 작은 텍스트는 약간 넓게 두면 가독성이 좋아집니다.

타입 스케일과 위계

• 글자 크기를 매번 임의로 정하면 화면마다 위계가 달라집니다. 그래서 역할 기반의 타입 스케일을 정해 두고 재사용합니다.
  • Material Design 3은 타입을 display, headline, title, label, body 다섯 가지 역할로 나누고, 각 역할에 large·medium·small 세 크기를 둡니다.
  • 역할로 이름을 붙이면 "이건 24px"가 아니라 "이건 title-large"처럼 의미 단위로 일관되게 쓸 수 있습니다.
• 예를 들어 화면 제목은 headline, 카드 제목은 title, 본문은 body, 버튼 글자는 label로 정해 두면 어느 화면에서나 위계가 동일하게 유지됩니다.

가독성 원칙

• 텍스트가 많은 UI일수록 가독성 규칙이 중요합니다.
  • 줄 길이: 한 줄에 약 60자 안팎이 읽기 편합니다. 너무 길면 다음 줄을 찾기 어렵고, 너무 짧으면 시선이 자주 끊깁니다.
  • 행간: 본문은 글자 크기의 약 1.5배. 너무 좁으면 답답하고 너무 넓으면 줄들이 따로 놀게 됩니다.
  • 굵기와 색 대비: 제목은 굵게, 보조 정보는 연한 회색처럼 굵기와 명도로 위계를 만듭니다.

폰트 선택과 페어링

• UI에서는 화면에서 잘 읽히는 산세리프(sans-serif) 계열을 기본으로 많이 사용합니다.
  • 영문에서는 Roboto(Material), San Francisco(Apple)가 시스템 폰트로 널리 쓰입니다.
  • 한글 UI에서는 Pretendard, Noto Sans KR 같은 산세리프가 자주 사용됩니다.
• 폰트 종류는 2~3개로 제한하고, 굵기와 크기로 변화를 주는 것이 일관성을 지키는 방법입니다.

요약 포인트

• 타이포그래피는 폰트 선택보다 텍스트를 읽기 쉽고 위계 있게 다루는 기술입니다.