홈페이지 첫 화면에 큼직하게 넣은 제목이 있다. PC에서는 두 줄로 예쁘게 떨어지는데, 노트북 화면이나 태블릿에서 열어 보면 마지막 줄에 글자 한두 개만 외롭게 남는다. '작은 회사 웹사'에서 끊기고 '이트'만 다음 줄로 넘어가는 식이다. 큰 문제는 아니지만, 손님 눈에는 어딘가 어설프고 손이 덜 간 화면으로 비친다.
지금까지 작은 회사 웹사이트는 이 문제를 두 가지 방법으로 다뤘다. 하나는 그냥 포기하는 것, 다른 하나는 제목 중간에 줄바꿈 태그를 손으로 박아 두는 것이다. 그런데 손으로 박아 둔 줄바꿈은 화면 너비가 바뀌는 순간 오히려 더 어색해진다. 브라우저가 이 일을 알아서 하도록 넘길 방법이 이제 생겼다.
제목은 balance, 본문은 pretty
CSS의 text-wrap 속성이 그 열쇠다. 값은 크게 두 가지를 기억하면 된다.
- text-wrap: balance — 여러 줄의 글자 수를 최대한 고르게 나눠 준다. 마지막 줄에 한 글자만 남는 '고아 글자'를 막아 준다. 제목처럼 줄 수가 적은 짧은 텍스트에 잘 맞는다.
- text-wrap: pretty — 문단 전체를 살펴 마지막 줄이 너무 짧게 끝나지 않도록 다듬는다. 긴 본문 문단에 어울린다.
제목에는 balance, 설명 문단에는 pretty를 주는 식으로 나눠 쓰면 화면 어디서 봐도 줄바꿈이 자연스럽게 정돈된다.
실제로는 이렇게 적는다
제목 요소에 text-wrap: balance 한 줄, 본문 문단에 text-wrap: pretty 한 줄을 더하면 끝이다. 손으로 줄바꿈을 박거나, 화면 크기마다 별도 규칙을 짤 필요가 사라진다. 브라우저가 실제 화면 너비를 보고 그때그때 가장 보기 좋은 위치에서 줄을 나눈다.
왜 지금 챙길 만한가
이 속성들은 이제 크롬·엣지·사파리·파이어폭스 최신 버전에서 대부분 동작한다. 게다가 지원하지 않는 옛 브라우저에서는 그냥 평소처럼 줄바꿈될 뿐, 화면이 깨지지 않는다. 즉 넣어서 손해 볼 일이 없는 개선이다. 손님 열에 여덟이 보는 모바일에서 제목이 한 결 더 반듯해 보인다면, 그 작은 차이가 '꼼꼼한 회사'라는 인상으로 쌓인다.
다만 만능은 아니다
balance는 계산 부담 때문에 보통 서너 줄 이하의 짧은 텍스트에만 적용하도록 권장된다. 본문 전체에 balance를 걸기보다, 제목·소제목·짧은 안내 문구에 골라 쓰는 편이 좋다. 긴 문단은 pretty에 맡기면 된다.
결국 손님이 보는 인상의 문제
줄바꿈 하나는 사소해 보이지만, 손님은 그 사소함이 쌓인 결과로 회사를 판단한다. 제목이 반듯하게 떨어지고 문단 끝이 어정쩡하지 않은 화면은, 말로 설명하지 않아도 '여기는 신경 써서 만들었다'는 신호를 준다. 이제 그 신호를 코드 두 줄로 얻을 수 있게 됐다.
CYAN 에이전시는 작은 회사 홈페이지를 만들 때 이런 최신 CSS 속성을 기본값으로 챙겨, 화면 크기와 상관없이 반듯하게 읽히는 사이트를 만든다. 지금 쓰는 홈페이지의 제목이 유독 어색하게 끊긴다면, 손볼 여지가 있다는 뜻이다.
