많으면 스크롤·더보기로

KRDS CP-233 — 탭의 항목 수가 많아 일렬로 배치하기 어려운 경우 별도의 탐색 컨트롤러를 제공하고 있다.

0. 들어가며 — 탭이 한 줄에 안 들어갈 때

이번 353편은 탭 항목 수가 많아 일렬 배치가 어려운 경우 별도의 탐색 컨트롤러를 제공하라는 규칙입니다.

앞 편(CP-232)에서 탭은 일렬로 배치하고 줄바꿈을 피하라고 했습니다. 그런데 탭이 많아 한 줄에 다 안 들어가면? 줄바꿈 대신 — 가로 스크롤, 좌우 화살표, 더보기 메뉴 같은 탐색 컨트롤러로 일렬을 유지하며 모든 탭에 접근하게 하죠. CP-233은 이 컨트롤러 제공을 규정합니다. CP-232의 짝이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 많을 때 탐색 컨트롤러 제공

CP-233 (컴포넌트 > 탭) “탭의 항목 수가 많아 일렬로 배치하기 어려운 경우 별도의 탐색 컨트롤러를 제공하고 있다.”

탭이 많아 한 줄에 다 들어가지 않을 때, 줄바꿈하지 말고 가로 스크롤·화살표·더보기 등 탐색 컨트롤러로 모든 탭에 접근할 수 있게 하라는 뜻입니다.

정리: 탭이 많으면 탐색 컨트롤러로 일렬을 유지하며 접근하게 하라. 이게 CP-233입니다.

2. 왜 탐색 컨트롤러가 필요한가

탭은 일렬 배치가 원칙입니다(CP-232) — 한 줄에 나란히 있어야 ’한 묶음 선택지’로 읽히죠. 그런데 탭 항목이 많아 지면(예: 10개 이상) 화면 너비에 다 안 들어갑니다. 이때 두 가지 나쁜 선택을 피해야 하죠:

줄바꿈(금지) — 탭을 2~3줄로 줄바꿈하면 그룹 인지가 흐려지고 레이아웃이 불안정해집니다(CP-232 위반).

탭 잘림(금지) — 넘치는 탭을 그냥 화면 밖으로 잘라버리면, 사용자가 그 탭들에 접근할 수 없죠.

그래서 CP-233은 — 일렬을 유지하되, 넘치는 탭에 접근할 탐색 컨트롤러를 제공하라고 합니다:

가로 스크롤 — 탭 줄을 가로로 스크롤 가능하게 해, 사용자가 좌우로 밀어 모든 탭을 봅니다. 모바일에서 특히 자연스럽죠(스와이프).

좌우 화살표 버튼 — 탭 줄 양 끝에 ‘◀ ▶’ 버튼을 둬, 누르면 탭이 좌우로 스크롤됩니다. 스크롤을 모르거나 못 쓰는 사용자도 화살표로 탐색하죠.

더보기/드롭다운 — 넘치는 탭을 ‘더보기(…)’ 메뉴나 드롭다운에 담아, 누르면 펼쳐 선택하게.

이 컨트롤러들로 — 탭이 많아도 일렬을 유지하면서 모든 탭에 접근하죠. 사용자는 보이는 탭은 직접 누르고, 안 보이는 탭은 스크롤·화살표·더보기로 찾습니다.

그런데 탭이 정말 많으면 탭이 맞나? 한 가지 짚을 점 탭이 지나치게 많다면(예: 15개, 20개), 애초에 탭이 적절한 컴포넌트인지 재고할 신호입니다. 탭은 ‘소수의 콘텐츠 묶음을 전환’하는 데 적합하지, 수십 개를 담는 도구가 아니죠(캐러셀 5개 CP-210, 탭 바 5개 CP-137의 ’핵심 집중’ 정신). 너무 많은 탭은 사용자가 전체를 파악하기 어렵고, 탐색 컨트롤러가 있어도 원하는 탭을 찾기 번거롭습니다. 이럴 땐 정보 구조를 재설계하거나(상위 분류로 묶기), 사이드 메뉴·드롭다운 내비게이션 같은 다른 형식을 검토하는 게 낫죠. CP-233은 ’탭이 어느 정도 많을 때’의 처리이고, ’지나치게 많으면 탭 자체를 재고’가 함께 가야 합니다.

