큰 화면일수록 간격을 정의해 둬라

KRDS DS-065 — 일관성을 유지하기 위해 큰 화면의 레이아웃 요소의 간격을 정의하고 있다.

0. 들어가며 — 큰 화면의 간격 일관성

지난 편들(063·064)에서 반응형 간격을 봤습니다. 이번 65편은 그중 큰 화면에서 레이아웃 요소 간격을 정의(표준화) 하는 규칙입니다.

큰 화면은 공간이 넓어 간격을 자유롭게 줄 수 있습니다. 바로 그래서 간격이 제각각이 되기 쉽죠 — 여유가 있으니 영역마다 다른 간격을 감각으로 주게 됩니다. DS-065는 큰 화면에서도 레이아웃 요소 간격을 정의된 값으로 일관되게 유지하라고 규정합니다. 이번 편은 큰 화면 간격 정의의 의미를 풀어냅니다.

1. 규칙 원문 — 간격 정의

DS-065 (디자인 스타일 > 레이아웃) “일관성을 유지하기 위해 큰 화면의 레이아웃 요소의 간격을 정의하고 있다.”

큰 화면에서 레이아웃 요소들 사이의 간격을 정의된 값으로 일관되게 유지하라는 뜻입니다.

정리: 큰 화면에서도 레이아웃 간격을 정의해 일관성을 유지하라. 이게 DS-065입니다.

2. 왜 큰 화면에서 특히 정의하나

작은 화면은 공간이 좁아 간격 선택지가 제한적입니다. 반면 큰 화면은 공간이 넉넉해 간격을 마음대로 줄 수 있죠. 바로 이 ’자유’가 일관성을 깨는 함정입니다.

여유 있는 큰 화면에서 디자이너는 영역마다 “여기는 좀 넓게, 저기는 좀 좁게”를 감각으로 정하기 쉽습니다. 그러면 비슷한 위계의 영역인데 간격이 제각각이 되어, 화면이 정돈되지 않죠. 큰 화면일수록 간격을 정의해 두지 않으면 일관성이 무너지기 쉽습니다.

그래서 DS-065는 큰 화면의 레이아웃 간격을 명확히 정의하라고 합니다 — 섹션 사이는 이 간격, 영역 사이는 저 간격처럼, 위계별 간격을 표준값으로 정해 두는 것이죠(8포인트 그리드 기반, 62편). 그러면 큰 화면에서도 같은 위계는 같은 간격을 갖고, 화면 전체가 일관된 리듬을 유지합니다. 이는 레디어스(47편), 간격(62편)을 일관되게 한 것과 같은 ‘일관성’ 원리가 큰 화면 레이아웃에 적용된 것입니다. 자유로울수록 규칙이 필요합니다.

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

흔한 위반 패턴

함정 ① 감각적 간격. 큰 화면에서 영역마다 다른 간격 → 일관성 붕괴. → 위계별 간격 정의. 함정 ② 정의 부재. 레이아웃 간격 표준 없음 → 제각각. → gap 토큰으로 정의.

무엇을 점검하나

간격 정의 — 큰 화면 레이아웃 간격이 정의돼 있는가.

일관성 — 같은 위계 영역이 같은 간격인가.

8pt 기반 — 간격이 8포인트 그리드를 따르는가.

Before / After

/* ❌ Before: 큰 화면 영역마다 다른 간격 */ .section-a { margin-bottom: 56px; } .section-b { margin-bottom: 44px; } /* 같은 위계인데 다름 */ /* ✅ After: 위계별 간격 정의 */ :root { --layout-gap-lg: 48px; --layout-gap-md: 32px; } .section { margin-bottom: var(--layout-gap-lg); } /* 일관 */

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

역할	책임
디자인 시스템 담당	큰 화면 레이아웃 간격 정의
퍼블리셔/개발	정의된 간격 일관 구현

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

큰 화면을 지원하는 모든 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 큰 화면 레이아웃 간격이 정의돼 있나요?

□ 같은 위계 영역이 같은 간격인가요?

□ 영역마다 간격이 제각각이지 않나요?

□ 간격이 8포인트 그리드를 따르나요?

❓ FAQ

Q1. 왜 큰 화면을 특히 강조하나요? 큰 화면은 공간이 넉넉해 간격을 자유롭게 줄 수 있어, 오히려 제각각이 되기 쉽습니다. 그래서 큰 화면일수록 간격을 정의해 일관성을 지켜야 합니다.

Q2. 간격을 어떻게 정의하나요? 위계별로 표준 간격을 정합니다(섹션 간 48px, 영역 간 32px 등). 8포인트 그리드 기반 gap 토큰으로 정의하면 일관성이 자동 보장됩니다.

Q3. 62편(8pt 그리드)과 다른가요? 62편은 ‘모든 간격을 8의 배수로’, 65편은 ’큰 화면 레이아웃 간격을 정의해 일관되게’입니다. 65편은 8pt 그리드를 큰 화면 레이아웃에 적용한 구체화입니다.

Q4. KRDS를 채택하면 자동인가요? KRDS는 레이아웃 간격을 정의합니다. 채택하면 DS-065가 충족됩니다.

6. 마무리 — 자유로울수록 규칙을

DS-065의 메시지는 일관성의 역설을 담습니다.

큰 화면일수록 간격을 정의해 둬야 한다 — 공간이 자유로울수록 일관성이 깨지기 쉬우니까.

큰 화면의 넉넉한 공간은 간격을 감각으로 정하게 만들어 일관성을 해칩니다. 위계별 간격을 정의해 두면, 큰 화면에서도 같은 위계는 같은 간격을 갖고 화면이 일관됩니다. 자유로울수록 규칙이 필요하다는 것 — 이는 디자인 시스템의 일관된 지혜입니다.

다음 편은 제목 간격을 다룹니다. DS-066 — “타이포그래피 계층 구조인 h1부터 h5까지의 콘텐츠 사이의 간격 으로 계층 구조를 준수한다.” 제목과 본문 사이 간격으로 위계를 표현하는 법을 살펴봅니다.

다음 편 예고 ▶ 「066. 타이포그래피 계층 구조인 h1부터 h5까지의 콘텐츠 사이의 간격으로 계층 구조를 준수하여 사용하고 있다.」

우리 사이트의 큰 화면 간격이 일관된지 확인하려면? ViewCheck는 큰 화면 레이아웃 간격이 정의돼 일관되게 적용됐는지를 진단합니다.

📚 참고 출처

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

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

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