UXUI #29
안녕하세요. 이번에는 iOS 타이포그래피에 대해 중요한 부분들을 알아볼게요. iOS의 기본 서체인 ‘San Francisco’ 및 ‘New York’에 대한 살펴보고, SF Pro Display, Text, Compact의 차이점부터 다이나믹 타입 등 iOS 앱 디자인에 필요한 폰트 스타일과 주의사항도 다뤄볼게요.
iOS 전용 서체
우선, iOS에서 기본적으로 제공되는 폰트에 대해 알아보겠습니다. iOS에서는 San Francisco 폰트를 기본적으로 제공하며, macOS에서도 사용되는 폰트입니다. San Francisco 폰트는 Retina 디스플레이에서 잘 보이도록 최적화된 폰트이며, 다양한 굵기와 스타일을 가지고 있어서 텍스트의 다양한 표현을 가능하게 합니다.
SF Pro Display / Text / Compact
- SF Pro Display: 대형 화면에 적합한 폰트로, 굵기와 대조가 높아 텍스트를 더욱 강조할 수 있습니다. iOS에서는 앱 아이콘, 네비게이션 바 및 탭 바에 주로 사용됩니다.
- SF Pro Text: 작은 텍스트에 적합한 폰트로, 가독성이 뛰어나며, 선명한 글자와 높은 대조로 텍스트를 더욱 선명하게 표현할 수 있습니다. iOS에서는 텍스트 필드, 버튼, 라벨 등에 주로 사용됩니다.
- SF Compact: 공간이 제한된 화면에 적합한 폰트로, 적은 공간에 많은 내용을 담을 수 있도록 디자인되었습니다. iOS에서는 앱 아이콘 라벨, 도구 모음 및 콘텐츠 목록 등에 주로 사용됩니다.
이 외에도 round나 mono체도 있습니다.
New york
세리프 체입니다. 적당한 굵기와 간격으로 각 글자를 깔끔하게 표현하며, 특히 데스크톱 인터페이스와 같은 큰 화면에서 뛰어난 가독성을 보여줍니다. 또한, New York는 인쇄물에서도 좋은 효과를 발휘하며, 여러 글자의 레이아웃이 필요한 문서 작업에서도 활용할 수 있습니다.
https://developer.apple.com/design/human-interface-guidelines/foundations/typography/
다이나믹 타입
애플의 다이나믹 타입은 사용자가 iOS 디바이스의 텍스트 크기를 쉽게 조절할 수 있게 해주는 기능입니다. 이 기능을 통해 사용자는 텍스트 크기를 즉시 조정하여 텍스트를 더욱 쉽게 읽을 수 있습니다.
다이나믹 타입은 7개의 서로 다른 텍스트 크기 옵션을 제공하며, 이를 이용하여 사용자가 선호하는 텍스트 크기를 선택할 수 있습니다. 따라서 앱 개발자들은 이러한 다이나믹 타입을 고려하여 앱의 텍스트 크기와 레이아웃을 디자인해야 합니다.
폰트 스타일
- Large Title
- Title
- Headline
- Body
- Callout
- Subhead
- Footnote
- Caption
주의사항
1. 인터페이스에 사용하는 서체의 수 최소화
너무 많은 다른 서체를 혼합하면 정보 계층이 모호해지고 가독성이 떨어질 수 있습니다.
2. 다양한 상황에서 가독성 테스트 진행
예를 들어, 텍스트 크기를 조정하는 것 외에도 사람들은 밝은 햇빛 아래에서 귀하의 콘텐츠를 밖에서 보거나, 움직이는 동안 힐끗 보거나, 멀리서 볼 수 있습니다. 테스트 결과 일부 텍스트가 읽기 어렵다면 텍스트 또는 배경 색상을 수정하여 대비를 높이거나 더 큰 글꼴 크기를 사용하거나 시스템 글꼴과 같이 최적화된 가독성을 위해 설계된 글꼴을 사용하는 것이 좋습니다.
3. 일반적으로 가독성을 유지하려면 가벼운 글꼴 두께 지양
예를 들어, 시스템 제공 글꼴을 사용하는 경우 일반, 중간, 반굵게 또는 굵게 글꼴 두께를 사용하고 특히 텍스트가 작은 경우 보기 어려울 수 있는 초경량, 가늘게 및 가벼운 글꼴 두께를 사용하지 마십시오.
