더 나은 모바일 앱 타이포그래피 설계 가이드

출처: https://uxdesign.cc/guide-for-designing-better-mobile-apps-typography-5796495ef86f

Guide for designing better mobile apps typography

지난 수십 년 간 인터넷의 급속한 발전 덕분에, 인터페이스의 타이포그래피는 디지털 세계로의 전환의 주요 단계를 거쳤다. 그러나 모바일 앱의 디자인은 여전히 새로운 물결이다.

 

이 글에서는 인쇄와 디지털 환경에서 모두 사용할 수 있는 타이포그래피의 일반적인 개념에 대해 이야기 하지 않겠다.

대신 모바일 앱 디자인에서 타이포그래피에 활용할 수 있는 뉘앙스와 자름에 초점을 맞출 것이다.

 

앱 개발은 운영체제 기능과 매우 밀접하게 관련되어 있기 때문에 안드로이드용 재료설계와 ios용 휴먼 인터페이스 가이드라인의 개별 권장사항을 자주 참고할 것이다. 

 

그럼 시작하도록 한다.

 

Minimum Font Size

이동 중에 모바일 앱이 자주 사용되는 것은 모두가 아는 사실이다. 화면 크기, 태양으로부터의 눈부심, 사용자들 사이의 다양한 시각적 장애와 관련된 이러한 제한에 더해, 스마트폰의 최상의 화면 품질은 항상 아니지만, 신체 텍스트의 최소 크기를 지배하는 첫 번째 지상 규칙을 얻게 될 것이다.

 

애플은 휴먼 인터페이스 가이드라인에서 본문 텍스트의 최소 크기를 17pt로 설정할 것을 권고하고 있다.

 

Google은  머테리얼 디자인 가이드라인에서 본문 텍스트의 최소 크기를 16sp로 설정할 것을 권고 하고 있다.
(ios의 16pt와 동일하다)

 

시스템의 권장 사항이 기본 글꼴과 비교하여 제공된다는 점을 고려할 필요가 있다. 현재 안드로이드와 샌프라시스코의 로보토 폰트, ios의 뉴욕 폰트다. 다른 서체의 최소 글꼴 크기는 그 특성에 따라 다를 수 있다. 예를 들어 스트로크가 매우 얇은 글꼴은 본문 텍스트에 더 큰 크기를 요구한다.

 

또한 WCAG 2.0 표준은 볼드 텍스트의 최소 글꼴 크기인 18pt와 14pt를 따를 것을 권장한다.

 

예외는 다양한 소형 캡션일 수 있다. 그러나 사용자가 읽을 수 없는 경우, 사용자의 인터페이스 이해에 큰 영향을 주지 않아야 한다는 점을 명심해야 한다.

 

추천사항

앱 설계의 본문 텍스트에 16pt 미만의 글꼴 크기를 사용하지 마십시오 본문 텍스트에 적합한 크기는 16pt에서 18pt 사이일 것이다.

 

🤓 Pro-Tip

ios에서 앱의 타이포그래피에 대한 접근성을 높이기 위해 Dynamic Type Size를 적용하면 된다. 앱 내에서 이 기술을 사용하면 시스템 설정에서 글꼴 크기를 늘리거나 줄이는 사용자가 이러한 설정에 따라 앱의 인터페이스를 볼 수 있다.

 

Typography - Visual Design - iOS - Human Interface Guidelines - Apple Developer

헤드라인 사이즈

최근 몇 년 동안 디지털 타이포그래피에 큰 헤딩을 사용하는 것이 큰 인기를 끌고 있다. 그것들은 본문과 대조되어 보이고 페이지의 앵커 요소가 된다. 그러나 모바일 앱에서 큰 헤더를 사용할 때는 매우 주의해야 한다. 종종 모바일 앱에서 헤딩에 큰 크기를 사용하는 것은 헤드라인을 3~4줄까지 늘린 반면 한 줄에 1,2단어를 포함하는 결과를 낳는다. 그런 머리글은 지저분해 보이고 읽기 어렵다.

 

추천사항

본문 텍스트와 대조되는 헤드라인 크기와 평균 2~3행의 피팅을 모두 선택하십시오

🤓 Pro-Tip

눈썹 머리글을 이용해 머리글을 짧게 하는 경우도 있다.

How You Can Aid User Scanning by Using Eyebrow Headlines

대비

또한 모바일 앱을 사용하는 특징 중, 당신의 배경과 텍스트 대비율은 매우 중요한 매개변수 입니다.

 

추천사항

- WCAG 2.0 대비 표준 준수

- 이미지 위에 배치하는 텍스트의 대비가 충분한지 확인하십시오

- 밝은 배경과 어두운 배경에 텍스트를 배치하기 위한 두 가지 옵션 제공

 

🤓 Pro-Tip

Sketch, Adobe XD 및 Figma 용 Stark 플로그인(또는 다른 동일한 플로그인) 또는 온라인 대비 테스트 도구를 사용하여 텍스트 대비 상태를 확인하십시오

 

시스템 폰트

현재 ios의 경우 샌프라시스코와 뉴욕 두 개의 시스템 글꼴을 사용할 수 있다. 그리고 Roboto 폰트는 요즘 안드로이드의 시스템 폰트다. 시스템 글꼴을 사용하면 앱 설계가 운영 체제와 더 일관되게 된다. 그러나 시스템 글꼴만 사용하면 앱에 대한 고유한 모양을 얻을 수 없다.

 

추천사항

