Writing modes/Introduction

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

169/190

안녕하세요! 프론트엔드 개발에 깊이를 더해줄 '쓰기 모드 시스템 (Writing mode systems)' 문서를 찾아오셨군요.

대부분의 웹사이트는 한글이나 영어처럼 왼쪽에서 오른쪽으로, 위에서 아래로 글을 읽습니다. 하지만 전 세계를 대상으로 하는 글로벌 서비스를 만들거나(i18n), 디자인적 요소를 위해 세로 쓰기(일본어, 몽골어 등)를 적용해야 할 때 이 개념을 모르면 레이아웃이 완전히 엉켜버립니다. 최신 CSS 레이아웃(Flex, Grid)을 마스터하기 위해서도 필수적인 개념이죠.

공식 문서의 모든 내용을 빠짐없이, 실무 경험을 담아 알기 쉬운 구어체로 번역해 드릴게요!

쓰기 모드 시스템 소개 (Introduction to writing mode systems)

CSS는 오른쪽에서 왼쪽(right-to-left), 왼쪽에서 오른쪽(left-to-right), 그리고 위에서 아래(top-to-bottom)를 포함하는 다양한 콘텐츠의 방향성, 즉 쓰기 모드(writing modes)를 지원합니다. 이 가이드는 쓰기 모드 시스템과 그 방향성에 대한 간략한 개요를 제공합니다.

블록과 인라인 (Block and inline)

다양한 쓰기 시스템의 방향성을 살펴보기 전에, 먼저 "블록(block)"과 "인라인(inline)"이라는 용어를 이해하는 것이 중요합니다. 인라인(inline)이라는 용어는 글자(characters)와 단어들이 하나의 줄(line) 안에서 어떻게 흐르는지를 나타냅니다. 반면 블록(block)이라는 용어는 글줄(lines)이나 콘텐츠의 덩어리(blocks)가 서로의 옆(또는 아래)에 어떻게 쌓이는지(stack up)를 나타냅니다.

문서의 쓰기 모드(writing mode)가 문서의 블록 방향과 인라인 방향을 결정합니다. 즉, 이 방향들은 모니터 화면의 물리적인 방향인 왼쪽, 오른쪽, 위, 아래를 기준으로 고정되어 있는 것이 아닙니다.

💡 강사의 실무 팁 1: 물리적 방향 vs 논리적 방향
이게 CSS 최신 트렌드의 가장 핵심입니다! 예전에는 여백을 줄 때 margin-left를 썼죠? 이건 화면의 "물리적인 왼쪽"을 뜻합니다. 하지만 세로 쓰기로 모드가 바뀌면 왼쪽 여백이 위쪽이나 아래쪽 여백이 되어야 맞을 수도 있습니다. 그래서 요즘은 방향에 상관없이 글자가 흐르는 시작점(margin-inline-start) 같은 '논리적(logical)' 속성을 사용합니다. 이 개념을 이해하려면 블록/인라인의 축 개념이 머릿속에 꼭 잡혀 있어야 해요!

차원과 방향 (Dimensions and directions)

웹 페이지에 있는 모든 것은 인라인(inline) 차원 또는 블록(block) 차원을 따라 배치됩니다. 인라인 차원은 현재 쓰기 모드에서 텍스트의 한 줄이 이어지는 축을 말하며, 블록 차원은 문단과 같은 블록들이 차례대로 표시되는 축을 말합니다. 인라인 차원과 블록 차원은 항상 서로 수직(perpendicular)으로 교차합니다.

텍스트가 가로로 왼쪽에서 오른쪽으로 이어지는 영어(또는 한국어) 문서나, 가로로 오른쪽에서 왼쪽으로 이어지는 아랍어 문서의 경우, 인라인 차원은 수평(horizontal) 방향이 되며, 인라인 방향은 각각 왼쪽에서 오른쪽(LTR), 오른쪽에서 왼쪽(RTL)이 됩니다. 두 경우 모두 블록 차원은 수직(vertical) 방향이 되며, 블록 방향은 위에서 아래(top-to-bottom)가 됩니다.

반대로 일본어처럼 세로 쓰기를 하는 수직 쓰기 모드에서는 글줄이 세로로 이어지기 때문에 인라인 차원이 수직(vertical)이 되며, 블록 차원이 수평(horizontal)이 됩니다. (글줄이 세로로 떨어지고, 그 세로 줄들이 옆으로 쌓여가니까요!)

인라인 박스와 블록 박스 (Inline and block boxes)

