마케팅이보내는 정적 HTML은 여전히 좁은 카드에 여러 줄 제목을 얹는다. 기본 줄바꿈은 마지막 줄만 짧게 남겨 시선을 CTA에서 끌고 간다. 2026년에는 text-wrap: balance로 행 길이를 고르게 하고, text-wrap: pretty로 지원 브라우저에서 단락 rag를 다듬을 수 있다. 수동 <br>은 번역 길이가 바뀌면 한꺼번에 깨진다. CWV 실험실 대 필드 Safari 글과 함께 읽어 타이포 개선과 LCP를 혼동하지 말 것. 폼이 붙은 카드는 field-sizing 글도 참고한다.
독자는 정적 사이트 작성자, 디자인 시스템 유지보수자, macOS Safari 실기 승인이 필요한 팀이다.
외톨이 줄 문제
CMS 파이프라인은 최종 카드 폭을 모른다. 디자이너가 넣은 소프트 줄바꿈은 독일어처럼 길이가 약 30% 늘면 무너진다. 선언적 규칙은 렌더 폭에 반응하므로 다국어에 강하다.
사진 위 히어로 제목에서 rag가 거칠면 버튼 주목도가 떨어진다.
balance 동작과 한계
.card-title {
text-wrap: balance;
max-inline-size: 22ch;
}max-inline-size로 탐색 범위를 제한하고, 긴 무공백 토큰에는 overflow-wrap: anywhere를 함께 둔다.
회전 시 재배치가 잦다. 폭 트랜지션은 300ms 이내로 제한해 떨림을 줄인다.
pretty 사용 범위
각주·법적 고지 같은 짧은 단락에 적합하다. 약 40KB 분량 글의 모든 문단에 pretty를 얹으면 Safari에서 스타일 비용이 커진다.
선택 표
| 맥락 | balance | 메모 |
|---|---|---|
| 카드 제목 | 권장 | 2–3행에서 효과가 크다. |
| 전부 대문자 면책 | 주의 | letter-spacing과 상호작용. |
| 코드 블록 | 비권장 | 고정폭 유지. |
| 내비 레이블 | 거의 불필요 | 한 줄이면 이득 없음. |
Safari와 혼합 텍스트
WebKit은 한영 혼합 줄나눔 후보가 Chromium과 다를 수 있다. 320px, 390px, 834px에서 각 로케일 최장 문자열로 캡처한다. line-break: strict는 balance와 별도로 검증한다.
마이너 macOS를 가로지르면 Safari Technology Preview 회귀를 추가한다. 2026년 텍스트 모듈 패치가 잦다.
세로쓰기 writing-mode 섹션이 있는 프로모션 페이지는 balance 적용 범위가 달라질 수 있으므로, QA 표에 가로·세로 각각 스크린샷 슬롯을 만든다.
접근성
스크린 리더 순서는 같지만 돋보기 사용자는 행 경계 이동을 본다. 글자 크기 스프링 애니메이션과 동시에 balance를 토글하지 않는다.
forced-colors: active에서 배경 이미지와 겹침이 달라질 수 있으니 대비를 재확인한다.
점진적 향상
@supports (text-wrap: balance) {
.hero-title { text-wrap: balance; }
}성능 가드레일
모바일 GPU에서 화면에 보이는 balance 요소를 대략 12개까지로 프로파일한다. contain: inline-size는 과하면 포커스 링이 잘릴 수 있다.
콘텐츠 협업
행 길이 예산은 ch 단위로 문서화하고 Storybook에 남긴다. A/B에서는 카피 버전과 CSS 버전 태그를 분리한다.
RTL과 논리 속성
dir="rtl"에서도 balance는 유효하지만 상한은 논리 속성으로 작성한다. 아이콘 여백은 margin-inline-start를 사용한다.
배포 전 체크리스트
- 로케일별 최장 문자열로 세 브레이크포인트 캡처.
- macOS 대비 강화 켜고 겹침 확인.
- Safari·Chrome 인쇄 PDF의 페이지 나눔 비교.
- 폭 느리게 조정하는 30초 영상으로 M3급 기기에서 프레임 100ms 미만 비율 확인.
RUM 지표
제목 컨테이너 CLS를 프록시로 삼는다. .hero-title 요소 CLS가 0.01을 넘기면 max-width 폴백 누락을 의심한다. Safari UA로 리플레이를 필터링한다.
토큰과 유틸리티
전역 .text-balance 남용은 gzip 부피를 키운다. clamp() 곡선이 바뀔 때마다 ch 상한을 다시 계산한다.
CMS 가드
줄바꿈 없는 공백 연속 삽입은 알고리즘을 방해한다. 배포 파이프라인에서 선택적으로 제거한다. 프리뷰는 프로덕션과 동일 웹폰트를 로드한다.
플랫폼 인수인계
HTML 조각과 CSS 번들의 CDN purge 순서를 문서화하고, text-wrap만 제거하는 한 줄 롤백을 첨부한다. SRI 해시는 헤딩 유틸 변경 시마다 갱신한다. 변경 로그로 지원팀이 스크린샷과 버전을 매칭한다.
CI에서 헤딩 유틸 gzip 증가가 1.5KB를 넘으면 사람 검토를 강제하면 과도한 유틸 번들링을 막을 수 있다.
브랜드 팀이 제목에 등록 상표 기호나 윗첨자를 넣을 때는 폴백 글꼴 메트릭이 섞이지 않았는지 먼저 확인한다. 서로 다른 메트릭이 섞이면 balance 결과가 들쭉날쭉해 보일 수 있으므로, 서브셋 단계에서 기호를 본문과 동일 패밀리에 넣고 실기에서 다시 확인한다.
운영 회의 자료에는 balance 적용 전·후·폴백만 적용한 세 벌의 스크린샷을 항상 첨부해 구두 설명과 실제 배포물의 괴리를 줄이고, 승인자 서명란에 캡처 시각을 기입한다.
FAQ
버튼 라벨에 balance?
보통 불필요. 한 줄 말줄임이 안전하다.
인쇄 스타일은?
@media print에서 초기화할 수 있다.
컨테이너 쿼리 대체?
아니다. 폭 결정과 줄나눔 최적화는 역할이 다르다.
타이포 리스크는 독자 GPU에서 드러난다. Apple Silicon Mac mini는 저소음으로 긴 픽셀 비교에 적합하다. MacHTML 클라우드 Mac은 하루 약 $16.9부터. SSH로 스크린샷 회귀를 돌리고 VNC로 디자이너를 초대해 테스트 전용 장비 CAPEX를 줄인다.