사용자 인터페이스 디자인의 타이포그래피 가이드

 

 

웹사이트든 모바일 애플리케이션이든 사용자 인터페이스를 디자인할 때 디자이너는 요소의 모든 디테일을 세심하게 고려합니다. 버튼, 입력 필드, 탭, 탐색 모음 등 시각적으로 매력적인 구성 요소를 만들기 위해 노력합니다.

이러한 구성 요소를 구현하려면 색상, 타이포그래피, 간격 및 그래픽을 신중하게 선택해야 합니다. 고려해야 할 요소가 너무 많기 때문에 디자이너가 UI에 적합한 요소를 선택하는 데 어려움을 겪는 것은 이해할 수 있습니다. 

UI 디자인에 잘 어울리는 타이포그래피를 선택하는 방법에 대해 살펴보겠습니다.

 

 

글꼴 - 유형 크기(Font - Type Sizes)

네 가지 글꼴크기를 사용합니다.

 

글꼴 크기를 선택할 때는 궁극적으로 플랫폼, 디자인 언어, 목적 및 대상 고객에 따라 달라지므로 엄격한 규칙은 없습니다.

 

제목 또는 제목

제목과 제목에는 24픽셀에서 36픽셀 범위의 큰 글꼴 크기를 사용합니다. 이렇게 하면 주의를 끌고 정보를 빠르게 전달하는 데 도움이 됩니다.

자막 또는 캡션

자막 또는 캡션에는 14px~18px 범위의 작은 글꼴 크기를 선택합니다. 이러한 구분은 주요 콘텐츠와 구분하는 데 도움이 됩니다.

본문 복사

가독성이 좋고 눈이 편안하게 텍스트를 따라 이동할 수 있는 충분한 공간을 제공하는 글꼴 크기를 선택합니다. 본문 카피에는 16픽셀에서 20픽셀 범위가 적합합니다.

입력 필드

입력 필드의 경우 텍스트를 읽고 입력하기 쉬운 글꼴 크기를 선택합니다. 입력 필드에는 16px~18px 범위가 적합합니다.

메타데이터

날짜, 시간, 작성자 이름, 작은 버튼 안의 텍스트와 같은 메타데이터의 경우 주요 콘텐츠를 압도하지 않는 작은 글꼴 크기를 사용하는 것이 좋습니다. 메타데이터에는 12픽셀에서 14픽셀 범위가 적합합니다.

 

핵심은 선택한 글꼴 크기가 대상 사용자가 읽기 쉽고 찾을 수 있도록 하는 것입니다. 이 가이드라인은 유용한 시작점을 제공하지만, 디자인 요구 사항과 선호도에 따라 자유롭게 글꼴 크기를 실험하고 조정할 수 있습니다.

 

 

색상(Color)

제목이나 내용을 구분하고 싶을 때는 글꼴 크기를 변경하는 것을 고려합니다. 하지만 색상을 변경하여 구분할 수도 있습니다.

 

제목과 본문 카피에 같은 색과 다른 색을 사용합니다.

 

이 두 가지 예는 옳고 그름을 증명하기 위한 것이 아니라 서로 다른 목적을 가지고 있습니다.

제목과 본문 카피에 모두 같은 색상을 사용한 왼쪽에서는 시각적 조화를 도모하고 콘텐츠를 더 쉽게 읽을 수 있도록 하는 것이 목적입니다.
제목과 본문 카피에 다른 색상을 사용하는 오른쪽에서는 시각적 위계를 만들고 제목과 본문 카피를 구분하기 위한 것입니다.

 

 

 

무게(Weight)

글꼴 무게는 위에서 언급한 색상 원칙에 따라 대부분 모든 곳에서 볼 수 있는 중요한 요소입니다. 또한 콘텐츠나 제목을 차별화하는 데 도움이 됩니다. 색상과 함께 사용하는 것을 고려하세요.

 

제목과 본문 카피 사이에 색상과 글꼴 굵기를 동일하거나 다르게 사용합니다.

 

 

이 두 가지 예는 앞서 언급한 색상 원칙 가이드와 유사합니다. 하지만 UX/UI 디자이너는 사용자 인터페이스와 사용자 경험이 사용하기 쉽고 친근한지 여부를 고려하고 결정할 수 있는 능력이 있습니다. 사용성 테스트를 수행하는 것은 필수이며 반복적인 디자인 프로세스입니다.

 

 

소문자 및 대문자

소문자는 거의 사용되지 않으며 항상 좋은 생각은 아닙니다. 하지만 소문자를 사용하는 데는 나름의 이유가 있어야 하며 사용자에게 자연스럽게 느껴져야 합니다.

대문자는 타이포그래피 믹스에서 흥미로운 다양성을 제공합니다. 소문자보다 더 자주 볼 수 있습니다.

 

소문자와 대문자 사용

 

이 예에서는 도메인 웹사이트에 대문자와 소문자를 사용합니다. 그러나 일반적으로 모든 도메인은 소문자로 되어 있습니다. 

 

 

최대 글자 수

특히 사용성 테스트가 널리 사용되는 모바일에서는 가독성을 위해 각 줄에 적절한 글자 수를 유지하는 것이 중요합니다. 각 줄은 9단어 또는 50~60자를 넘지 않는 것이 이상적입니다.

 

최대 글자 수 또는 단어 수와 줄 높이

 

이 예제에서는 각 줄의 글자를 최대화하고 줄 높이를 조정하여 단락의 가독성을 높이려고 합니다.

 

---

 

UX/UI 디자이너로서 우리가 중점을 두는 사용자 인터페이스 개선에는 타이포그래피의 올바른 사용을 고려하는 것이 포함됩니다. 글꼴 크기, 유형, 색상, 무게, 소문자 및 대문자, 적절한 줄 높이로 한 줄의 단어 수를 최대화할 뿐만 아니라 글꼴 크기, 유형, 색상, 무게, 소문자 및 대문자에도 주의를 기울여야 합니다. 이를 통해 UI의 외관, 스캔 가능성 및 가독성을 향상시킬 수 있습니다.

 

 

출처:

https://medium.com/design-bootcamp/typography-guide-in-user-interface-design-cd70d2590e85