화면을 나누는 보이지 않는 격자

KRDS DS-053 — 칼럼 수를 백분율로 설정하여 화면 크기에 맞춰 유동적으로 변경되게 적용하고 있다.

0. 들어가며 — 레이아웃의 뼈대, 그리드

스크린 마진(51·52편)에 이어, 이번엔 화면 안 콘텐츠를 배치하는 뼈대 — 그리드(grid)와 칼럼(column) 입니다.

잘 정돈된 화면 뒤에는 보이지 않는 격자(그리드) 가 있습니다. 화면을 세로로 여러 칸(칼럼)으로 나누고, 콘텐츠를 그 칸에 맞춰 배치하면 정렬이 깔끔해지죠. 신문이 여러 단으로 나뉘어 있는 것과 같습니다. DS-053은 이 칼럼을 백분율로 설정해 화면 크기에 따라 유동적으로 변하게 하라고 규정합니다. 고정 너비가 아니라 비율로 칼럼을 만들어, 어떤 화면에서도 적절히 늘어나고 줄어들게 하는 것이죠. 이번 편은 그리드와 유동 칼럼의 개념을 풀어냅니다.

1. 규칙 원문 — 유동 칼럼

DS-053 (디자인 스타일 > 레이아웃) “칼럼 수를 백분율로 설정하여 화면 크기에 맞춰 유동적으로 변경되게 적용하고 있다.”

“칼럼(column)”

화면을 세로로 나눈 칸입니다. 그리드 시스템의 기본 단위로, 콘텐츠를 이 칸에 맞춰 배치합니다.

“백분율로 설정하여 유동적으로”

칼럼 너비를 고정 px가 아니라 백분율(%) 로 정해, 화면 크기에 따라 함께 늘어나고 줄어들게 한다는 뜻입니다.

정리: 칼럼을 백분율로 설정해, 화면 크기에 맞춰 유동적으로 변하게 하라. 이게 DS-053입니다.

2. 왜 백분율(유동) 칼럼인가

칼럼을 고정 px로 만들면 어떻게 될까요? 화면 크기에 대응하지 못합니다.

예를 들어 칼럼을 200px로 고정하면, 작은 모바일에서는 200px이 화면을 넘쳐 가로 스크롤이 생기고, 큰 모니터에서는 콘텐츠가 한쪽에 몰리고 나머지가 휑하게 빕니다. 고정 칼럼은 한 화면 크기에만 맞고, 다른 크기에서는 깨지는 것이죠.

반면 백분율로 칼럼을 만들면(예: 한 칼럼 = 화면의 8.33%), 화면이 커지면 칼럼도 함께 커지고, 작아지면 함께 작아집니다. 화면 크기와 무관하게 콘텐츠가 항상 적절한 비율로 배치되죠. 이것이 ’유동(fluid) 그리드’이고, 반응형 디자인의 핵심입니다. 다양한 화면 크기의 국민이 쓰는 정부 서비스는, 어떤 화면에서도 콘텐츠가 적절히 배치되어야 하므로 유동 칼럼이 필수입니다.

이는 35편(rem 단위)에서 본 ’고정 vs 상대’의 원리와 통합니다. 글자 크기를 rem으로 유연하게 했듯, 칼럼을 백분율로 유연하게 하는 것이죠. 고정값은 한 상황에만 맞지만, 상대값(백분율)은 다양한 상황에 적응합니다. 레이아웃의 뼈대를 유동적으로 만드는 것이 반응형의 출발점입니다.

3. 칼럼 수가 ‘화면에 따라 변한다’

DS-053의 또 다른 핵심은 칼럼 ‘수’ 가 화면 크기에 따라 변한다는 것입니다.

큰 화면(PC)에서는 칼럼이 많고(예: 12칼럼), 작은 화면(모바일)에서는 칼럼이 적습니다(예: 4칼럼). 왜냐하면 넓은 화면에는 콘텐츠를 가로로 여러 개 나열할 수 있지만(다단 레이아웃), 좁은 화면에서는 세로로 쌓아야 하니까요. 예를 들어 PC에서 카드 3개가 가로로 놓이던 것이, 모바일에서는 세로로 1개씩 쌓입니다. 이 변화가 칼럼 수의 변화로 표현됩니다.

