화면 가장자리에도 숨 쉴 공간이 필요하다
색상(26)·타이포그래피(16)·형태(8)를 마치고, 이번엔 디자인 스타일의 가장 큰 분류 — 레이아웃(24개 규칙) 입니다. 화면에 요소를 어떻게 배치하고, 여백을 어떻게 두고, 다양한 화면 크기에 어떻게 대응하는지를 다룹니다.
KRDS DS-051 — 브레이크포인트별 최소 스크린 마진을 준수하여, 화면 크기에 맞는 적절한 마진을 유지하고 있다.
0. 들어가며 — 디자인 스타일의 가장 큰 분류, ‘레이아웃’
색상(26)·타이포그래피(16)·형태(8)를 마치고, 이번엔 디자인 스타일의 가장 큰 분류 — 레이아웃(24개 규칙) 입니다. 화면에 요소를 어떻게 배치하고, 여백을 어떻게 두고, 다양한 화면 크기에 어떻게 대응하는지를 다룹니다.
그 첫 주제는 스크린 마진(screen margin) — 화면 가장자리와 콘텐츠 사이의 여백입니다. 콘텐츠가 화면 끝까지 꽉 차면 답답하고, 모바일에서는 가장자리 요소를 잘못 터치하기 쉽습니다. 그래서 화면 양옆에 적절한 여백(스크린 마진)을 둬야 하죠. DS-051은 이 마진을 화면 크기(브레이크포인트)별로 적절히 유지하라고 규정합니다. 이번 편은 스크린 마진이 왜 필요한지, 반응형의 기본 개념과 함께 풀어냅니다.
1. 규칙 원문 — 화면별 마진
DS-051 (디자인 스타일 > 레이아웃) “브레이크포인트별 최소 스크린 마진을 준수하여, 화면 크기에 맞는 적절한 마진을 유지하고 있다.”
“브레이크포인트(breakpoint)”
화면 크기를 구간으로 나누는 기준점입니다. 모바일·태블릿·PC처럼 화면 너비에 따라 레이아웃이 바뀌는 지점 이죠. ’반응형 디자인’의 핵심 개념입니다.
“최소 스크린 마진을 준수”
각 화면 구간(브레이크포인트)마다 정해진 최소한의 가장자리 여백을 지키라는 뜻입니다. 큰 화면은 더 넓은 마진, 작은 화면은 더 좁은 마진처럼, 화면 크기에 맞는 마진을 유지하는 것이죠.
정리: 화면 크기(브레이크포인트)별로 정해진 최소 스크린 마진을 지켜라. 이게 DS-051입니다.
2. 스크린 마진이 왜 필요한가
화면 가장자리 여백(스크린 마진)이 없으면 어떤 문제가 생길까요?
답답하고 읽기 어렵다
콘텐츠가 화면 양 끝까지 꽉 차면, 글자가 화면 가장자리에 바짝 붙어 답답합니다. 줄 간격(32편)처럼, 가장자리 여백도 콘텐츠가 ’숨 쉴 공간’을 줍니다. 적절한 마진이 있어야 콘텐츠가 화면 안에 편안하게 자리 잡고, 읽기도 좋습니다.
터치 오류를 유발한다
특히 모바일에서 중요합니다. 화면 가장자리에 버튼·링크가 바짝 붙어 있으면, 사용자가 스크롤하거나 화면을 잡을 때 실수로 누르기 쉽습니다. 또 손가락으로 가장자리 요소를 정확히 터치하기 어렵죠. 적절한 마진이 가장자리 요소를 안쪽으로 들여, 터치 오류를 줄입니다(이는 다음 편 DS-052에서 자세히).
시각적 안정감을 준다
여백이 있는 화면은 정돈되고 안정적으로 보입니다. 콘텐츠가 가장자리까지 꽉 찬 화면은 빽빽하고 불안정해 보이죠. 스크린 마진은 화면에 ’틀’을 만들어, 콘텐츠가 그 안에 안정적으로 담기게 합니다.
스크린 마진은 단순한 빈 공간이 아니라, 가독성·터치 정확성·시각 안정성을 한 번에 확보하는 장치입니다.
3. ’브레이크포인트별’이라는 반응형의 핵심
DS-051의 핵심은 마진을 ‘브레이크포인트별로’ 다르게 한다는 데 있습니다. 이게 반응형 디자인의 기본 개념입니다.
화면 크기는 천차만별입니다 — 작은 스마트폰부터 큰 데스크톱 모니터까지요. 모든 화면에 같은 마진을 쓰면 어색합니다. 작은 모바일에 큰 마진을 주면 콘텐츠 공간이 너무 좁아지고, 큰 PC에 작은 마진을 주면 콘텐츠가 가장자리까지 퍼져 답답합니다. 그래서 화면 크기 구간(브레이크포인트)별로 적절한 마진을 정해야 합니다 — 작은 화면은 좁은 마진, 큰 화면은 넓은 마진.
이는 반응형 디자인의 출발점입니다. 화면을 large·medium·small 같은 구간으로 나누고(다음 편들에서 구체적 단계를 다룸), 각 구간에 맞는 레이아웃·마진·간격을 정의하는 것이죠. DS-051은 그중 ’마진’을 화면 크기에 맞게 유지하라는 규칙입니다. 한 가지 디자인이 모든 화면에 그대로 적용되는 게 아니라, 화면 크기에 따라 적응(respond)하는 것 — 이것이 반응형이고, 정부 서비스는 모든 기기의 국민을 대상으로 하므로 필수입니다.
4. 흔한 위반 패턴 / 점검 / 개선
흔한 위반 패턴
함정 ① 마진 없음. 콘텐츠가 화면 끝까지 꽉 참 → 답답, 터치 오류. → 스크린 마진 적용. 함정 ② 일률적 마진. 모든 화면에 같은 마진 → 작은 화면 공간 부족 또는 큰 화면 답답. → 화면별 마진. 함정 ③ 모바일 마진 부족. 모바일 가장자리 여백 부족 → 터치 오류(DS-052). → 최소 마진 확보. 함정 ④ 반응형 미적용. 한 크기 기준 고정 레이아웃 → 다른 화면에서 깨짐. → 브레이크포인트별 대응.
무엇을 점검하나
마진 존재 — 화면 가장자리에 적절한 마진이 있는가.
화면별 차등 — 브레이크포인트별로 마진이 조정되는가.
최소 마진 — 각 구간의 최소 마진을 지키는가(DS-052).
반응형 — 다양한 화면 크기에서 마진이 적절한가.
Before / After
/* ❌ Before: 마진 없음 또는 일률적 */ .container { padding: 0; } /* ✅ After: 브레이크포인트별 스크린 마진 */ .container { padding: 0 16px; } /* 모바일(small) */ @media (min-width: 768px) { .container { padding: 0 24px; } /* 태블릿(medium) */ } @media (min-width: 1200px) { .container { padding: 0 32px; } /* PC(large) — 값은 KRDS 기준 */ }
5. 누가 담당하나 / 우리 사이트에 해당될까?
| 역할 | 책임 |
|---|---|
| 디자이너 | 브레이크포인트별 스크린 마진 설계 |
| 퍼블리셔/개발 | 반응형 마진 구현 |
| 기관 유형 | DS-051 적용 |
|---|---|
| 중앙행정기관(대표·운영) / 공공기관 / 지자체 | ✅ 필수 |
모든 웹사이트 = 해당. 반응형 레이아웃의 기본입니다.
6. 30초 자가진단 + FAQ
✅ 30초 자가진단
□ 화면 가장자리에 적절한 여백(마진) 이 있나요?
□ 화면 크기(모바일/PC)에 따라 마진이 다른가요?
□ 콘텐츠가 화면 끝까지 꽉 차 답답하지 않나요?
□ 모바일 가장자리 요소가 터치하기 편한가요?
□ 브레이크포인트별로 마진이 조정되나요?
❓ FAQ
Q1. 브레이크포인트가 뭔가요? 화면 너비에 따라 레이아웃이 바뀌는 기준점입니다. 예를 들어 768px 미만은 모바일, 이상은 태블릿처럼요. 화면 크기를 구간으로 나눠 각각 다른 레이아웃을 적용하는 반응형의 핵심 개념입니다(DS-056·057에서 자세히).
Q2. 마진 값은 얼마로 하나요? 브레이크포인트별 최소값이 정해져 있습니다(DS-052: large/medium 24px, small 16px). 그 이상으로 화면에 맞게 조정합니다. KRDS 토큰을 쓰면 적정값이 정의돼 있습니다.
Q3. 마진과 패딩의 차이는요? 여기서는 ’화면 가장자리와 콘텐츠 사이 여백’을 뜻합니다. 구현은 보통 container의 좌우 padding으로 합니다. 용어보다 ’가장자리 여백을 확보한다’는 의미가 핵심입니다.
Q4. 큰 화면에서 마진을 너무 키우면요? 마진을 무작정 키우기보다, 콘텐츠 최대 너비를 제한하는 방식도 씁니다(DS-059·060). 큰 화면에서는 마진과 최대 너비를 함께 고려합니다.
Q5. KRDS를 채택하면 자동인가요? KRDS는 브레이크포인트별 스크린 마진을 정의합니다. 그리드 시스템을 채택하면 DS-051이 충족됩니다.
7. 마무리 — 가장자리의 여백
DS-051의 메시지는 여백의 가치를 화면 차원으로 확장합니다.
콘텐츠는 화면 가장자리에도 숨 쉴 공간이 필요하다 — 그것도 화면 크기에 맞게.
스크린 마진은 콘텐츠에 가독성·터치 정확성·시각 안정성을 줍니다. 그리고 그 마진은 화면 크기에 따라 달라야 하죠 — 작은 화면은 좁게, 큰 화면은 넓게. 이는 반응형 디자인의 출발점이며, 모든 기기의 국민을 대상으로 하는 정부 서비스에 필수입니다. 줄 간격(32편)이 글 사이의 숨이라면, 스크린 마진은 화면 차원의 숨입니다.
다음 편은 이 마진의 모바일 최소값을 다룹니다. DS-052 — “모바일 환경에서 터치 오류 방지를 위해 최소 스크린 마진을 설정한다(large/medium 24px, small 16px).” 터치 정확성을 위한 구체적 마진 기준을 살펴봅니다.
다음 편 예고 ▶ 「052. 모바일 환경에서 가장자리 요소 터치 오류 방지를 위해 최소한의 스크린 마진을 필수로 설정하고 있다.」
우리 사이트의 스크린 마진이 적절한지 확인하려면? ViewCheck는 화면 가장자리 마진이 브레이크포인트별로 적절한지, 모바일 최소 마진을 지키는지를 진단합니다.
📚 참고 출처
KRDS 레이아웃(Layout) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_04.html
KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준
KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준
관련 글
다음 호는 언제?
이번 846편은 간행물 자료의 발행 주기 정보를 본문의 부제목이나 별도 안내 영역에 제공하라는 규칙입니다. 그리고 이 편이 — 846 규칙 완전 분해 시리즈의 마지막 한 편입니다.
방대한 자료를 효율적으로
이번 845편은 목록에 필터링, 정렬 방식, 상세 검색(기간, 자료 유형 등) 기능을 제공하여 정보를 효과적으로 조회하라는 규칙입니다. [정책 자료 탐색] 서브섹션의 시작이죠.
적힌 대로 가야 한다
이번 844편은 모든 링크는 실행하였을 때, 링크 레이블에 명시된 적절한 화면으로 이동하라는 규칙입니다.