줄바꿈 스타일에 대한 A to Z: 다국어편

SmartEditor는 네이버 블로그, 지식 iN, 카페 등의 서비스에서 사용되는 WYSIWYG 에디터입니다. 네이버 서비스에서 글을 써 본 경험이 있다면, 대부분 SmartEditor에 익숙하실 것 같은데요. 많은 사용자들이 SmartEditor를 통해 원하는 콘텐츠를 작성하고 있습니다.

SmartEditor처럼 사용자가 직접 글을 입력하는 서비스에서는 어떤 텍스트가 어떻게 입력될지 알 수 없기 때문에, 텍스트와 관련된 다양한 이슈들이 자주 발생합니다. 예를 들면, 텍스트가 영역 밖으로 넘치거나 특정 브라우저에서 줄바꿈이 다르게 보이거나, 또는 디자인팀에서 특정 문구만 단어 단위로 줄바꿈 되도록 요청하는 경우도 있습니다.

다국어 서비스에서 이러한 이슈들에 대응할 때는 주의해야 할 부분들이 꽤 많이 있는데요. 이 글에서는 웹에서 다국어 줄바꿈과 관련된 CSS 스타일 속성과 HTML 요소에 대한 기본 이해와 이슈 사례를 통해, 줄바꿈에 대해 A부터 Z까지 깊게 알아보겠습니다.

1. 줄바꿈 스타일이란?

줄바꿈은 인라인 레벨의 콘텐츠가 특정 기준을 가지고 줄 끝에서 중단을 허용하는 규칙에 의해 여러 줄로 배치되는 것을 의미합니다. 줄바꿈 규칙을 제어하는 속성에는 word-break , overflow-wrap / word-wrap, line-break , hyphens 가 있습니다. 줄바꿈 규칙은 언어에 따라 다르기 때문에 이 속성들을 다국어 환경에서 잘 사용하기 위해서는 언어별 줄바꿈 규칙에 대한 이해가 필요합니다. 줄바꿈 스타일 속성은 언어를 크게 CJK와 Non-CJK로 분류하여 제어합니다. 줄바꿈과 관련된 용어와 기본 이해를 위해 W3C 공식 문서의 줄바꿈 속성에 대한 글을 토대로 줄바꿈에 대해 설명해 보겠습니다.

1) 줄바꿈 관련 용어

언어의 분류

줄바꿈의 정의와 기준

줄바꿈의 종류

2) 줄바꿈에 대한 기본 이해

브라우저에서 콘텐츠 래핑은 어떻게 발생할까요? 소프트 랩 기회(soft wrap opportunity)라고 하는 허용된 중단점에서 콘텐츠 래핑을 수행합니다. 브라우저는 콘텐츠 오버플로(콘텐츠가 영역 밖으로 넘어가는 현상)를 최소화하기 위해 소프트 랩 기회가 있는 경우, 콘텐츠를 래핑(즉, 텍스트의 경우 줄바꿈을 의미함)합니다.

영어 및 대부분의 문자 체계에서는 하이픈( - )이 없을 때 단어 경계에서 소프트 랩 기회가 발생합니다. 또한 공백이나 문장 부호를 사용하여 단어를 명시적으로 구분하고 이러한 문자로 소프트 랩 기회를 식별합니다. 하지만 일부 다른 문자 체계에서는 소프트 랩 기회가 단어 경계가 아닌 음절 경계를 기반으로 발생하기도 합니다.

CSS 속성으로는 소프트 랩 기회가 어디서 발생하는지 완전히 정의하지 않지만, 일반적인 변형을 구별하기 위해 일부 제어 기능을 제공합니다. 아래 이미지처럼 CSS가 따로 정의되지 않은 기본값(word-break: normal) 상태에서는, 앞서 말한 문자 체계별 특성에 따라 소프트 랩 기회가 발생합니다. 한국어를 비롯한 CJK 언어는 음절이나 문자 경계로 줄바꿈하지만, 그 외 Non-CJK 언어인 영어와 특수문자들은 공백 경계로 줄바꿈(단어 단위 줄바꿈)하기 때문에, 연속된 텍스트의 문자 사이에서는 소프트 랩 기회가 없어 텍스트가 영역 밖을 넘어가는 콘텐츠 오버플로가 발생합니다. 이 때, CSS의 overflow-wrap: break-word 속성을 추가하면, 단어나 연속된 문자 사이의 임의의 지점에서 소프트 랩 기회가 발생하도록 변경할 수 있습니다.