그래서 반응형 그리드는 브레이크포인트(51편)별로 칼럼 수를 다르게 정의합니다. PC는 12칼럼, 태블릿은 8칼럼, 모바일은 4칼럼처럼요(구체적 단계는 DS-056·057). 콘텐츠는 이 칼럼 수에 맞춰 자동으로 재배치되어, 큰 화면에서는 다단으로, 작은 화면에서는 단일 열로 자연스럽게 변합니다. 백분율 칼럼과 화면별 칼럼 수가 함께 작동해, 모든 화면에서 정돈된 레이아웃을 만듭니다.

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

흔한 위반 패턴

함정 ① 고정 px 칼럼. 칼럼을 px로 고정 → 화면 크기 대응 못 함, 가로 스크롤/휑함. → 백분율로. 함정 ② 그리드 미사용. 콘텐츠를 격자 없이 배치 → 정렬 불일치. → 그리드 시스템 적용. 함정 ③ 칼럼 수 고정. 모든 화면에 같은 칼럼 수 → 모바일에서 답답/넘침. → 화면별 칼럼 수.

무엇을 점검하나

유동 칼럼 — 칼럼이 백분율로 설정돼 화면에 따라 변하는가.

그리드 적용 — 콘텐츠가 그리드에 맞춰 정렬되는가.

칼럼 수 변화 — 화면 크기에 따라 칼럼 수가 조정되는가.

Before / After

/* ❌ Before: 고정 px 칼럼 */ .col { width: 200px; } /* 화면 대응 못 함 */ /* ✅ After: 백분율 유동 칼럼 (CSS Grid 예) */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); /* 12칼럼 유동 */ gap: 24px; } @media (max-width: 767px) { .grid { grid-template-columns: repeat(4, 1fr); } /* 모바일 4칼럼 */ }

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

역할	책임
디자이너	화면별 칼럼 수·그리드 설계
퍼블리셔/개발	백분율 유동 그리드 구현

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

콘텐츠를 배치하는 모든 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 칼럼이 백분율(유동) 로 설정됐나요, 고정 px인가요?

□ 화면 크기가 변하면 콘텐츠가 적절히 재배치되나요?

□ 화면 크기에 따라 칼럼 수가 변하나요?

□ 모바일에서 가로 스크롤이 생기지 않나요?

❓ FAQ

Q1. 칼럼이 뭔가요? 화면을 세로로 나눈 칸입니다. 신문의 단처럼, 콘텐츠를 이 칸에 맞춰 배치하면 정렬이 깔끔해집니다. 반응형 그리드의 기본 단위입니다.

Q2. 칼럼 수는 몇 개인가요? 화면 크기에 따라 다릅니다. PC는 보통 12칼럼, 모바일은 4칼럼 등입니다. 구체적 값은 브레이크포인트 규칙 (DS-056·057·058)에서 다룹니다.

Q3. CSS Grid나 Flexbox를 써야 하나요? 유동 그리드를 구현하는 방법으로 CSS Grid·Flexbox가 흔히 쓰입니다. 핵심은 ’백분율 기반 유동 칼럼’이지 특정 기술은 아닙니다.

Q4. KRDS를 채택하면 자동인가요? KRDS 그리드 시스템은 백분율 칼럼과 화면별 칼럼 수를 정의합니다. 채택하면 DS-053이 충족됩니다.

7. 마무리 — 유동하는 뼈대

DS-053의 메시지는 반응형의 뼈대를 다룹니다.

화면을 나누는 격자(칼럼)는 고정이 아니라 유동이어야 한다 — 백분율로, 화면에 맞춰.

고정 px 칼럼은 한 화면에만 맞고 다른 크기에서 깨지지만, 백분율 유동 칼럼은 어떤 화면에서도 콘텐츠를 적절히 배치합니다. 그리고 칼럼 수가 화면 크기에 따라 변해, 큰 화면은 다단으로 작은 화면은 단일 열로 자연스럽게 재배치되죠. 이는 글자를 rem으로 유연하게 한 것(35편)과 같은, ’고정이 아니라 적응’이라는 반응형의 원리가 레이아웃 뼈대에 적용된 모습입니다.

다음 편은 칼럼 사용의 일관성을 다룹니다. DS-054 — “동일 화면에서 칼럼 수를 혼용하여 사용하지 않는다.” 한 화면 안에서 그리드를 일관되게 유지하는 이유를 살펴봅니다.

다음 편 예고 ▶ 「054. 동일 화면에서 칼럼 수를 혼용하여 사용하지 않고 있다.」

우리 사이트의 그리드가 유동적인지 확인하려면? ViewCheck는 칼럼이 백분율로 유동 설정됐는지, 화면 크기에 따라 콘텐츠가 적절히 재배치되는지를 진단합니다.

📚 참고 출처

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

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

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