간격

간격 스케일

4px을 기본 단위로 한다. 컴포넌트와 레이아웃은 이 스케일에 있는 값만 쓴다.

5단계부터 간격이 크게 벌어지는 이유

1–4단계는 4px씩 늘어나고, 5단계부터는 24, 32, 40, 48, 64, 96으로 크게 뛴다. 일부러 그렇게 했다. 작은 간격은 한 요소 안의 부분을 나누는 데 쓰여서 세밀하게 조정할 수 있어야 하고, 큰 간격은 서로 다른 요소를 떼어 놓는 데 쓰여서 차이가 확실해야 한다. 28px과 32px은 보는 사람이 구분하지 못하니 둘 다 둘 필요가 없다.

그래서 20px은 없다. 20px을 쓰고 싶은 자리는 사실 16px 관계이거나 24px 관계다. 둘 중 하나를 고르게 하는 것이 이 스케일의 목적이다.

값은 px이 아니라 rem으로

모든 단계를 rem으로 정의해서, 브라우저나 OS의 글자 크기를 바꾸면 레이아웃 전체가 함께 커진다. 글자 크기를 125%로 쓰는 사용자는 간격도 125%가 된다. 커진 글자를 고정된 간격에 억지로 밀어 넣지 않고, 리듬을 그대로 유지한다.

토큰별 용도

간격 토큰마다 맡은 역할이 있다. 프리뷰에는 레드라인 주석을 쓴다. 정확한 간격 값만큼 붉은 영역을 칠하고 경계선을 그어 표시하는 방식이다.

이름으로 기억하는 간격

자주 나오는 관계 세 가지는 숫자보다 이름으로 기억해 두는 게 낫다.

새 컴포넌트에 이 셋 중 하나가 필요하면 따로 고민하지 않고 표의 값을 쓴다. 이 값이 제각각이 되면 폼마다 다른 제품처럼 보이기 시작한다.

송금 플로우의 세로 리듬

핵심 플로우는 시스템에서 규칙이 가장 엄격한 곳이다. 모든 단계가 서로 다른 화면 네 개가 아니라, 한 화면이 다음으로 넘어가는 것처럼 보여야 하기 때문이다.

원칙

장식보다 근접성

두 요소가 한 묶음이라면 테두리, 배경, 구분선을 넣기 전에 먼저 둘 사이 간격을 줄인다. 묶음을 보여 주려고 테두리가 필요한 카드는 대개 안쪽 간격이 잘못돼 있다. 이 원칙을 지키면 필드 아홉 개짜리 주소 폼이나 거래 목록 같은 빽빽한 화면도 상자만 잔뜩 쌓인 모습이 되지 않는다.

간격은 부모가 정한다

컴포넌트는 스스로 바깥 margin을 주지 않는다. 자기 패딩만 갖고, 간격은 컨테이너가 정한다. margin-bottom이 내장된 컴포넌트는 다른 간격이 필요한 레이아웃에서는 쓸 수 없다. 디자인 시스템에서 space-4와 space-4가 겹쳐 아무도 의도하지 않은 32px이 생기는 가장 흔한 원인이기도 하다.

레이아웃의 간격은 자식의 margin이 아니라 gap으로 준다.

권장과 금지

간격 유틸리티

간격 유틸리티 클래스는 RTL/LTR을 지원하도록 논리 속성을 쓴다.

유틸리티는 일부러 일부만 만들었다. 여러 화면에서 반복되는 단계만 유틸리티로 열어 두고, 나머지는 컴포넌트 토큰으로 적용한다. 스케일의 모든 단계에 유틸리티가 있으면 컴포넌트 대신 유틸리티를 조합해 레이아웃을 만들게 된다.

물리 속성 대신 논리 속성

margin-top 대신 margin-block-start를, padding-left/right 대신 padding-inline을 쓴다. Senco는 오른쪽에서 왼쪽으로 쓰는 문자권 시장에도 출시되는데, 논리 속성을 쓰면 스타일시트를 따로 만들지 않아도 RTL 레이아웃이 좌우로 뒤집힌다.

알려진 공백