쓰기 모드와 CSS 레이아웃 - WebactuallyWebactually | 웹사이트를 만드는 사람들을 위한 온라인 정보

이 기사는 쓰기 모드의 실용적 또는 창조적인 적용에 관한 내용이 아니다. 페이지나 구성 요소의 쓰기 모드를 변경할 필요가 없는 사람에게도 쓰기 모드를 이해하는 것이 왜 중요한지를 설명하려고 한다. 여러 쓰기 모드의 지원은 플렉스박스^Flexbox나 그리드^Grid 레이아웃의 새로운 레이아웃 방법이 설계된 방식에 핵심이 있다. 이 핵심을 이해하면 이들 레이아웃 방법이 어떻게 작동하는지 더 잘 이해할 수 있다.

쓰기 모드란

문서나 구성 요소의 쓰기 모드는 텍스트 흐름의 방향을 뜻한다. CSS에서 쓰기 모드로 작업할 때는 writing-mode 속성을 사용한다. 이 속성은 다음의 값을 갖는다.

horizontal-tb
vertical-rl
vertical-lr
sideways-rl
sideways-lr

이 기사를 스매싱 매거진에서 영어로 읽고 있다면, 이 문서의 쓰기 모드는 horizontal-tb 또는 Horizontal Top To Bottom이다. 영어에서는 문장이 가로로 작성되고, 각 줄의 첫 자는 왼쪽에서 시작한다.

아랍어와 같은 언어 역시 horizontal-tb 쓰기 모드를 적용한다. 이 언어는 가로로, 위에서 아래로 작성되지만 아랍어 문장은 오른쪽에서 왼쪽으로 작성되므로 아랍어 문장은 오른쪽에서 시작된다.

한국어, 중국어, 일본어는 세로로 작성할 때도 있는데 이 경우, 첫 번째 문장의 첫 글자는 오른쪽 상단에 위치한다. 그 다음 문장은 왼쪽에 추가된다. 따라서 사용된 쓰기 모드는 vertical-rl이다. 세로쓰기 모드^vertical-rl는 오른쪽에서 왼쪽으로 실행된다.

몽골어도 세로로 작성되지만 왼쪽에서 오른쪽 순이다. 따라서 몽골어로 문장을 쓰려면 vertical-lr 쓰기 모드를 사용해야 한다.

쓰기 모드의 다른 두 가지 값은 세로 문장 조판보다 더 창의적인 목적으로 설계된 것이다. sideways-lr와 sideways-rl을 사용하면 일반적으로 세로로 작성한 문장도 텍스트가 가로로 바뀐다. 안타깝게도 이 값은 현재 파이어폭스에서만 지원된다. 코드펜^CodePen은 다른 모든 쓰기 모드 값을 보여주는데, sideways-* 형식의 값이 동작하는지 보려면 파이어폭스를 사용해야 한다.

                  레이철 앤드루의 쓰기 모드 데모 코드펜 참고

쓰기 방식이 다른 언어를 사용하는 문서를 만들 때 쓰기 모드를 사용한다. 예를 들어 일부 콘텐츠 옆에 세로로 제목을 설정하려고 할 때도 쓰기 모드를 창의적으로 사용할 수 있다. 이 글은 세로쓰기 언어 지원과 텍스트를 세로쓰기할 때 CSS 레이아웃과 CSS 전반에 일반적으로 미치는 영향을 살펴보기 위한 것이다.

세로 텍스트 쓰기 모드 사용에는 다음과 같은 몇 가지 유용한 자료가 있다.

W3C 국제화 사이트에는 유용한 정보가 풍부하다. RTL^{Right To Left} 문장과 세로 텍스트^{vertical text}에 관해 읽어보기 바란다.

젠 시몬스^{Jen Simmonss}는 CSS 쓰기 모드에 관해 훌륭한 글을 썼는데, 여기에는 이들 모드를 적용한 인쇄물에서 사용 중인 몇 가지 예제도 포함되어 있다.

세계와 쓰기 시스템에 관한 고찰 – 천 후이 징^{Chen Hui Jing}

쓰기 모드를 사용한 세로 조판 되돌아보기 – 천 후이 징

모질라 개발자 네트워크(MDN)의 writing-mode 속성

블록과 인라인 치수