접근성. 탐색 컨트롤러도 접근 가능해야 합니다 — 가로 스크롤은 키보드로도 되게(스크롤 영역 포커스+화살표), 화살표 버튼은 표준 <button>으로 키보드 작동(CP-235), 더보기 메뉴는 키보드·스크린 리더로 접근. 그리고 WAI- ARIA 탭 패턴에서는 — 탭들이 많을 때 키보드 화살표로 탭 사이를 이동하면 숨은 탭이 자동으로 스크롤되어 보이게 하는 게 권장되죠(초점 따라 스크롤). 모든 사용자가 모든 탭에 접근하게요.

정리하면 — 탭이 많아 일렬 배치가 어려우면 줄바꿈·잘림 대신 스크롤·화살표·더보기 같은 탐색 컨트롤러로 일렬을 유지하며 접근하게 하되, 지나치게 많으면 탭 자체의 적절성을 재고해야 합니다.

3. 점검 / 개선

무엇을 점검하나

탐색 컨트롤러 — 탭이 많을 때 스크롤·화살표·더보기 등으로 모든 탭에 접근되는가.

일렬 유지 — 줄바꿈·잘림 없이 일렬이 유지되는가.

탭 적절성 — 탭이 지나치게 많으면 다른 형식을 검토했는가.

개선 방향

넘치는 탭에 가로 스크롤·좌우 화살표·더보기 메뉴 제공(키보드 접근 포함).

탭이 과도하면 정보 구조 재설계·다른 내비게이션 검토.

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

역할	책임
디자이너	많은 탭 탐색 컨트롤러 설계
퍼블리셔/개발	스크롤·화살표·더보기·키보드 구현

기관 유형	CP-233 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (탭이 많은 탭 위젯 사용 시)

탭 항목이 많은 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 탭이 많을 때 스크롤·화살표·더보기로 모든 탭에 접근되나요?

□ 줄바꿈·잘림 없이 일렬이 유지되나요?

□ 탭이 지나치게 많으면 다른 형식을 검토했나요?

❓ FAQ

Q1. 탭이 많으면 줄바꿈하면 안 되나요? 줄바꿈은 그룹 인지를 흐립니다(CP-232). 스크롤·화살표·더보기로 일렬을 유지합니다. Q2. 탭이 20개면요? 너무 많으면 탭이 적절한지 재고하세요. 정보 구조 재설계나 사이드 메뉴 등이 나을 수 있습니다. Q3. 탐색 컨트롤러도 키보드로 되나요? 네. 스크롤·화살표·더보기 모두 키보드 접근 가능해야 합니다(CP-235).

6. 마무리

CP-233의 메시지:

많으면 스크롤·더보기로 — 탭이 많아 일렬이 어려우면 탐색 컨트롤러를 제공하라.

탭이 많아도 줄바꿈·잘림 없이 일렬을 유지하려면, 가로 스크롤·화살표·더보기 같은 탐색 컨트롤러로 모든 탭에 접근하게 하죠. 단 탭이 지나치게 많으면 탭 자체의 적절성을 재고합니다. 다음 편은 탭 선택 상태의 시각·SR 구분 입니다.

다음 편 예고 ▶ 「354. (CP-234) 탭의 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공 하고, 스크린 리더로 확인할 수 있도록 하고 있다.」

ViewCheck는 탭이 많을 때 탐색 컨트롤러가 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 탭(Tab) 가이드 — https://www.krds.go.kr/html/site/component/component_21.html

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

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