화면이 작아지면 간격도 줄인다

KRDS DS-063 — 디바이스 사이즈에 따라 적절한 반응형 간격을 설정하고 있다.

0. 들어가며 — 간격도 화면에 적응한다

지난 62편에서 8포인트 그리드(간격을 8의 배수로)를 봤습니다. 이번 63편은 그 간격을 화면 크기에 따라 조정하는 반응형 간격입니다.

큰 화면에서 적절했던 간격(예: 요소 사이 32px)이 작은 화면에서는 너무 넓을 수 있습니다. 좁은 모바일에서 큰 간격을 그대로 두면, 가뜩이나 부족한 공간이 여백으로 낭비되어 콘텐츠가 더 좁아지죠. DS-063은 디바이스 크기에 따라 간격을 적절히 조정하라고 규정합니다. 이번 편은 간격의 반응형 원리를 풀어냅니다.

1. 규칙 원문 — 반응형 간격

DS-063 (디자인 스타일 > 레이아웃) “디바이스 사이즈에 따라 적절한 반응형 간격을 설정하고 있다.”

화면 크기(디바이스)에 따라 간격을 다르게 적용하라는 뜻입니다 — 큰 화면은 넉넉히, 작은 화면은 좁게.

정리: 간격도 화면 크기에 맞춰 반응형으로 조정하라. 이게 DS-063입니다.

2. 왜 간격을 화면에 맞춰 조정하나

간격을 모든 화면에 똑같이 쓰면 어떤 문제가 생길까요?

큰 화면에 맞춘 넉넉한 간격(예: 48px)을 작은 모바일에 그대로 쓰면, 좁은 화면에서 그 간격이 공간을 과도하게 잡아먹습니다. 콘텐츠가 들어갈 자리가 더 좁아지고, 스크롤이 길어지죠. 반대로 작은 화면에 맞춘 좁은 간격을 큰 화면에 쓰면, 넓은 화면에서 요소들이 답답하게 붙어 보입니다. 한 간격 값이 모든 화면에 맞지 않는 것이죠.

그래서 간격도 화면 크기에 따라 조정합니다 — 큰 화면은 넉넉한 간격으로 여유롭게, 작은 화면은 좁은 간격으로 공간을 절약하면서. 예를 들어 섹션 사이 간격이 PC에서 48px이라면 모바일에서는 24px로 줄이는 식이죠. 이러면 각 화면에서 간격이 콘텐츠와 적절한 균형을 이룹니다.

이는 스크린 마진(51편), 칼럼 수(53편)가 화면에 따라 변한 것과 같은 반응형 원리입니다. 레이아웃의 거의 모든 요소 — 마진·칼럼·간격 — 가 화면 크기에 적응합니다. 한 디자인을 모든 화면에 강요하는 게 아니라, 각 화면에 맞게 조정하는 것이 반응형의 본질이죠. 간격도 예외가 아닙니다.

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

흔한 위반 패턴

함정 ① 고정 간격. 모든 화면에 같은 간격 → 모바일 공간 낭비 또는 PC 답답. → 화면별 조정. 함정 ② 모바일 과간격. 좁은 화면에 큰 간격 → 콘텐츠 압박. → 작은 화면 간격 축소. 함정 ③ PC 과소간격. 큰 화면에 좁은 간격 → 답답. → 큰 화면 간격 확대.

무엇을 점검하나

화면별 간격 — 디바이스 크기에 따라 간격이 조정되는가.

모바일 적정 — 작은 화면에서 간격이 공간을 과도하게 쓰지 않는가.

PC 적정 — 큰 화면에서 간격이 충분히 여유로운가.

Before / After

/* ❌ Before: 고정 간격 */ .section { margin-bottom: 48px; } /* 모바일에서 과함 */ /* ✅ After: 반응형 간격 */ .section { margin-bottom: 24px; } /* 모바일 */ @media (min-width: 1024px) { .section { margin-bottom: 48px; } /* PC */ }

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

역할	책임
디자이너	화면별 반응형 간격 설계
퍼블리셔/개발	미디어쿼리로 간격 조정 구현

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

반응형 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 간격이 화면 크기에 따라 조정되나요?

□ 모바일에서 간격이 공간을 과도하게 쓰지 않나요?

□ PC에서 요소들이 답답하게 붙지 않나요?

□ 간격이 8포인트 그리드(62편)를 따르면서 조정되나요?

❓ FAQ

Q1. 간격을 얼마나 줄이나요? 화면 크기에 맞게 한두 단계 줄입니다(예: PC 48px → 모바일 24px). 8포인트 그리드 안에서 조정하면 일관성도 유지됩니다.

Q2. 모든 간격을 반응형으로 하나요? 주요 간격(섹션 간, 큰 여백)은 반응형이 효과적입니다. 작은 간격(8px 등)은 화면 무관하게 유지해도 됩니다. 공간 영향이 큰 간격을 우선 조정하세요.

Q3. PC와 모바일 두 가지면 되나요? 최소 두 가지(PC/모바일)는 필요합니다(DS-064). 더 세밀하게는 브레이크포인트별로 조정할 수 있습니다.

Q4. KRDS를 채택하면 자동인가요? KRDS는 디바이스별 반응형 간격을 정의합니다. 채택하면 DS-063이 충족됩니다.

6. 마무리 — 간격도 적응한다

DS-063의 메시지는 반응형을 간격으로 확장합니다.

간격도 화면 크기에 적응해야 한다 — 큰 화면은 넉넉히, 작은 화면은 좁게.

한 간격 값은 모든 화면에 맞지 않습니다. 큰 화면의 넉넉한 간격은 모바일에서 공간을 낭비하고, 작은 화면의 좁은 간격은 PC에서 답답하죠. 화면 크기에 따라 간격을 조정하면 각 화면에서 콘텐츠와 균형을 이룹니다. 마진· 칼럼처럼 간격도 반응형의 일부입니다.

다음 편은 그 반응형 간격의 기본 구성을 다룹니다. DS-064 — “PC와 모바일 두 가지 주요 디바이스 유형에 대한 반응형 간격을 설정한다.” 최소한의 반응형 간격 구성을 살펴봅니다.

다음 편 예고 ▶ 「064. PC와 모바일 두 가지 주요 디바이스 유형에 대한 반응형 간격을 설정하고 있다.」

우리 사이트의 간격이 반응형인지 확인하려면? ViewCheck는 간격이 화면 크기에 따라 적절히 조정되는지를 진단합니다.

📚 참고 출처

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

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

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