정해진 그리드 값을 그대로 지켜라

KRDS DS-058 — 브레이크 포인트의 뷰 포트, 칼럼 수와 가터, 최소 스크린 마진 값을 지켜서 사용하고 있다.

0. 들어가며 — 그리드 값을 ‘그대로’

지난 편들에서 스크린 마진(51·52), 칼럼(53·54), 가터(55), 브레이크포인트 단계(56·57)를 봤습니다. 이번 58편은 이 모든 그리드 값을 KRDS가 정한 대로 지켜서 쓰라는 종합 규칙입니다.

각 브레이크포인트(화면 구간)마다 뷰포트(화면 너비), 칼럼 수, 가터, 최소 스크린 마진이 정해져 있습니다. DS-058은 이 값들을 임의로 바꾸지 말고 정의된 값 그대로 쓰라고 규정합니다. 그리드의 표준화를 완성하는 규칙이죠. 이번 편은 그리드 값을 표준대로 지켜야 하는 이유를 풀어냅니다.

1. 규칙 원문 — 값 준수

DS-058 (디자인 스타일 > 레이아웃) “브레이크 포인트의 뷰 포트, 칼럼 수와 가터, 최소 스크린 마진 값을 지켜서 사용하고 있다.”

각 브레이크포인트마다 정해진 네 가지 값 — 뷰포트, 칼럼 수, 가터, 최소 스크린 마진 — 을 그대로 지키라는 뜻입니다.

정리: 각 화면 구간의 그리드 값(뷰포트·칼럼·가터·마진)을 정의된 대로 지켜 쓰라. 이게 DS-058입니다.

2. 왜 값을 ‘그대로’ 지키나 — 범정부 일관성

그리드 값을 임의로 바꾸지 말라는 데는 이유가 있습니다. 범정부 일관성 입니다.

앞서 봤듯 정부 서비스의 통일성은 색·글꼴·형태에서 일관됩니다. 레이아웃도 마찬가지입니다. 모든 정부 서비스가 같은 그리드 값(같은 브레이크포인트, 같은 칼럼 수, 같은 마진)을 쓰면, 어느 정부 사이트를 가도 비슷한 레이아웃 구조를 갖습니다. 콘텐츠 배치, 여백, 반응형 동작이 통일되어 익숙한 경험을 주죠. 반대로 각 기관이 그리드 값을 제멋대로 바꾸면, 사이트마다 다른 레이아웃이 되어 통일성이 깨집니다.

또한 표준 값을 쓰면 검증된 품질을 보장받습니다. KRDS의 그리드 값은 다양한 화면에서 가독성·터치 정확성· 정보 밀도를 고려해 설계된 것입니다. 이를 그대로 쓰면 그 검증된 품질이 자동으로 적용되죠. 임의로 바꾸면 그 검증을 다시 해야 하고, 십중팔구 어딘가에서 문제가 생깁니다.

이는 색 팔레트(DS-001), 글꼴(DS-027)을 표준대로 쓰는 것과 같은 원리입니다 — 검증된 표준을 그대로 채택해, 통일성과 품질을 한 번에 확보하는 것. DS-058은 그 원리를 그리드 값에 적용해, 레이아웃의 표준화를 완성합니다.

3. 네 가지 값의 의미

DS-058이 지키라는 네 값을 정리하면 — 이 시리즈에서 다룬 것들의 종합입니다.

값	의미	관련 편
뷰포트(viewport)	각 브레이크포인트의 화면 너비 기준	56·57편
칼럼 수	그 구간의 칼럼 개수	53편
가터	칼럼 사이 간격	55편
최소 스크린 마진	가장자리 여백	51·52편

각 브레이크포인트마다 이 네 값이 한 세트로 정의돼 있고, DS-058은 그 세트를 그대로 쓰라는 것입니다. 예를 들어 ’large 구간: 뷰포트 1200px+, 12칼럼, 가터 24px, 마진 24px’처럼 정의된 값을요. 이 값들이 함께 작동해 각 화면 구간의 완성된 그리드를 만듭니다.

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

