사용자 인터페이스(UI) 디자인하기 위한 최종 가이드 - 타이포그래피

안녕하세요 찐망고입니다.

오늘도 출처가 있는 포스팅을 번역해보도록 하겠습니다.

 

타이포그래피는 다른 시각 언어보다 더 구체적이고 정확하게 정보를 전달하는 언어입니다. 
아이콘이나 이미지는 물건이나 풍경을 표현하는 데 좋은 방법이 될 수 있지만, 

텍스트는 행동이나 개념을 표현하는 데 더 효과적입니다. 

동일한 문화 내에서는 의미를 확실히 전달하는 가장 많이 사용되는 시각적 요소입니다.

디지털 기기에서는 타이포그래피가 중요한 목적을 제공합니다

정보를 전달하고 행동을 유도하는 것입니다.

사용자의 행동이 비즈니스와 직접적으로 연결된 디지털 제품에서는 좋은 타이포그래피가 중요합니다.

이 글에서는 한글 타이포그래피의 디지털 제품에서의 사용을 예제와 함께 요약하였습니다.

 

Font

글꼴은 일관된 규칙으로 디자인된 그룹으로, 서체나 글꼴 패밀리와 같은 다양한 명칭으로 불립니다. 

가독성, 명료성, 심지어 읽는 방식까지도 글꼴의 종류에 따라 다양하게 달라지기 때문에, 

불필요하게 주의를 산만하게 하지 않도록 하기 위해 하나의 글꼴을 사용하는 것이 권장됩니다.

 

Font

 

 

 

 

Weight

서로 다른 시각적 계층을 표현하기 위해, 서로 다른 굵기를 제공하는 글꼴을 사용하세요.

블랙, 볼드, 세미볼드, 미디움, 레귤러, 라이트 등이 있으며,

글꼴의 굵기를 이용하여 표현되는 내용들 중에서 가장 중요한 정보부터

독자에게 가장 중요하지 않은 정보까지 중요도에 따라 계층을 나타냅니다.

 

Weight

 

 

 

 

Color

사용자가 텍스트를 빠르고 정확하게 이해할 수 있도록 충분한 대비를 제공하세요. 

서비스에서는 보통 흰 배경 위에 검은 텍스트나 버튼 안에 텍스트를 사용하는 경우가 많으며, 

최소한 WCAG에서 권장하는 4.5:1의 대비를 제공하고 가능한 한 많은 대비를 제공해야 합니다.

 

Color

 

 

 

Height

줄 간격은 텍스트 줄들 사이의 간격을 말합니다. 

정보들이 작은 공간에 섞여 있을 때는 인간의 눈이 정보를 식별하기 어렵기 때문에 가능한 한 여백을 주어야 합니다. 

텍스트의 상단과 하단 줄에는 서로 붙어있는 대신 페이지가 아닌 줄처럼 보이도록 충분한 공간을 주어야 합니다. 

보통 글꼴 크기의 1.6배 x 1.6배를 권장합니다.

 

Line Height

 

 

 

Letter Spacing

자간은 문자들 사이의 간격을 말합니다. 

줄 간격과 마찬가지로, 관련 정보들이 너무 멀리 또는 너무 가까이 있으면 정보를 식별하기 어렵기 때문에 

적절한 케링을 설정해야 합니다. 

글꼴 크기가 커질수록 문자 사이의 간격이 멀어지므로 간격을 줄여야 합니다. 

일반적으로 16pt~17pt의 본문 텍스트에는 약 -0.3의 자간을 주는 경향이 있습니다.

 

Letter Spacing

 

Alignment

텍스트 줄 맞춤에는 다섯 가지 유형이 있습니다. 

중앙, 양끝, 오른쪽 끝, 왼쪽 끝, 인터레이스가 있으며, 보통 왼쪽 끝과 중앙 맞춤을 많이 사용합니다.

 3~4줄 이하의 텍스트는 중앙 맞춤이 더 읽기 쉽지만, 5줄 이상인 경우 왼쪽 맞춤이 더 읽기 쉽습니다.

Alignment

Library

글꼴의 특성을 활용하여 다양한 시각적 기법을 사용할 수 있지만, 

새로운 방법을 사용할 때마다 전체가 관리하기 어려워집니다. 

그래서 글꼴 디자인 시스템이 필요합니다.

이는 일관된 규칙으로 시각적 기법을 유지하고, 전반적인 일관성을 유지하며,

사용자가 균일한 리듬을 느낄 수 있도록 도와줍니다.

이름은 다르지만 비슷한 개념으로 나뉘며, 보통 Display, Headline, Body, Caption으로 구분됩니다.

글꼴 크기는 텍스트에 따라 결정되며,

스마트폰, 태블릿, 노트북, PC, TV, 벽면 스크린과 같은 다양한 매체에 따라 텍스트 크기가 다양합니다.

 

Library

Digital Device Font (for Korean)

다양한 환경에 최적화된 한글 글꼴은 제한적입니다. 

일반적으로 주요 디지털 기기에서 제공하는 기본 글꼴을 사용하며, 

주요 한글 글꼴로는 iOS 환경에서 사용하는 애플 SD 고딕 네오, 

삼성 갤럭시 기기에서 사용하는 삼성원, 

안드로이드 기반 기기에서 사용하는 소스 산스, 

그리고 네이버의 대표적인 웹 서비스에서 사용하는 나눔 고딕이 있습니다.

 

Digital Device Font (for Korean)

 

글을 그대로 번역해 오다보니 ㅎ 

안드로이드도 네이버도 기본적으로 시스템 폰트를 사용하고 있습니다.

 

 

 

참고사이트

Ultimate Guide for a Good UI: Typography