일반적인 흐름 레이아웃(normal flowing layout)에서 박스들의 외부 디스플레이(outer display) 유형은 해당 박스가 페이지의 다른 요소들과 나란히 놓일 때 어떻게 행동할지를 결정합니다. 인라인 박스(Inline boxes)는 텍스트의 각 줄을 감싸며 인라인 차원을 따라 배치됩니다.

블록 박스(Block boxes)는 다른 블록 요소나 인라인 요소를 포함할 수 있는 페이지의 컨테이너를 나타냅니다. 이들은 블록 차원을 따라 배치되며, (자신의 크기를 제한하는 inline-size 같은 속성이 따로 설정되지 않았다면) 컨테이너 내에서 사용 가능한 모든 공간을 채우기 위해 인라인 차원 쪽으로 쭉 확장됩니다. 블록 박스는 영어처럼 텍스트를 가로로 표시하는 쓰기 모드를 사용할 때만 페이지의 위에서 아래로 표시(배치)됩니다.

CSS 논리적 속성 및 값 모듈 (CSS logical properties and values module)은 CSS에 있는 많은 물리적 속성(physical properties)과 값들에 대응하는 흐름 상대적 매핑(flow-relative mappings)을 정의하고 있습니다. 이를 살펴보는 것은 논리적 속성과 값의 기본 개념을 이해하는 데 큰 도움이 됩니다.

인라인 기준 방향과 블록 흐름 방향 (Inline base and block flow directions)

인라인 기준 방향(inline base direction)은 한 줄에서 콘텐츠가 정렬되는 주된 방향이며, 글줄의 "시작(start)"과 "끝(end)"을 정의합니다. direction 속성은 박스의 인라인 기준 방향을 지정하며, unicode-bidi 속성 및 텍스트 콘텐츠 자체가 본래 가진 방향성과 결합하여 한 줄 안에서 인라인 수준 콘텐츠의 순서를 결정합니다.

블록 흐름 방향(block flow direction)은 블록 레벨 박스와 라인 박스들이 블록 컨테이너 내에서 쌓이는 방향입니다. writing-mode 속성이 이 블록 흐름 방향을 결정합니다.

쓰기 시스템 모드 (Writing system modes)

문자 체계(writing systems)마다 사용하는 쓰기 모드가 다릅니다. 수평(가로) 쓰기 모드는 텍스트 줄이 가로로 되어 있는 모드로, 즉 블록 흐름이 아래로 가거나 위로 가는 것을 말합니다. 수직(세로) 쓰기 모드는 텍스트 줄이 세로로 되어 있는 모드로, 즉 블록 흐름이 왼쪽이나 오른쪽으로 가는 것을 말합니다.

라틴어 및 슬라브어 기반 시스템은 전형적으로 '왼쪽에서 오른쪽'인 인라인 방향과 '위에서 아래'인 블록 흐름 방향을 사용하여 작성됩니다. 라틴어 기반 언어에는 영어, 스페인어, 루마니아어, 포르투갈어 등이 있습니다. 슬라브어 기반 언어에는 우크라이나어, 폴란드어, 체코어 등이 있습니다. (한국어도 웹에서는 보통 이 모드를 따르죠!)

HTML

MDN Playground에서 실행하기 (Play)

<p lang="en-US" dir="auto">This is written in English</p>
<p lang="lt-LT" dir="auto">Tai parašyta lietuviu kalba</p>
<p lang="el-GR" dir="auto">Αυτό είναι γραμμένο στα ελληνικά</p>

아랍어 기반 시스템은 전형적으로 '오른쪽에서 왼쪽'인 인라인 방향과 '위에서 아래'인 블록 흐름 방향을 사용하여 작성됩니다. 이렇게 가로로 쓰되 오른쪽에서 왼쪽으로 쓰는(RTL) 언어로는 아랍어, 아람어, 아제르바이잔어, 디베히어, 풀라어, 히브리어, 쿠르드어, 엔코어, 페르시아어, 로힝야어, 시리아어, 우르두어 등 여러 가지가 있습니다.

HTML

MDN Playground에서 실행하기 (Play)

<p lang="ur-PK" dir="auto">یہ اردو میں لکھا ہے۔</p>
<p lang="ku-CRB" dir="auto">ئەمە بە کوردی نووسراوە</p>

한자 기반(Han-based) 시스템은 '왼쪽에서 오른쪽' 인라인 방향과 '위에서 아래' 블록 흐름을 사용하는 가로 쓰기 방식과, '위에서 아래' 인라인 방향과 '오른쪽에서 왼쪽' 블록 흐름을 사용하는 세로 쓰기 방식이 모두 흔하게 사용됩니다. 전통적으로 중국어, 베트남어, 한국어, 일본어는 위에서 아래로 떨어지는 세로 기둥(columns) 형태로 쓰이며, 그 기둥들은 오른쪽에서 왼쪽 방향으로 쌓입니다. 하지만 온라인 환경에서는 보통 왼쪽에서 오른쪽으로 향하는 가로 쓰기 방식으로 렌더링 됩니다.

