---
{"id":"content-switcher","title":"콘텐츠 전환","category":"컴포넌트","order":59,"summary":"동일한 데이터의 표/카드 등 대체 보기의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/content-switcher/usage"]}
---

# 콘텐츠 전환

## 목적과 사용

동일한 데이터의 표/카드 등 대체 보기에 사용합니다. 서로 다른 하위 페이지·순차 단계·저장 설정에는 다른 컨트롤을 사용합니다.

## 구성과 변형

현재 보기, 선택 가능한 보기, 대응 콘텐츠. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- VIEW-01 MUST: 항상 하나의 보기 상태를 명확히 선택합니다.
- VIEW-02 MUST: 전환해도 같은 데이터·필터·선택의 의미를 유지합니다.
- VIEW-03 SHOULD: 보기의 명칭을 짧고 서로 구별되게 씁니다.
- VIEW-04 MUST: 전환이 데이터를 삭제·변경하는 동작과 섞이지 않습니다.

## 접근성

선택 상태와 이름, 그룹 내 이동·활성화 방식을 명확히 합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: ‘표 보기 / 카드 보기’ / 피함: ‘삭제 / 실행 중’.

## 우리 구현과 연결

제품별 보기 선호를 저장한다면 사용자·기기 범위를 문서화합니다. 현재 공통 저장소는 없습니다.

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

## 상태와 검증

보기 변경 후 선택·필터·스크롤·기기 선호·키보드를 확인합니다.

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