3) 줄바꿈 스타일 속성

줄바꿈의 변형을 제어하는 기능을 가진 스타일 속성들을 아래 표로 먼저 간단히 살펴봅시다.

2. 주요 줄바꿈 스타일 속성

실무에서 자주 쓰이는 word-break , overflow-wrap/word-wrap이라는 주요 줄바꿈 속성부터 자세히 알아봅시다.

1) word-break 속성

텍스트가 자신의 콘텐츠 박스 영역 밖으로 넘칠 때 줄을 바꿀지 지정하는 속성입니다. 각 속성값은 CJK/Non-CJK 언어 분류에 따라 소프트 랩 기회가 발생하는 중단점이 다릅니다. 기본 줄 바꿈 규칙(normal)은 CJK 언어의 중단점은 음절(일본어는 문자)이고, Non-CJK 언어의 중단점은 공백입니다. 그 외 다른 속성값 break-all 과 keep-all은 이 중단점을 음절 또는 공백 하나의 기준으로 동작하도록 제어할 수 있습니다.

See the Pen word-break by S.Young (@s_young) on CodePen.

속성값

언어별 중단점 비교

Non-CJK/CJK로 중단점을 기준으로 값을 비교해보면 아래 표와 같습니다.

여러 언어의 중단점을 다음 텍스트로 비교해 봅시다.
텍스트는 전세계 언어는 다양하다. 这是一些汉字 and some Latin و کمی خط عربی และตัวอย่างการเขียนภาษาไทย በጽሑፍ፡ማራዘሙን፡አንዳንድ፡ 이고, 중단점은 ·로 표현합니다. word-break 속성값마다 중단점은 아래와 같이 적용됩니다.

/* word-break: normal; */
전·세·계·언·어·는·다·양·하·다.·这·是·一·些·汉·字·and·some·Latin·و·کمی·خط·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย·በጽሑፍ፡·ማራዘሙን፡·አንዳንድ፡
 
/* word-break: break-all; */ 
전·세·계·언·어·는·다·양·하·다.·这·是·一·些·汉·字·a·n·d·s·o·m·e·L·a·t·i·n·و·ﮐ·ﻤ·ﻰ·ﺧ·ﻁ·ﻋ·ﺮ·ﺑ·ﻰ·แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย·በ·ጽ·ሑ·ፍ፡·ማ·ራ·ዘ·ሙ·ን፡·አ·ን·ዳ·ን·ድ፡
 
/* word-break: keep-all; */
전세계·언어는·다양하다.·这是一些汉字·and·some·Latin·و·کمی·خط·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย·በጽሑፍ፡·ማራዘሙን፡·አንዳንድ፡

See the Pen word-break by S.Young (@s_young) on CodePen.

2) overflow-wrap/word-wrap 속성

분리할 수 없는 문자열이 너무 길어 블록에 맞지 않는 경우, 오버플로를 방지하기 위해 줄 내 허용되지 않는 임의의 지점에서도 줄바꿈을 할 것인지 아닌지를 정하는 속성입니다. 

See the Pen overflow-wrap by S.Young (@s_young) on CodePen.

속성값

✔️ break-word와 anywhere의 차이

위 화면처럼 width 값이 수치($box-width-type-row: 110px;)일 때는 break-word 와 anywhere  값은 시각적 차이가 없어 보입니다.
하지만 아래 화면처럼 width 값이 min-content 일 때는 두 속성의 소프트 랩 기회의 차이로 인해 시각적으로도 큰 차이가 발생합니다.

See the Pen [SmartStudio Blog] overflow-wrap by S.Young (@s_young) on CodePen.

✔️ overflow-wrap과 word-wrap의 차이

word-wrap 은 원래 마이크로소프트 사에서 시작된 prefix가 없는 비표준 속성이었고, 초기 대부분의 브라우저가 동일한 이름으로 구현했습니다.
이후 overflow-wrap이라는 이름으로 표준이 변경되었고, word-wrap도 레거시 별칭으로 남아있습니다.

