부모 요소 밖으로 삐져나오는 긴 영단어 처리법
웹 개발을 하다보면 아래와 같이 종종 영단어가 너무 길어서 모바일 환경과 같이 좁은 뷰포트(viewport)에서 부모 요소 밖으로 밀려나오는 경우를 접할 수 있는데요. 꼭 영문 웹사이트가 아니더라도 요즘에는 한국어 컨텐츠에도 워낙 외래어가 많이 사용되고, 게다가 인터넷 URL과 이메일 주소가 대부분 영어로 되어 있어서 의외로 한국어 웹시아트를 구현할 때도 쉽게 겪을 수 있는 문제입니다.
이번 포스팅에서는 웹에서 이렇게 원치 않게 부모 요소 밖으로 삐져나오는 영단어를 처리하는 다양한 방법에 대해서 알아보겠습니다.
영어와 한국어의 줄바꿈 차이
우선 영단어가 왜 부모 요소 밖으로 삐져나올 수에 있는지에 대해서 의외로 많은 분들이 모르시는 부분이라서 짚고 넘어가면 좋을 것 같아요. 아무 설정을 해주지 않으면 기본적으로 웹에서 한국어는 단어의 중간에서 줄바꿈이 되는 반면에 영어는 단어의 중간에서 줄바꿈이 되지 않습니다.
예를 들어, 가장 긴 한국어 단어인 “얼룩보금자리산세비에리아”와 가장 긴 영어 단어인 “pneumonoultramicroscopicsilicovolcanoconiosis”를 똑같이 폭이 150px으로 고정된 부모 요소 안에 써볼까요?
위에 보이는 것과 같이 한글 “자”와 “리” 사이에서는 줄바꿈이 일어나지만, 알파벳 “m”과 “i” 사이에서는 줄바꿈이 일어나지 않는 것을 알 수 있습니다.
Shy 기호
밖으로 삐져나오는 영단어를 방지하는 가장 간단한 방법은 soft hyphen, 흔히 줄여서 shy라고 불리는 - 기호 또는 ­ 엔티티(entity) 사용하는 것인데요.
영어에서 - 기호는 마치 공백 기호처럼 취급되기 때문입니다.
사실 책이나 잡지와 같은 활자 매체에서 많이 사용되는 방법이죠.
예를 들어, 가장 긴 영어 단어 사이의 중간 중간에 3개의 - 기호를 추가해보겠습니다.
그런데 이 전통적인 방법은 요즘과 같이 웹이 다양한 화면 크기에서 소비되고 유동형(fluid)이나 반응형(responsive) 웹디자인이 대세인 상황에서는 적용이 좀 난감해지는데요.
왜냐하면 부모 요소의 폭이 변함에 따라서 - 기호를 찍어야하는 지점에 계속해서 달라져야하기 때문입니다.
wbr 요소
만약에 - 기호가 화면에 표시되지 않기를 바란다면 대신에 <wbr> 요소를 사용할 수도 있습니다.
브라우저는 <wbr> 요소를 사용한 지점에서 우선적으로 줄바꿈을 하게 됩니다.
<wbr> 요소는 shy 기호보다 유동형/반응형 웹디자인을 할 때 좀 더 유리합니다.
가용 공간이 충분하여 줄바꿈이 일어나지 않을 때도 티가 나지 않기 때문입니다.
overflow-wrap 속성
자 그럼 지금부터 CSS를 이용해서 삐져나오는 영단어를 좀 더 근본적으로 해결할 수 있는지 알아볼까요?
첫 번째 방법은 부모 요소의 overflow-wrap 속성을 break-word로 스타일해주는 것인데요.
이렇게 해주면 부모 요소의 폭이 부족해서 영단어가 옆으로 삐져나와야하는 상황에서 말그대로 break word, 즉 단어를 쪼개줍니다.
참고로 overflow-wrap 속성 대신에 word-wrap 속성을 사용해도 동일한 효과를 얻을 수 있는데요.
CSS에서 공식적으로 속성의 이름이 word-wrap에서 overflow-wrap으로 바뀌었으므로 가급적 overflow-wrap을 사용하시기를 권장드립니다.
hyphens 속성
만약에 영어에서 줄바꿈을 일으킬 수 있는 - 기호를 개발자가 일일이 직접 추가하지 않고 자동으로 알아서 추가되면 얼마나 행복할까요? 😇
CSS에는 이것을 가능케하는 속성이 바로 hyphens 인데요.
이 속성을 auto로 설정해주면 영단어가 삐져나오지 않도록 마법처럼 적절한 위치에 - 기호가 붙게 됩니다.
참 편리한 기능이기는 한데 안타깝게도 아직 브라우저마다 약간씩 다르게 지원하고 있어서 상용 웹사이트에서 100% 의존하기에는 무리가 있는데요. 보통 지원하지 않는 브라우저를 대비해 본 포스팅에서 소개해드리는 다른 방법과 섞어서 쓰는 경우가 많은 것 같습니다.
word-break 속성
이쯤에서 이러한 생각을 하시는 분이 있으실 것 같아요. 영어도 한국어처럼 단어의 중간에서 줄바꿈이 일어나면 되지 않나?
CSS의 word-break 속성을 break-all로 설정해주면 그러한 효과를 낼 수 있는데요.
이 방법은 한국인 입장에서는 큰 문제가 없어보이지만 영어 사용자 입장에서는 적절하지 않은 사용자 경험이 될 수 있기 때문에 주의가 필요합니다.
문화적 차이일 수도 있지만 활자 매체든 디지털 매체든 영어에서는 공백 기호나 - 기호가 없는 지점에서 줄바꿈이 일어나면 어색하게 느껴진다고 합니다.
text-overflow 속성
마지막으로 소개해드릴 싶은 방법은 바로 text-overflow 속성을 ellipsis로 설정해주는 것인데요.
이렇게 스타일을 해주면 삐져나오는 부분이 말줌임 기호인 ...으로 대체가 됩니다.
이 방법을 사용할 때 주의할 부분은 툴팁(tooltip)과 같은 보조 UI를 사용하여 줄여진 부분을 끝까지 볼 수 있도록 해줘야 한다는 것입니다.
위 예제에서는 간단하게 HTML의 title 속성을 사용하여 마우스를 올렸을 때 전체 단어 또는 URL이 뜨도록 하였습니다.
마치면서
지금까지 부모 요소의 폭이 충분하지 않아서 밖으로 삐져나오게 되는 영단어나 URL을 어떻게 처리할 수 있는지에 대해서 실습을 통해서 살펴보았습니다. 본 포스팅에서 다룬 각 속성에 대해서 좀 더 공부하고 싶으신 분들은 아래 MDN 문서를 참고하시면 도움이 되실 것 같습니다.
This work is licensed under CC BY 4.0
