스텝퍼

정의

스텝퍼는 여러 단계로 나뉜 긴 과정을, 지금 어디쯤 와 있는지 한눈에 보여 주는 안내판입니다. 보통 단계들이 일렬로 놓이고, 이미 끝낸 단계는 체크 표시로, 지금 하고 있는 단계는 색이나 굵기로 강조해, 아직 남은 단계는 흐리게 표시합니다. 결제나 회원가입처럼 순서가 정해진 작업을 한 화면에 다 담기 어려울 때, 과정을 몇 개의 짧은 단계로 쪼개고 그 흐름을 위쪽에 지도처럼 펼쳐 두는 것이 스텝퍼의 역할입니다. 진행 막대와 달리 각 단계에 이름이 붙어, 다음에 무엇을 하게 될지까지 미리 알려 준다는 점이 다릅니다.

왜 중요한가

사람은 끝이 보이지 않는 작업 앞에서 쉽게 지치고 도중에 포기합니다. 스텝퍼는 '지금 몇 번째 단계이고, 앞으로 몇 단계가 남았는지'를 눈에 보이게 만들어 이 불안을 줄여 줍니다. 전체 분량을 미리 알려 주면 사용자는 마음의 준비를 하고 끝까지 진행할 힘을 얻으며, 완료한 단계에 체크가 쌓이는 모습은 작은 성취감을 주어 다음 단계로 나아가게 합니다. 긴 폼을 한 화면에 몰아넣는 대신 단계로 나누면 한 번에 집중할 항목도 줄어, 입력 실수와 심리적 부담이 함께 낮아집니다. 결국 스텝퍼는 이탈을 줄이고 끝까지 완주하도록 돕는 장치입니다.

흔한 실수

• 단계를 지나치게 잘게 쪼개 개수를 늘리는 경우입니다. 단계가 너무 많으면 오히려 갈 길이 멀어 보여 사용자가 시작 전부터 지치고, 화면 위 표시도 좁아져 각 단계가 무엇인지 알아보기 어려워집니다. 나눌수록 좋은 것은 아닙니다.
• 이미 지난 단계로 돌아갈 수 있는지 정해 두지 않는 경우입니다. 앞 단계에서 잘못 입력한 것을 고치려는데 되돌아갈 방법이 없으면, 사용자는 처음부터 다시 하거나 아예 포기하게 됩니다. 되돌아갈 때 앞서 입력한 값이 사라지지 않는지도 함께 챙겨야 합니다.
• 완료, 현재, 대기 세 상태의 표시가 서로 비슷해 구분되지 않는 경우입니다. 어디까지 했고 지금 어디인지 색이나 아이콘으로 뚜렷이 나뉘지 않으면, 진행 상태를 보여 준다는 목적 자체가 무의미해집니다.

실무 팁

• 단계는 3~5개 정도로 유지하고, 되돌아가기 허용 여부를 처음부터 명확히 정하세요. 순서가 있는 긴 과정을 적당히 나눠 얼마나 왔고 얼마나 남았는지 보여 주면 중도 이탈이 크게 줄어듭니다.
• 완료, 현재, 대기 단계를 색과 아이콘으로 확실히 구분하세요. 지난 단계는 체크, 지금 단계는 강조, 남은 단계는 흐리게 두면 사용자가 자신의 위치를 한눈에 읽어 냅니다.
• 각 단계에는 그 안에서 무엇을 하는지 알려 주는 짧은 이름을 붙이세요. 번호만 있는 것보다 '배송지', '결제'처럼 내용을 담은 라벨이 있어야 사용자가 다음에 할 일을 미리 가늠하고, 마음의 준비를 한 채 다음 단계로 넘어갈 수 있습니다.

관련 개념