홈페이지 제목이나 배너 문구를 정성껏 다듬어 놓고 화면을 보면, 마지막 한 단어만 외롭게 둘째 줄로 떨어져 있는 경우가 있습니다. 출판 디자인에서는 이렇게 홀로 남은 단어를 외톨이(orphan)라 부르며 오래전부터 피해야 할 것으로 여겨 왔습니다. 작은 차이지만, 제목이 어딘가 미완성처럼 보이고 시선이 매끄럽게 흐르지 못합니다.
지금까지는 사람이 손으로 메워 왔습니다
이 문제를 해결하려고 그동안 현장에서 쓰던 방법은 대부분 임시방편이었습니다.
- 수동 줄바꿈: 원하는 위치에 직접 줄바꿈 태그를 넣는 방식입니다. PC에서는 깔끔해 보이지만, 화면 폭이 좁은 휴대폰에서는 엉뚱한 곳에서 줄이 끊겨 오히려 더 어색해집니다.
- 줄바꿈 방지 공백: 마지막 두 단어를 묶어 붙여 두는 방법입니다. 한두 곳은 괜찮지만, 글이 많아지면 일일이 손볼 수가 없습니다.
- 자바스크립트 라이브러리: 화면 크기가 바뀔 때마다 글자 폭을 계산해 줄을 고르게 나누는 스크립트입니다. 효과는 있지만, 문구 하나 다듬자고 별도 코드를 불러오고 화면 크기 변화를 계속 감시해야 했습니다.
세 방법 모두 사람이 화면마다 결과를 확인하며 손을 봐야 한다는 점이 같았습니다.
이제는 브라우저가 알아서 줄을 고릅니다
요즘 브라우저에는 text-wrap: balance라는 CSS 속성이 들어왔습니다. 제목에 이 한 줄을 적용하면, 브라우저가 전체 글자를 보고 각 줄의 길이가 비슷해지도록 끊는 지점을 알아서 고릅니다. 마지막 줄에 단어 하나만 덩그러니 남는 일이 사라지고, 두세 줄짜리 제목이 균형 잡힌 모양으로 정리됩니다.
h1, h2 { text-wrap: balance; }
화면 폭이 바뀌어도 브라우저가 그때그때 다시 계산하므로, PC든 휴대폰이든 따로 손볼 필요가 없습니다.
제목은 balance, 본문은 pretty
비슷한 속성으로 text-wrap: pretty도 있습니다. 둘은 쓰임새가 다릅니다.
- balance는 줄 수가 적은 제목, 부제, 짧은 안내 문구에 어울립니다. 모든 줄을 고르게 맞추는 데 집중합니다.
- pretty는 줄 수가 많은 본문 문단에 어울립니다. 전체를 다 맞추지는 않되, 문단 맨 끝 줄에 짧은 외톨이 단어만 남지 않도록 다듬어 줍니다.
제목에는 balance, 긴 글에는 pretty를 쓰면 부담 없이 가독성을 끌어올릴 수 있습니다.
적용 전에 알아 둘 점
편리하지만 몇 가지는 짚어 둘 필요가 있습니다. balance는 보통 예닐곱 줄 이하의 짧은 덩어리에서만 동작하도록 만들어져 있어, 긴 본문 전체에 걸면 효과가 없습니다. 또한 모든 줄을 다시 계산하는 작업이라 수천 개의 요소에 한꺼번에 적용하면 화면이 느려질 수 있으니, 제목처럼 눈에 띄는 곳에만 골라 쓰는 편이 좋습니다. 아직 이 속성을 모르는 옛 브라우저에서는 그냥 평소대로 줄바꿈될 뿐 화면이 깨지지는 않으므로, 부담 없이 먼저 적용해 두어도 괜찮습니다.
작은 디테일이 신뢰를 만듭니다
제목 한 줄의 균형은 방문자가 의식하지 못하는 사이에 '정돈된 회사'라는 인상을 남깁니다. CYAN은 작은 회사 웹사이트를 만들 때 이런 줄바꿈, 여백, 글꼴 같은 사소해 보이는 디테일까지 최신 표준에 맞춰 챙깁니다. 보이지 않는 곳에서 쌓인 완성도가 결국 손님의 신뢰로 이어진다고 믿기 때문입니다.