2025년 8월 17일한국어

CSS 쓰기 모드(writing-mode)에 대한 종합 가이드. 국제화(i18n)를 위한 텍스트 방향 제어 방법을 탐구하고 시각적으로 매력적이며 전 세계적으로 접근 가능한 웹사이트를 만드는 방법을 알아봅니다.

CSS 쓰기 모드: 글로벌 웹사이트를 위한 국제적 텍스트 방향 마스터하기

오늘날과 같이 상호 연결된 세상에서 웹사이트는 다양한 사용자층을 만족시켜야 하며, 그 중요한 측면 중 하나는 다양한 텍스트 방향을 처리하는 것입니다. CSS writing-mode는 개발자가 텍스트가 흐르는 방향을 제어할 수 있게 해주는 강력한 도구로, 진정한 국제화(i18n) 및 시각적으로 매력적인 웹 경험을 만들 수 있게 합니다. 이 종합 가이드에서는 writing-mode의 복잡한 부분을 탐색하고, 글로벌 웹사이트를 위한 텍스트 방향을 마스터하는 데 도움이 되는 실용적인 예제와 실행 가능한 통찰력을 제공할 것입니다.

쓰기 모드 이해하기

writing-mode CSS 속성은 텍스트 줄이 가로로 배치되는지 세로로 배치되는지, 그리고 블록이 진행되는 방향을 지정합니다. 이는 다음과 같이 다른 쓰기 방향을 사용하는 언어에 맞게 웹 페이지를 조정하는 데 중요한 역할을 합니다:

왼쪽에서 오른쪽으로(LTR): 영어, 스페인어, 프랑스어, 독일어 및 기타 여러 서양 언어.
오른쪽에서 왼쪽으로(RTL): 아랍어, 히브리어, 페르시아어 및 우르두어.
세로 쓰기: 중국어 번체, 일본어 및 몽골어.

기본적으로 웹 브라우저는 horizontal-tb 쓰기 모드를 사용하며, 이는 텍스트를 위에서 아래로 수평으로 배치합니다. 하지만 writing-mode를 사용하면 이 기본 동작을 변경하고 다양한 텍스트 방향을 수용하는 레이아웃을 만들 수 있습니다.

`writing-mode` 속성의 값들

writing-mode 속성은 여러 값을 허용하며, 각 값은 다른 텍스트 방향과 블록 흐름을 지정합니다:

horizontal-tb: 수평 상단에서 하단으로. 텍스트 줄이 수평이며 위에서 아래로 흐릅니다. 이것이 기본값입니다.
vertical-rl: 수직 오른쪽에서 왼쪽으로. 텍스트 줄이 수직이며 오른쪽에서 왼쪽으로 흐릅니다. 블록은 아래쪽으로 진행됩니다.
vertical-lr: 수직 왼쪽에서 오른쪽으로. 텍스트 줄이 수직이며 왼쪽에서 오른쪽으로 흐릅니다. 블록은 아래쪽으로 진행됩니다.
sideways-rl: vertical-rl의 더 이상 사용되지 않는 별칭입니다.
sideways-lr: vertical-lr의 더 이상 사용되지 않는 별칭입니다.

다음 값들도 사용 가능하지만 덜 일반적으로 사용됩니다:

block-flow: 다른 속성에 의해 영향을 받을 수 있는 블록 서식 컨텍스트의 방향을 사용합니다.

기본 예제

writing-mode의 사용법을 몇 가지 간단한 예제로 설명해 보겠습니다:

가로 텍스트 (기본값)

이것은 기본 동작이므로 명시적인 writing-mode가 필요하지 않습니다:


<p>이것은 가로 텍스트입니다.</p>

세로 텍스트 (오른쪽에서 왼쪽으로)

텍스트를 오른쪽에서 왼쪽으로 세로로 표시하려면 vertical-rl을 사용합니다:


<p style="writing-mode: vertical-rl;">이것은 세로 텍스트입니다 (오른쪽에서 왼쪽으로).</p>

세로 텍스트 (왼쪽에서 오른쪽으로)

텍스트를 왼쪽에서 오른쪽으로 세로로 표시하려면 vertical-lr을 사용합니다:


<p style="writing-mode: vertical-lr;">이것은 세로 텍스트입니다 (왼쪽에서 오른쪽으로).</p>

`writing-mode`의 실제 적용 사례

기본적인 텍스트 방향을 넘어, writing-mode는 시각적으로 매력적이고 국제적으로 접근 가능한 웹사이트를 만들기 위한 다양한 실제 적용 사례를 제공합니다:

1. RTL 언어에 적응하기