억양을 추가하는 가장 쉽고 일반적인 방법이며 모바일 앱의 타이포그래피에 대한 독특한 모양은 본문 텍스트와 다양한 컨트롤에 대한 시스템 글꼴과 제목에 대한 기본 글꼴이 아닌 글꼴을 사용하는 것이다. 이 조합은 항상 흥미롭고 신선해 보일 것이다.

 

아래의 서비스 중 하나를 사용하면 흥미로운 글꼴 쌍을 선택 할 수 있다.

 

Fontjoy - Generate font pairings in one click

 

FontPair helps you pair Google Fonts together.

Fonts In Use – Type at work in the real world.

🤓 Pro-Tip

Apple 시스템 글꼴은 Apple 에코시스템 제품(ios, macOS 등)에서만 사용 할 수 있다는 점에 유의하세요. 구글의 Roboto 폰트는 어떤 운영 체제에서도 사용할 수 있습니다. 두 플랫폼 모두 하나의 앱을 설계할 때 염두에 두십시오

상용글꼴

조만간, 많은 디자이너들은 시스템이나 무료 폰트가 특정 프로젝트에 대한 그들의 요구를 충족시킬 수 없다는 것을 알게 된다. 그리고 나서 그들은 상업적인 글꼴을 선택하는 과제에 직면하게 된다. 보통 모든 큰 어려움과 연관된 것은 상업적인 글꼴의 선택이다. 앱 사용을 위한 글꼴과 데스크톱 또는 웹 라이센스의 가격 차이는 여러분에게 불쾌한 놀라움을 제공 할 것이다. (특히 이전에 이 라이센스를 구입하지 않은 경우)

예를 들어 데스크톱 또는 웹의 경우 하나의 글꼴 스타일 FF DIN의 라이센스는 95달러, 앱 myfonts.com(myfonts.com의 가격)은 950달러입니다.

 

추천사항

사용자 정의 글꼴을 앱 설계에 통합하기로 결정 한 경우 다음 사항을 고려해야 한다.

- 라이센스의 모든 뉘앙스를 배우십시오. 글꼴 분배 조건이 크게 다를 수 있음

- 작은 크기의 가독성과 같은 글꼴의 기술적 뉘앙스를 모두 학습

- 향후 귀사의 제품이 어떻게 확장될지에 대해 생각해 보십시오. 예를 들어, 선택한 글꼴이 키릴 문자를 지원하지 않는 것으로 나타날 수 있다.

- 서체면에 충분한 수의 가중치 또는 스타일이 있는지 확인하십시오

🤓 Pro-Tip

앱에 대한 글꼴을 직접 검색하십시오. 그래서 당신은 라이선스에 많은 돈을 절약할 수 있고 더 흥미로운 스타일을 찾을 수 있다. 아래, 예를 들어, 내가 가장 좋아하는 유형 주조 공장의 몇 가지 링크를 제시한다.

 

Swiss Typefaces

 

https://commercialtype.com/nocrawler.html

 

TypeTogether | High quality fonts and custom type design

 

Klim Type Foundry

 

Colophon Foundry

 

Pangram Pangram Foundry — Free to Try Quality Fonts and Typefaces

무료폰트

요즘은 상업적인 글꼴만큼 좋은 무료 글꼴이 점점 많아지고 있다. 만약 당신이 자유 글꼴을 선택한다면 당신은 디자인에 있어서 품질이나 독특함을 희생시키지 않고 불필요한 비용에서 프로젝트를 구할 수 있을 것이다.

 

추천사항

무료 폰트를 선택할 때는 상업용 폰트를 살 때와 같은 뉘앙스를 고려해야 한다. 예를 들어, 내가 좋아하는 무료 글꼴 사이트와 서체의 링크를 제공한다.

 

Google Fonts

 

Inter font family

 

Fonts - Fontfabric™

 

 

IBM Plex

베이스라인

우리는 종종 전형적인 상황을 관찰 할 수 있다. 설계 도구와 모바일 운영 체제 내부의 텍스트 렌더링 차이 때문에 텍스트 블록과 다른 인터페이스 요소 사이의 여유도는 시각적으로 다를 수 있다. 이러한 현상을 방지하기 위해 기준선에 상대적인 모든 여유를 고려할 수 있다. 이 접근 방식은 앱에서 레이아웃과 구현 사이의 적합성을 극대화한다. "Android는 현재 기준 스페이스에 대한 전체 지원 방법을 가지고 있지 않음"

 

추천사항

인터페이스의 모든 텍스트 요소에 대한 기준선을 사용하는 것은 어렵고 비용이 많이 들 것이다. 따라서 특히 정밀도가 중요한 요소에 대해서는 이 접근법을 사용 할 것을 권고한다.

 

공백 및 여백

모바일 기기는 화면 크기가 매우 제한적이므로 하나의 가시화면 내에 가능한 한 많은 텍스트를 맞추려고 할 것이다. 텍스트 블록 사이의 여택을 줄임으로써 공백을 희생할 필요는 없다. 이것은 다른 텍스트 스타일과 블록들 사이의 계층구조를 깨뜨리고 텍스트를 읽기 어렵게 만들 것이다.

 

추천사항

내용의 일부가 접힘 위에 오도록 레이아웃을 구성하여 사용자에게 더 많은 콘텐츠가 있음을 보여주고 스크롤 하도록 권장한다.

 

그리고 잊지말자

 

<Learn the rules like a pro, so you can break them like an artist - Pablo Picasso>

프로처럼 룰을 익혀 예술가 처럼 룰을어길 수 있도록 - 파블로 피카소