비교할 거면 탭은 안 된다

KRDS CP-229 — 서로 다른 탭에 속한 콘텐츠의 정보를 비교해야 하는 경우 사용하고 있지 않다.

0. 들어가며 — 한 번에 하나만 보이는 탭

이번 349편은 서로 다른 탭의 콘텐츠를 비교해야 하는 경우 탭을 사용하지 말라는 규칙입니다.

탭 위젯은 한 번에 하나의 탭 콘텐츠만 보여줍니다 — A 탭을 보면 B 탭은 숨겨지죠. 그래서 A와 B의 정보를 나란히 놓고 비교해야 한다면 — 탭은 부적절합니다. 탭을 오갈 때마다 한쪽이 사라져 동시에 못 보니까요. CP-229는 비교가 필요한 정보에는 탭을 쓰지 말라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 정보 비교 필요 시 사용 금지

CP-229 (컴포넌트 > 탭) “서로 다른 탭에 속한 콘텐츠의 정보를 비교해야 하는 경우 사용하고 있지 않다.”

여러 탭의 콘텐츠를 서로 비교해야 하는 정보 구조에는 탭을 쓰지 말고, 비교 정보를 한 화면에 함께 보여주는 다른 형식(표 등)을 쓰라는 뜻입니다.

정리: 탭 콘텐츠를 비교해야 하면 탭을 쓰지 마라. 이게 CP-229입니다.

2. 왜 비교에 탭이 부적절한가

탭 위젯의 본질적 특성은 — ’한 번에 하나의 패널만 보임’입니다. A 탭을 선택하면 A 콘텐츠가 보이고 B·C는 숨겨지죠. 이 특성은 ’서로 독립적인 콘텐츠 묶음을 한 자리에서 전환’하는 데 적합하지만, ’여러 묶음의 정보를 동시에 비교’하는 데는 치명적입니다.

비교에 탭이 안 되는 이유:

동시에 못 봄 — 비교는 ‘둘 이상의 정보를 나란히 놓고 차이를 보는’ 행위입니다. 그런데 탭은 한 번에 하나만 보이므로 — A 탭의 값과 B 탭의 값을 동시에 볼 수 없죠. A를 보다 B로 전환하면 A가 사라지니, 비교가 불가능 합니다.

기억 의존 — 탭을 오가며 비교하려면 사용자가 A의 값을 기억한 채 B를 봐야 합니다. 인지 부담이 크고 부정확하죠. 여러 항목을 비교하면 기억이 한계에 부딪힙니다.

오류 유발 — 기억에 의존한 비교는 실수를 부릅니다 — 값을 잘못 기억하거나 헷갈리죠. 특히 숫자·요금·조건 같은 정밀 비교에서 위험합니다.

예를 들어 — ’요금제 A / 요금제 B / 요금제 C’를 탭으로 나누면, 사용자는 세 요금제를 한눈에 비교 못 합니다. 탭을 오가며 가격·혜택을 기억해 비교해야 하죠. 이런 비교 정보는 — 표(table) 로 한 화면에 나란히 놓아야 합니다. 표는 행·열로 정렬돼 같은 항목(가격·혜택)을 가로·세로로 즉시 비교하게 하죠(표 컴포넌트, CP-238~).

그래서 CP-229는 — 비교가 필요한 정보에는 탭 대신 비교에 적합한 형식을 쓰라고 합니다:

표 — 여러 항목의 같은 속성을 행·열로 정렬해 직접 비교(요금제 비교표 등).

나란히 배치(side-by-side) — 비교 대상을 카드 등으로 한 화면에 나란히.

비교 전용 뷰 — 선택한 항목들을 모아 비교하는 화면.

탭이 맞는 경우 vs 아닌 경우:

탭이 맞음 — 서로 독립적이고 동시에 볼 필요 없는 콘텐츠 묶음. 예: ’상세정보 / 이용후기 / 문의’처럼 한 번에 하나만 보면 되는 것.

탭이 아님 — 서로 비교해야 하는 정보. 예: 여러 요금제·상품·기관의 같은 속성 비교.

판단 기준은 — ’사용자가 이 콘텐츠들을 동시에 봐야 하는가(비교), 아니면 하나씩 봐도 되는가(독립)’입니다. 동시에 봐야 하면 탭이 아니라 표·나란히 배치죠. 긴급 공지(CP-151), 디스클로저(CP-169), 모달(CP-180), 배지 (CP-184)에서 본 ’컴포넌트를 본분에 맞게’의 탭 버전입니다.

정리하면 — 탭은 한 번에 하나만 보이므로 정보 비교에 부적절하고, 비교가 필요하면 표 등 한 화면에 함께 보여주는 형식을 써야 합니다.

3. 점검 / 개선

무엇을 점검하나

비교 정보 배제 — 비교가 필요한 정보를 탭으로 나누지 않았는가.

독립 콘텐츠 — 탭 콘텐츠가 서로 독립적이고 동시에 볼 필요 없는가.

비교 형식 — 비교 정보는 표·나란히 배치 등으로 제공되는가.

개선 방향

비교 정보(요금제·상품 등)를 탭 대신 표·나란히 배치로 한 화면에.

탭은 독립적이고 하나씩 보는 콘텐츠 묶음에만 사용.

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

역할	책임
기획/UX	비교 vs 독립 판단·형식 선택
디자이너/개발	비교 정보를 표 등으로 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 비교가 필요한 정보를 탭으로 나누지 않았나요?

□ 탭 콘텐츠가 서로 독립적이고 동시에 볼 필요 없나요?

□ 비교 정보는 표·나란히 배치 등으로 제공되나요?

❓ FAQ

Q1. 왜 탭으로 비교가 안 되나요? 탭은 한 번에 하나만 보입니다. A를 보면 B가 사라져 동시에 비교 못 하고, 기억에 의존해 부정확하죠. Q2. 그럼 뭘 써야 하나요? 표(행·열 정렬 비교)나 나란히 배치로 한 화면에 함께 보여줍니다. Q3. 탭은 언제 맞나요? 서로 독립적이고 하나씩 보면 되는 콘텐츠(‘상세/후기/문의’ 등)에 적합합니다.

6. 마무리

CP-229의 메시지:

비교할 거면 탭은 안 된다 — 비교 정보엔 탭 대신 표·나란히 배치를.

탭은 한 번에 하나만 보여 정보 비교에 부적절합니다. A를 보면 B가 사라져 동시에 못 보고 기억에 의존하죠. 비교가 필요하면 표 등 한 화면에 함께 보여주는 형식을 씁니다. 탭은 독립적 콘텐츠 묶음에만 적합하죠. 다음 편은 탭과 패널의 배경색 관계입니다.

다음 편 예고 ▶ 「350. (CP-230) 탭과 탭 패널의 배경색을 동일하게 지정하여 두 요소 간 관계를 명확하게 인지할 수 있도록 표현하고 있다.」

ViewCheck는 비교가 필요한 정보에 탭이 부적절하게 사용되지 않는지를 진단합니다.

📚 참고 출처

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

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

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