박스와 간격

모든 것은 상자다

브라우저는 HTML 문서를 받으면 글 한 덩어리, 그림 하나, 버튼 하나마다 직사각형 영역을 하나씩 만든다. 이 영역을 상자(Box)라고 부른다. 상자의 크기와 위치를 정하는 일을 레이아웃(Layout)이라고 한다. CompositionBook에서 지면 위의 요소를 "놓는" 일을 레이아웃이라고 했는데(지면과 화면 구성), 웹에서는 그 일을 브라우저가 규칙에 따라 계산한다. 디자이너가 할 일은 그 규칙에 맞는 숫자를 주는 것이다.

상자는 혼자 있지 않다. 페이지 전체가 하나의 큰 상자이고, 그 안에 머리 띠와 본문과 바닥 띠가, 머리 띠 안에 로고와 메뉴 단추가 들어 있다. 상자 안에 상자가 든 이런 구조를 중첩(Nesting)이라고 한다. 아래는 책방 E의 모임 안내 페이지를 휴대폰 폭(360 CSS 픽셀, 2장)으로 그린 가상의 화면이다. "상자 보기"를 켜면 브라우저가 보는 대로 모든 상자의 테두리가 드러난다. 화면을 누르거나 끌면 손끝 아래의 가장 안쪽 상자가 골라진다.

"상자만" 화면에서 본 것이 브라우저의 눈이다. 색과 글자를 지워도 페이지의 짜임은 그대로 남는다. 상자는 크게 두 가지로 놓인다. 제목, 문단, 그림처럼 위에서 아래로 한 줄씩 쌓이는 블록 상자(Block box)와, 문장 속 굵은 낱말이나 링크처럼 글줄 안에서 옆으로 흐르는 인라인 상자(Inline box)다. 블록 상자는 따로 정하지 않으면 부모의 폭을 가득 채우고, 높이는 안에 든 내용만큼 자란다. 위 화면의 요소들이 모두 폭 328로 같은 것도 그 때문이다. 폭은 바깥에서 정해지고, 높이는 안에서 정해진다. 이 비대칭이 웹 레이아웃의 첫 번째 성질이다. 종이 지면에서는 디자이너가 높이까지 정하지만, 웹에서는 글이 늘면 상자가 아래로 늘어난다.

박스 모델: 네 겹의 상자

상자 하나를 확대하면 네 겹이 있다. 가운데에 글이나 그림이 들어가는 내용 영역(Content)이 있고, 그것을 안쪽 여백(Padding, 패딩)이 감싼다. 안쪽 여백은 상자의 바탕색이 칠해지는 숨 쉴 자리다. 그 바깥에 테두리(Border, 보더)가 있고, 맨 바깥에 이웃한 상자를 밀어내는 투명한 바깥 여백(Margin, 마진)이 있다. 이 네 겹으로 상자의 크기와 간격을 정하는 규칙을 박스 모델(Box model)이라고 한다. 출처는 W3C의 CSS 명세다(CSS 2.1의 8장, 지금은 CSS Box Model Module Level 3로 이어진다).

CSS로는 네 겹을 각각 따로 적는다. 아래는 모임 안내 카드 하나를 적은 예다. 값을 하나만 쓰면 위·오른쪽·아래·왼쪽 네 변에 같은 값이 들어가고, 네 개를 쓰면 시계 방향(위, 오른쪽, 아래, 왼쪽)으로 들어간다.

.event-card {
  width: 240px;          /* 내용 영역의 폭(기본 방식에서) */
  padding: 16px;         /* 안쪽 여백: 네 변 모두 16 */
  border: 2px solid #22342a;
  margin: 0 0 24px;      /* 바깥 여백: 위 0, 양옆 0, 아래 24 */
}

그렇다면 이 카드는 화면에서 폭을 얼마나 차지할까. 아래 시뮬레이터에서 상자 아래쪽 가장자리의 손잡이 셋을 위아래로 끌면 안쪽 여백(초록), 테두리(노랑), 바깥 여백(주황)의 두께가 바뀐다. 두께는 네 변에 똑같이 들어간다. 슬라이더는 CSS의 width 값이다. 위쪽의 세 치수선이 내용 폭, 눈에 보이는 폭, 차지하는 폭을 보여 준다.

기본 방식에서 width는 상자의 겉 폭이 아니라 내용 영역의 폭이다. 안쪽 여백과 테두리는 그 바깥에 더해진다. 식으로 쓰면 다음과 같다.