언어별 텍스트 넘침 허용 여부 비교

위 화면을 표로 정리해 보자면 아래와 같습니다. 음절 단위로 줄바꿈 하는 CJK 텍스트에서는 각 속성값에 따라 시각적인 차이가 없지만, Non-CJK 텍스트는 긴 영어 단어나 연속된 특수문자로 인해 기본값인 normal에서는 텍스트 오버플로가 발생하고, 이 오버플로를 방지하기 위한 속성값인 break-word 와 anywhere에서는 중단점인 공백이 없어도 텍스트가 넘치는 임의의 지점에서 줄바꿈을 허용하여 보다 자연스러운 텍스트 래핑 상태를 보여줍니다.

3. 실무에서 줄바꿈 이슈

자주 사용하는 줄바꿈 속성 word-break , overflow-wrap/word-wrap에 대해 이해하였다면, 이제 실무에서 이 속성들이 어떻게 사용되는지 자세히 알아봅시다. 다국어 줄바꿈과 관련한 주요 이슈는 크게, 오류처럼 보이는 ‘QA 이슈‘와 시각적인 가독성을 높이기 위한 ‘디자인 이슈‘ 2가지 관점이 있습니다. 우선 오류처럼 보이는 텍스트 오버플로 이슈에 대해 다뤄보겠습니다.

1) [QA 관점 이슈] 텍스트 오버플로와 overflow-wrap/word-wrap 속성

텍스트 오버플로(텍스트 넘침 현상)은 아래 화면처럼 텍스트가 콘텐츠 블록 영역을 넘어가는 현상으로 마치 오류처럼 보이기 때문에 QA에서 자주 발견되는 이슈로, 공백 경계의 줄바꿈에서 띄어쓰기가 없는 연속된 문자로 이루어진 텍스트에서 주로 발생합니다. 하지만, 이 이슈는 overflow-wrap: word-break 속성값을 이용하면 간단히 해결할 수 있습니다.

✔️ 텍스트 오버플로 방지를 위해 overflow-wrap: word-break 스타일을 항상 사용하여야 할까요?

그렇진 않습니다. 운영자가 문구를 입력하는 경우(예: 버튼명, 안내 문구 등)에는 잘 발생하지 않기 때문에 간결한 단어가 많은 경우 이 속성값을 굳이 갖고 있을 필요는 없습니다. 이 속성이 필요한 이슈는 사용자가 텍스트를 입력하는 영역이나 긴 URL이 포함된 요소, 운영자가 입력한 문구가 다국어로 번역될 때 주로 발생합니다.

See the Pen [] Text overflow by S.Young (@s_young) on CodePen.

✔️ URL은 word-break: break-all;과 함께 사용하세요.

영문과 특수문자로 이루어진 URL이 주로 포함되는 링크의 경우, overflow-wrap: break-word만 사용하면 아래 화면처럼 줄바꿈이 어색해질 수 있습니다. word-break: break-all을 함께 사용하면 줄바꿈을 더 자연스러워 보이게 만들어줍니다.

See the Pen URL Issue by S.Young (@s_young) on CodePen.

브라우저 지원 범위에 따른 주의사항

overflow-wrap/word-wrap 속성은 브라우저 지원 범위에 따라 사용이 달라집니다. SmartEditor는 여러 서비스를 지원하고 있기 때문에, 더 넓은 범위의 브라우저를 지원하기 위해 이런 차이점을 고려하여 속성을 사용하고 있습니다.

✔️ word-wrap 이 필요한 경우

overflow-wrap이 표준이긴 하지만, 비표준인 word-wrap의 지원범위가 더 넓습니다. 하위 브라우저를 지원해야한다면 아래와 같이 2개의 속성을 함께 사용할 수도 있습니다.

word-wrap: break-word;
overflow-wrap: break-word;

✔️ anywhere, break-word 무엇을 사용해야 할까?

앞서 이야기했듯이 두 속성의 차이는 min-content 일 때 소프트 랩 기회 제공 여부에 있습니다.
그리고 또 하나의 차이는 브라우저 지원 범위입니다. anywhere 보다는 break-word 값이 더 많은 브라우저를 지원하고 있습니다. 두 값 중 어느 것을 쓸지 고민된다면 break-word를 사용하세요.

