{3줄 요약}

UI에서 텍스트는 읽히는 콘텐츠이자 행동을 안내하는 인터페이스 요소입니다.
UI Typography는 빠르게 인식되고, 터치하기 쉬우며, 화면마다 일관돼야 합니다.
Typography Scale을 한 번 정해 두면 매 화면마다 처음부터 결정할 필요가 줄어듭니다.

앱·웹에서 텍스트 스타일을 시스템으로 묶어야 할 때

UI Typography는 앱이나 웹 서비스를 설계할 때 써요.
특히 여러 화면을 만들거나, 디자이너와 개발자가 함께 일하는 환경에서는 Typography System을 미리 만드는 게 필수예요.

새 화면을 설계할 때마다 "버튼 텍스트 크기가 몇이었더라", "소제목 굵기가 뭐였지"를 다시 생각한다면, 아직 시스템이 없는 거예요.

UI 텍스트가 콘텐츠 텍스트와 다른 이유

블로그 기사는 사용자가 집중해서 앉아 읽어요.
UI는 달라요.

사용자는 버튼 텍스트를 "읽는" 게 아니라 "인식"해요.
0.2초 안에 "이건 무슨 버튼이다"를 파악해야 해요.
에러 메시지는 뭔가 잘못됐을 때 뜨는데, 그 순간 사용자는 이미 불안하거나 당황해 있어요.
긴 문장을 읽을 여유가 없어요.

이런 맥락에서 UI 텍스트에 필요한 것:

  • 즉각 인식: 형태만 봐도 무엇인지 알아야 해요
  • 터치 가능 크기: 손가락으로 정확히 누를 수 있어야 해요
  • 일관성: 같은 종류의 텍스트는 항상 같은 스타일이어야 해요

Typography Scale을 먼저 만드세요

Typography Scale은 제품에서 쓸 텍스트 스타일 세트예요.
이걸 먼저 정해두면 매번 결정하지 않아도 돼요.

최소한 아래 스타일을 정의해요.

역할 한국어 크기 굵기 쓰는 곳
Display 디스플레이 28~36px Bold 온보딩, 빈 화면 메시지
Title 타이틀 20~24px SemiBold 페이지 제목, 카드 제목
Body 본문 15~17px Regular 설명 텍스트, 안내 문구
Label 레이블 13~15px Medium 버튼, 탭 레이블, 입력창 레이블
Caption 캡션 11~13px Regular 날짜, 출처, 부가 설명

크기는 절대적인 수치가 아니에요. 브랜드와 서체에 따라 달라져요.
중요한 건 단계 간 차이가 충분해야 한다는 거예요.
Display와 Title 차이가 2px밖에 안 나면 계층이 보이지 않아요.

버튼 텍스트는 행동을 설명해야 해요

버튼 텍스트를 "확인"이라고 쓰면 안 돼요.
사용자가 버튼을 누르면 뭐가 일어나는지 말해줘야 해요.

  • ❌ 확인 → ✅ 결제 완료
  • ❌ 제출 → ✅ 리뷰 등록하기
  • ❌ 취소 → ✅ 이전으로 돌아가기

텍스트 길이도 고려해야 해요.
버튼 텍스트가 너무 길면 레이아웃이 깨지거나 텍스트가 잘려요.
특히 영어권 사용자를 지원하는 서비스라면, 한국어 버튼 텍스트가 영어로 번역됐을 때 길이가 2~3배 늘어날 수 있어요.

배달의민족에서 "지금 주문하기" 버튼이 화면 하단에 큼직하게 고정되어 있는 구조를 보면, Label 스타일을 쓰되 크기와 여백을 충분히 잡아서 눈에 잘 들어오게 해요.

터치 타겟 크기를 텍스트와 함께 고려해요

모바일에서 버튼 텍스트를 15px로 설정했는데 버튼 높이가 28px이면 누르기 어려워요.

Apple HIG와 Material Design 모두 터치 가능한 최소 크기를 44px × 44px (또는 48dp × 48dp)로 권장해요.
텍스트 크기와 별개로, 실제로 눌릴 수 있는 영역을 확보해야 해요.

그래서 "텍스트만" 정의하는 게 아니라, 텍스트와 패딩을 함께 정의하는 게 맞아요.
Label 스타일을 버튼에 쓸 때는 위아래 12px, 좌우 16px 정도의 패딩을 더해서 터치 영역을 확보해요.

하지 말아야 할 것

텍스트 잘림을 방치하지 마세요: 레이블이나 버튼 텍스트가 화면 너비에 따라 잘리면 사용자가 어떤 버튼인지 모르게 돼요.
텍스트 길이의 최대값을 정하거나, 줄 바꿈을 허용하는 기준을 미리 정해야 해요.

모든 텍스트에 Bold를 쓰지 마세요: 강조는 배경이 조용할 때 효과가 있어요.
전부 Bold이면 계층이 없는 거예요.

플레이스홀더 텍스트에만 의존하지 마세요: 입력창의 플레이스홀더는 입력을 시작하면 사라져요.
필드 위에 레이블을 항상 표시하는 게 접근성과 사용성 모두에 좋아요.

실행 후 확인하기

  • Typography Scale이 문서화되어 있나요?
  • 버튼 텍스트가 행동을 설명하나요?
  • 모바일에서 터치 타겟이 44px 이상인가요?
  • 같은 역할의 텍스트가 제품 전체에서 같은 스타일인가요?
  • 실제 기기에서 테스트해봤나요?

Typography 계층의 기본 개념은 Typography 계층에서, UX Writing과의 연결은 인터페이스 텍스트 작성법에서 다뤄요.

관련 아티클

참고 문헌