바깥 여백은 바탕색이 칠해지지 않으니 눈에 보이지 않는다. 그래서 시안을 보고 "카드 사이가 24"라고 읽은 것이 코드에서는 위 카드의 바깥 여백 24일 수도, 두 카드의 바깥 여백 12씩일 수도, 부모 상자의 간격 속성 24일 수도 있다. 눈에 같은 간격이 코드로는 여러 방법으로 만들어진다는 것, 그리고 방법마다 다르게 행동한다는 것이 이 장 뒷부분의 주제다.

폭은 어디까지인가: box-sizing

앞 시뮬레이터에서 본 두 방식은 CSS의 box-sizing 속성으로 고른다. 기본값 content-box는 width를 내용 폭으로, border-box는 width를 테두리까지의 폭으로 읽는다. 앞의 것은 CSS 초기 명세의 정의이고, 뒤의 것은 디자이너가 "폭"이라고 말할 때 떠올리는 것에 가깝다. 시안에서 "카드 폭 240"이라고 적으면 대개 눈에 보이는 카드의 바깥 테두리까지를 뜻하기 때문이다. 이 차이가 어떤 사고를 내는지 보자. 폭 344의 상자 안에 카드 두 장을 width: 50%로 나란히 놓았다. 카드에 안쪽 여백과 테두리를 준다.

퍼센트 폭과 고정 여백을 섞는 순간 content-box는 계산을 어렵게 만든다. 50%와 32픽셀을 더한 값은 부모 폭이 바뀔 때마다 달라지기 때문이다. 그래서 오늘날 많은 사이트가 스타일시트 맨 앞에 모든 요소를 border-box로 바꾸는 규칙을 둔다. 이 규칙은 널리 퍼진 관례이고, 시안의 숫자와 코드의 숫자를 같은 뜻으로 만든다.

/* 모든 상자의 width·height를 테두리까지의 크기로 읽는다 */
*, *::before, *::after {
  box-sizing: border-box;
}

사라지는 간격: 마진 상쇄

지후가 서윤의 시안을 코드로 옮기다 처음 부딪히는 것이 이것이다. 제목 아래에 바깥 여백 24를, 그 아래 문단 위에 바깥 여백 16을 주었다. 둘 사이 간격은 40이어야 할 것 같은데, 화면에서 재면 24다. 16은 어디로 갔을까.

일반적인 문서 흐름에서 위아래로 맞닿은 두 블록 상자의 바깥 여백은 더해지지 않고 큰 쪽 하나로 겹친다. 이것을 마진 상쇄(Margin collapsing)라고 한다. CSS 2.1 명세(8.3.1절)의 규칙이고, 원래는 글 문서를 위한 배려였다. 문단마다 위아래에 1줄씩 여백을 주더라도, 문단과 문단 사이가 2줄로 벌어지지 않고 1줄로 유지된다. 책의 단락 간격처럼 동작하게 만든 것이다. 아래에서 두 바깥 여백을 바꾸고, 두 상자가 놓인 방식을 바꿔 본다.

마진 상쇄는 형제 사이에서만 일어나지 않는다. 부모 상자에 안쪽 여백도 테두리도 없으면, 첫 자식의 위 바깥 여백이 부모 밖으로 빠져나가 부모의 바깥 여백과 겹친다. 카드 안 첫 제목에 위 여백 24를 주었는데 카드 안쪽이 아니라 카드 위쪽이 벌어지는 일이 그렇게 생긴다.

마진 상쇄는 버그가 아니라 명세에 적힌 동작이다. 하지만 시안을 그리는 사람에게는 직관에 어긋나고, 상자 하나를 옮기면 이웃 간격이 함께 바뀌어 예측하기 어렵다. 그래서 요즘의 레이아웃은 바깥 여백보다 부모 상자의 gap 속성을 즐겨 쓴다. 플렉스박스와 그리드 상자에서 gap: 24px을 주면 자식들 사이에만 24가 들어가고, 맨 앞과 맨 뒤에는 들어가지 않으며, 겹치지도 않는다. 플렉스박스의 gap은 2021년 무렵부터 주요 브라우저가 모두 지원한다.

간격 체계: 4와 8

