04 · Patterns · 입력 · 폼
여러 단계 폼Multi-step Form
긴 폼을 여러 화면으로 쪼개는 패턴. 단계마다 맥락이 선명해지지만, 이동 비용이 생기므로 꼭 필요한 경우에만.
언제 쓰나
- 필드가 10개 이상이고 자연스러운 주제 단위로 묶일 때.
- 중간에 서버 호출이 필요해 ‘계속’ 버튼으로 단계를 마무리해야 할 때(본인인증, 헌금 송금).
- 단계마다 제공하는 정보가 크게 다른 분기형 흐름.
그 외는 한 페이지에 다 보이는 긴 폼이 거의 항상 낫습니다. 스크롤은 단계 이동보다 싸고, 전체를 한눈에 훑는 것이 편집에 유리합니다.
진행 표시
- ✓약관 동의
- ✓본인 확인
- 3주소 입력
- 4완료
- 현재 단계 번호와 전체 단계 수를 함께 노출(“2 / 4”).
- 각 단계의 제목을 보여주면 이해가 빨라집니다(“본인 확인”, “주소”).
- 완료한 단계는 체크 + 뒤로 가기 허용. 잠그지 마세요.
저장 시점
단계 사이에서 ‘다음’을 누르는 순간 로컬 저장(sessionStorage 또는 서버 초안)을 해야 합니다. 실수로 뒤로 가기를 누르거나 창이 닫혔을 때 처음부터 다시 쓰지 않도록 보호하는 것이 여러 단계 폼의 핵심 가치입니다.
이전 · 다음 버튼
- 이전은 왼쪽, 다음은 오른쪽. 최종 단계에서는 ‘다음’이 ‘제출’로 바뀝니다.
- 다음으로 넘어가려면 현재 단계의 유효성 검증을 통과해야 합니다. 통과 전엔 버튼 비활성화 + 이유 툴팁.
- 이전은 언제나 가능해야 하며, 이동 시에도 입력 값을 잃지 않습니다.
Do· 비활성 이유를 알려주기
‘다음’ 버튼이 비활성일 때 툴팁이나 도움말로 “필수 항목 2개가 비어있습니다”를 보여주세요. 사용자가 버튼을 클릭해서 실패할 때까지 기다리게 하지 마세요.
Don't· 유령 버튼
왜 비활성인지 알 수 없는 버튼은 사용자를 막다른 골목에 세웁니다. 제출 실패가 가장 흔한 사용성 결함 1위입니다.
접근성
- 단계 전환 시 페이지 최상단 제목에 포커스를 옮겨 스크린리더가 새 화면을 읽게 하세요.
- 진행 표시는
role="progressbar" aria-valuenow로 현재 단계를 기계가 이해하게. - ‘제출’ 버튼의 라벨은 실제 동작을 명확히(“헌금하기”, “신청 완료”). ‘제출’은 마지막 보루.