---
{"id":"progress-indicator","title":"단계 표시","category":"컴포넌트","order":54,"summary":"예측 가능한 여러 순차 단계의 작업 안내의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/progress-indicator/usage"]}
---

# 단계 표시

## 목적과 사용

예측 가능한 여러 순차 단계의 작업 안내에 사용합니다. 자유 탐색·실제 진행 백분율·수시로 변하는 단계에 사용하지 않습니다.

## 구성과 변형

완료·현재·예정 단계, 각 이름, 이전/다음. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- STEP-01 SHOULD: 세 단계 이상 순차 작업에서 진행 안내의 필요성을 검토합니다.
- STEP-02 MUST: 다음 단계로 이동하기 전에 필요한 검증을 수행합니다.
- STEP-03 MUST: 이전 단계로 돌아가도 입력을 가능한 한 보존합니다.
- STEP-04 MUST: 현재 단계와 완료를 업무 결과와 일치시킵니다.

## 접근성

현재 단계 aria-current=step, 오류 단계 안내, 초점 이동을 제공합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: 상품 → 설정 → 검토 → 결제 / 피함: 결제 요청만으로 마지막 단계를 완료 처리.

## 우리 구현과 연결

Blesta 주문 단계와 VPS 주문 연결에서 서로 다른 완료 사건을 분리합니다.

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

## 상태와 검증

이전/다음·검증 실패·세션 만료·뒤로가기·결제 지연을 확인합니다.

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