폰트를 바꿨더니 줄바꿈이 달라질 때: 카드·버튼·헤드라인 수정 순서

폰트를 바꾼 뒤 카드 제목이 세 줄이 되거나 버튼 문구가 잘리면 곧바로 글자 크기를 줄이기 쉽다. 하지만 원인은 자폭, 고정 높이, 문구 길이, 폴백 중 하나일 수 있다. Gothic A1을 새 후보로 적용했다고 가정하고 영향이 작은 수정부터 순서대로 보자. 한 화면의 임시 처방이 다른 화면의 토큰을 깨지 않게 변경 범위도 함께 기록한다.

팀원 초대 요청을 다시 보내시겠습니까?

문제가 생긴 조건을 먼저 고정한다

화면 폭, 컴포넌트 너비, 문구, 폰트 파일, 크기, 굵기, 행간을 기록한다. 정상 로딩인지 폴백 상태인지 확인하고 이전 폰트와 새 폰트를 같은 조건에서 캡처한다. “모바일에서 깨진다”보다 재현 가능한 한 줄이 필요하다.

영향받은 화면을 카드, 버튼, 헤드라인, 표로 나눈다. 컴포넌트마다 허용할 줄 수와 실패 기준이 다르다.

고정 높이와 숨김부터 확인한다

텍스트 컨테이너에 고정 높이, overflow hidden, line clamp가 있는지 본다. 새 폰트의 줄 상자가 조금 커졌을 뿐인데 내용이 잘릴 수 있다. 자동 높이를 허용할 수 있는 컴포넌트라면 먼저 제약을 풀어 본다.

버튼은 터치 영역과 정렬 때문에 높이 정책이 필요할 수 있다. 그때는 최대 문구 길이와 두 줄 허용 여부를 제품 규칙으로 정한다.

카드 최대 3줄 · 버튼 1줄 · 헤드라인 모바일 2줄

문구를 의미 단위로 다듬는다

불필요한 형식어를 줄이고 버튼은 행동 중심으로 쓴다. 다만 핵심 조건이나 위험 안내를 잘라 한 줄로 만들지 않는다. 원문과 축약문을 함께 리뷰해 의미가 유지되는지 확인한다.

번역 문구와 사용자 입력은 길이를 통제하기 어렵다. 고정 카피만 줄여 통과시키지 말고 가장 긴 예상 문자열도 시험한다.

크기와 행간은 역할 범위 안에서 조정한다

디자인 토큰이 허용하는 다음 단계 크기와 행간을 적용해 본다. 한 컴포넌트만 임의 픽셀로 줄이면 제품 전체의 위계가 흔들린다. 버튼 글자가 너무 작아지는 대신 안쪽 여백이나 폭을 조정할 수 있다.

Gothic A1, 프리텐다드, SUIT의 같은 숫자 크기가 같은 폭과 높이로 보이지 않는다는 점을 기억한다. 토큰 변경은 실제 기기와 접근성 확대에서 확인한다.

이 작업은 되돌릴 수 없습니다. 삭제하기 / 취소

마지막에 폰트 재선택을 검토한다

고정 높이, 문구, 여백, 토큰을 합리적으로 조정해도 핵심 컴포넌트가 반복해서 깨진다면 폰트가 제품 조건과 맞지 않을 수 있다. 한 화면을 억지로 맞추기보다 후보를 다시 비교한다. 변경 비용과 문자 범위도 함께 본다.

Gothic A1 상세에서 대표 후보를 확인하고 폰트 시뮬레이터에 실패 문구를 넣자. 재현 조건, 제약 해제, 문구, 토큰, 후보 재선택 순서를 지키면 줄바꿈 문제를 임의 패치 없이 해결할 수 있다.