잘 만든 헤드라인이 화면 폭에 따라 무너지는 순간이 있습니다. 두 줄로 깔끔하게 떨어지던 제목이, 모바일에서는 마지막 줄에 단어 하나만 외톨이로 남습니다. 디자이너들은 이걸 고아 단어(orphan)라고 부르는데, 작은 차이 같지만 첫 화면의 인상을 의외로 크게 갉아먹습니다.
지금까지 해결책은 둘 중 하나였습니다. 제목 중간에 <br>을 직접 넣어 줄바꿈을 고정하거나, 자바스크립트로 글자 수를 세어 줄을 조정하는 것이죠. 둘 다 문제가 있습니다. 수동 줄바꿈은 화면 폭이 바뀌면 더 어색해지고, 자바스크립트는 무거운 데다 글이 바뀔 때마다 다시 손봐야 합니다.
text-wrap: balance — 제목을 균형 잡힌 줄로
이제 CSS가 이 일을 대신합니다. 제목 요소에 text-wrap: balance 한 줄만 더하면, 브라우저가 각 줄의 길이를 스스로 계산해 비슷한 폭으로 나눠 줍니다. 마지막 줄에 단어 하나만 남는 일이 사라지고, 화면을 줄이거나 늘려도 줄바꿈이 알아서 다시 균형을 잡습니다.
가장 효과가 큰 곳은 히어로 헤드라인, 카드 제목, 섹션 소제목처럼 짧고 눈에 띄는 텍스트입니다. 같은 문구인데도 줄이 가지런해지는 것만으로 화면이 한층 정돈돼 보입니다.
text-wrap: pretty — 본문 문단의 외톨이 줄 방지
긴 본문에는 text-wrap: pretty가 어울립니다. balance가 모든 줄을 균등하게 맞춘다면, pretty는 문단 전체의 흐름은 그대로 두되 마지막 줄에 단어 하나만 떨어지는 경우만 똑똑하게 막아 줍니다. 읽는 리듬을 해치지 않으면서 끝맺음만 자연스럽게 다듬는 셈입니다.
도입할 때 알아둘 점
두 값 모두 점진적 향상(progressive enhancement) 방식이라 안심하고 써도 됩니다. 지원하지 않는 옛 브라우저에서는 속성을 무시하고 기존 방식대로 줄바꿈할 뿐, 화면이 깨지지 않습니다.
- balance는 짧은 텍스트에만: 성능을 위해 브라우저가 보통 너댓 줄까지만 균형을 맞춥니다. 긴 문단에 쓰면 효과가 없습니다.
- 수동 <br>을 걷어내세요: 직접 넣은 줄바꿈과 충돌하면 의도와 다르게 나옵니다.
- pretty는 본문에: 기사 본문, 설명 문단처럼 줄 수가 많은 곳에 적합합니다.
작은 회사 사이트에 주는 의미
이 변화의 핵심은 라이브러리도, 추가 스크립트도 필요 없다는 점입니다. CSS 한 줄로 끝나니 사이트가 무거워지지 않고, 글을 고쳐도 줄바꿈을 다시 손볼 일이 없습니다. 방문자가 첫 3초에 보는 헤드라인의 완성도를, 비용 없이 한 단계 끌어올리는 작은 디테일입니다.
이런 디테일은 한 곳만 챙긴다고 티가 나지 않습니다. 폰트, 여백, 줄바꿈, 이미지 처리 같은 작은 선택들이 쌓여야 비로소 '잘 만든 사이트'라는 인상이 생깁니다. CYAN은 작은 회사의 웹사이트를 만들 때도 이런 최신 CSS 기법과 기본기를 함께 챙겨, 가벼우면서도 완성도 높은 화면을 만드는 데 집중합니다.