흔한 위반 패턴

함정 ① 값 임의 변경. 칼럼 수·가터·마진을 표준과 다르게 → 통일성·품질 저하. → 정의값 준수. 함정 ② 일부만 적용. 마진만 지키고 칼럼은 임의 → 그리드 불완전. → 네 값 모두 준수. 함정 ③ 자체 그리드. KRDS 무시하고 독자 그리드 → 범정부 일관성 깨짐. → 표준 그리드 채택.

무엇을 점검하나

값 준수 — 뷰포트·칼럼·가터·마진이 정의값과 일치하는가.

전체 적용 — 네 값이 모두 표준대로 적용됐는가.

구간별 일관 — 각 브레이크포인트에서 값이 올바른가.

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

역할	책임
디자인 시스템 담당	KRDS 그리드 값 채택
퍼블리셔/개발	정의된 그리드 값 그대로 구현

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

반응형 사이트 = 해당.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 그리드 값(뷰포트·칼럼·가터·마진)이 정의대로인가요?

□ 네 값을 모두 표준대로 적용했나요?

□ 그리드 값을 임의로 바꾸지 않았나요?

□ 각 브레이크포인트에서 값이 올바른가요?

❓ FAQ

Q1. 정확한 그리드 값은 어디서 받나요? KRDS 레이아웃 가이드와 디자인 토큰에 브레이크포인트별 뷰포트·칼럼·가터·마진 값이 정의돼 있습니다. 그대로 가져다 쓰면 됩니다.

Q2. 왜 값을 바꾸면 안 되나요? 범정부 일관성과 검증된 품질을 위해서입니다. 모든 정부 서비스가 같은 그리드 값을 쓰면 통일된 경험을 주고, 표준 값은 이미 다양한 화면에서 검증됐습니다. 임의 변경은 통일성과 품질을 해칩니다.

Q3. 우리 서비스 특성상 조정이 필요하면요? 그리드 값은 표준 준수가 원칙입니다. 콘텐츠 너비나 특수 레이아웃은 다른 규칙(DS-059·060 등)에서 유연성을 제공하므로, 그리드 기본값은 표준을 따르세요.

Q4. KRDS를 채택하면 자동인가요? KRDS 그리드 시스템을 채택하면 네 값이 모두 표준대로 적용됩니다. 이것이 DS-051~058을 한 번에 충족하는 가장 쉬운 길입니다.

7. 마무리 — 표준 그리드의 완성

DS-058의 메시지는 레이아웃 표준화를 완성합니다.

그리드 값(뷰포트·칼럼·가터·마진)을 정의대로 지키면, 범정부 일관성과 검증된 품질을 한 번에 얻는다.

각 브레이크포인트의 그리드 값을 표준대로 쓰면, 모든 정부 서비스가 통일된 레이아웃 구조를 갖고, KRDS가 검증한 품질이 자동으로 적용됩니다. 이는 색·글꼴을 표준대로 쓰는 것과 같은 원리이며, 레이아웃의 표준화를 완성하는 규칙입니다. 임의로 바꾸기보다 검증된 표준을 그대로 채택하는 것 — 그것이 통일성과 품질의 지름길 입니다.

다음 편은 큰 화면에서의 콘텐츠 너비를 다룹니다. DS-059 — “큰 화면에서 콘텐츠 영역이 지나치게 넓어지지 않도록 가독성과 정보 전달력을 고려하여 레이아웃을 조정한다.” 큰 모니터에서 글이 너무 길어지는 문제를 살펴봅니다.

다음 편 예고 ▶ 「059. 큰 화면에서 콘텐츠 영역이 지나치게 넓어지지 않도록 가독성과 정보 전달력을 고려하여 레이아웃을 조정하고 있다.」

우리 사이트가 표준 그리드 값을 지키는지 확인하려면? ViewCheck는 브레이크포인트별 뷰포트·칼럼·가터·마진이 KRDS 정의값과 일치하는지를 진단합니다.

📚 참고 출처

KRDS 레이아웃(Layout)·디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_04.html

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

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