12~16px UI 문구 점검법: 획 뭉침·줄바꿈·터치 영역 함께 보기

작은 글씨 QA에서 화면을 확대해 획만 보는 방식은 충분하지 않다. 실제 사용자는 원래 크기에서 배경, 아이콘, 터치 영역과 함께 문구를 본다. 12~16px 텍스트는 글자의 선명함과 컴포넌트의 동작을 한 번에 확인해야 한다.

비밀번호는 8자 이상 입력해 주세요 · 남은 시도 2회

역할별 가장 긴 문구를 고른다

보조 날짜, 필터 라벨, 버튼, 입력 오류, 약관 안내에서 실제로 들어갈 긴 문장을 하나씩 고른다. “확인”처럼 짧은 문구로 통과한 버튼이 “배송지 변경하기”에서 잘릴 수 있다. 숫자와 괄호, 영문도 표본에 넣는다.

운영 데이터에서 길이를 통제할 수 없는 이름과 주소는 별도 그룹으로 둔다. 고정 카피와 사용자 입력의 실패 기준이 다르기 때문이다.

원래 크기와 낮은 밝기에서 읽는다

기기에서 100% 배율로 먼저 보고 필요할 때만 확대한다. 밝기를 낮추고 다크 모드와 밝은 모드에서 받침, 마침표, 얇은 숫자가 사라지지 않는지 확인한다. 스크린샷 확대는 원인을 찾는 보조 수단으로 쓴다.

명도 대비가 부족한 문제를 폰트 굵기로만 해결하지 않는다. 텍스트 색과 배경, 비활성 상태의 구분이 함께 바뀌어야 할 수 있다.

12px 3분 전 · 14px 인증번호 재전송 · 16px 결제 계속하기

줄바꿈과 고정 높이를 함께 본다

카드와 버튼의 실제 폭에 문구를 넣고 한 줄, 두 줄, 글자 확대 상태를 비교한다. 컨테이너가 고정 높이면 두 번째 줄이 잘리거나 터치 영역 밖으로 나갈 수 있다. 말줄임이 적용될 때 사용자가 행동을 오해하지 않는지도 본다.

폰트를 바꿔 줄 수가 달라졌다면 즉시 크기를 줄이지 않는다. 고정 높이 제거, 문구 편집, 안쪽 여백, 행간 순으로 조정하고 마지막에 폰트 크기를 검토한다.

받침·숫자·폴백 글자를 찾는다

“읽기”, “뺐습니다”, “등록됨”처럼 받침이 겹치는 단어와 0·8, 1·l을 작은 크기에 넣는다. 사용자 이름과 드문 글자도 더해 한 글자만 폴백으로 튀지 않는지 계산 스타일에서 확인한다.

Spoqa Han Sans Neo 서브셋을 쓴다면 실제 로드 파일과 문자 범위를 확인한다. 글자가 보였다는 사실은 목표 폰트가 적용됐다는 증거가 아니다.

곽민혁님, ₩18,900 결제가 09:42에 완료됐습니다.

접근성 확대와 실패 상태를 통과시킨다

운영체제나 브라우저의 글자 확대를 켜고 버튼, 탭, 오류 문구를 다시 본다. 웹폰트 로딩 지연과 실패 상태에서도 텍스트가 숨지 않고 동작 요소를 밀어내지 않아야 한다. 터치 대상의 크기와 간격도 함께 확인한다.

스포카 한 산스 네오 상세에서 대표 후보를 확인하고 폰트 시뮬레이터로 실제 문구를 비교하자. QA 기록에는 기기, 화면 폭, 글자 크기, 굵기, 실패 문구를 남겨 같은 문제를 다시 찾을 수 있게 한다.