{3줄 요약}

모바일에서 텍스트는 가장 작은 화면에서, 가장 짧은 집중력으로 읽혀요. 인쇄나 데스크탑 기준을 그대로 가져오면 안 돼요.
터치 타겟 크기, 엄지 닿는 영역, 한 손 사용 패턴 - 모바일 타이포그래피는 읽기 경험과 인터랙션 경험을 동시에 고려해야 해요.
모바일 first로 타이포그래피를 설계하면 다른 환경으로 확장할 때 훨씬 수월해요.

모바일 앱·모바일 웹을 설계하거나 옮겨 올 때

모바일 앱이나 모바일 웹을 설계할 때 써요.
특히 데스크탑 사이트를 모바일로 전환하거나, 반응형 서비스를 처음 설계할 때 필요해요.

모바일 타이포그래피가 특별한 이유: 사용자가 이동 중에, 밝은 야외에서, 한 손으로 사용하는 경우가 많아요.
집중 독서 환경이 아니에요.
같은 16px 본문이라도 작은 화면 + 야외 + 이동 중 조합이면 훨씬 읽기 어려워요.

단계별 실행 방법

1단계: 기본 크기 기준 정하기

모바일 본문 텍스트의 최소 기준은 15~17px(sp) 예요.
iOS와 Android 모두 이 범위를 기본값으로 쓰고, 대부분의 사용성 연구도 이 범위를 지지해요.

주의: Android는 sp(scale-independent pixels) 단위를 써요.
사용자가 기기 접근성 설정에서 폰트 크기를 키우면 sp 단위는 함께 커지지만 dp(density-independent pixels)는 그대로예요.
본문 텍스트는 sp로 설정해야 접근성 설정을 존중해요.

타이포그래피 계층 기준 (모바일):

역할 권장 크기 굵기
페이지 제목 22~26sp Bold
섹션 제목 18~20sp SemiBold
본문 15~17sp Regular
레이블 13~15sp Medium
캡션 11~13sp Regular

2단계: 터치 타겟 확보하기

텍스트가 클릭·탭 가능하면 터치 영역을 충분히 만들어야 해요.

Apple HIG: 최소 44pt × 44pt Material Design: 최소 48dp × 48dp

버튼 텍스트가 14sp라도 패딩을 더해서 터치 가능 영역을 이 크기 이상으로 만들어야 해요.
텍스트 크기 = 터치 영역이라고 착각하는 실수가 많아요.

배달의민족 앱에서 음식 카테고리 탭, 카카오페이에서 이체 버튼을 보면 - 텍스트는 작아 보여도 실제 탭 가능 영역이 손가락 한 마디보다 넉넉해요.

3단계: 엄지 닿는 영역 고려하기

Luke Wroblewski의 연구에 따르면, 한 손으로 스마트폰을 쥐었을 때 엄지가 편하게 닿는 영역은 화면 하단 중앙과 양쪽이에요.
상단, 특히 상단 중앙은 닿기 어려워요.

이 원칙이 타이포그래피 배치에 영향을 줘요:

  • 주요 CTA 버튼 텍스트는 화면 하단에
  • 중요한 탭 레이블은 하단 내비게이션 바에
  • 자주 탭해야 하는 링크는 화면 중·하단에

카카오톡에서 메시지 입력창, 배달의민족에서 주문 버튼이 항상 하단에 고정되어 있는 것, 이게 엄지 닿는 영역을 고려한 결정이에요.

4단계: 줄 길이와 행간 조정하기

모바일 화면은 좁아서 줄 길이 문제가 자동으로 해결될 것 같지만, 그렇지 않아요.

화면 좌우 끝까지 텍스트를 채우면 모바일에서도 줄이 길어요.
좌우 패딩(margin)을 최소 16px 확보해야 해요.
실무 기준으로는 화면 너비의 5~8% 정도를 양쪽 여백으로 잡아요.

행간은 데스크탑보다 조금 넉넉하게 잡는 게 좋아요.
1.5~1.6 정도.
작은 화면에서 좁은 행간은 눈이 줄을 잃기 쉬워요.

5단계: 야외·저조도 환경 대비하기

모바일 사용자는 밝은 햇빛 아래에서도 화면을 봐요.
이 환경에서 색 대비가 낮은 텍스트는 거의 안 보여요.

WCAG 기준(4.5:1)을 지키는 것 외에, 모바일에서는 더 여유를 두는 게 안전해요.
회색 텍스트를 쓰고 싶다면 최소 #666666 이상 (배경이 흰색일 때)으로 유지해요.

다크 모드도 고려해야 해요.
밝은 배경에서 검증한 대비가 어두운 배경에서는 다르게 나와요.
라이트 모드와 다크 모드 모두 테스트해야 해요.

하지 말아야 할 것

데스크탑 타이포그래피를 그대로 축소하지 마세요: 데스크탑에서 18px 본문을 모바일에서 그대로 쓰면 화면 비율 대비 너무 커 보여요.
반대로 12px 본문을 모바일에 그대로 쓰면 읽기 어려워요.
환경에 맞게 다시 설정해야 해요.

가변 폰트 크기를 테스트 없이 배포하지 마세요: vw 단위나 clamp()로 화면 크기에 따라 폰트 크기를 유동적으로 설정할 때, 중간 크기 기기에서 예상치 못한 크기가 나올 수 있어요.
여러 기기에서 반드시 확인해요.

접근성 폰트 크기 설정을 무시하지 마세요: 사용자가 기기 설정에서 폰트 크기를 '크게'로 설정했을 때 레이아웃이 깨지면 안 돼요.
sp 단위와 flex/wrap 레이아웃을 함께 써서 대응해야 해요.

실행 후 확인하기

  • 실제 기기(iOS/Android 각각)에서 직접 손으로 사용해봤나요?
  • 본문 텍스트가 15sp 이상인가요?
  • 탭 가능한 텍스트의 터치 영역이 44pt 이상인가요?
  • 좌우 패딩이 최소 16px 확보되었나요?
  • 야외 밝은 환경을 시뮬레이션해서 대비를 확인했나요?
  • 다크 모드에서도 텍스트가 잘 보이나요?

UI 전반의 타이포그래피 시스템은 UI Typography에서, 반응형 환경에서 텍스트를 다루는 기준은 Web Typography에서 다뤄요.

관련 아티클

참고 문헌

  • Jason Santa Maria, 《Web Typography》(2014) - 반응형 환경에서 모바일 타이포그래피 설계 방법을 실무 관점으로 설명해요.
  • Apple, Human Interface Guidelines - https://developer.apple.com/design/human-interface-guidelines/ - iOS 타이포그래피 크기 기준과 터치 타겟 가이드의 공식 출처예요.
  • Luke Wroblewski, 《Mobile First》(2011) - 모바일 우선 설계와 엄지 닿는 영역 원칙의 기반이에요.