아랍어나 히브리어와 같은 RTL 언어를 지원하는 웹사이트의 경우, writing-mode는 텍스트를 올바르게 표시하는 데 필수적입니다. CSS 선택자를 사용하여 언어 속성을 기반으로 특정 요소나 전체 문서에 writing-mode: rtl;을 적용할 수 있습니다:


<html lang="ar">
  <body>
    <p>هذا نص عربي.</p>
  </body>
</html>


html[lang="ar"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}

direction: rtl;이 기본 방향을 설정하는 데 중요하지만, 혼합 방향 텍스트를 올바르게 처리하기 위해 unicode-bidi: bidi-override;도 필요할 수 있습니다. 현대적인 접근 방식은 나중에 논의할 논리적 속성을 선호하는 경우가 많습니다.

2. 세로 내비게이션 메뉴 만들기

writing-mode는 일본어 및 중국어 웹사이트에서 자주 볼 수 있는 세로 내비게이션 메뉴를 만드는 데 사용할 수 있습니다. 이는 사이트에 독특한 시각적 감각을 더할 수 있습니다:


<ul class="vertical-menu">
  <li><a href="#">홈</a></li>
  <li><a href="#">소개</a></li>
  <li><a href="#">서비스</a></li>
  <li><a href="#">연락처</a></li>
</ul>


.vertical-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vertical-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

이 예제에서 text-orientation: upright;는 세로 메뉴 항목 내의 텍스트가 회전되지 않고 똑바로 표시되도록 하는 데 사용됩니다.

3. 잡지 스타일 레이아웃 디자인하기

writing-mode는 잡지 스타일의 레이아웃을 구현하는 데 통합될 수 있습니다. 예를 들어, 큰 이미지 위에 세로 텍스트를 겹쳐 인상적인 시각 효과를 만들 수 있습니다.


<div class="magazine-section">
  <img src="image.jpg" alt="Magazine Image">
  <div class="vertical-text">독점 인터뷰</div>
</div>


.magazine-section {
  position: relative;
  width: 500px;
  height: 300px;
}

.magazine-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vertical-text {
  position: absolute;
  top: 0;
  right: 10px;
  color: white;
  font-size: 2em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform-origin: top right;
  transform: rotate(180deg); /* 브라우저 간에 올바르게 렌더링하기 위해 필요 */
}

transform: rotate(180deg);는 특히 구형 버전의 여러 브라우저에서 일관된 렌더링을 보장하기 위해 종종 필요합니다.

4. 데이터 시각화 향상시키기

데이터 시각화에서 writing-mode는 특히 공간이 제한적일 때 차트와 그래프의 축 레이블을 지정하는 데 유용할 수 있습니다. 예를 들어, 세로 축의 레이블이 겹치지 않도록 회전시킬 수 있습니다.

고급 기술 및 고려 사항

writing-mode의 힘을 최대한 활용하려면 다음과 같은 고급 기술과 중요한 요소를 고려하십시오:

1. 논리적 속성 및 값

현대 CSS는 레이아웃과 방향을 처리하는 더 유연하고 의미 있는 방법을 제공하는 논리적 속성과 값을 도입했습니다. left 및 right와 같은 물리적 속성 대신, 쓰기 방향에 적응하는 start 및 end와 같은 논리적 속성이 사용됩니다. 예를 들면 다음과 같습니다:

margin-inline-start: LTR에서는 margin-left, RTL에서는 margin-right에 해당합니다.
padding-block-start: 가로 쓰기 모드에서는 padding-top, 세로 쓰기 모드에서는 padding-left 또는 padding-right에 해당합니다.

논리적 속성을 사용하면 특히 여러 쓰기 방향을 처리할 때 CSS를 더 적응성 있고 유지 관리하기 쉽게 만들 수 있습니다.

2. `writing-mode`와 다른 CSS 속성 결합하기

writing-mode는 text-orientation, direction, unicode-bidi와 같은 다른 CSS 속성과 상호 작용하여 텍스트의 모양과 동작을 제어합니다. 원하는 결과를 얻으려면 이러한 상호 작용을 이해하는 것이 중요합니다.

text-orientation: 세로 쓰기 모드에서 문자의 방향을 지정합니다. 값에는 upright, sideways, mixed, use-glyph-orientation가 있습니다.
direction: 텍스트의 기본 방향(LTR 또는 RTL)을 지정합니다.
unicode-bidi: 유니코드 양방향 알고리즘이 요소에 적용되는 방식을 제어합니다.

3. 혼합 방향 텍스트 처리

LTR 및 RTL 문자가 모두 포함된 텍스트(예: 아랍어 단락 내의 영어 텍스트)를 처리할 때는 올바른 렌더링을 보장하기 위해 unicode-bidi 속성을 사용하는 것이 중요합니다. bidi-override 값은 특정 방향을 강제하는 데 자주 사용됩니다.


