한 음절 한 글자가 두 번째 줄로 떨어지는 이유
27인치 모니터에서는 한 줄로 잘 떨어지던 메인 헤드라인이, 노트북 화면에서는 마지막 한두 음절만 두 번째 줄로 밀려 외롭게 떠 있는 경우가 있다. 영문 사이트에서도 흔한 현상이지만, 한글은 한 음절이 한 글자라 외톨이 글자가 더 도드라진다. "우리 회사가 만드는 / 것"처럼 끊기면 디자이너가 잡아 둔 균형이 한순간에 무너진다.
지금까지는 <br> 태그를 본문에 박거나 balanced-text 같은 자바스크립트 라이브러리로 줄바꿈을 강제해 왔다. 그런데 화면 크기마다 br 위치를 다시 잡아야 하고, JS 라이브러리는 폰트가 로드된 뒤에야 동작하기 때문에 한 박자 늦게 화면이 흔들리는 부작용을 남긴다.
text-wrap이 정리한 네 가지 모드
CSS Text Module Level 4는 text-wrap 속성에 네 가지 값을 정의했다. auto는 지금까지의 기본 동작, balance는 줄 길이를 균등하게 맞춰 외톨이를 막고, pretty는 마지막 줄만 살짝 조정해 읽기 흐름을 자연스럽게 만든다. stable은 편집 중인 영역에서 글자 입력에 따라 줄이 출렁이는 현상을 막는다.
- balance: 4줄 이하의 짧은 텍스트에 최적이다. 헤드라인, 카드 제목, 인용구처럼 한눈에 들어와야 하는 영역.
- pretty: 본문처럼 긴 문단의 마지막 줄을 정리한다. 줄 수가 많아도 성능 부담이 적다.
- stable: textarea나 contenteditable처럼 사용자가 입력 중인 영역에서 줄이 흔들리는 것을 막는다.
어디에 balance, 어디에 pretty를 쓸까
실무에서 자주 쓰는 조합은 단순하다. h1, h2, 카드 제목, 히어로 카피에는 balance를 걸어 외톨이 글자를 막고, 본문 p 태그와 description에는 pretty를 적용해 마지막 줄이 어색하게 한 음절만 남는 상황을 피한다.
h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; }
이 두 줄만 추가해도 모바일에서 보이던 어색한 줄바꿈의 상당수가 사라진다. 다만 balance는 6줄 이상으로 길어지면 브라우저가 자동으로 동작을 멈추기 때문에, 카드 디스크립션처럼 짧은 텍스트에서 더 큰 차이를 만든다.
한글에 적용할 때 함께 챙길 두 가지
1) word-break: keep-all로 단어 단위 줄바꿈을 지킨다
text-wrap은 줄을 끊을 ‘위치 선택’을 도와줄 뿐, ‘단어를 어디서 자를지’는 word-break가 결정한다. 한글은 기본값(normal)이면 음절 단위로 끊기므로 word-break: keep-all을 함께 적어야 ‘회사가 / 만드는’ 같은 단어 단위 줄바꿈이 보장된다.
2) 폰트 로드 타이밍을 잡는다
웹폰트가 늦게 로드되면 fallback 폰트의 폭으로 계산된 줄바꿈이 먼저 그려진 뒤 다시 한 번 재계산이 일어난다. font-display: swap과 size-adjust로 fallback과 실제 폰트의 폭 차이를 줄이면 깜빡임이 사라진다.
도입 전 확인할 호환성과 폴백
최신 Chrome, Edge, Safari, Firefox에서 balance를 지원하고, pretty는 Chromium 계열과 Safari가 먼저 들어왔으며 Firefox도 점진 지원에 들어섰다. 미지원 브라우저에서는 단순히 무시되어 기본 줄바꿈이 그려질 뿐 화면이 깨지지 않는다. "지원하면 더 좋고, 아니면 평소대로"인 progressive enhancement에 가장 잘 맞는 속성이다.
마무리
한글 사이트의 첫인상은 결국 헤드라인 한 줄에서 갈린다. 그동안은 br과 자바스크립트로 억지로 줄을 맞췄지만, 이제는 CSS 한두 줄이 그 자리를 대신한다. CYAN Agency는 클라이언트 사이트의 헤드라인과 카드 영역에 text-wrap을 디폴트로 적용해, 자바스크립트 한 줄 없이도 데스크톱·태블릿·모바일 어느 화면에서나 글자가 어색하게 끊기지 않게 다듬는다. 한 음절이 두 번째 줄로 떨어지는 사소한 불편이, 사실은 우리 사이트의 신뢰감을 갉아먹는 가장 흔한 디테일이다.