UX/UI 타이포그래피

Source: Dev.to

타이포그래피란 무엇을 의미합니까?

• 어떤 글꼴이 사용되는가
• 어디에서 얼마나 크게 표시되는가
• 얼마나 굵게 표시되는가
• 줄 간격
• 색상 및 대비
• 텍스트 간의 계층 구조

사용자가 페이지를 열었을 때:

• 무엇을 가장 먼저 보는가
• 그 다음 무엇을 읽는가
• 전혀 읽지 않는 것은 무엇인가

이 모든 것을 타이포그래피가 해결합니다.

왜 타이포그래피가 UX에 중요한가?

사용자는 읽기 위해 온다. 그는 다음을 읽는다:

• 제품 이름
• 버튼 텍스트
• 오류 메시지
• 가격

읽기 어려우면, 디자인이 아름다워도 의미가 없다. UX에는 한 가지 규칙이 있다:

“읽을 수 없으면, 작동하지 않는다.”

폰트 선택: 적을수록 좋다

신입 디자이너들의 가장 큰 실수는 많은 폰트를 사용하는 것이다. 실제로는:

• 주요 폰트 1개
• 보조 폰트 1개

UX/UI에서 가장 많이 사용되는 폰트:

• Inter
• Roboto
• SF Pro
• Poppins

이유는 간단하다: 화면에서 읽기 쉽고, 아름다워서가 아니라 편리하기 때문이다.

타이포그래피의 핵심 — 계층 구조

제목, 본문, 보조 텍스트가 모두 동일하게 보이면 사용자는 혼란스러워한다.

간단한 예:

모든 것을 볼드 처리하는 것은 ‘베스트 프랙티스’가 아니다.

줄 높이와 간격

• 보이지 않지만 느껴진다.
• 대부분이 주목하지 않는 부분.

너무 촘촘한 텍스트:

• 전문적으로 보이지 않는다
• 읽기 어렵게 만든다

본문 텍스트에 대해

line-height는 보통 **140 %–160 %**이다. 이는 텍스트에 ‘우아함’을 부여한다.

색상과 타이포그래피

• 주 텍스트가 너무 검정색이면 안 된다.
• 보조 텍스트가 지나치게 옅어서는 안 된다.
• 대비가 충분히 확보되어야 한다.

아름답지만 읽히지 않는 텍스트는 디자인 오류다. UX에서 색상은 읽기 용이성을 위해서도 사용되며, 단순 장식용이 아니다.

버튼 및 UI 요소의 타이포그래피

버튼 내부 텍스트

• 명확하게
• 짧게
• 이해하기 쉽게

따라서:

• 너무 작아서는 안 된다
• 너무 가벼운 굵기는 안 된다

사용자는 무엇을 클릭하고 있는지 명확히 알아야 한다.

타이포그래피 시스템: 전문 단계

실제 프로젝트에서는 타이포그래피가 임의적이지 않다. 다음 스타일들은 미리 정의되고 디자인 과정에서 변경되지 않는다:

• Heading styles
• Body styles
• Caption styles
• Button text styles

이것은:

• 디자인을 일관되게 만든다
• 개발자가 이해하기 쉽다
• 제품이 성장해도 문제가 발생하지 않는다

결론

UX/UI에서 타이포그래피는:

• 장식이 아니다
• 2차적인 것이 아니다
• ‘나중에 고치자’는 디테일이 아니다

잘못된 타이포그래피의 경우

• 좋은 레이아웃도 나빠 보인다
• 사용자가 피로해진다
• 제품이 신뢰성을 잃는다

올바른 타이포그래피는

• 디자인을 이해하기 쉽게 만든다
• 사용자를 강요하지 않는다
• 전문적인 인상을 남긴다

UX에서는 때때로 가장 강력한 디자인 결정은 적지만 명확한 텍스트이다.

원한다면 이 글을 영어로 dev.to 포맷에 맞춰 실 UI 예시를 더하거나 “주니어 UX/UI 디자이너를 위한 타이포그래피 체크리스트” 형태로 만들 수 있습니다. 이 주제는 깊이가 있지만, 바로 그 깊이가 디자이너를 차별화합니다.