좁은 화면에서 메뉴가 콘텐츠를 먹지 않게

KRDS DS-061 — 양쪽 메뉴를 함께 사용할 경우 작은 화면에서 사용 시 콘텐츠 가독성을 위해 메뉴 배치를 조정하고 있다.

0. 들어가며 — 메뉴와 콘텐츠의 공간 다툼

지난 편들에서 콘텐츠 너비를 봤습니다. 이번 61편은 메뉴가 콘텐츠 공간을 침범하는 문제, 특히 양쪽 메뉴를 함께 쓸 때의 작은 화면 대응입니다.

어떤 사이트는 화면 양쪽에 메뉴를 둡니다 — 왼쪽에 사이드 메뉴, 오른쪽에 보조 메뉴(목차·관련 링크 등). 큰 화면에서는 양쪽 메뉴와 가운데 콘텐츠가 여유롭게 배치되지만, 작은 화면에서는 양쪽 메뉴가 공간을 차지해 가운데 콘텐츠가 너무 좁아집니다. DS-061은 이런 경우 콘텐츠 가독성을 위해 메뉴 배치를 조정하라고 규정 합니다. 이번 편은 좁은 화면에서 메뉴와 콘텐츠의 공간 균형을 풀어냅니다.

1. 규칙 원문 — 메뉴 배치 조정

DS-061 (디자인 스타일 > 레이아웃) “양쪽 메뉴를 함께 사용할 경우 작은 화면에서 사용 시 콘텐츠 가독성을 위해 메뉴 배치를 조정하고 있다.”

양쪽 메뉴가 있을 때, 작은 화면에서는 콘텐츠가 너무 좁아지지 않게 메뉴 배치를 바꾸라는 뜻입니다.

정리: 양쪽 메뉴가 있으면, 작은 화면에서 콘텐츠 가독성을 위해 메뉴 배치를 조정하라. 이게 DS-061입니다.

2. 왜 조정해야 하나 — 좁은 화면의 공간 부족

양쪽 메뉴를 작은 화면에 그대로 두면 어떤 문제가 생길까요?

화면 너비가 한정된 작은 화면에서, 왼쪽 메뉴와 오른쪽 메뉴가 각각 공간을 차지하면 가운데 콘텐츠가 들어갈 공간이 거의 없어집니다. 좁아진 콘텐츠 영역에서는 본문 줄이 짧게 끊기고, 텍스트가 답답하게 뭉치며, 가독성이 크게 떨어지죠. 메뉴는 보조 요소인데, 그 보조 요소가 주인공(콘텐츠)의 공간을 빼앗는 셈입니다.

그래서 작은 화면에서는 메뉴 배치를 조정해야 합니다. 대표적인 방법은 — 양쪽 메뉴를 접거나(햄버거 메뉴), 숨기거나, 위/아래로 옮기거나, 하나로 통합하는 것입니다. 메뉴를 화면 양옆에서 빼서, 가운데 콘텐츠가 화면 너비를 충분히 쓰게 하는 것이죠. 그러면 좁은 화면에서도 콘텐츠가 읽기 좋은 너비를 확보합니다.

이는 반응형의 핵심 원리 — ’화면 크기에 따라 우선순위를 조정한다’의 적용입니다. 큰 화면에서는 메뉴와 콘텐츠가 공존할 여유가 있지만, 작은 화면에서는 콘텐츠(주)를 우선하고 메뉴(보조)를 양보시키는 것이죠. 공간이 부족할 때 무엇을 우선할지 결정하는 것이 반응형 설계입니다. 그리고 콘텐츠 가독성이 메뉴 편의보다 우선입니다.

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

흔한 위반 패턴

함정 ① 메뉴 고정. 작은 화면에서도 양쪽 메뉴 유지 → 콘텐츠 폭 부족, 가독성 저하. → 메뉴 접기/이동. 함정 ② 콘텐츠 압박. 가운데 콘텐츠가 너무 좁아짐 → 본문 끊김. → 메뉴 양보. 함정 ③ 가로 스크롤. 메뉴+콘텐츠가 화면 넘침 → 가로 스크롤. → 반응형 재배치.