✔️ word-break: break-all에도 overflow-wrap: break-word가 필요한 경우

링크 요소의 줄바꿈을 대응할 때, Non-CJK 텍스트도 문자 사이에 소프트 랩 기회를 제공하는 word-break: break-all; 만 사용해도 충분한 것으로 보입니다. 하지만, 브라우저나 버전, 문자에 따라 연속된 특수문자의 경우 문자 경계에 소프트 랩 기회가 제공되지 않는 경우가 있습니다. 이런 경우도 대비해야 한다면 word-break: break-all;에도 overflow-wrap: break-word;를 함께 사용해 보세요.

See the Pen [SmartStudio Blog] 연속된 특수문자 by S.Young (@s_young) on CodePen.

케이스별 사용 가능한 두 속성의 조합

word-break와 overflow-wrap은 다국어 대응에 있어서 짝꿍 같은 속성입니다. 어떤 속성값이 조합되느냐에 따라 각각의 케이스에서 오류처럼 보일 수도 아닐 수도 있습니다.

See the Pen word-break by S.Young (@s_young) on CodePen.

텍스트 넘침 ▵ or O  표시된 조합은 오류처럼 보일 수 있음을 유의하여 사용합시다.

2) [디자인 관점 이슈] 언어별 개행 기준과 word-break 속성

운영자가 작성한 문구를 단어 단위로 줄바꿈 할지, 음절 단위로 줄바꿈 할지의 문제는 시각적인 가독성을 위한 디자인 관점에서의 이슈라고 볼 수 있습니다. 언어에 따른 줄바꿈 기준을 제어하는 word-break 속성값이 CJK 언어(한국어, 중국어, 일본어)와  Non-CJK 언어(영어, 기호 등)에 따라 기준이 다르다는 점과 서비스에서 제공하고 있는 다양한 언어 각각의 기본 줄바꿈 규칙에 대해 주목해야 합니다.

다국어 줄바꿈에 대한 접근 방법

한국어는 음절과 단어 단위 줄바꿈이 모두 가능한 언어입니다. 이 때문에 아래 이미지처럼 디자인 검수 시, 특정 문구는 가독성을 위해 단어 단위로 줄바꿈 되도록 요청받을 수도 있습니다.

한국어만 지원하는 서비스라면 상관없지만, 다국어 서비스라면 한국어뿐만 아니라 다른 언어도 고려하여 word-break 속성을 사용하여야 합니다. 위에서 보았던 word-break  속성값별 줄바꿈을 위한 중단점에 대한 표를 다시 확인해 봅시다.

기본값인 normal 은 왜 Non-CJK와 CJK를 구분하여 다른 기준으로 중단점을 정의하고 있을까요?
한국인들에게는 단어 단위 줄바꿈(공백 경계), 음절 단위 줄바꿈 2가지 모두 시각적으로 어색하지 않아 이 구분이 낯설 수 있습니다. 하지만, 다른 언어의 국가들에서는 자신의 언어가 음절 단위 줄바꿈이 어색할 수도 있고, 반대로 띄어쓰기가 없기 때문에 이러한 단어 단위의 공백 경계 줄바꿈이 부자연스럽게 느껴질 수 있습니다.

예를 들어, 한국어의 단어 단위 개행을 위해 word-break: keep-all  속성값을 적용한다면, 아래 이미지와 같이 음절 경계 줄바꿈 규칙을 갖고 있는 중국어의 개행이 어색해질 수 있습니다.
국내 서비스에서는 상관없지만, SmartEditor처럼 다양한 언어들을 지원하는 경우 다른 방법을 고민해 봐야 합니다. 이런 경우, 한국어일 때만(lang="ko-KR") word-break: keep-all 이 적용되도록 분기 처리하거나 한국어 문구가 단어 개행처럼 보이게 좌우 여백을 조정하는 방법으로 대응할 수 있습니다.

줄바꿈에 영향을 주는 요인

왜 언어에 따라 다른 줄바꿈 기준이 어색하게 느껴질 수 있는지 줄바꿈에 영향을 주는 요인과 언어별 차이에 대해 알아봅시다. 다음 내용은 W3C Internationalization의 Approaches to line breaking(줄바꿈에 대한 접근법) 글의 일부 내용을 정리하였습니다.

