하나의 화면엔 하나의 격자

KRDS DS-054 — 동일 화면에서 칼럼 수를 혼용하여 사용하지 않고 있다.

0. 들어가며 — 한 화면, 한 격자

지난 53편에서 유동 그리드와 칼럼을 봤습니다. 이번 54편은 그 그리드를 한 화면 안에서 일관되게 쓰라는 규칙입니다 — 동일 화면에서 칼럼 수를 혼용하지 마라.

한 화면에서 어떤 영역은 12칼럼 그리드로, 다른 영역은 10칼럼 그리드로 만들면, 두 영역의 정렬선이 서로 안 맞아 어긋나 보입니다. DS-054는 한 화면에서는 하나의 칼럼 체계를 유지하라고 못 박습니다. 이번 편은 왜 한 화면에 하나의 그리드여야 하는지를 풀어냅니다.

1. 규칙 원문 — 혼용 금지

DS-054 (디자인 스타일 > 레이아웃) “동일 화면에서 칼럼 수를 혼용하여 사용하지 않고 있다.”

한 화면 안에서 서로 다른 칼럼 수(다른 그리드 체계)를 섞어 쓰지 말라는 뜻입니다.

정리: 한 화면에서는 하나의 칼럼 체계를 일관되게 쓰라. 이게 DS-054입니다.

2. 왜 혼용하면 안 되나 — 정렬선의 충돌

칼럼 수를 섞어 쓰면 무엇이 문제일까요? 정렬선이 어긋납니다.

그리드의 핵심 가치는 ‘보이지 않는 정렬선’입니다. 콘텐츠들이 같은 칼럼 경계에 맞춰 정렬되면, 화면이 깔끔 하고 질서 있어 보이죠. 그런데 한 화면에서 위쪽은 12칼럼, 아래쪽은 10칼럼 그리드를 쓰면, 두 영역의 칼럼 경계(정렬선)가 서로 다른 위치에 생깁니다. 그러면 위 콘텐츠와 아래 콘텐츠의 좌우 끝이 미묘하게 안 맞아, ’뭔가 어긋난’ 인상을 줍니다.

사람 눈은 이런 정렬 불일치를 무의식적으로 감지합니다(47편의 레디어스 불일치와 같은 원리). 콘텐츠들이 같은 선에 맞춰 떨어지면 안정감을, 어긋나면 불안정을 느끼죠. 하나의 칼럼 체계를 유지하면 모든 콘텐츠가 같은 정렬선을 공유해, 화면 전체가 통일된 질서를 갖습니다. 그래서 한 화면에는 하나의 그리드입니다.

이는 일관성이라는 디자인 시스템의 핵심 가치(레디어스 47편, 글자 굵기 30편 등)가 레이아웃에 적용된 것입니다. 같은 종류의 것은 같은 규칙을 따라야 정돈됩니다. 그리드도 한 화면 안에서 하나의 규칙(칼럼 수)을 지켜야 정렬이 일관됩니다.

3. 화면이 ’바뀌면’은 OK — 혼용과 변화의 구분

여기서 헷갈리지 말아야 할 것이 있습니다. DS-054가 금지하는 것은 ‘동일 화면에서의 혼용’ 이지, ’화면 크기에 따른 변화’가 아닙니다.

53편에서 봤듯, 칼럼 수는 화면 크기(브레이크포인트)에 따라 변합니다 — PC 12칼럼, 모바일 4칼럼. 이건 혼용이 아니라 ’반응형 변화’입니다. 같은 화면 크기 안에서는 하나의 칼럼 체계를 유지하되, 화면 크기가 바뀌면 그에 맞는 다른 칼럼 체계로 전환하는 것이죠.

즉 — 같은 화면(같은 크기)에서는 하나의 칼럼 수, 화면 크기가 바뀌면 그 크기에 맞는 칼럼 수. PC 화면에서는 12칼럼으로 일관되게, 모바일 화면에서는 4칼럼으로 일관되게. 각 화면 크기 안에서 일관성을 지키는 것이 DS-054이고, 화면 크기 간 전환이 DS-053입니다. 두 규칙이 함께 ‘일관되면서도 반응형인’ 그리드를 만듭니다.

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

