상위 탭과 하위 탭을 구별하라

KRDS CP-231 — 여러 개의 탭을 중첩하는 경우, 서로 다른 수준의 탭이 명확하게 구분되도록 표현하고 있다.

0. 들어가며 — 탭 안에 또 탭이 있을 때

이번 351편은 여러 탭을 중첩하는 경우 서로 다른 수준의 탭이 명확하게 구분되도록 표현하라는 규칙입니다.

탭 패널 안에 또 다른 탭을 두는 ‘중첩 탭’이 있을 수 있습니다 — 상위 탭으로 큰 분류를, 하위 탭으로 세부 분류를 나누는 식이죠. 그런데 상위 탭과 하위 탭이 똑같이 생기면 — 사용자는 ’어느 게 큰 분류고 어느 게 세부인지’, ‘내가 어느 수준에 있는지’ 헷갈립니다. CP-231은 수준 간 시각 구분을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 중첩 탭 수준 명확 구분

CP-231 (컴포넌트 > 탭) “여러 개의 탭을 중첩하는 경우, 서로 다른 수준의 탭이 명확하게 구분되도록 표현하고 있다.”

탭 안에 탭을 중첩하는 경우, 상위 수준 탭과 하위 수준 탭이 시각적으로 또렷이 구별되어 사용자가 계층을 인지하게 하라는 뜻입니다.

정리: 중첩 탭의 상위/하위 수준을 명확히 구분해 표현하라. 이게 CP-231입니다.

2. 왜 수준 구분이 필요한가

‘중첩 탭’은 — 탭 패널 안에 또 다른 탭 세트를 두는 구조입니다. 예를 들어 ’국내 / 해외’(상위 탭) 각각의 패널 안에 ‘뉴스 / 정책 / 통계’(하위 탭)를 두는 식이죠. 정보 구조가 2수준일 때 쓸 수 있습니다. 그런데 이 두 수준의 탭이 시각적으로 같으면 사용자가 혼란스럽죠.

수준이 안 구분될 때:

계층 혼동 — 상위 탭(‘국내/해외’)과 하위 탭(‘뉴스/정책/통계’)이 똑같이 생기면, 사용자는 ‘어느 게 큰 분류고 어느 게 세부 분류인지’ 모릅니다. 두 탭 줄이 비슷하게 나열되면 ‘탭이 그냥 많네’ 정도로만 보이죠.

위치 상실 — 사용자가 ’지금 국내 > 정책에 있다’를 인지하려면 상위·하위 선택을 함께 읽어야 하는데, 수준 구분이 없으면 — 어느 상위 탭 아래의 어느 하위 탭인지 추적하기 어렵습니다.

조작 혼란 — 상위 탭을 바꾸면 하위 탭 세트가 바뀌는데, 수준이 안 구분되면 사용자가 그 동작을 예측 못 하죠.

그래서 CP-231은 — 상위 수준과 하위 수준 탭을 시각적으로 명확히 구분하라고 합니다. 방법:

크기·강조 차등 — 상위 탭은 크거나 굵게(더 중요·상위), 하위 탭은 작거나 보통으로. 시각적 위계를 부여 하죠(사이드 메뉴 계층 구분 CP-095 정신).

스타일 차등 — 상위 탭과 하위 탭에 다른 스타일(예: 상위는 박스형 탭, 하위는 밑줄형 탭)을 줘 형태로 구별.

위치·들여쓰기 — 하위 탭을 상위 탭보다 안쪽(들여쓰기)이나 패널 내부에 배치해, 종속 관계를 표현.

색·구분선 — 수준별로 다른 색조나 구분선으로 영역을 나눔.

핵심은 — 사용자가 ‘이건 상위 분류, 이건 그 아래 세부 분류’를 한눈에 읽고, ’내가 어느 상위 > 어느 하위에 있는지’ 를 인지하는 것입니다.

중첩은 최소화. 다만 — 탭 중첩은 구조를 복잡하게 하므로 신중히 써야 합니다. 아코디언 중첩 금지(CP-193), 사이드 메뉴 2수준 제한(CP-092)에서 본 ’깊은 중첩은 미로’라는 원리가 탭에도 적용되죠. 2수준 정도는 수준 구분을 명확히 하면 쓸 수 있지만, 3수준 이상으로 깊어지면 사용자가 길을 잃습니다. 그래서 — 정보 구조가 깊으면 탭 중첩 대신 다른 방식(페이지 분리, 사이드 메뉴 등)을 검토하는 게 낫죠. CP-231은 ’중첩을 쓴다면 수준을 명확히’라는 조건부 규칙입니다.

접근성. 중첩 탭은 — 각 수준이 독립된 탭 위젯(role="tablist")으로 마크업되고, 키보드 탐색·ARIA 관계 (CP-235·237)가 각 수준에 적용돼야 합니다. 스크린 리더 사용자가 ’상위 탭 그룹, 하위 탭 그룹’을 구별해 인지 하게요. 시각 수준 구분(CP-231) + ARIA 구조가 함께 계층을 전하죠.

정리하면 — 탭을 중첩할 때는 상위/하위 수준을 크기·스타일·위치 등으로 명확히 구분해 사용자가 계층과 자기 위치를 인지하게 하되, 깊은 중첩은 피해야 합니다.

3. 점검 / 개선

무엇을 점검하나

수준 구분 — 상위 탭과 하위 탭이 시각적으로 또렷이 구별되는가.

위치 인지 — 사용자가 ’어느 상위 > 어느 하위’에 있는지 알 수 있는가.

중첩 깊이 — 중첩이 과도하게 깊지 않은가(2수준 정도 권장).

개선 방향

상위/하위 탭에 크기·스타일·위치(들여쓰기) 차등으로 수준 구분.

깊은 중첩(3수준+)은 페이지 분리·사이드 메뉴 등 대안 검토. 각 수준 ARIA 구조화.

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

역할	책임
디자이너	수준별 탭 시각 구분 정의
퍼블리셔/개발	수준 구분·중첩 ARIA 구현

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

탭을 중첩하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 상위 탭과 하위 탭이 시각적으로 또렷이 구별되나요?

□ 사용자가 ’어느 상위 > 어느 하위’에 있는지 알 수 있나요?

□ 중첩이 과도하게 깊지 않나요(2수준 정도)?

❓ FAQ

Q1. 중첩 탭을 써도 되나요? 2수준 정도는 수준 구분을 명확히 하면 가능합니다. 깊으면 미로가 되니 다른 방식을 검토하죠. Q2. 어떻게 수준을 구분하나요? 크기·강조·스타일·위치(들여쓰기)를 차등합니다 — 상위는 크게/강하게, 하위는 작게/보통으로. Q3. 스크린 리더에도 수준이 전달되나요? 각 수준을 독립 탭 위젯으로 마크업하고 ARIA를 적용해야 합니다 (CP-237).

6. 마무리

CP-231의 메시지:

상위 탭과 하위 탭을 구별하라 — 중첩 탭의 수준을 명확히 구분해 표현하라.

탭을 중첩하면 상위/하위 수준이 똑같이 생겨 계층이 흐려지기 쉽습니다. 크기·스타일·위치로 수준을 명확히 구분해 ’어느 상위 > 어느 하위’를 인지하게 하되, 깊은 중첩은 피하죠. 다음 편은 탭의 일렬 배치와 사용 불가 상태입니다.

다음 편 예고 ▶ 「352. (CP-232) 탭은 일렬로 배치하여 제공하고, 사용 불가 상태를 사용하지 않고 있다.」

ViewCheck는 중첩 탭의 수준이 명확히 구분되는지를 진단합니다.

📚 참고 출처

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

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

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