5개가 넘으면 접어라

KRDS CP-022 — 유틸리티 링크가 5개 이상 필요한 경우 드롭다운 메뉴를 사용하여 제공하고 있다.

0. 들어가며 — 많아지면 접는다

이번 142편은 유틸리티 링크가 5개 이상이면 드롭다운 메뉴로 제공하는 규칙입니다.

유틸리티 링크는 우측 상단에 디바이더로 구분해 둡니다(140·141편). 그런데 링크가 너무 많아지면 헤더 우측이 빽빽해지고 간결성(CP-019)이 깨지죠. CP-022는 5개 이상일 때 드롭다운으로 묶어 정리하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 5개 이상이면 드롭다운

CP-022 (컴포넌트 > 헤더) “유틸리티 링크가 5개 이상 필요한 경우 드롭다운 메뉴를 사용하여 제공하고 있다.”

유틸리티 링크가 5개 이상이면, 하나하나 펼치지 말고 드롭다운 메뉴로 묶어 제공하라는 뜻입니다.

정리: 유틸리티 링크가 5개 이상이면 드롭다운 메뉴를 사용하라. 이게 CP-022입니다.

2. 왜 5개 기준, 왜 드롭다운인가

유틸리티 링크를 모두 펼쳐서 가로로 나열하면, 개수가 적을 땐 괜찮지만 많아지면 문제가 생깁니다. 5개를 넘어 가면 헤더 우측이 빽빽해지고, 헤더 간결성(CP-019)이 무너지며, 좁은 화면에서는 줄바꿈이 어지러워지죠.

’5개’라는 기준은 인지·공간 측면의 합리적 한계선입니다. 사람이 한눈에 무리 없이 처리하는 항목 수는 대략 5~7개라는 인지심리(밀러의 법칙)와도 통하고, 헤더 우측의 제한된 공간에 펼쳐 둘 수 있는 현실적 개수 이기도 합니다. 4개까지는 펼쳐 두어도 깔끔하지만, 5개 이상이면 접는 것이 낫다는 표준 기준이죠.

드롭다운은 평소엔 하나의 버튼(예: “전체메뉴” “더보기” 또는 대표 아이콘)으로 접어 두었다가, 누르면 링크 목록이 펼쳐지는 컴포넌트입니다. 5개 이상의 유틸리티를 드롭다운으로 묶으면 — 평소 헤더는 간결하게 유지되고, 사용자가 필요할 때 펼쳐서 원하는 링크를 찾죠. 공간을 절약하면서 모든 링크에 접근할 수 있는 균형입니다.

물론 드롭다운도 제대로 구현해야 합니다 — 키보드로 열고 닫을 수 있어야 하고, 스크린리더가 ‘펼침/접힘’ 상태를 알 수 있게 aria-expanded 등을 제공해야 하죠(드롭다운·디스클로저 관련 규칙과 연계). 단순히 시각적으로 접는 게 아니라 접근 가능하게 만드는 것이 중요합니다.

핵심은 — 유틸리티가 많아지는 걸 막을 수 없다면, 무작정 펼치지 말고 5개를 기준으로 드롭다운에 정리해 헤더의 간결성을 지키라는 것입니다. CP-019(간결성)를 유틸리티 영역에서 구체적으로 실현하는 규칙이죠.

3. 점검 / 개선

무엇을 점검하나

5개 기준 — 유틸리티가 5개 이상이면 드롭다운으로 묶었는가.

간결 유지 — 평소 헤더가 간결한가.

접근성 — 드롭다운이 키보드·스크린리더로 조작 가능한가(aria-expanded).

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

역할	책임
기획/디자이너	유틸리티 개수 판단, 드롭다운 전환 결정
퍼블리셔/개발	접근 가능한 드롭다운 구현

기관 유형	CP-022 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (유틸리티 5개 이상일 때)

유틸리티 링크가 5개 이상인 사이트 = 해당. 4개 이하면 펼쳐 두어도 무방(N/A).

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 유틸리티가 5개 이상이면 드롭다운으로 묶었나요?

□ 평소 헤더가 간결한가요?

□ 드롭다운이 키보드·스크린리더로 조작되나요?

❓ FAQ

Q1. 4개면 드롭다운 안 써도 되나요? 네. 4개 이하는 펼쳐 두어도 무방합니다. 5개 이상일 때 드롭다운이 권장됩니다. Q2. 드롭다운이면 접근성이 떨어지지 않나요? 제대로 구현(키보드 조작, aria-expanded)하면 접근 가능합니다. 오히려 간결성과 접근성을 함께 잡을 수 있죠. Q3. KRDS를 채택하면 자동인가요? 표준 드롭다운 컴포넌트를 쓰면 접근성까지 포함돼 제공됩니다.

6. 마무리

CP-022의 메시지:

5개가 넘으면 접어라 — 드롭다운으로 정리해 헤더의 간결성을 지킨다.

유틸리티 링크가 5개 이상이면 드롭다운으로 묶어, 평소 헤더는 간결하게 유지하고 필요할 때 펼쳐 모든 링크에 접근하게 합니다. 5개 기준은 인지·공간의 합리적 한계선이고, 드롭다운은 접근 가능하게 구현해야 하죠. 간결성 (CP-019)의 구체적 실현입니다.

다음 편은 언어 설정 드롭다운의 국기 사용 금지를 다룹니다. CP-023 — “언어 설정 드롭다운에 국기를 사용하지 않는다.”

다음 편 예고 ▶ 「143. (CP-023) 언어 설정을 위한 드롭다운 메뉴에 국기를 사용하지 않고 있다.」

ViewCheck는 유틸리티 링크가 5개 이상일 때 드롭다운으로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 헤더(Header) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html

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

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