흔한 위반 패턴

함정 ① 영역별 다른 그리드. 한 화면에서 위는 12칼럼, 아래는 10칼럼 → 정렬 어긋남. → 하나로 통일. 함정 ② 즉흥적 배치. 그리드 무시하고 영역마다 다르게 → 정렬선 충돌. → 그리드 일관 적용.

무엇을 점검하나

칼럼 일관성 — 한 화면(같은 크기)에서 칼럼 수가 하나인가.

정렬선 — 콘텐츠들이 같은 정렬선을 공유하는가.

반응형 구분 — 화면 크기 변화는 허용하되 동일 화면 혼용은 없는가.

Before / After

❌ Before: 한 화면에서 상단 영역 = 12칼럼 그리드 하단 영역 = 10칼럼 그리드 → 좌우 정렬선 어긋남 ✅ After: 한 화면 전체 = 12칼럼 그리드 (일관) 모든 영역이 같은 정렬선 공유 (단, 모바일로 바뀌면 4칼럼으로 전환 — 반응형 변화는 OK)

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

역할	책임
디자이너	한 화면에 하나의 그리드 체계 설계
퍼블리셔/개발	일관된 칼럼 체계 구현

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

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

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 화면에서 칼럼 수가 하나로 일관되나요?

□ 영역별로 다른 그리드를 섞어 쓰지 않나요?

□ 콘텐츠들의 좌우 정렬선이 맞나요?

□ 화면 크기 변화(반응형)와 혼용을 구분하나요?

❓ FAQ

Q1. 반응형으로 칼럼 수가 바뀌는 건 혼용 아닌가요? 아닙니다. 화면 크기에 따라 칼럼 수가 바뀌는 건 ‘반응형 변화’(DS-053)입니다. DS-054가 금지하는 건 ‘같은 화면 크기 안에서’ 칼럼 수를 섞는 것입니다. 둘은 다릅니다.

Q2. 한 화면에 다양한 레이아웃이 필요하면요? 하나의 칼럼 체계 안에서 다양한 배치를 만들 수 있습니다. 12칼럼 그리드에서 어떤 콘텐츠는 4칼럼 폭, 어떤 건 8칼럼 폭처럼요. 칼럼 ’폭’은 다양해도 칼럼 ’체계(수)’는 하나입니다.

Q3. 왜 정렬선이 중요한가요? 콘텐츠들이 같은 정렬선에 맞춰 떨어지면 화면이 정돈되고 안정적입니다. 정렬선이 어긋나면 무의식적으로 ‘뭔가 안 맞는’ 불안정한 인상을 줍니다.

Q4. KRDS를 채택하면 자동인가요? KRDS 그리드 시스템을 일관되게 쓰면 한 화면에 하나의 칼럼 체계가 유지됩니다. 채택하면 DS-054가 충족됩니다.

7. 마무리 — 하나의 화면, 하나의 질서

DS-054의 메시지는 그리드 일관성을 담습니다.

한 화면에는 하나의 격자 — 일관된 정렬선이 정돈된 화면을 만든다.

칼럼 수를 섞어 쓰면 정렬선이 어긋나 화면이 불안정해집니다. 한 화면(같은 크기)에서는 하나의 칼럼 체계를 유지해, 모든 콘텐츠가 같은 정렬선을 공유하게 해야 하죠. 단, 화면 크기가 바뀌면 그에 맞는 칼럼 수로 전환 하는 반응형 변화는 별개입니다. 일관성과 반응성을 함께 지키는 것 — 이것이 좋은 그리드입니다.

다음 편은 칼럼 사이의 간격을 다룹니다. DS-055 — “가터 크기를 칼럼 너비의 절반 이하로 설정한다.” 칼럼과 칼럼 사이의 여백(가터)을 어떻게 정하는지를 살펴봅니다.

다음 편 예고 ▶ 「055. 가터 크기를 칼럼 너비의 절반 이하로 설정하고 있다.」

우리 사이트의 그리드가 일관된지 확인하려면? ViewCheck는 한 화면에서 칼럼 체계가 일관된지, 영역별 그리드 혼용으로 정렬선이 어긋나지 않는지를 진단합니다.

📚 참고 출처

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

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

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