줄의 끝에서 텍스트를 래핑(줄바꿈) 하는데 사용되는 가장 기본적인 알고리즘은 2가지 요인에 영향을 받습니다.

1. 구분자(separator): 텍스트에서 단어 또는 음절이 분리되어 있는지, 분리된 경우 그 방법
2. 줄바꿈(wrap): 문자 체계가 단어, 음절 또는 문자를 다음 줄로 래핑 하는지

아래 표는 구분자(separator)/줄바꿈(wrap) 기준으로 언어를 분류한 표입니다. 
(여기서 ‘단어’는 하나 이상의 음절을 포함할 수 있는 모호하게 정의된 의미 단위를 의미합니다.)

각 언어별로 텍스트를 줄바꿈하고 분리하는 구분자의 기준이 다 다릅니다.  줄바꿈 요인을 기준으로 국내 서비스에서 주로 대응하는 언어_{(위 표에 보라색으로 표시됨)}들을 위주로 살펴봅시다.

✔️ 단어 기준으로 줄바꿈하는 언어

공백으로 구분된 단어를 가진 언어의 경우, 대부분 사람들에게 친숙한 문자 체계입니다. 세계 공용어인 영어 텍스트가 동작하는 방식으로 줄의 끝에 도달하면 응용 프로그램이 일반적으로 단어 구분 기호로 간주되는 이전 공백을 찾고 그 이후의 모든 항목을 다음 줄로 줄바꿈 합니다. 단어 단위로 줄바꿈 하는 모든 언어가 공백으로 줄바꿈을 하지 않습니다. 태국어나 라오스어 등 단어 사이에 공백 없이 쓰이는 언어도 있습니다.

✔️ 음절 기준으로 줄바꿈하는 언어

일부 문자 체계는 단어뿐만 아니라 음절 경계에서 다음 줄로 줄바꿈을 합니다. 일반적으로 음절 경계가 발생하는 위치를 확인하려면 분석이 필요합니다. 종종 음절의 끝을 결합 문자인 받침으로 표시하거나 음절의 끝을 특별한 기호로 표시하기도 합니다. 경우에 따라 음절 경계의 위치가 시각적으로 모호할 수도 있습니다. 하지만, 한국어와 중국어는 음절이 단일 문자에 해당하여 쉽게 음절을 구분할 수 있습니다.

✔️  문자 기준으로 줄바꿈하는 언어

음절이나 단어 경계에 관계없이 개별 문자를 다음 줄로 줄바꿈 하는 언어로는 대표적으로 일본어가 있습니다. 예를 들면 “오늘”이라는 단어는 “きょう”라고 쓰이고, 단음절로 “Kyō”라고 읽힙니다. 음절 단위라면 줄 끝에서 3개의 문자가 함께 줄바꿈 되어야 하지만, 문자 기준으로 줄바꿈 하기 때문에 하나의 음절이 아닌 끝의 1개 또는 2개 문자 앞에서 중단점이 허용될 수 있습니다. 만약 콘텐츠 작성자가 이 중단점 제어를 원한다면 line-break 속성으로 세부적인 줄 바꿈 허용 조건을 지정할 수 있습니다.

✔️ 2가지 기준으로 줄바꿈이 가능한 언어 _{(위 표에 밑줄로 표시됨)}

한국어는 콘텐츠 작성자의 선호에 따라 단어, 음절 2가지 기준으로 줄바꿈이 가능하다는 점에서 특이한 언어입니다. 음절 기준의 줄바꿈은 특히 양쪽 정렬 텍스트에서 일반적이지만, 오른쪽 가장자리가 울퉁불퉁한 단락은 종종 단어 단위로 줄바꿈 합니다. 그리고 한글은 음절 문자이기 때문에 문자 기준의 줄바꿈처럼 보이기도 합니다.

한글의 특이점 중 또 하나는 현대 한글 텍스트의 단어는 일반적으로 공백으로 구분되지만, 한자 기반의 오래된 텍스트에서 단어 사이에 공백이 없이 쓰인 글도 볼 수 있습니다. 한국어 외에 에티오피아어도 이처럼 현대와 전통적 언어에 따라 줄바꿈 기준이 다릅니다.

