거터
거터(Gutter)는 그리드 시스템 또는 레이아웃에서 콘텐츠와 콘텐츠 사이의 공간을 뜻한다. 단순한 “빈 공간”이 아니라 시각적 호흡을 만들고, 요소들의 그룹핑과 분리를 결정짓는 디자인 요소다. 인쇄 출판에서 유래한 용어로, 원래는 책 페이지를 제본할 때 안쪽 여백을 뜻했다.
거터와 마진의 차이
| 용어 | 위치 | 역할 |
|---|---|---|
| 마진 | 콘텐츠와 화면 가장자리 사이 | 전체 레이아웃의 외곽 여백 |
| 거터 | 콘텐츠와 콘텐츠 사이 | 내부 요소 간 간격 |
같은 “여백”이라도 위치와 목적이 다르다.
거터를 결정할 때 고려할 것
- 밀도(Density): 정보량이 많은 화면은 거터를 좁혀 스캔 효율을 높인다
- 그룹핑: 근접성의 법칙에 따라 거터가 가까우면 “한 그룹”, 멀면 “다른 그룹”
- 디바이스: 작은 화면은 거터가 작아야 콘텐츠 영역이 확보된다
- 일관성: 8pt grid 등 정해진 스케일로 거터 값을 통일
흔한 값
- 데스크톱: 24~32px
- 태블릿: 16~24px
- 모바일: 8~16px
이 값들은 8의 배수로 맞춰 디자인 시스템의 다른 spacing과 호환되게 하는 경우가 많다.
잘못된 거터의 증상
- 거터 값이 제각각 → 레이아웃이 질서 없이 보인다
- 너무 좁은 거터 → 요소들이 달라붙어 압박감
- 너무 넓은 거터 → 같은 섹션인데 따로 놀아 보인다