한 줄로, 비활성 탭은 없게

KRDS CP-232 — 탭은 일렬로 배치하여 제공하고, 사용 불가 상태를 사용하지 않고 있다.

0. 들어가며 — 줄바꿈된 탭, 못 누르는 탭

이번 352편은 탭을 일렬로 배치하고, 사용 불가(disabled) 상태를 사용하지 말라는 규칙입니다.

탭이 한 줄에 안 들어가 여러 줄로 줄바꿈되면 — 구조가 흐트러지고 어느 탭이 한 묶음인지 모호해지죠. 또 누를 수 없는 ‘사용 불가’ 탭이 있으면 — 사용자는 ‘왜 못 누르지?’ 헷갈립니다. CP-232는 탭의 일렬 배치와 사용 불가 배제를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 일렬 배치, 사용 불가 미사용

CP-232 (컴포넌트 > 탭) “탭은 일렬로 배치하여 제공하고, 사용 불가 상태를 사용하지 않고 있다.”

탭 항목을 한 줄(수평) 또는 한 열(수직)에 일렬로 배치하고, 누를 수 없는 사용 불가(disabled) 탭을 두지 말라는 뜻입니다.

정리: 탭은 일렬로, 사용 불가 탭은 두지 마라. 이게 CP-232입니다.

2. 왜 일렬 배치 + 사용 불가 배제인가

이 규칙은 두 가지를 다룹니다 — 일렬 배치와 사용 불가 상태 배제.

① 일렬 배치. 탭 줄은 — 여러 탭이 하나의 그룹으로 나란히 있어야 ’이들이 한 묶음의 선택지’임이 읽힙니다. 수평 탭은 한 가로줄에, 수직 탭은 한 세로열에 일렬로 배치하죠. 그런데 탭이 많아 한 줄에 안 들어가 여러 줄로 줄바꿈되면 문제가 생깁니다:

그룹 인지 흐림 — 탭이 2~3줄로 쪼개지면, 어느 탭들이 한 묶음인지 모호해지고 ’탭 줄’이라는 단위가 흐려 지죠.

위치 추적 어려움 — 선택된 탭이 어느 줄에 있는지, 전체에서 어디쯤인지 추적하기 어렵습니다.

레이아웃 불안정 — 줄 수가 콘텐츠에 따라 변하면 레이아웃이 들썩이죠.

그래서 탭은 일렬로 유지해야 합니다. 탭이 많아 일렬이 어려우면 — 줄바꿈하지 말고 별도의 탐색 컨트롤러 (스크롤·더보기 등, 다음 편 CP-233)를 둬 일렬을 유지하죠. 즉 ‘일렬 배치 + 많으면 탐색 컨트롤’(CP-232·233)이 짝입니다.

② 사용 불가(disabled) 상태 배제. 탭에 ‘사용 불가’ 상태 — 회색으로 흐려져 누를 수 없는 탭 — 를 두지 말라는 것입니다. 왜일까요?

혼란 — 사용 불가 탭이 있으면 사용자는 ‘왜 이 탭은 못 누르지? 언제 활성화되지? 내가 뭘 해야 하나?’ 하고 헷갈립니다. 이유가 불명확한 비활성 탭은 답답함을 주죠.

목적 불명 — 탭은 ’지금 선택해서 볼 수 있는 콘텐츠 묶음’을 제시하는 도구입니다. 그런데 못 누르는 탭은 — ’있긴 한데 못 보는 콘텐츠’를 보여주는 셈이라 모순적이죠. 볼 수 없는 콘텐츠의 탭을 왜 두나요?

대안 — 어떤 탭의 콘텐츠가 지금 제공 불가라면 — 그 탭을 사용 불가로 두지 말고 아예 표시하지 않거나 (조건이 안 되면 탭 자체를 숨김), 콘텐츠가 없으면 그 사실을 패널 안에서 안내하는 게 낫습니다. 사용 불가 탭으로 ’못 누르는 선택지’를 보여주는 건 피하죠.

즉 — 탭은 ‘누를 수 있는, 볼 수 있는 콘텐츠’만 제시해야 합니다. 못 누르는 탭은 혼란만 주므로 배제하죠. (이는 ’사용 불가 버튼/링크’ 일반에 대한 접근성 논의와도 통합니다 — 비활성 요소는 이유가 불명확하면 혼란을 주고, disabled 요소는 키보드 초점도 못 받아 그 존재·이유를 알기 어렵죠.)

이 두 규칙(일렬 배치 + 사용 불가 배제)은 — 탭 줄을 ’깔끔하고 모두 누를 수 있는 선택지 묶음’으로 유지합니다. 탭이 한 줄에 명확히 나열되고, 모든 탭이 누를 수 있으면, 사용자가 탭 위젯을 직관적으로 이해하고 쓰죠.

정리하면 — 탭은 그룹 인지를 위해 일렬로 배치하고(많으면 탐색 컨트롤로), 혼란을 주는 사용 불가 상태는 두지 않아 ’누를 수 있는 선택지 묶음’으로 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

일렬 배치 — 탭이 한 줄(수평)/한 열(수직)에 일렬로 배치되는가(줄바꿈 없음).

많을 때 처리 — 탭이 많으면 줄바꿈 대신 탐색 컨트롤(CP-233)로 처리하는가.

사용 불가 배제 — 누를 수 없는 disabled 탭이 없는가.

개선 방향

탭을 일렬로 유지. 많으면 스크롤·더보기 등 탐색 컨트롤(CP-233).

사용 불가 탭 제거 — 제공 불가 콘텐츠는 탭 숨김 또는 패널 내 안내.

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

역할	책임
디자이너	일렬 배치·사용 불가 배제 정책
퍼블리셔/개발	일렬 유지·탭 숨김/표시 구현

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

탭 위젯을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 탭이 한 줄/한 열에 일렬로 배치되나요(줄바꿈 없음)?

□ 탭이 많으면 줄바꿈 대신 탐색 컨트롤로 처리하나요?

□ 누를 수 없는 사용 불가 탭이 없나요?

❓ FAQ

Q1. 탭이 많아 한 줄에 안 들어가요. 줄바꿈하지 말고 스크롤·더보기 같은 탐색 컨트롤을 둡니다(CP-233). Q2. 사용 불가 탭이 왜 안 되나요? 못 누르는 탭은 ‘왜 못 누르지?’ 혼란을 주고, ’볼 수 없는 콘텐츠’를 보여주는 모순입니다. 숨기거나 패널 내 안내가 낫죠. Q3. 조건부로 활성화되는 탭은요? 조건이 안 되면 탭을 숨기고, 조건이 되면 표시합니다. 사용 불가로 두지 않습니다.

6. 마무리

CP-232의 메시지:

한 줄로, 비활성 탭은 없게 — 탭은 일렬로 배치하고 사용 불가 상태를 두지 마라.

탭은 일렬로 배치해야 ’한 묶음 선택지’로 읽히고, 많으면 탐색 컨트롤로 일렬을 유지하죠. 사용 불가 탭은 혼란과 모순을 주므로 배제하고, 누를 수 있는 탭만 제시합니다. 다음 편은 탭이 많을 때의 탐색 컨트롤러입니다.

다음 편 예고 ▶ 「353. (CP-233) 탭의 항목 수가 많아 일렬로 배치하기 어려운 경우 별도의 탐색 컨트롤러를 제공하고 있다.」

ViewCheck는 탭이 일렬로 배치되고 사용 불가 상태가 없는지를 진단합니다.

📚 참고 출처

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

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

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