문서의 쓰기 모드를 변경할 때 우선 할 일은 방향을 블록 흐름^{block flow}으로 전환하는 것이다. 따라서 블록과 인라인이 무엇을 뜻하는지 이해하는 것이 매우 중요하다.

CSS에서 제일 먼저 배워야 할 내용은 무엇이 블록 요소^{block element}인지 구별하는 것이다. 예를 들면 단락 요소는 블록 요소다. 이런 요소는 블록 방향의 다른 블록 다음에 표시된다. 문장 속 단어처럼 인라인 요소^{inline element}는 인라인 방향의 다른 인라인 요소 다음에 표시된다. 가로쓰기 모드로 작업하면 블록 차원은 위에서 아래 수직으로, 인라인 차원은 왼쪽에서 오른쪽 수평으로 동작한다는 사실에 익숙해진다.

하지만 블록과 인라인 요소가 문서의 쓰기 모드와 관련되므로 인라인 차원은 가로쓰기 모드인 경우에만 수평이다. 이것은 너비가 아니라 인라인 크기와 관련이 있다. 블록 차원은 가로쓰기 모드일 때만 수직이다. 따라서 높이가 아니라 블록 크기와 관련이 있다.

논리적인 상대 흐름 속성

인라인 크기와 블록 크기라는 용어는 새로운 쓰기 모드를 인식하는 세계를 반영하기 위해 설계된 새로운 CSS 속성의 이름이기도 하다. 가로쓰기 모드에서 width 대신 inline-size 속성을 사용한다면, 요소의 쓰기 모드를 전환하지 않는 한 이 모드는 정확히 너비^width와 동일한 방식으로 동작한다. inline-size를 사용한다면 아래 예제에서 보듯이 인라인 차원의 크기^size가 된다.

               레이철 앤드루의 width vs. inline-size 코드펜 참고

높이의 경우도 동일하다. height 속성은 항상 세로 크기가 된다. 이 차원은 해당 항목의 높이가 얼마나 되는가에 달렸다. 하지만 block-size 속성은 블록 차원에서 가로쓰기 모드에서는 수직으로, 세로쓰기 모드에서는 수평으로 크기를 제공한다.

나의 글 “논리적 속성과 값 이해하기”에서 설명한 것처럼 모든 물리적 속성에는 매핑이 있으며 이런 매핑은 화면의 치수와 엮여 있다. 이것을 염두에 두면 CSS의 많은 부분이 화면의 실제 레이아웃과 관련해 지정된다. top, right, bottom, left를 사용해 위치와 마진, 패딩, 테두리를 설정한다. 요소를 left와 right로 float 속성을 지정한다. 우리는 요소를 물리적 차원에 두기를 원하면서도 점점 더 물리적 위치를 고려하지 않고 레이아웃에 관해서만 생각하고 있다. 논리적 속성과 값은 CSS 작업 전반에 물리적‧논리적 속성에 구애되지 않는 방식의 쓰기 모드를 끌어들이게 된다.

쓰기 모드, 그리드와 플렉스박스

새로운 레이아웃 방법이 도입되면서 구성 요소의 쓰기 모드를 플렉스나 그리드 레이아웃처럼 배치하는 물리적‧논리적 속성에 구애받지 않는 방식이 들어왔다. 처음으로 사람들은 left와 right, top, bottom이 아니라 start와 end에 대해 생각해야 했다.

내가 처음 CSS 그리드라는 주제를 발표했을 때, 첫 발표 내용은 명세의 모든 속성에 대한 개요였다. 나는 grid-area 속성은 그리드 항목을 배치하는 네 가지 라인^line 모두를 설정하는 데 사용될 수 있다고 언급했다. 하지만 이 라인의 순서는 네 가지 마진 모두를 설정하는 데 사용되는 익숙한 top, right, bottom, left가 아니었다. 대신 순서는 반대로 top, left, bottom, right를 사용해야 했다. 그리드와 쓰기 모드 사이의 연결을 이해하기 전까지 이 방식은 아주 이상해 보였다. 나는 이 작업이 양쪽 시작 라인을 설정한 후에 양쪽 끝 라인을 설정하는 것임을 깨달았다. top과 right, bottom, left를 사용하면 가로쓰기 모드인 경우 잘 동작하지만 그리드를 옆으로 돌리면 이야기가 달라진다. 다음 코드펜처럼 grid-area: 1 / 2 / 3 / 5;를 사용한다면 라인은 다음과 같이 설정된다.

