한글 제목이 두 줄로 넘어갈 때 마지막 한두 글자만 다음 줄로 외롭게 떨어지는 장면, 한 번쯤 본 적 있을 것이다. 디자인 시안에서는 보기 좋게 균형이 잡혀 있던 카피가 실제 브라우저에서 화면 폭만 살짝 달라져도 무너진다. 그동안 디자이너가 줄바꿈 위치를 손으로 잡거나, 자바스크립트로 글자 수를 세서 강제 개행을 넣는 식으로 해결해 왔다. 무겁고, 유지보수가 까다롭고, 화면 폭이 바뀌면 또 다시 깨진다.
2026년 현재, 그럴 필요가 거의 사라졌다. text-wrap: balance와 text-wrap: pretty라는 CSS 속성 두 개로 줄바꿈을 브라우저가 알아서 정돈해 주는 시대가 왔다. CSS 한 줄로 한글 제목과 본문이 자연스러워진다.
balance — 제목과 짧은 문단을 위한 균형 모드
text-wrap: balance를 적용하면 브라우저가 텍스트를 가능한 한 여러 줄에 균등하게 배치한다. 마지막 줄에 한 글자만 떨어지는 일이 사라지고, 줄들이 비슷한 길이를 갖도록 자동으로 폭을 조정한다.
가장 효과가 큰 곳은 제목이다. h1, h2, 카드 타이틀, 히어로 섹션 카피처럼 두세 줄짜리 짧은 문구에서 차이가 또렷하게 보인다. 한글은 글자 폭이 비교적 균일해서 영문보다 균형 잡기가 더 잘 먹힌다.
주의할 한 가지
balance는 가능한 모든 줄바꿈 위치를 계산하기 때문에 비용이 든다. 이 때문에 브라우저는 보통 6줄 이하 텍스트에만 적용된다. 본문 단락 전체에 무차별로 거는 것은 권장되지 않는다.
pretty — 본문 단락을 위한 부드러움 모드
text-wrap: pretty는 balance보다 가벼운 사촌이다. 모든 줄을 균등하게 맞추는 대신, 마지막 줄에 한두 글자만 남는 "고아 단어(orphan)"를 막아주는 정도의 일을 한다. 비용이 훨씬 적어서 긴 본문 단락에 적용해도 부담이 없다.
그래서 실전 조합은 단순하다. 제목엔 balance, 본문엔 pretty. 사이트 전반의 줄바꿈이 한층 정리된다.
실전 적용 — CSS 다섯 줄이면 끝난다
- h1, h2, h3, h4에 text-wrap: balance
- p, li, blockquote 같은 본문 텍스트에 text-wrap: pretty
- 버튼이나 짧은 라벨은 그대로 두기 — 한 줄 텍스트엔 의미가 없다
- 지원하지 않는 구형 브라우저는 기본 줄바꿈으로 폴백되어 절대 깨지지 않는다
- 웹폰트 로딩이 끝난 뒤 적용되므로 FOUT/FOIT 후에도 자연스럽게 동작한다
2026년 5월 기준 Chrome, Edge, Safari 17.4+, Firefox 121+ 모두 두 속성을 지원한다. 한국 사용자 점유율로 보면 95% 이상이 즉시 혜택을 본다.
모바일에서 차이가 더 크다
줄바꿈이 어색해 보이는 문제는 모바일에서 훨씬 더 자주 일어난다. 화면이 좁아 두 줄짜리 제목이 세 줄이 되고, 한두 글자가 떨어지는 일이 흔하다. 데스크톱에서 멀쩡하던 카피가 모바일에서 무너지는 경우가 많은데, balance 한 줄을 추가하면 화면 폭과 무관하게 일관된 균형이 잡힌다. 디자이너가 모든 디바이스마다 시안을 새로 잡지 않아도 된다.
한글 웹사이트에 더 잘 맞는 이유
한글은 영어와 달리 띄어쓰기 규칙이 헐겁고 음절 단위로 끊어진다. 그래서 줄바꿈 자리가 불안정하고, 어색한 위치에서 끊기는 일이 잦다. 영문에서는 하이픈을 넣어 단어를 쪼개는 우회로가 있지만 한글은 그것조차 어렵다. text-wrap: balance와 pretty는 이런 한글의 특성과 잘 맞는다. 시안에 손으로 줄바꿈을 그어 두던 시대를 마무리할 수 있다.
작은 디테일이지만 가장 먼저 보인다
사용자가 사이트를 처음 본 1초 안에 받는 "정돈된 인상"은 이런 한 줄에서 결정된다. 컬러나 폰트보다 먼저, 줄이 균형 잡혀 있는 화면이 신뢰를 만든다.
CYAN은 새로 만드는 모든 사이트에 두 속성을 기본값으로 적용한다. 디자이너가 시안을 그릴 때부터 "브라우저가 알아서 잡아준다"는 전제 위에 작업할 수 있어, 결과물의 일관성이 한 단계 올라간다. 사이트 줄바꿈이 자꾸 어색해 보인다면, 가장 먼저 시도해 볼 두 줄이 여기 있다.