선택된 탭과 내용은 한 몸

KRDS CP-230 — 탭과 탭 패널의 배경색을 동일하게 지정하여 두 요소 간 관계를 명확하게 인지할 수 있도록 표현하고 있다.

0. 들어가며 — 350편, 탭과 내용을 잇기

이번 350편은 탭과 탭 패널의 배경색을 동일하게 지정해 두 요소의 관계를 명확히 표현하라는 규칙입니다. 시리즈 350편을 이 규칙으로 맞습니다.

탭 위젯에서 — 선택된 탭과 그 아래(또는 옆) 패널(콘텐츠)이 ’하나로 이어진 것’처럼 보여야, 사용자가 ’이 탭의 내용이 이것’임을 명확히 인지하죠. 배경색을 동일하게 하면 — 선택된 탭과 패널이 같은 색 영역으로 묶여 한 몸처럼 보입니다. CP-230은 이 배경색 일치로 관계를 표현하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 탭-패널 배경색 동일

CP-230 (컴포넌트 > 탭) “탭과 탭 패널의 배경색을 동일하게 지정하여 두 요소 간 관계를 명확하게 인지할 수 있도록 표현하고 있다.”

선택된 탭과 그 콘텐츠 패널의 배경색을 같게 지정해, 둘이 한 묶음(이 탭 = 이 내용)임을 시각적으로 명확히 하라는 뜻입니다.

정리: 선택된 탭과 패널의 배경색을 같게 해 관계를 명확히 하라. 이게 CP-230입니다.

2. 왜 배경색을 동일하게 하나

탭 위젯의 핵심은 — ’탭을 누르면 그 탭의 콘텐츠가 패널에 나타난다’는 탭-패널 관계입니다. 사용자가 이 관계를 명확히 인지해야 — ’내가 선택한 탭의 내용을 보고 있다’를 알죠. 배경색은 이 관계를 시각적으로 묶는 강력한 수단 입니다.

배경색 동일의 효과 시각적 연결. 선택된 탭과 패널의 배경색을 같게 하면, 둘이 같은 색 영역으로 연결되어 보입니다. 폴더 탭(서류철)을 떠올리면 선택된 탭은 폴더 본체(패널)와 같은 색으로 이어져, 마치 탭과 그 안 종이가 한 장처럼 보이죠. 반면 선택 안 된 탭들은 다른(보통 흐린) 색이라 뒤로 물러나 보입니다. 이 시각적 연결이 ‘이 선택된 탭이 지금 보이는 이 패널의 것’이라는 관계를 직관적으로 전합니다(게슈탈트 ’유사성· 연속성’, 아코디언 헤더-패널 CP-197 정신).

구체적으로:

선택된 탭 = 패널 배경색 — 활성(선택) 탭의 배경을 패널 배경과 같은 색(보통 흰색/밝은 색)으로. 둘이 이어져 보이죠. 폴더 탭처럼 선택 탭과 패널 사이의 경계선이 없거나 끊겨, 한 영역으로 보이게 하기도 합니다.

비선택 탭 = 다른 색 — 선택 안 된 탭들은 다른(흐린/회색) 배경으로 둬, 패널과 분리되어 ’비활성’임을 표시. 선택 탭만 패널과 색이 같아 도드라지죠.

이렇게 하면 — 사용자는 여러 탭 중 ’패널과 같은 색으로 이어진 탭’이 현재 선택된 탭임을 한눈에 알고, 그 패널이 그 탭의 내용임을 인지합니다. 탭을 바꾸면 — 새로 선택된 탭이 패널과 같은 색이 되고 이전 탭은 흐려지죠.

관계 인지의 중요성. 탭-패널 관계가 흐릿하면 — 사용자는 ‘지금 보는 콘텐츠가 어느 탭 것인지’, ‘내가 어느 탭을 선택했는지’ 헷갈립니다. 특히 탭이 많거나 콘텐츠가 길면, 패널을 보다가 ‘이게 어느 탭이었지?’ 하게 되죠. 배경색 연결이 이 관계를 시각적으로 못 박아 줍니다.

색만으로는 안 된다 다른 단서 병행. 단, 배경색 동일은 관계 표현의 한 수단이고, 선택 상태 구분은 색 외 단서도 필요합니다(CP-234). 선택된 탭을 배경색뿐 아니라 굵기, 밑줄/강조선, 테두리 등으로도 구분해야 색맹 사용자도 인지하죠. 그리고 이 시각적 관계는 ARIA로도 전달돼야 합니다(CP-237) aria-controls(탭→ 패널), aria-labelledby(패널→탭)로 코드상 관계를 연결해 스크린 리더가 인지하게요. 즉 CP-230(시각 관계) + CP-234(색 외 선택 구분) + CP-237(ARIA 관계)이 함께 탭-패널 관계를 모든 사용자에게 전합니다.

정리하면 — 선택된 탭과 패널의 배경색을 같게 해 둘을 한 영역으로 시각 연결하면, 사용자가 ‘이 탭의 내용이 이것’ 이라는 관계를 직관적으로 인지하며, 색 외 단서·ARIA와 함께 완성됩니다.

3. 점검 / 개선

무엇을 점검하나

배경색 동일 — 선택된 탭과 패널의 배경색이 같은가.

비선택 구분 — 비선택 탭이 다른(흐린) 색으로 분리되는가.

단서·ARIA 병행 — 선택 구분에 색 외 단서(CP-234)·ARIA 관계(CP-237)가 함께 있는가.

개선 방향

선택 탭 배경 = 패널 배경(연결). 비선택 탭은 다른 색.

색 외 선택 단서(굵기·강조선, CP-234) + aria-controls/aria-labelledby(CP-237) 병행.

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

역할	책임
디자이너	탭-패널 배경색·선택 표현 정의
퍼블리셔/개발	배경색·단서·ARIA 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선택된 탭과 패널의 배경색이 같나요?

□ 비선택 탭이 다른(흐린) 색으로 분리되나요?

□ 선택 구분에 색 외 단서(CP-234)·ARIA 관계(CP-237)가 함께 있나요?

❓ FAQ

Q1. 배경색을 같게 하면 선택 탭이 안 보이지 않나요? 선택 탭만 패널과 같은 색이고 비선택은 다른 색이라, 오히려 선택 탭이 패널과 이어져 도드라집니다. Q2. 색만으로 선택을 표시해도 되나요? 안 됩니다. 색맹 배려로 굵기·강조선 등 색 외 단서도 병행해야 합니다 (CP-234). Q3. 스크린 리더에도 관계가 전달되나요? aria-controls/aria-labelledby로 탭-패널을 연결해야 합니다 (CP-237).

6. 마무리

CP-230의 메시지:

선택된 탭과 내용은 한 몸 — 탭과 패널의 배경색을 같게 해 관계를 명확히.

선택된 탭과 패널의 배경색을 같게 하면 둘이 한 영역으로 이어져 보여, ’이 탭의 내용이 이것’이라는 관계가 직관적 으로 읽히죠. 색 외 단서(CP-234)·ARIA 관계(CP-237)와 함께 모든 사용자에게 관계를 전합니다. 다음 편은 탭 중첩 시 수준 구분입니다.

다음 편 예고 ▶ 「351. (CP-231) 여러 개의 탭을 중첩하는 경우, 서로 다른 수준의 탭이 명확하게 구분되도록 표현하고 있다.」

ViewCheck는 탭과 패널의 배경색이 동일해 관계가 명확히 표현되는지를 진단합니다.

📚 참고 출처

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

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

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