화면을 넘치면 안 된다

KRDS CP-055 — 드롭다운 영역의 최대 높이는 뷰포트를 초과하지 않도록 하고 최대 높이를 초과하는 경우에 스크롤이 생성되도록 제공하고 있다.

0. 들어가며 — 메뉴가 화면을 넘칠 때

이번 175편은 드롭다운 영역의 높이를 뷰포트(화면) 이내로 제한하고, 넘치면 스크롤을 제공하는 규칙입니다.

메뉴 항목이 많으면 드롭다운이 길어져, 화면 높이를 넘어 아래쪽 항목이 화면 밖으로 잘릴 수 있습니다. 그러면 사용자는 그 항목에 접근할 수 없죠. CP-055는 드롭다운 높이를 화면 이내로 하고, 항목이 많으면 스크롤로 모두 볼 수 있게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 뷰포트 이내 + 스크롤

CP-055 (컴포넌트 > 메인 메뉴) “드롭다운 영역의 최대 높이는 뷰포트를 초과하지 않도록 하고 최대 높이를 초과하는 경우에 스크롤이 생성되도록 제공하고 있다.”

드롭다운 높이가 화면(뷰포트)을 넘지 않게 하고, 항목이 많아 넘칠 경우 스크롤로 볼 수 있게 하라는 뜻입니다.

정리: 드롭다운 최대 높이는 뷰포트 이내로, 초과 시 스크롤을 생성하라. 이게 CP-055입니다.

2. 왜 높이를 제한하고 스크롤을 주나

드롭다운 메뉴는 메뉴 항목 수에 따라 높이가 달라집니다. 항목이 적으면 짧지만, 하위 메뉴가 많은 메가메뉴 같은 경우 드롭다운이 매우 길어질 수 있죠.

문제는 드롭다운이 화면(뷰포트) 높이를 넘을 때입니다. 드롭다운이 화면보다 길면 — 아래쪽 항목들이 화면 밖으로 잘려 안 보입니다. 사용자는 그 항목이 있는지조차 모르고, 보더라도 클릭할 수 없죠. 메뉴인데 일부 항목에 접근 불가능한 황당한 상황입니다. 특히 화면이 작은 노트북·태블릿에서 자주 생깁니다.

CP-055는 두 가지로 이를 해결합니다.

① 최대 높이를 뷰포트 이내로 — 드롭다운의 최대 높이를 화면 높이를 넘지 않게 제한합니다(max-height를 뷰포트 기준으로). 그러면 드롭다운이 화면 밖으로 삐져나가지 않죠.

② 초과 시 스크롤 — 항목이 그 최대 높이를 넘으면, 드롭다운 안에 스크롤을 생성합니다(overflow-y: auto). 그러면 사용자는 드롭다운 안에서 스크롤해 모든 항목을 볼 수 있죠. 화면 밖으로 잘리지 않고, 모든 항목에 접근 가능합니다.

이 둘을 합치면 — 드롭다운은 항상 화면 안에 머물고, 항목이 아무리 많아도 스크롤로 전부 접근됩니다. 메뉴 항목이 잘려서 못 누르는 일이 없어지죠.

물론 근본적으로는 메뉴 항목 수 자체를 줄이는 것(CP-058 링크 최소화)이 좋지만, 불가피하게 많을 때 화면 밖으로 잘리지 않게 하는 안전장치가 CP-055입니다. 또 드롭다운 안 스크롤도 접근 가능해야 합니다 — 키보드로 스크롤 영역의 항목에 도달할 수 있어야 하죠. 화면 크기와 메뉴 양에 관계없이 모든 항목에 접근 가능하게 하는 규칙 입니다.

3. 점검 / 개선

무엇을 점검하나

뷰포트 이내 — 드롭다운이 화면 높이를 넘어 잘리지 않는가.

스크롤 생성 — 항목이 많으면 드롭다운 안 스크롤이 생기는가.

모든 항목 접근 — 스크롤로 모든 항목에 도달·클릭 가능한가.

Before / After

/* ✅ 최대 높이 제한 + 스크롤 */ .dropdown-menu { max-height: calc(100vh - 80px); /* 헤더 높이 제외 */ overflow-y: auto; }

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

역할	책임
퍼블리셔/개발	드롭다운 max-height + overflow 스크롤 구현
디자이너	메뉴 양·높이 설계

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

드롭다운 메인 메뉴를 사용하는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 드롭다운이 화면 높이를 넘어 잘리지 않나요?

□ 항목이 많으면 드롭다운 안 스크롤이 생기나요?

□ 스크롤로 모든 항목에 도달·클릭 가능한가요?

❓ FAQ

Q1. 메뉴가 적으면요? 적으면 스크롤이 안 생겨도 됩니다. 화면을 넘칠 때만 스크롤이 필요합니다. Q2. 작은 노트북에서 잘리는데요? max-height를 뷰포트 기준으로 설정하고 스크롤을 주면 어느 화면에서도 잘리지 않습니다. Q3. KRDS를 채택하면 자동인가요? 표준 드롭다운은 높이 제한 + 스크롤을 제공합니다.

6. 마무리

CP-055의 메시지:

화면을 넘치면 안 된다 — 드롭다운은 뷰포트 이내로, 넘치면 스크롤로 모든 항목을 접근하게.

드롭다운이 화면 높이를 넘으면 아래 항목이 잘려 접근 불가가 됩니다. 최대 높이를 뷰포트 이내로 제한하고, 넘치면 스크롤을 생성해 모든 항목에 접근하게 하죠. 화면 크기·메뉴 양과 무관하게 메뉴를 온전히 쓰게 하는 안전장치 입니다.

다음 편은 메뉴 링크의 상태 표현을 다룹니다. CP-056 — “링크의 활성화·선택 상태가 명확히 구분되도록 표현 한다.”

다음 편 예고 ▶ 「176. (CP-056) 링크의 활성화 상태, 선택 상태가 명확히 구분되도록 표현하고 있다.」

ViewCheck는 드롭다운 높이가 뷰포트 이내이고 초과 시 스크롤이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 메인 메뉴(Main menu) 가이드 — https://www.krds.go.kr/html/site/component/component_06.html

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

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