---
{"id":"tabs","title":"탭","category":"컴포넌트","order":45,"summary":"같은 문맥의 서로 다른 정보 영역 전환의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/tabs/usage"]}
---

# 탭

## 목적과 사용

같은 문맥의 서로 다른 정보 영역 전환에 사용합니다. 동일 데이터의 표시 방식·순차 작업·동시 비교에는 다른 패턴을 사용합니다.

## 구성과 변형

탭 목록, 선택된 탭, 대응 패널. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- TAB-01 MUST: 탭과 표시된 패널을 일대일로 연결합니다.
- TAB-02 MUST: 전환 전 입력 유실 가능성을 처리합니다.
- TAB-03 SHOULD: 느린 네트워크에서는 포커스 이동과 자동 활성화를 분리하는 방식을 검토합니다.
- TAB-04 MUST: 탭이 실제 페이지 링크라면 브라우저 URL·뒤로가기를 보존합니다.

## 접근성

진짜 in-page tab에는 tablist/tab/tabpanel 관계와 방향키 동작을 제공합니다. 일반 nav에 tab 역할을 얹지 않습니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: 서버 상세의 관련 정보 구획 / 피함: 결제 필수 단계를 자유 탭으로 건너뜀.

## 우리 구현과 연결

Panel 라우터 탐색과 순수 UI 탭을 구분합니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 상태와 검증

URL 새로고침·뒤로가기·숨겨진 오류·키보드 활성화·모바일 넘침을 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.