서윤의 첫 시안에는 간격이 13, 17, 22픽셀처럼 제각각이었다. 서윤에게는 이유가 있었다. 눈으로 보며 조금씩 밀고 당겨 "딱 좋아 보이는" 자리를 찾은 결과다. 하지만 지후에게는 그 숫자들이 재현할 수 없는 소음이었다. 13과 15의 차이가 의도인지 손떨림인지 알 길이 없고, 화면이 하나 늘 때마다 새로운 숫자가 생긴다. 해결책은 미리 정한 몇 개의 값만 쓰는 것이다. 이런 값의 목록을 간격 단계(Spacing scale)라고 한다.

단계를 만드는 방법은 여러 가지다. 아래에서 네 가지 방법을 비교한다. 막대 하나가 한 단계이고, 오른쪽 숫자는 바로 아래 단계와의 비다. 슬라이더는 "옆 단계와 구별되는 최소 비"라는 이 장의 문턱이다. 비가 문턱보다 작은 쌍은 붉게 칠한다.

결과에서 원리 하나를 읽을 수 있다. 사람은 길이의 차이를 절대량보다 비율로 느끼는 경향이 있다. 4와 8의 차이는 분명하지만, 44와 48의 차이는 같은 4픽셀인데도 거의 보이지 않는다. 지각 심리학에서 베버의 법칙(Weber's law)이라고 부르는 오래된 근사와 같은 방향이다. 그래서 좋은 간격 단계는 작은 쪽은 촘촘하고 큰 쪽은 성기다. 이 책이 정한 단계는 다음과 같다.

왜 하필 4의 배수일까. 여러 이유가 겹친다. 첫째, 나누기 쉽다. 4의 배수는 반으로, 다시 반으로 나눠도 정수가 남는 경우가 많아 가운데 맞추기나 반쪽 여백을 계산할 때 소수점이 덜 생긴다. 둘째, 2장에서 본 기기 픽셀 비율이다. CSS 1픽셀은 기기 픽셀 비율(DPR)이 1.5인 화면에서 1.5기기 픽셀이 된다. 13픽셀 간격은 19.5기기 픽셀이라 경계가 픽셀 사이에 걸려 살짝 흐려질 수 있지만, 짝수 값은 DPR 1.5, 2, 3에서 모두 정수가 된다. 셋째, 관례다. 구글의 머티리얼 디자인 지침을 비롯한 여러 디자인 체계가 8 단위 격자(작은 요소에는 4 단위)를 쓰고, 그 관례를 아는 개발자와 디자이너가 많다. 숫자 자체에 마법이 있는 것은 아니다. 5의 배수나 6의 배수로 만든 단계도 같은 일을 할 수 있다. 중요한 것은 목록이 짧고, 모두가 같은 목록을 쓰는 것이다.

단계를 정했으면 시안을 그 단계에 맞춘다. 그런데 기계적으로 가장 가까운 값으로 반올림하면 어떻게 될까. 아래는 서윤의 행사 목록 시안이다. 분홍 띠는 개발자에게 넘기는 시안에 그리는 간격 표시(흔히 "레드라인"이라고 부른다)다.

간격 단계는 숫자를 줄이는 도구이지 판단을 대신하는 도구가 아니다. 시안의 13을 12로 바꿀지 16으로 바꿀지는 반올림이 아니라 그 간격이 하는 일로 정한다. 같은 일을 하는 간격은 같은 값, 다른 일을 하는 간격은 확실히 다른 값. 그러면 값의 종류가 줄면서 관계는 오히려 분명해진다.

간격으로 묶고 떼기

CompositionBook 4장에서 가까이 있는 것은 한 무리로 보인다는 근접의 원리를 봤고, 12장에서 그것을 "무리 안 간격은 좁게, 무리 사이 간격은 확실히 넓게"라는 지면의 규칙으로 옮겼다. 웹의 상자는 이 규칙을 한 겹 더 깊게 만든다. 상자 안에 상자가 있으니, 간격에도 층이 있다. 글자와 글자 사이, 줄과 줄 사이, 무리와 무리 사이, 카드의 테두리와 내용 사이, 카드와 카드 사이, 구획과 구획 사이. 이 층들이 안쪽에서 바깥쪽으로 갈수록 넓어지면 화면은 저절로 읽힌다. 이 장에서는 이것을 "안쪽 간격 < 바깥 간격" 규칙이라고 부른다.

카드 하나로 확인해 보자. 신간 카드 두 장이 나란히 있고(카드 사이 24로 고정), 카드 안에는 표지, [제목·저자], [가격·재고], 단추가 있다. 대괄호로 묶은 것이 한 무리다. 세 슬라이더로 무리 안 간격, 무리 사이 간격, 카드 안쪽 여백을 바꾼다. 점선 상자는 간격만 보고 눈이 묶을 법한 무리를 CompositionBook 12장과 같은 단순한 규칙으로 찾은 것이다.

셋째 실험의 거짓 무리는 반올림 실수에서 흔히 생긴다. 시안에서는 분명 저자 아래가 넓었는데, 값을 옮기다 위아래가 바뀌면 화면이 엉뚱한 이야기를 한다. 넷째 실험의 결과는 조금 미묘하다. 카드 안쪽 여백은 카드 안의 어떤 무리 사이 간격보다 좁으면 안 된다. 그러면 내용이 카드 안의 이웃보다 카드의 벽에 더 가까워져 갇힌 느낌이 든다. 또 카드 안쪽 여백이 카드 사이보다 넓으면, 카드의 경계보다 카드 안의 빈자리가 더 크게 보여 카드들이 한 판으로 붙어 보인다. 바탕색이나 테두리가 있으면 덜하지만 방향은 같다.

이 규칙은 카드에만 쓰는 것이 아니다. 입력 칸과 그 라벨은 4~8로 붙이고, 라벨·입력 칸 묶음과 다음 묶음 사이는 16~24로 뗀다(9장 폼). 단추 안의 아이콘과 글자는 4~8로 붙이고, 단추와 단추 사이는 그보다 넓게 뗀다. 화면 어디서든 "이 둘은 한 편인가?"를 묻고, 한 편이면 가깝게, 아니면 확실히 멀게.

간격은 누구의 것인가

시안 속 간격 하나를 코드로 옮길 때, 그 간격을 어느 상자의 어느 속성으로 줄지 정해야 한다. 같은 24를 위 카드의 아래 바깥 여백으로 줄 수도, 아래 카드의 위 바깥 여백으로 줄 수도, 두 카드를 담은 부모의 gap으로 줄 수도 있다. 화면은 같아 보여도, 카드를 다른 페이지로 옮기거나 순서를 바꾸면 결과가 달라진다. 위 카드에 아래 여백을 박아 두면 그 카드는 어디에 놓이든 아래에 24를 끌고 다닌다. 목록의 마지막에 놓여도, 혼자 놓여도.

그래서 많은 팀이 이런 약속을 한다. 부품(컴포넌트)은 바깥 여백을 갖지 않는다. 부품 사이의 간격은 부품을 놓는 부모가 정한다. 카드는 자기 안쪽 여백만 알고, 카드끼리 얼마나 떨어질지는 목록이 gap으로 정한다. 그러면 같은 카드를 행사 목록에서는 24 간격으로, 첫 화면 배너 옆에서는 16 간격으로 다시 쓸 수 있다.

시안도 이 약속을 따르면 넘기기 쉽다. 간격마다 숫자만 적지 말고 그 간격의 역할을 적는다. "카드 사이 24", "구획 사이 48"처럼. 개발자는 역할을 보고 어느 상자에 줄지 정하고, 다음에 새 화면을 그릴 때 디자이너는 같은 역할에 같은 값을 다시 꺼내 쓴다. 간격이 체계가 되는 것은 숫자가 깔끔해질 때가 아니라 역할에 이름이 붙을 때다.

서윤의 웹 개편 노트

출처

• W3C, Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, W3C Recommendation, 2011. 8장 Box model, 8.3.1 Collapsing margins.
• W3C, CSS Box Model Module Level 3, CSS Box Sizing Module Level 3. 박스 모델의 네 영역과 box-sizing의 정의.
• W3C, CSS Box Alignment Module Level 3. 플렉스·그리드 상자의 gap.
• Heydon Pickering, "Axiomatic CSS and Lobotomized Owls", A List Apart, 2014. * + * 선택자로 간격을 주는 방법(요약).
• Google, Material Design 지침의 8dp 격자(작은 요소 4dp) 관례. 이 책의 간격 단계는 그것을 복제한 것이 아니라 같은 관례 위에서 정한 예시다.
• 근접의 원리와 무리 간격 규칙: CompositionBook 4장, 12장.
• 이 장의 시안 값, 간격 개수, 구별 문턱, 무리 찾기 규칙은 교육용으로 만든 가상 자료와 단순 모형이다.