HTML

MDN Playground에서 실행하기 (Play)

<p lang="ja-JP" dir="auto">これは日本語で書かれています</p>

몽골어 기반 시스템은 전형적으로 수직(세로)으로 작성되며, 위에서 아래로 흐르는 기둥들이 왼쪽에서 오른쪽으로 쌓입니다. 즉, '위에서 아래' 인라인 방향과 '왼쪽에서 오른쪽' 블록 흐름 방향을 가집니다. 이는 세로 텍스트 기둥이 오른쪽에서 왼쪽으로 읽히는 중국어, 일본어, 한국어의 세로 쓰기와는 다릅니다. 이런 차이는 몽골 문자가 애초에 왼쪽에서 오른쪽으로 쓰던 고대 위구르 문자에서 파생되었기 때문입니다.

HTML

MDN Playground에서 실행하기 (Play)

<p lang="mn-MONG" dir="auto">Үүнийг монгол хэлээр бичжээ</p>

CSS

위에서 설명한 쓰기 모드들을 올바르게 렌더링하기 위해, 우리는 전역 HTML 속성인 dir을 사용합니다. 사용자의 브라우저나 환경에 따라 CSS 스타일링이 꺼질 수도 있기 때문에, 스타일시트가 없는 상황에서도 올바른 양방향(bidirectional) 레이아웃을 보장하려면 CSS의 direction 속성에만 의존하기보다는 HTML의 dir 속성과 <bdo> 요소를 사용하는 것이 권장됩니다.

수직(세로) 쓰기 언어를 위해 우리는 CSS의 writing-mode와 text-orientation 속성을 사용합니다:

/* 일본어(ja)는 위에서 아래로 쓰며(vertical), 기둥이 오른쪽에서 왼쪽으로(rl) 쌓입니다 */
[lang|="ja"] {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 글자를 똑바로 세워서 표시합니다 */
}

/* 몽골어(mn)는 위에서 아래로 쓰며(vertical), 기둥이 왼쪽에서 오른쪽으로(lr) 쌓입니다 */
[lang|="mn"] {
  writing-mode: vertical-lr;
  text-orientation: sideways; /* 글자를 옆으로 눕혀서 표시합니다 */
}

💡 강사의 실무 팁 2: 세로 모드에서의 레이아웃
writing-mode: vertical-rl을 주면, Flexbox나 Grid의 방향도 통째로 돌아갑니다! 즉, 원래 가로로 정렬되던 flex-direction: row가 세로로 떨어지는 기둥 모양이 되는 거죠. 디자인적으로 신선한 레이아웃(예: 패션 잡지나 책 표지 같은 디자인)을 만들고 싶다면 이 속성을 꼭 활용해 보세요!

쓰기 모드 혼합하기 (Mixing writing modes)

서로 다른 언어들이 각기 다른 쓰기 모드를 가지고 있긴 하지만, 특정 쓰기 모드를 주력으로 사용하는 사이트라 할지라도 내부에는 다른 언어나 쓰기 모드의 콘텐츠가 포함될 수 있습니다. 예를 들어, 아랍어(오른쪽에서 왼쪽) 뉴스 사이트의 기사 안에 왼쪽에서 오른쪽으로 쓰는 라틴어 스타일의 숫자나 영단어가 포함될 수 있죠. 많은 잡지나 신문들은 같은 페이지 안에서 여러 가지 쓰기 모드를 혼합해서 사용합니다. 이 가이드 문서 자체가 다양한 쓰기 모드를 시연하기 위해 혼합해서 사용한 것처럼 말입니다.

타이포그래피 모드(typographic mode)는 수직(세로) 스크립트에 수직 흐름에 특화된 타이포그래피 규칙을 사용할 것인지(수직 타이포그래피 모드), 아니면 수평 쓰기 모드의 타이포그래피 규칙을 사용할 것인지(수평 타이포그래피 모드)를 결정합니다. 이 개념은 진정한 '세로 조판(vertical typesetting)'과 단순히 글자를 옆으로 돌려놓은 '회전된 가로 조판(rotated horizontal typesetting)'을 구별해 줍니다.

쓰기 모드의 한 요소인 text-orientation은 수직 타이포그래피 모드에서 글리프(글자 모양)의 방향을 제어합니다. 즉, 특정 문자를 똑바로 세워서 조판할지(upright), 아니면 옆으로 눕혀서 조판할지(sideways)를 지시합니다.