grid-row-start: 1; – 블록 시작
grid-column-start: 2 – 인라인 시작
grid-row-end: 3 – 블록 끝
grid-column-end: 5 – 인라인 끝

                   레이철 앤드루의 그리드 영역 코드펜 참고

플렉스박스 행과 열

플렉스박스를 사용하고 컨테이너에 display: flex를 추가한다면 flex-direction 속성의 초깃값이 row이므로 해당 항목을 행으로 표시한다. 행은 사용 중인 쓰기 모드의 인라인 차원을 따른다. 따라서 쓰기 모드가 horizontal-tb라면 행은 가로로 동작한다. 현재 글의 텍스트 방향이 왼쪽에서 오른쪽이면 항목은 왼쪽에서 시작하고, 오른쪽에서 왼쪽이면 오른쪽에서 시작한다.

하지만 vertical-rl과 flex-direction: row처럼 세로쓰기 모드를 사용하면 항목은 인라인 방향이 세로이므로 세로로 배치된다. 다음의 모든 코드펜 예제는 flex-direction: row를 사용하고 쓰기 모드나 방향만 바꿨다.

              레이철 앤드루의 flex-direction: row 코드펜 참고

flex-direction: column을 추가하면 항목은 쓰기 모드의 블록 차원으로 배치된다. 가로쓰기 모드에서 블록 차원은 위에서 아래로 동작하므로 열은 세로다. vertical-rl이라는 쓰기 모드를 사용하면 열은 가로다. 앞의 예제처럼 다음의 플렉스 레이아웃 간 유일한 차이점은 사용된 쓰기 모드다.

             레이철 앤드루의 flex-direction: column 코드펜 참고

그리드 자동 배치

그리드에서 자동 배치를 사용할 때 플렉스 레이아웃과 비슷한 동작을 하는 것을 볼 수 있다. 그리드 항목은 문서의 쓰기 모드에 따라 자동 배치된다. 기본값은 항목을 행으로 배치하는 인라인 방향이며, 가로쓰기 모드에서는 수평으로, 세로쓰기 모드에서는 수직으로 동작한다.

                 레이철 앤드루의 그리드 행 자동 배치 코드펜 참고

다음 예제처럼 항목의 흐름을 column으로 변경해보자. 해당 항목은 이제 블록 차원, 즉 가로쓰기 모드에서 수직이며, 세로쓰기 모드에서는 수평으로 배치된다.

                레이철 앤드루의 그리드 열 자동 배치 코드펜 참고

그리드 라인 번호 배치

라인 기반 배치도 쓰기 모드를 따른다. 그리드의 라인은 행과 열 모두 1에서 시작한다. 열 라인 1에서 열 라인 3까지 항목을 배치하고 왼쪽에서 오른쪽으로 가로쓰기 모드라면, 그 항목은 가장 왼쪽 열 라인에서 그리드 두 개를 가로로 늘린다. 따라서 두 개의 열에 걸쳐진다.

쓰기 모드를 vertical-rl로 변경하면 열 라인 1이 그리드 상단에 오고, 해당 항목은 세로로 두 개의 트랙에 걸친다. 두 개의 열에 걸쳐 있지만 해당 열은 이제 가로로 동작한다.

                레이철 앤드루의 마진: 인접한 형제 코드펜 참고

그리드와 플렉스박스의 정렬

많은 사람이 플렉스 레이아웃이 항목을 정렬할 때에야 비로소 플렉스박스가 쓰기 모드를 다루는 방식을 처음 접하게 된다. 앞 예제의 flex-direction: row를 가지고 justify-content 속성을 사용해 모든 항목을 flex-end로 정렬하면 해당 항목은 행 끝으로 이동한다. 이 동작은 왼쪽에서 오른쪽으로 향하는 가로쓰기 모드에서 그 행의 끝이 오른쪽에 있으므로 모든 항목이 오른쪽으로 이동한다는 뜻이다. 방향이 오른쪽에서 왼쪽이면 모든 항목은 왼쪽으로 이동한다.

