Multi-step Form은 언제 필요한가

먼저 던질 질문

긴 폼을 나누면 항상 더 쉬워질까

핵심 관점

Multi-step Form은 긴 폼을 쪼개는 기술이 아니라 사용자의 결정을 순서대로 배열하는 방식이다. 단계가 늘어날수록 진행감과 복구가 더 중요해진다.

입력이 매끄러운 장면

보험 가입처럼 개인 정보, 보장 선택, 결제, 최종 확인을 단계별로 나눈다.

진행률과 이전 단계 이동을 제공해 사용자가 전체 위치를 이해한다.

단계를 늘려 막히는 흐름

이름, 이메일, 비밀번호만 받는 가입 폼을 세 단계로 나눈다.

이전 단계로 돌아가면 입력값이 사라진다.

입력 흐름 사례와 근거

단계 나누기는 복잡도를 줄일 때만 효과가 있다

Multi-step Form은 긴 폼을 예쁘게 나누는 방법이 아니라 사용자의 의사결정 단위를 나누는 방법이다. 주소, 배송, 결제, 최종 확인처럼 머릿속에서도 단계가 나뉘는 경우에 유용하다.

서로 강하게 연결된 입력을 억지로 여러 페이지에 나누면 사용자는 앞뒤 맥락을 잃는다. 단계가 늘어날수록 뒤로 가기, 저장, 오류 복구, 진행률 안내도 함께 설계해야 한다.

실무 해석

Nielsen의 시스템 상태 가시성 원칙은 단계형 폼에서 진행률과 남은 단계 안내로 드러난다. 법적, 금융, 데이터 손실과 관련된 제출은 WCAG의 Error Prevention 기준과도 연결된다.

단계형 폼 설계 기준

• 각 단계가 하나의 명확한 결정을 담는지 본다
• 이전 단계로 돌아가도 입력이 보존되는지 확인한다
• 마지막 검토가 필요한 작업인지 판단한다

자주 빠지는 함정

단계를 나누면 쉬워진다고 생각하기 쉽다. 하지만 정보가 적은 폼을 나누면 사용자는 더 많이 클릭하고 전체 맥락을 잃는다.

추가로 비교할 단계형 폼 사례

• 보험 가입, 여행 예약, 채용 지원 폼의 단계형 흐름을 비교한다
• 간단한 가입 폼을 불필요하게 나눈 사례를 찾는다
• 진행률과 중간 저장이 잘 된 사례를 모은다

단계형 폼 질문

• 단계 이름이 사용자의 목표를 반영하는가
• 이전 단계 이동과 입력값 보존을 다뤘는가

출처

• Nielsen Norman Group, 10 Usability Heuristics for User Interface Design: https://www.nngroup.com/articles/ten-usability-heuristics/
• W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
• GOV.UK Design System, Button: https://design-system.service.gov.uk/components/button/
• GOV.UK Design System, Error summary: https://design-system.service.gov.uk/components/error-summary/