topic★★★★★난이도
Stepper
계단을 한 칸씩 오르듯 단계별 진행 표시.
#stepper#단계#진행
Stepper(스텝퍼)는 'step(걸음, 계단)' + '-er(하는 것)'의 합성어다. 계단을 한 칸씩 밟아 올라가듯, 긴 프로세스를 여러 단계로 나누어 순차적으로 진행하게 한다. 실제 세계에서는 등산로의 이정표(1합 → 2합 → ... → 정상)와 같은 역할이다. 결제, 회원가입, 설문조사 등 복잡한 폼을 분할할 때 쓴다.
| 실제 사물 | UI 패턴 |
|---|---|
| 계단을 한 칸씩 오름 | 폼을 한 단계씩 진행 |
| 등산로 이정표 (3/10합) | 진행 표시 (Step 2 of 4) |
| 꼭대기에 도달하면 완료 | 마지막 단계에서 '완료' |
사용 가이드라인: 3~7단계의 순차적 프로세스에 적합하다. 각 단계의 제목을 표시하여 전체 흐름을 예측할 수 있게 한다. 이전 단계로 돌아갈 수 있어야 한다. 단계가 2개뿐이면 Stepper 없이 '다음' 버튼만으로 충분하다. 현재 단계, 완료된 단계, 미완료 단계를 색상/아이콘으로 구분한다.