Wizard, Microsoft Word의 마법사

한 줄로

복잡한 작업을 한 단계씩 안내하는 UI 패턴입니다. Microsoft가 1991년에 Word와 Excel에 처음 도입한 마법사가 시작입니다.

어디서 왔나

1991년, Microsoft Office 3.0이 출시됐습니다. 워드와 엑셀의 기능이 폭발적으로 늘어나면서, 사용자가 표나 차트를 만들려면 메뉴 30개를 거쳐야 하는 상황이 됐습니다.

Microsoft의 해법은 단계별 안내 UI였습니다. 사용자가 "차트 만들기"를 누르면, 별도의 작은 윈도우가 떠서 단계별로 질문합니다.

Step 1 of 5: 어떤 종류의 차트를 만드시겠습니까? [막대 / 선 / 원형 / ...]

Step 2 of 5: 데이터 범위를 선택하세요. ...

각 단계에서 [Next], [Back], [Finish], [Cancel] 버튼을 둡니다. 5단계 끝나면 차트가 완성됩니다.

이 컴포넌트의 이름이 Wizard(마법사)입니다. 사용자가 모르는 복잡한 일을 "마법사"가 대신 처리해주는 비유입니다. 한국어로도 "마법사"로 번역됐습니다. "차트 마법사", "함수 마법사", "프린터 설치 마법사" 같은 식입니다.

Wizard는 1990년대 후반 Windows의 거의 모든 설정에 도입됐습니다. 새 프린터 추가, 모뎀 설정, 인터넷 연결, 새 사용자 추가 모두 wizard였습니다.

지금 우리가 쓰는 방식

회원가입: "단계 1/3, 이메일 입력".
온보딩: 첫 사용 시 5단계로 안내합니다.
결제: 카트, 배송 정보, 결제, 확인.
앱 초기 설정: 위치 권한, 알림 권한, 첫 프로필.

진화형으로 Stepper(단계 표시기)가 있습니다. 화면 상단에 1-2-3-4 점이나 막대로 어느 단계인지 표시합니다.

Wizard의 함정은 너무 잘게 쪼개면 이탈한다는 점입니다. 회원가입을 5단계로 만들면 사용자의 절반은 2단계에서 떠납니다. 같은 정보를 1페이지에 다 담는 게 더 강한 경우가 많습니다.

바이브 메이커가 챙길 한 가지

Wizard는 "복잡한 작업을 가벼워 보이게" 만드는 도구지, 작업 자체를 짧게 만들지 않습니다. 단계를 추가하면 인지부하는 줄지만 소요 시간은 늘어납니다. 따라서 사용자가 빠르게 끝내고 싶은 일은 1페이지에, 사용자가 처음 하는 복잡한 일은 wizard로 다뤄야 합니다. 이 두 가지를 헷갈리면 안 됩니다.

관련

Stepper, Onboarding, Progressive disclosure