무엇을 점검하나

메뉴 조정 — 작은 화면에서 양쪽 메뉴 배치가 조정되는가.

콘텐츠 폭 — 좁은 화면에서 콘텐츠가 읽기 좋은 너비인가.

우선순위 — 콘텐츠 가독성이 메뉴보다 우선되는가.

Before / After

/* ❌ Before: 작은 화면에서도 양쪽 메뉴 고정 */ .layout { display: grid; grid-template-columns: 200px 1fr 200px; } /* ✅ After: 작은 화면에서 메뉴 접기/이동 */ @media (max-width: 767px) { .layout { grid-template-columns: 1fr; } /* 콘텐츠 단일 열 */ .side-menu { /* 햄버거로 접거나 위/아래 이동 */ } }

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

역할	책임
디자이너	작은 화면 메뉴 배치 조정 설계
퍼블리셔/개발	반응형 메뉴 재배치 구현

기관 유형	DS-061 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (양쪽 메뉴 사용 시)

양쪽 메뉴를 쓰는 사이트 = 해당. 양쪽 메뉴가 없으면 N/A.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 작은 화면에서 양쪽 메뉴가 배치 조정되나요?

□ 좁은 화면에서 콘텐츠가 읽기 좋은 너비인가요?

□ 메뉴가 콘텐츠 공간을 압박하지 않나요?

□ 가로 스크롤이 생기지 않나요?

❓ FAQ

Q1. 메뉴를 어떻게 조정하나요? 작은 화면에서 양쪽 메뉴를 접거나(햄버거), 숨기거나, 위/아래로 옮기거나, 하나로 통합합니다. 핵심은 메뉴를 양옆에서 빼서 콘텐츠 공간을 확보하는 것입니다.

Q2. 메뉴 접근성이 떨어지지 않나요? 메뉴를 숨기되 쉽게 펼칠 수 있게(햄버거 버튼 등) 해야 합니다. 메뉴를 없애는 게 아니라 ‘접근 가능하게 접는’ 것입니다. 콘텐츠 우선이되 메뉴 접근도 유지합니다.

Q3. 양쪽 메뉴가 꼭 필요한가요? 양쪽 메뉴는 큰 화면에 적합한 구조입니다. 작은 화면에서는 한쪽으로 줄이거나 접는 것이 일반적입니다. 콘텐츠 가독성을 위해 메뉴를 유연하게 다루세요.

Q4. 양쪽 메뉴가 없으면요? 양쪽 메뉴를 쓰지 않으면 이 규칙은 해당 없음(N/A)입니다. 한쪽 메뉴나 상단 메뉴만 쓰는 경우는 별개입니다.

6. 마무리 — 좁을 때는 콘텐츠 우선

DS-061의 메시지는 반응형 우선순위를 담습니다.

공간이 부족한 작은 화면에서는 콘텐츠 가독성을 우선하고, 메뉴를 양보시켜라.

양쪽 메뉴를 작은 화면에 그대로 두면 콘텐츠 공간이 부족해 가독성이 무너집니다. 메뉴를 접거나 옮겨 콘텐츠가 화면 너비를 충분히 쓰게 하는 것 — 이것이 좁은 화면의 해법입니다. 큰 화면에서는 공존하던 메뉴와 콘텐츠가, 작은 화면에서는 콘텐츠를 우선하는 것이죠. 공간이 부족할 때 무엇을 우선할지가 반응형 설계의 핵심입니다.

다음 편은 간격의 체계를 다룹니다. DS-062 — “8-point grid system을 기준으로 간격을 설정하여 일관성을 유지한다.” 모든 간격을 8의 배수로 맞추는 ’8포인트 그리드’를 살펴봅니다.

다음 편 예고 ▶ 「062. 8-point grid system을 기준으로 간격을 설정하여 일관성을 유지하고 있다.」

우리 사이트의 메뉴 배치가 반응형인지 확인하려면? ViewCheck는 양쪽 메뉴가 작은 화면에서 조정되는지, 콘텐츠 가독성이 확보되는지를 진단합니다.

📚 참고 출처

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

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

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