UI Typography Guide

UI 타이포그래피 기본 원칙

UI 타이포그래피가 중요한 이유

UI 디자인에서 타이포그래피는 사용자 경험, 가독성, 애플리케이션에 대한 전반적인 인식에 직접적인 영향을 미칩니다. 좋은 타이포그래피는 사용자를 인터페이스로 안내하고 사용성을 향상시킵니다.

가독성 우선

UI 폰트는 스타일보다 가독성을 우선시해야 합니다. 사용자는 노력 없이 정보를 빠르게 스캔하고 이해할 수 있어야 합니다.

명확한 문자 구분
적절한 줄 간격
좋은 대비 비율
적합한 폰트 크기

일관성

인터페이스 전체에서 일관된 타이포그래피를 유지하여 통합된 사용자 경험을 만드세요.

일관된 폰트 패밀리
균일한 크기 스케일
표준화된 간격
예측 가능한 계층

UI용 폰트 선택

UI용 산세리프 폰트

산세리프 폰트는 깔끔한 외관과 화면에서의 뛰어난 가독성으로 인해 UI 디자인에 일반적으로 선호됩니다.

특징:

깔끔하고 현대적
뛰어난 화면 가독성
작은 크기에서도 좋음
넓은 언어 지원

UI에서의 폰트 굵기

다양한 폰트 굵기를 사용하여 계층을 만들고 중요한 정보를 강조하세요.

Light (300)

보조 텍스트, 캡션

Regular (400)

본문 텍스트, 주요 콘텐츠

Bold (700)

제목, 강조

타이포그래피 스케일

반응형 타이포그래피 스케일

데스크톱 스케일

H1: 48px / 56px 줄 높이
H2: 36px / 44px 줄 높이
H3: 24px / 32px 줄 높이
본문: 16px / 24px 줄 높이
작은 텍스트: 14px / 20px 줄 높이

모바일 스케일

H1: 32px / 40px 줄 높이
H2: 28px / 36px 줄 높이
H3: 20px / 28px 줄 높이
본문: 16px / 24px 줄 높이
작은 텍스트: 14px / 20px 줄 높이

가독성 최적화

줄 길이

가독성을 위한 최적의 줄 길이는 한 줄당 45-75자입니다. 이는 눈의 피로를 방지하고 읽기 속도를 향상시킵니다.

가이드라인:

데스크톱: 50-75자
태블릿: 40-60자
모바일: 30-50자

줄 간격

적절한 줄 간격(행간)은 가독성을 향상시키고 눈의 피로를 줄입니다.

권장 비율:

제목: 1.1-1.3
본문 텍스트: 1.4-1.6
작은 텍스트: 1.5-1.7

반응형 타이포그래피

CSS 구현

반응형 타이포그래피를 위해 CSS 미디어 쿼리와 상대 단위를 사용하세요:

/* Base styles */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Responsive typography */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

뷰포트 단위

화면 크기에 따라 확장되는 진정한 반응형 타이포그래피를 위해 뷰포트 단위(vw)를 사용하세요.

유동적 타이포그래피

최소 및 최대 크기 간의 부드러운 확장을 위해 CSS clamp()를 사용하여 유동적 타이포그래피를 구현하세요.

접근성 고려사항

색상 대비

텍스트와 배경색 간에 충분한 대비를 확보하세요(WCAG AA 표준: 일반 텍스트의 경우 4.5:1).

폰트 크기

사용자가 폰트 크기를 늘릴 수 있는 옵션을 제공하세요. 모바일 기기에서 본문 텍스트는 최소 16px.

스크린 리더

시맨틱 HTML과 적절한 제목 계층을 사용하여 스크린 리더 호환성을 보장하세요.

UI 타이포그래피 모범 사례

핵심 원칙

명확한 타이포그래피 계층으로 시작하세요
일관된 간격과 정렬을 사용하세요
다양한 기기에서 가독성을 테스트하세요
웹 폰트의 로딩 성능을 고려하세요
더 나은 호환성을 위해 대체 폰트를 제공하세요
강조를 위해 적절한 폰트 굵기를 사용하세요
모바일을 위한 충분한 터치 타겟을 보장하세요
실제 사용자와 테스트하고 피드백을 수집하세요

UI 타이포그래피 가이드