칼럼 사이의 간격, 너무 벌어지면 안 된다

KRDS DS-055 — 가터 크기를 칼럼 너비의 절반 이하로 설정하고 있다.

0. 들어가며 — 칼럼 사이의 여백, ‘가터’

지난 편들에서 칼럼(53·54편)을 봤습니다. 이번엔 칼럼과 칼럼 사이의 간격 — 가터(gutter) 입니다.

그리드에서 칼럼들 사이에는 일정한 여백이 있습니다. 이 여백을 가터라 부르죠. 가터가 없으면 칼럼들이 딱 붙어 콘텐츠가 답답하고, 가터가 너무 넓으면 칼럼들이 따로 놀아 연결감이 사라집니다. DS-055는 이 가터를 칼럼 너비의 절반 이하로 설정하라고 규정합니다. 칼럼보다 간격이 더 넓어지지 않게 하는 것이죠. 이번 편은 가터의 적정 비율을 풀어냅니다.

1. 규칙 원문 — 가터의 상한

DS-055 (디자인 스타일 > 레이아웃) “가터 크기를 칼럼 너비의 절반 이하로 설정하고 있다.”

“가터(gutter)”

칼럼과 칼럼 사이의 간격(여백)입니다.

“칼럼 너비의 절반 이하”

가터가 칼럼 너비의 50%를 넘지 말아야 한다는 뜻입니다. 칼럼이 100px이면 가터는 50px 이하죠.

정리: 칼럼 사이 간격(가터)을 칼럼 너비의 절반 이하로 유지하라. 이게 DS-055입니다.

2. 왜 절반 이하인가 — 콘텐츠와 여백의 균형

가터가 칼럼 너비의 절반을 넘으면 무엇이 문제일까요? 여백이 콘텐츠를 압도합니다.

그리드의 주인공은 콘텐츠(칼럼)이고, 가터는 그것을 구분하는 여백입니다. 가터가 칼럼보다 넓어지면, 화면에서 ’빈 공간’이 ’콘텐츠’보다 더 큰 비중을 차지하게 됩니다. 그러면 칼럼들이 멀리 떨어져 따로 노는 느낌을 주고, 하나의 화면으로서 연결감이 약해지죠. 또 콘텐츠가 들어갈 공간이 줄어 정보 밀도도 떨어집니다.

‘절반 이하’라는 상한은 이를 막습니다. 가터가 칼럼의 절반 이하면, 콘텐츠(칼럼)가 항상 여백(가터)보다 큰 비중을 유지해, 콘텐츠가 주가 되고 여백이 보조가 됩니다. 칼럼들이 적절히 구분되면서도 하나의 화면으로 연결되죠. 이는 60:30:10(DS-009)에서 콘텐츠가 강조보다 큰 비중을 차지한 것과 같은 ’주와 보조의 균형’ 원리입니다. 여백은 필요하되 콘텐츠를 압도하면 안 됩니다.

3. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① 과한 가터. 가터가 칼럼보다 넓음 → 콘텐츠 따로 놀고 밀도 저하. → 칼럼 절반 이하로. 함정 ② 가터 없음. 칼럼이 딱 붙음 → 답답, 구분 안 됨. → 적절한 가터 부여. 함정 ③ 불규칙 가터. 칼럼마다 다른 간격 → 정렬 불일치. → 일관된 가터.

무엇을 점검하나

가터 비율 — 가터가 칼럼 너비의 절반 이하인가.

가터 존재 — 칼럼 사이에 적절한 간격이 있는가.

일관성 — 가터가 일정하게 적용됐는가.

Before / After

/* ❌ Before: 과한 가터(칼럼보다 넓음) */ .grid { grid-template-columns: repeat(3, 100px); gap: 120px; } /* ✅ After: 칼럼 절반 이하 가터 */ .grid { grid-template-columns: repeat(3, 1fr); gap: 24px; /* 칼럼 너비의 절반 이하 (KRDS 가터 토큰 기준) */ }

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	가터를 칼럼 절반 이하로 설계
퍼블리셔/개발	그리드 가터 일관 구현

기관 유형	DS-055 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

그리드를 쓰는 모든 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 칼럼 사이 간격(가터)이 칼럼 너비의 절반 이하인가요?

□ 칼럼들이 너무 멀리 떨어져 따로 놀지 않나요?

□ 칼럼 사이에 적절한 간격이 있나요?

□ 가터가 일정하게 적용됐나요?

❓ FAQ

Q1. 가터가 뭔가요? 그리드에서 칼럼과 칼럼 사이의 간격(여백)입니다. 칼럼들을 적절히 구분하면서도 하나의 화면으로 연결하는 역할을 합니다.

Q2. 왜 절반 이하인가요? 가터가 칼럼보다 넓으면 여백이 콘텐츠를 압도해, 칼럼들이 따로 놀고 정보 밀도가 떨어집니다. 절반 이하면 콘텐츠가 주, 여백이 보조의 균형을 유지합니다.

Q3. 가터 값은 얼마인가요? KRDS 그리드의 가터 토큰 값을 씁니다(브레이크포인트별로 정의, DS-058). 칼럼 너비의 절반 이하라는 비율을 지키면 됩니다.

Q4. KRDS를 채택하면 자동인가요? KRDS 그리드 시스템의 가터가 적정 비율로 정의돼 있습니다. 채택하면 DS-055가 충족됩니다.

6. 마무리 — 여백은 콘텐츠를 넘지 않는다

DS-055의 메시지는 균형의 원리를 담습니다.

칼럼 사이 여백(가터)은 칼럼보다 작아야 한다 — 콘텐츠가 주, 여백이 보조.

가터는 칼럼을 구분하는 필요한 여백이지만, 칼럼보다 넓어지면 콘텐츠를 압도해 화면이 흩어집니다. 칼럼 너비의 절반 이하라는 상한은 콘텐츠와 여백의 균형을 지키죠. 이는 색·강조에서 본 ‘주와 보조의 비율’ 원리가 그리드에 적용된 모습입니다.

다음 편은 화면 크기 구간을 다룹니다. DS-056 — “브레이크 포인트 단계를 최소 3단계에서 6단계로 설정한다.” 반응형의 화면 구간을 몇 개로 나눌지를 살펴봅니다.

다음 편 예고 ▶ 「056. 브레이크 포인트 단계를 최소 3단계에서 6단계로 설정하여 사용하고 있다.」

우리 사이트의 가터가 적절한지 확인하려면? ViewCheck는 가터가 칼럼 너비의 절반 이하인지, 일관되게 적용됐는지를 진단합니다.

📚 참고 출처

KRDS 레이아웃(Layout) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_04.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준