세로쓰기 모드에서 모든 항목은 공간이 있다면 아래로 이동한다. 이 예제의 구성 요소에 inline-size를 설정해 정렬 동작을 확인하기 위한 플렉스 컨테이너의 여분 공간을 확보한다.

정렬은 항상 두 개의 축을 다루기 때문에 그리드 레이아웃에서 조금 더 이해하기 쉽다. 그리드는 2차원이며 두 개의 차원은 블록과 인라인이다. 따라서 align-으로 시작하는 속성이나 justify-로 시작하는 속성 중 어느 것을 사용할지를 알려면 한 가지 규칙만 기억하면 된다. 그리드 레이아웃에서 align- 속성(- align-content, align-items, align-self)은 블록 축 정렬을 수행하는 데 사용된다는 것이다. 가로쓰기 모드에서 이 작업은 수직을, 세로쓰기 모드에서는 수평을 뜻한다.

다시 한 번 말하지만, 쓰기 모드가 무엇이든 우리는 정확히 동일한 방식으로 그리드 레이아웃이 동작하길 바란다. 따라서 left나 right 또는 top과 bottom을 사용하지 않는다. start와 end를 사용해 정렬한다. 블록 차원에서 horizontal-tb일 때는 top이지만 vertical-rl일 때는 right다. 다음 예제를 살펴보면 정렬 값은 두 가지 그리드 모두에서 동일하며, 사용한 쓰기 모드에 따라서만 유일하게 차이가 생긴다.

             레이철 앤드루의 마진: 인접한 형제 코드펜 참고

justify-content, justify-items, justify-self 속성은 그리드 레이아웃에서 인라인 정렬에 항상 사용된다. 이 정렬은 가로쓰기 모드에서는 수평이고, 세로쓰기 모드에서는 수직이다.

             레이철 앤드루의 마진: 인접한 형제 코드펜 참고

플렉스박스 정렬은 주축이 행에서 열로 전환될 수 있어서 다소 복잡하다. 따라서 플렉스박스에서 정렬 방법은 주축 대 십자 축으로 생각해야 한다. align- 속성은 십자 축에서 사용된다. 주축에서 모든 정렬은 justify-content가 되는데, 이는 플렉스박스에서 항목을 그룹으로 다루기 때문이다. 십자 축에서 플렉스 컨테이너 안에 다중 플렉스 라인과 공간이 있다면 align-content를 사용해 간격을 조정할 수 있다. 플렉스 항목들과 이들의 플렉스 라인의 관계에서 플렉스 항목을 십자축 상에서 이동하는데 align-items과 align-self를 이용할 수도 있다.

             레이철 앤드루의 플렉스박스 정렬 코드펜 참고

CSS 레이아웃 정렬에 대한 더 자세한 내용은 스매싱 매거진에 있는 내 기사를 참고하기 바란다.

쓰기 모드 인식과 이전 CSS

모든 CSS가 완전히 이런 상대 흐름, 즉 어떤 속성에도 구애되지 않는 방식의 쓰기 모드 작업을 따라잡은 것은 아니다. 특이하게 두드러지지 않은 곳일수록 블록과 인라인, start와 end라는 관점에서 요소를 생각하게 된다. 예를 들어 다중 열 레이아웃에서 열 인라인 크기를 뜻하는 column-width를 지정하는데, 이는 세로쓰기 모드에서 작업할 때 이 크기가 물리적인 너비에 매핑되지 않기 때문이다.

             레이철 앤드루의 다중 열과 쓰기 모드 코드펜 참고

보다시피 horizontal-tb 외의 쓰기 모드를 거의 사용하지 않아도 CSS에서 많은 작업은 쓰기 모드를 기반으로 하고 있다.

나는 CSS 레이아웃을 물리적‧논리적 속성에 구애받지 않는 쓰기 모드 방식으로 생각하는 것이 아주 유용하다는 것을 알았다. 모든 속성과 값을 논리적인 것으로 전환하는 일이 조금 이를 수 있지만 이 새로운 레이아웃 방법을 다룰 때 우리는 이미 상대 흐름의 세계에 있는 것이다. 여러분의 멘털 모델^{mental model}을 화면의 네 귀퉁이에 묶어 놓지 말고 블록과 인라인, 시작과 끝 중 하나로 전환한다면 플렉스박스와 그리드를 사용할 때 마주치는 많은 것이 명확해질 것이다.

도서 소개