[아티클] 읽는 사용자: UI 텍스트는 리듬처럼 보여야 한다

 

1. 주제

 

읽는 사용자: UI 텍스트는 리듬처럼 보여야 한다.

02화 읽는 사용자: UI 텍스트는 리듬처럼 보여야 한다

 

2. 내용 요약

 

리듬감 있는 UI 텍스트 만드는 6가지 원칙

1. 8pt 그리드 시스템
   : UI 요소의 간격을 8의 배수로 정리
   예: 텍스트 간 간격, 버튼 마진 등 → 일관된 시각 리듬 형성
2. 베이스라인 그리드(Baseline Grid)
   : 텍스트 줄 간격을 일정하게 유지
   예: 폰트 16px → 줄간격 24px → 텍스트 정렬의 통일성
3. 행간(Line height)은 최소 150% 이상
   : 기본 행간은 폰트 크기의 1.5배 → 가독성 향상 & 시각 피로도 감소
4. 텍스트 계층 구조 명확히
   : H1 → H2 → 본문 → 캡션 등 폰트 크기/굵기 조절로 정보의 중요도 전달 → 사용자의 스캔 흐름 유도
5. 화이트스페이스(Whitespace) 적극 활용
   : 텍스트와 요소 간 여백은 8pt 기준 유지 → 읽기 쉬운 UI 구조, 정보 그룹핑에 도움
6. 서체 고를 때 X-Height & 스타일 고려
   : X-Height가 높을수록 작은 글자도 가독성이 좋음
   같은 폰트 패밀리나 유사 스타일 조합 추천 → 작은 글씨도 선명하게, 리듬 유지

 

 

3. 코멘트

a. 좋았던 점

• 서체 선택 시 고려해야 할 점들을 배웠다. 지금은 분위기나 스타일이 유사한 조합을 찾기 어려워서, 추천된 폰트(Inter, Roboto, …)부터 많이 써보면서 감각을 익혀보면 좋을 것 같다.
• 특히 애플의 메모 앱 인터페이스 사례를 통해 앞에서 배운 원칙이 어떻게 적용되는지 확인할 수 있어서 유익했고, 실제로 눈에 보이니 더 와 닿았던 것 같다.
• 지금까지는 사용자가 서비스에 대해 느끼는 심미성이나 사용성의 균형을 맞추는 게 더 중요하다고 생각했는데, 타이포그래피 리듬을 설계하는 디테일이 서비스 완성도에 얼마나 큰 영향을 미치는지 새롭게 배울 수 있었다.
• 텍스트 계층 구조의 중요성을 배웠다. 나중에 실습할 때 H1, H2, 본문 등을 시각적으로 잘 구분해서 자연스러운 읽기 흐름을 유도하는 연습을 해야겠다고 생각했다.

 

b. 아쉬웠던 점

• 아직 직접 타이포그래피 리듬과 관련된 실습을 해보진 않아서 솔직히 말하면 지금 당장은 크게 체감되진 않는다. 하지만 나중에 실습할 때, 이 글을 다시 보면 도움이 될 것 같다. (8pt 그리드나 베이스 라인 정렬 등을 직접 적용해보는 게 중요할 것 같다.)

 

c. 알게 된 개념

• 8pt Grid, Baseline Grid 차이점
  • 8pt Grid: UI 요소 간 간격을 균일하게 정렬(텍스트 포함한 UI 전체 대상) → 전체적인 레이아웃 정리
  • Baseline Grid: 텍스트 간 줄 간격을 일정하게 정렬(제목, 본문, 캡션 등 전 타이포그래피 대상) -> 텍스트 간격 조정해서 일관된 타이포그래피 리듬 만듦
• UI 텍스트 → 리듬감 있게 보여야 함
  • 사용자는 텍스트를 ‘읽는 것’ 보다 ‘스캔’하기 떄문에 가독성과 시각적 흐름을 고려한 설계가 핵심
  • 잘 설계된 타이포그래피는 사용자가 필요한 정보를 빠르게 인식할 수 있도록 도움