좁으면 옆 메뉴는 접어라

KRDS CP-096 — [모바일] 화면 너비가 충분하지 않은 경우 사이드 메뉴를 표시하지 않는다.

0. 들어가며 — 본문 옆 공간이 없는 화면

이번 216편은 모바일처럼 화면이 좁을 때 사이드 메뉴를 표시하지 말라는 규칙입니다.

사이드 메뉴는 본문 ’옆’에 세로로 붙는 내비게이션입니다. 데스크톱은 가로 공간이 넉넉해 본문과 사이드를 나란히 둘 수 있죠. 하지만 모바일은 가로 너비가 좁아, 사이드 메뉴를 본문 옆에 두면 본문이 짓눌립니다. CP-096은 좁은 화면에선 사이드 메뉴를 숨기고, 다른 방식(햄버거 메인 메뉴 등, CP-097)으로 탐색을 대체하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 모바일 사이드 메뉴 미표시

CP-096 (컴포넌트 > 사이드 메뉴) [모바일] “화면 너비가 충분하지 않은 경우 사이드 메뉴를 표시하지 않는다.”

모바일 등 가로 너비가 부족한 환경에서는 본문 옆 사이드 메뉴를 노출하지 말고, 본문이 화면 너비를 온전히 쓰게 하라는 뜻입니다(탐색은 CP-097의 햄버거 메인 메뉴 등으로 대체).

정리: 좁은 화면에선 사이드 메뉴를 표시하지 마라. 이게 CP-096입니다.

2. 왜 모바일에선 사이드 메뉴를 숨기나

사이드 메뉴의 전제는 ’본문 옆에 둘 가로 공간이 있다’는 것입니다. 데스크톱(1024px 이상)은 본문 + 사이드를 나란히 배치해도 둘 다 충분한 너비를 갖죠. 그런데 모바일(보통 360~430px)은 가로 공간이 데스크톱의 1/3 수준 이라, 본문과 사이드를 나란히 두면 둘 다 비좁아집니다:

본문 압박 — 사이드가 가로의 상당 부분을 차지하면, 정작 핵심인 본문 콘텐츠가 좁은 칸에 갇혀 가독성이 무너집니다. 긴 텍스트가 한 줄에 몇 글자 안 들어가 줄바꿈이 잦아지죠.

사이드 자체도 비좁음 — 좁은 폭의 사이드 메뉴는 항목 텍스트가 잘리거나 줄바꿈되어 읽기 어렵습니다.

확장 영역 넘침 — 펼침형이면 좁은 화면에서 CP-094(뷰포트 밖 잘림)이 빈번히 발생합니다.

결국 모바일에서 사이드 메뉴를 무리하게 유지하면 본문도 메뉴도 다 망가집니다. 그래서 모바일 우선(mobile-first) 설계의 정석은 — 좁은 화면에서는 사이드 메뉴를 숨기고, 본문이 화면 전체 너비를 쓰게 하는 것이죠. 본문을 우선시하고, 탐색은 다른 형태로 제공합니다.

그럼 모바일 사용자는 탐색을 어떻게 할까요? 바로 다음 편 CP-097의 내용입니다 — 모바일에서는 햄버거 아이콘으로 축소된 메인 메뉴를 통해 정보 구조 전체를 탐색합니다. 즉 데스크톱에서 ‘메인 메뉴(상단) + 사이드 메뉴(옆)’로 나뉘던 탐색이, 모바일에서는 ’햄버거 메인 메뉴’ 하나로 통합되죠. 사이드 메뉴가 담당하던 섹션 내 탐색은 이 햄버거 메뉴 안의 계층이나 본문 내 보조 탐색으로 흡수됩니다.

이는 ‘정보를 없애는’ 게 아니라 ‘표시 방식을 화면에 맞게 바꾸는’ 반응형 대응입니다 — 탐색 기능 자체는 유지 하되, 좁은 화면에 맞는 형태(햄버거)로 제공합니다. CP-084(모바일 브레드크럼 축약), CP-096·097이 함께 ’좁은 화면에선 내비게이션을 접고 대체한다’는 모바일 패턴을 이룹니다.

주의 — ’화면 너비가 충분하지 않은 경우’는 미디어 쿼리 등으로 판별합니다. 특정 너비(브레이크포인트) 이하에서 사이드 메뉴를 display:none 등으로 숨기고 햄버거 패턴으로 전환하죠. 단순히 작게 줄여 본문 옆에 욱여넣는 것이 아니라 표시 자체를 끄는 것이 이 규칙입니다.

3. 점검 / 개선

무엇을 점검하나

모바일 미표시 — 좁은 화면에서 사이드 메뉴가 표시되지 않는가.

본문 전폭 — 사이드가 사라진 자리를 본문이 온전히 쓰는가.

탐색 대체 — 사이드 메뉴 기능이 햄버거 메인 메뉴 등으로 제공되는가(CP-097).

개선 방향

브레이크포인트 이하에서 사이드 메뉴 숨김 + 본문 전폭 레이아웃.

섹션 내 탐색을 햄버거 메뉴 계층/본문 보조 탐색으로 흡수(CP-097).

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

역할	책임
디자이너	모바일 레이아웃·탐색 대체 패턴 설계
퍼블리셔/개발	반응형 분기(사이드 숨김)·햄버거 전환 구현

기관 유형	CP-096 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 지원 + 사이드 메뉴 사용 시)

모바일 트래픽이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 좁은 화면에서 사이드 메뉴가 표시되지 않나요?

□ 사이드가 사라진 자리를 본문이 온전히 쓰나요?

□ 사이드 기능이 햄버거 메인 메뉴 등으로 대체되나요(CP-097)?

❓ FAQ

Q1. 사이드 메뉴를 작게 줄여서 옆에 두면 안 되나요? 좁은 화면에선 본문·메뉴 둘 다 비좁아집니다. 표시 자체를 끄고 다른 형태로 대체하는 게 정석입니다. Q2. 그럼 모바일에서 섹션 내 탐색은 어떻게 하나요? 햄버거 메인 메뉴의 계층(CP-097)이나 본문 내 보조 탐색 으로 흡수합니다. Q3. 정보가 사라지는 건 아닌가요? 기능은 유지되고 표시 방식만 바뀝니다. 반응형 대응입니다.

6. 마무리

CP-096의 메시지:

좁으면 옆 메뉴는 접어라 — 모바일에선 사이드 메뉴를 표시하지 않는다.

사이드 메뉴는 본문 옆 가로 공간을 전제로 합니다. 모바일은 그 공간이 없어, 사이드를 유지하면 본문·메뉴 둘 다 망가지죠. 좁은 화면에선 사이드를 숨겨 본문에 전폭을 주고, 탐색은 햄버거 메인 메뉴로 대체합니다. 다음 편이 바로 그 대체 방식입니다.

다음 편 예고 ▶ 「217. (CP-097) [모바일] 햄버거 아이콘으로 축소된 메인 메뉴를 통해 정보 구조를 탐색하고 있다.」

ViewCheck는 모바일에서 사이드 메뉴가 적절히 미표시·대체되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 사이드 메뉴(Side navigation) 가이드 — https://www.krds.go.kr/html/site/component/component_08.html

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

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