반응형 시안에서 폰트 비교하기: 320px·768px·데스크톱 테스트

데스크톱 한 장에서 폰트를 고르면 모바일의 줄바꿈과 카드 높이를 놓치기 쉽다. 같은 문구도 자폭과 폴백에 따라 320px에서 두 줄, 768px에서 한 줄이 될 수 있다. 프리텐다드, SUIT, 본고딕, Gothic A1을 세 폭의 같은 컴포넌트에 적용해 보자.

새 프로젝트를 만들고 팀원과 작업 일정을 공유하세요

세 화면에 같은 콘텐츠를 고정한다

320px 안팎 모바일, 768px 태블릿, 실제 데스크톱 콘텐츠 폭을 준비한다. 제목, 본문, 버튼, 사용자 이름, 가격 카드를 같은 데이터로 채우고 font-family만 바꾼다. 기기 프레임보다 콘텐츠 영역의 실제 폭을 기록한다.

한 화면마다 문구를 줄여 맞추면 폰트 차이를 비교할 수 없다. 첫 비교에서는 카피와 안쪽 여백, 크기, 굵기를 모두 고정한다.

제목과 본문의 줄 수를 기록한다

각 후보가 몇 줄이 되는지, 줄바꿈이 의미 단위를 해치는지 표로 남긴다. 같은 두 줄이라도 둘째 줄에 한 단어만 남으면 카드 균형이 다르다. 조사와 숫자 단위의 고립도 확인한다.

폰트의 폭을 좋고 나쁨으로 판단하지 않는다. 한 줄 유지가 중요한 버튼과 여유로운 기사 제목은 목표가 다르다.

320px 3줄 · 768px 2줄 · desktop 1줄, 후보별 차이 기록

카드와 버튼 높이를 함께 본다

본문이 한 줄 늘면 카드 목록 전체의 높이가 달라지고 버튼 위치도 흔들릴 수 있다. 고정 높이 때문에 텍스트가 잘리지 않는지, 자동 높이에서 정렬이 허용 가능한지 확인한다. 모바일 터치 영역은 줄 수가 늘어도 유지돼야 한다.

말줄임표로 숨겼을 때 핵심 정보가 남는지도 본다. 폰트 문제를 문구 삭제로 가리지 않도록 원본과 축약 버전을 모두 보관한다.

사용자 입력과 폴백을 넣는다

고정 카피만 비교하면 문자 범위 차이가 드러나지 않는다. 긴 이름, 주소, 영문 이메일, 숫자, 드문 글자를 넣고 실제 적용 폰트를 확인한다. 웹폰트 지연과 실패 상태에서도 세 폭을 다시 본다.

SUIT처럼 상용 한글 중심 범위가 기록된 후보와 본고딕·프리텐다드처럼 현대 한글 전체 범위가 기록된 후보는 자유 입력 화면에서 별도 기준이 필요하다.

받는 분 곽민혁 · 제주특별자치도 제주시 첨단로 242

비교표에 수정 비용을 함께 적는다

후보마다 고정 높이 제거, 문구 축약, breakpoint 추가가 얼마나 필요한지 적는다. 한 화면에서 가장 예쁜 폰트보다 세 폭에서 예측 가능한 후보가 유지비를 줄일 수 있다. 접근성 글자 확대도 네 번째 조건으로 더한다.

프리텐다드 상세에서 대표 후보를 확인하고 폰트 시뮬레이터에 같은 카피를 올려 보자. 줄 수, 카드 높이, 버튼 폭, 폴백, 수정 비용을 폭별로 기록하면 반응형 선택 근거가 남는다.