<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">이 예시처럼.</span></p>

4. 폰트 고려 사항

모든 폰트가 세로 쓰기에 적합한 것은 아닙니다. 일부 폰트에는 세로 쓰기를 위한 글리프가 없거나 올바르게 렌더링되지 않을 수 있습니다. 세로 쓰기 모드를 사용할 때는 세로 텍스트용으로 특별히 설계되었거나 세로 글리프를 잘 지원하는 폰트를 선택하십시오.

동아시아 국가(중국, 일본, 한국)의 폰트는 일반적으로 세로 쓰기를 매우 잘 지원합니다.

5. 접근성

writing-mode 사용이 접근성에 부정적인 영향을 미치지 않도록 하십시오. 이미지 및 기타 비텍스트 콘텐츠에 대한 대체 텍스트를 제공하고, 텍스트가 장애가 있는 사용자에게도 읽기 쉽고 이해하기 쉬운지 확인하십시오. 접근성을 향상시키기 위해 시맨틱 HTML 요소와 ARIA 속성을 사용하십시오.

6. 브라우저 호환성

writing-mode는 최신 브라우저에서 잘 지원되지만, 구형 브라우저에서는 공급업체 접두사(예: -webkit-writing-mode, -ms-writing-mode)가 필요할 수 있습니다. Sass나 Less와 같은 CSS 전처리기를 사용하여 공급업체 접두사 추가를 자동화하거나 Autoprefixer와 같은 도구를 사용하십시오.

`writing-mode` 사용을 위한 모범 사례

writing-mode를 효과적으로 사용하고 전 세계적으로 접근 가능한 웹사이트를 만들려면 다음 모범 사례를 따르십시오:

가능할 때마다 논리적 속성과 값을 사용하십시오. 이렇게 하면 CSS를 더 적응성 있고 유지 관리하기 쉽게 만들 수 있습니다.
세로 쓰기 모드에 적합한 폰트를 선택하십시오. 폰트가 세로 텍스트에서 올바르게 렌더링되는지 테스트하십시오.
접근성을 고려하십시오. writing-mode 사용이 장애가 있는 사용자의 접근성에 부정적인 영향을 미치지 않도록 하십시오.
다양한 브라우저와 장치에서 레이아웃을 테스트하십시오. 레이아웃이 여러 플랫폼에서 올바르게 렌더링되는지 확인하십시오.
CSS 전처리기나 Autoprefixer를 사용하여 공급업체 접두사를 처리하십시오. 이렇게 하면 시간과 노력을 절약하고 CSS가 구형 브라우저와 호환되도록 보장할 수 있습니다.
콘텐츠와 표현을 분리하십시오. CSS를 사용하여 콘텐츠의 표현을 제어하고 스타일링 목적으로 HTML을 사용하지 마십시오.

`writing-mode`를 사용하는 글로벌 웹사이트 예시

전 세계의 많은 웹사이트가 RTL 언어에 적응하는 것부터 시각적으로 독특한 레이아웃을 만드는 것까지 다양한 목적으로 writing-mode를 활용합니다. 몇 가지 예는 다음과 같습니다:

아랍어 또는 히브리어 뉴스 웹사이트: 이러한 웹사이트는 텍스트의 올바른 표시를 위해 direction: rtl 및 잠재적으로 writing-mode 조정을 사용합니다.
일본 및 중국 예술 및 문화 웹사이트: 종종 제목, 메뉴 및 장식 요소에 세로 쓰기를 통합합니다.
패션 잡지: 스타일 효과를 위해 시각적 레이아웃에 세로 텍스트를 자주 사용합니다.

결론

CSS writing-mode는 국제화되고 시각적으로 매력적인 웹사이트를 만들기 위한 강력한 도구입니다. 이 속성의 다양한 값을 이해하고 다른 CSS 속성과 상호 작용하는 방식을 파악함으로써 다양한 텍스트 방향에 적응하고 전 세계 사용자의 사용자 경험을 향상시키는 레이아웃을 만들 수 있습니다. 모든 사용자에게 웹사이트가 접근 가능하고 시각적으로 매력적이도록 접근성, 브라우저 호환성 및 폰트 선택을 고려하는 것을 잊지 마십시오.

웹 개발이 계속 발전함에 따라, writing-mode와 같은 기술을 마스터하는 것은 진정으로 글로벌하고 포용적인 온라인 경험을 만드는 데 점점 더 중요해지고 있습니다. 국제화의 힘을 받아들여 전 세계 모든 곳의 사용자와 공감대를 형성하는 웹사이트를 만드십시오.