4. 줄바꿈에 영향을 주는 HTML 요소

마지막으로 줄바꿈에 영향을 주는 HTML 요소 <br/> 과 <wbr/> 에 대해 알아봅시다.

1) <br/> 요소

<br/> 요소는 “줄바꿈”을 나타냅니다. 앞서 말한 소프트 랩 기회와 상관없이 <br/> 요소가 있는 곳에서는 강제 줄바꿈이 발생합니다.

See the Pen [SmartStudio Blog] 연속된 특수문자 by S.Young (@s_young) on CodePen.

2) <wbr/>요소

<wbr/> 요소는 “줄바꿈 기회”를 나타냅니다. 기본 줄바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다. <br/>  요소처럼 줄바꿈을 반드시 발생하는 것이 아니라 소프트 랩 기회처럼 중단이 허용하는 위치를 나타내고, 경우에 따라 <wbr/> 이 위치한 곳에서 줄바꿈이 일어나기도 하고, 일어나지 않기도 합니다. 마치 유니코드의 U+200B (ZERO-WIDTH SPACE, &#8203; ) 코드처럼 작동합니다.

See the Pen [SmartStudio Blog] wbr by S.Young (@s_young) on CodePen.

5. 마무리

이번 글에서는 줄바꿈에 대한 기본 이해와 SmartEditor에서 발생한 다국어와 줄바꿈 이슈까지 깊이 있게 다루어보았습니다. 글의 내용을 종합하여 정리해 보자면 아래와 같습니다. 

• 줄바꿈 속성은 소프트 랩 기회(허용된 중단점에서 줄바꿈이 수행될 기회)가 어디서 발생할지를 제어합니다.
• 줄바꿈 기본 규칙은 CJK 텍스트는 음절 경계에서, Non-CJK 텍스트는 공백 경계(단어 단위)에서 줄바꿈 합니다.
• 공백 경계 줄바꿈 상태에서 텍스트 오버플로를 방지하려면 overflow-wrap: word-break를 추가합니다.
• 하위 브라우저를 지원하는 경우, 비표준 속성인 word-wrap  속성도 함께 사용할 수 있습니다.
• overflow-wrap의 속성값 break-wrap 과 anywhere의 차이는, width: min-content 일 때 소프트 랩 기회 차이와 브라우저 지원 범위에 있습니다.
• 긴 URL이 있는 링크 요소에는 word-break: break-all 스타일을 함께 추가하면 좀 더 자연스러운 텍스트 흐름을 보여줄 수 있습니다.
• 한국어는 다른 언어와 달리 단어, 음절 2가지 기준의 줄바꿈이 모두 자연스러운 언어입니다. 하지만 언어별로 자연스럽게 느껴지는 줄바꿈 기준이 다르기 때문에, 다국어를 대응하는 서비스라면 word-break: normal 기본값을 유지하는 것이 안전합니다.
• 줄바꿈은 <br/> 요소로, 줄바꿈 기회는 <wbr/> 요소로 나타낼 수 있습니다.

저는 이 글을 정리하기 전에도 word-break, word-wrap, overflow-wrap을 많이 사용하였지만, 정확한 이해 없이 항상 검색해서 사용하거나, 특히 word-break 속성은 한국어에만 초점을 두어 사용했었습니다. 하지만 팀원들과 함께 줄바꿈 이슈를 논의하면서 W3C 공식 문서를 자세히 살펴보게 되었고, 줄바꿈에 대한 다양한 언어별 차이를 알게 되었습니다. 이 덕분에 다국어 환경에서 발생하는 사이드 이펙트를 사전에 예방하는 데 도움이 되었습니다.

SmartEditor 이야기가 여러분들이 앞으로 다양한 텍스트 이슈를 대응하는 데 도움이 되길 바랍니다. 에디터 줄바꿈 스타일에 대한 A to Z 이야기 아직 끝나지 않았습니다. 다음에는 공백문자와 관련된 줄바꿈에 대한 이야기를 줄바꿈 스타일에 대한 A to Z: 공백 문자편 글에서 알아봅시다! 🤗

참고자료

길선영 | SmartEditor

정렬을 맞추는 요가와 CSS를 좋아하는 개발자