반응형 텍스트 줄바꿈 효율적으로 하기 (br 태그, wbr 태그)

줄바꿈이 민감한 카피 문구

카피 문구의 경우 줄바꿈 위치가 중요합니다. 저희는 기본적으로 모바일, 태블릿, 데스크탑 세가지 스크린 사이즈를 대응하고 있는데요.

프로젝트에 기존에 작성된 코드를 보니 개행문자가 삽입된 텍스트 파일을 모바일, 태블릿, 데스크탑 각각에 대해 갖고 있는 구조였습니다. 아래처럼 각 스크린 사이즈별로 개행문자(\n)가 다른 위치에 적용되는 것이죠.

// mobile 
"동해물과 백두산이\n마르고 닳도록\n하느님이 보우하사\n우리나라 만세"

// tablet (개행문자 위치가 mobile과 다름에 유의)
"동해물과 백두산이 마르고\n닳도록 하느님이 보우하사 우리나라 만세"

// desktop
"동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세"

 

이렇게 하면 기기별로 텍스트 세트를 명확하게 구분하여 관리할 수 있고, 줄바꿈을 위해서 별도의 자바스크립트나 CSS 코드를 작성하지 않아도 된다는 장점이 있습니다. 그렇지만 단점도 명백합니다. 개행문자의 위치와 개수가 조금만 달라도 텍스트 세트를 따로 분리해서 관리해야 한다는 것이 비효율적으로 보입니다.

 

하나의 텍스트 세트만으로 모든 반응형을 대응할 수 없을까?

줄바꿈 개수는 스크린 사이즈에 반비례하는 경향이 있습니다. 즉, 스크린 사이즈가 크면 줄바꿈이 적고 스크린 사이즈가 작으면 줄바꿈이 많게 됩니다. 여기에 착안해서 <br> 태그를 섬세하게 제어해보는 것이 어떨까 생각해 보았습니다. 모바일에서만 줄바꿈이 되는 <br>, 태블릿에서만 줄바꿈이 되는 <br>에 특별한 클래스명을 줘서 미디어 쿼리에서 제어하는 것이죠.

위에서 세 벌로 가져갔던 텍스트 세트를 아래와 같이 하나로 작성하고 <br> 태그 및 클래스명, CSS의 미디어쿼리를 이용해서 표현해 보았습니다. 미디어쿼리에서 br 태그의 display 속성을 필요에 따라 none 혹은 inline으로 부여했습니다.

// html
<p>동해물과 백두산이 <br class='break-m'>마르고 <br class='break-t'>닳도록 <br class='break-m'>하느님이 보우하사 <br class='break-m'>우리나라 만세</p>



// css
br.break-t {
	display: none;
}

@media only screen and (min-width: ${태블릿BP}) {
	br.break-m {
    	display: none;
    }
    br.break-t {
    	display: inline;
    }
}

@media only screen and (min-width: ${데스크탑BP}) {
	br.break-t {
      	display: none;
    }
}

 

 

CSS 코드가 글로벌하게 적용되도록 하면 CSS 코드는 한번만 작성해도 충분합니다.

 

줄바꿈 위치가 필수가 아니라면

디자인 시안으로 나온 줄바꿈 위치를 반드시 지켜야 하는 것이 아니라면 개발자에겐 조금 더 자유도가 생깁니다. 텍스트를 청크 단위로 줄바꿈을 하고 싶을 때 저는 <wbr> 태그가 가장 간단하게 할 수 있는 방법이라고 생각합니다.

Word Break Opportunity라는 태그인데요. 줄바꿈이 생기기를 선호하는 지점에 삽입해서 줄바꿈 기회를 주는 것입니다. 스크린이 작아지면 해당 지점부터 줄바꿈이 될 것입니다. 무엇보다 예시를 보면 바로 이해가 됩니다.

<wbr> 태그는 저도 이번에 블로그를 포스팅하면서 새롭게 알게 되었는데요. 맙소사, 브라우저 지원 현황도 훌륭하네요. 한글 단어를 기준으로 줄바꿈을 해주는 word-break: keep-all CSS 속성과 함께 앞으로 사이드프로젝트 진행시 유용하게 사용하게 될 것 같습니다.

<wbr> 태그 브라우저 지원 현황 (출처: Caniuse)