근접성
근접성 (Proximity)
여러 항목이 서로 가까이 있으면 그들은 여러 개의 분리된 단위가 아니라 하나의 시각적 단위가 돼요. 반대로 거리가 멀어지면 여러 개의 시각적 단위처럼 보이죠. 근접성의 기본 목적은 조직화(organize) 예요. 사용자에게 페이지 구조와 정보의 위계를 명확히 보여 주기 위해서요.
출처: 문서
본문
수직 간격의 관계 (The relation of vertical spacing)
Ant Design에서 세 가지 다른 포맷은 8px(작은 간격), 16px(중간 간격), 24px(큰 간격)이에요.
「작은 간격」, 「중간 간격」, 「큰 간격」 세 가지 포맷으로 정보의 위계를 나눠요.
「가이드」를 추가해 위계를 더 명확하게 만든 예시예요.
세 가지 포맷이 적용되는 경우에는 「기본 간격」의 배수(倍數)를 더하거나 빼거나, 요소를 추가해서 정보의 위계를 명확히 구분할 수 있어요.
참고: Ant Design에서 y = 8 + 8 * n이에요. 여기서 n >= 0, y는 수직 간격을, 8은 「기본 간격」을 뜻해요.
수평 간격의 관계 (Relationship of horizontal spacing)
다양한 크기의 화면에 적응하기 위해, 수평 방향에서는 그리드 레이아웃을 사용해 컴포넌트를 배치하고 레이아웃의 유연성을 보장해요.
컴포넌트의 내부에서도 요소들의 수평 간격은 서로 달라야 해요.