스텝Steps · Stepper

계단(step)을 오르듯 한 번에 한 단계씩 밟게 하는 장치입니다. 긴 폼을 한 화면에 다 펼치면 겁부터 나니까, 나눠서 "지금은 이것만 하면 된다"고 보여 줍니다. 이 사이트의 온보딩·결제 흐름이 이 형태입니다.

언제 쓰나요

순서가 정해져 있고 한 화면에 담기엔 긴 작업에 씁니다. 회원가입(정보 → 인증 → 완료), 결제(배송지 → 결제수단 → 확인), 설정 마법사. 3~5단계가 적당하고, 그보다 많으면 단계를 합칩니다.

각 단계에는 이름을 붙입니다. 번호만 있으면 사용자가 무엇이 남았는지 모릅니다. 지난 단계는 체크 표시로 바꾸고 눌러서 돌아갈 수 있게 하되, 앞 단계로 건너뛰는 것은 막습니다.

AI에게 시키기

결제 흐름을 3단계 스텝으로 만들어줘: 배송지 → 결제수단 → 확인.
- 상단에 번호 원 + 단계 이름 + 잇는 선. 현재 단계는 강조, 지난 단계는 체크, 남은 단계는 회색
- 아래에 현재 단계의 폼만 표시. 다음 버튼은 현재 단계 입력이 유효할 때만 활성화
- 지난 단계 원을 누르면 그 단계로 돌아가고, 입력값은 유지
- 모바일에서는 "2/3 결제수단" 처럼 한 줄 요약으로 축약

"단계별로 나눠줘"라고만 하면 페이지 세 개가 따로 생깁니다. 상단 표시·유효성·되돌아가기·입력 유지를 적어야 하나의 흐름이 됩니다.

혼동 주의

• 프로그레스 바: 양(%)을 보여 줍니다. 스텝은 이름 있는 단계와 위치를 보여 줍니다.
• 탭: 순서 없이 자유롭게 오갑니다. 스텝은 순서가 있고 앞으로 건너뛰지 못합니다.
• 브레드크럼(Breadcrumb): 사이트 구조에서 지금 위치(홈 › 강의 › 레슨)를 보여 줍니다. 스텝은 한 작업 안의 진행입니다.
• 체크리스트: 순서 없이 할 일을 하나씩 지우는 것입니다. 스텝은 정해진 순서로 한 번에 하나만 합니다.