펼쳤는데 화면 밖이면 못 본다

KRDS CP-094 — 하위 메뉴 표시를 위해 확장된 영역이 뷰 포트 바깥으로 표시되지 않게 구현하고 있다.

0. 들어가며 — 펼친 메뉴가 보여야 의미가 있다

이번 214편은 하위 메뉴를 펼쳤을 때 그 확장 영역이 뷰포트(화면) 밖으로 나가지 않게 하라는 규칙입니다.

사이드 메뉴에서 항목을 펼치면 하위 메뉴가 아래로(또는 옆으로) 확장됩니다. 그런데 펼친 영역이 화면 경계를 넘어 잘리거나 화면 밖으로 표시되면 — 사용자는 펼친 하위 메뉴의 일부 또는 전부를 못 보죠. 펼쳐도 안 보이면 펼친 의미가 없습니다. CP-094는 확장 영역이 항상 뷰포트 안에 들어오게 구현하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 확장 영역 뷰포트 내 표시

CP-094 (컴포넌트 > 사이드 메뉴) “하위 메뉴 표시를 위해 확장된 영역이 뷰 포트 바깥으로 표시되지 않게 구현하고 있다.”

하위 메뉴를 펼쳤을 때 생기는 확장 영역이 화면(뷰포트) 경계를 벗어나 잘리거나 가려지지 않도록, 항상 화면 안에서 온전히 보이게 구현하라는 뜻입니다.

정리: 펼친 하위 메뉴가 화면 밖으로 나가 잘리지 않게 하라. 이게 CP-094입니다.

2. 왜 뷰포트 경계를 따지나

펼침(확장) 메뉴는 트리거(부모 항목)를 기준으로 일정 방향으로 펼쳐집니다 — 보통 아래쪽으로, 때로는 옆쪽(플라이 아웃)으로요. 문제는 트리거의 위치와 펼침 콘텐츠의 크기에 따라 확장 영역이 화면 경계를 넘길 수 있다는 점입니다:

세로 방향 — 부모 항목이 화면 하단 근처에 있는데 하위 메뉴가 길면, 펼친 목록의 아래쪽이 화면 밖으로 나가 잘립니다. 사용자는 스크롤하지 않으면 아래 항목들을 못 보죠.

가로 방향(플라이아웃) — 사이드 메뉴가 화면 오른쪽이나, 하위 메뉴가 옆으로 펼쳐지는 경우, 확장 영역이 화면 우측 경계를 넘어가 잘릴 수 있습니다.

확장 영역이 잘리면 — 사용자는 존재하는 메뉴를 인지조차 못 하거나, 잘린 메뉴를 보려고 스크롤·드래그 같은 추가 조작을 해야 합니다. 최악의 경우 펼침 콘텐츠가 화면 완전 바깥으로 나가 아예 접근 불가가 되죠. 이는 탐색 실패로 직결됩니다 — 분명 그 메뉴가 있는데 사용자는 못 씁니다.

그래서 CP-094는 확장 영역이 항상 뷰포트 안에 온전히 들어오게 구현하라고 합니다. 구현 전략은 여러 가지죠:

펼침 방향 자동 조정 — 트리거가 화면 하단 근처면 위로 펼치는 등, 가용 공간에 따라 방향을 바꿉니다(collision detection, ‘충돌 감지’ 후 flip).

확장 영역 내부 스크롤 — 펼침 콘텐츠가 화면보다 길면, 영역 자체에 스크롤을 두어 화면 안에서 다 볼 수 있게 합니다(영역은 뷰포트 안, 내용은 스크롤).

위치 보정(shift) — 경계를 넘는 만큼 펼침 위치를 안쪽으로 밀어 잘림을 막습니다.

핵심은 — 펼침은 ‘보여주기 위한’ 동작이므로, 펼친 결과가 보이지 않으면 자기모순이라는 점입니다. 어떤 화면 크기·스크롤 위치에서도 펼친 하위 메뉴가 화면 안에서 온전히 보여야 합니다. 이는 모바일 등 작은 뷰포트에서 특히 중요하며(좁아서 잘 넘침), CP-096(모바일에선 사이드 메뉴 미표시)·CP-097(햄버거 메인 메뉴로 대체)과 함께 작은 화면 대응의 한 축을 이룹니다.

3. 점검 / 개선

무엇을 점검하나

세로 경계 — 화면 하단 근처 항목을 펼쳐도 하위 메뉴가 잘리지 않는가.

가로 경계 — 옆으로 펼치는 경우 화면 우측을 넘지 않는가.

다양한 뷰포트 — 작은 화면·스크롤 위치에서도 확장 영역이 온전히 보이는가.

개선 방향

펼침 방향 자동 flip(가용 공간 기반), 위치 shift, 영역 내부 스크롤 중 적용.

다양한 화면 크기·스크롤 위치에서 펼침 테스트.

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

역할	책임
디자이너	펼침 방향·경계 처리 정책 정의
퍼블리셔/개발	flip/shift/스크롤 등 뷰포트 경계 처리 구현

기관 유형	CP-094 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (펼침형 사이드 메뉴 사용 시)

하위 메뉴를 펼치는 방식의 사이드 메뉴를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 화면 하단 근처 항목을 펼쳐도 하위 메뉴가 잘리지 않나요?

□ 옆으로 펼치는 경우 화면 우측을 넘지 않나요?

□ 작은 화면·스크롤 위치에서도 펼침이 온전히 보이나요?

❓ FAQ

Q1. 어떻게 막나요? 가용 공간에 따라 펼침 방향을 뒤집거나(flip), 위치를 안쪽으로 밀거나(shift), 영역에 스크롤을 둡니다. Q2. 데스크톱은 화면이 커서 괜찮지 않나요? 하단 근처 항목이나 긴 하위 메뉴는 큰 화면에서도 넘칩니다. 모든 위치에서 점검해야 합니다. Q3. 모바일은요? 좁아서 더 자주 넘칩니다. 다만 모바일은 사이드 메뉴를 아예 미표시(CP-096)하고 햄버거 메인 메뉴로 대체(CP-097)하는 것이 기본 방향입니다.

6. 마무리

CP-094의 메시지:

펼쳤는데 화면 밖이면 못 본다 — 확장 영역을 항상 뷰포트 안에 들여라.

펼침은 보여주기 위한 동작인데, 화면 밖으로 잘리면 자기모순입니다. 펼침 방향 자동 조정·위치 보정·내부 스크롤로 어떤 화면·위치에서도 하위 메뉴가 온전히 보이게 해야 하죠. 특히 작은 뷰포트에서 중요합니다. 다음 편은 계층 구조의 시각적 명확화입니다.

다음 편 예고 ▶ 「215. (CP-095) 메뉴의 계층 구조를 명확하게 구분하여 표현하고 있다.」

ViewCheck는 사이드 메뉴 확장 영역이 뷰포트를 벗어나 잘리지 않는지를 진단합니다.

📚 참고 출처

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

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

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