얼마나 남았는지 보이게

KRDS BP-069 — 단계별 데이터를 입력 받는 경우 단계의 완수, 진행률을 표시하고 있다.

0. 들어가며 — 끝이 안 보이는 폼은 불안하다

이번 635편은 단계별 데이터를 입력받는 경우 단계의 완수, 진행률을 표시하라는 규칙입니다.

다단계 폼에서 — 지금 몇 단계째인지, 얼마나 남았는지 안 보이면, 사용자는 불안하고 막막하죠. BP-069는 단계 진행 표시기 (step indicator)로 완수·진행률을 보이라고 규정합니다. 단계표시기 컴포넌트(CP)의 폼 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 단계 완수·진행률 표시

BP-069 (기본 패턴 > 입력 폼) “단계별 데이터를 입력받는 경우 단계의 완수, 진행률을 표시하고 있다.”

다단계 폼에서 완료한 단계와 진행률을 표시하라는 뜻입니다.

정리: 다단계 폼에 단계 완수·진행률을 표시하라. 이게 BP-069입니다.

2. 왜 진행률 표시인가

다단계 폼(BP-068)은 긴 입력을 여러 단계로 나눕니다. 그런데 사용자가, 지금 몇 단계째인지, 얼마나 남았는지 모르면 불안하죠. BP-069는 단계 진행 상태를 표시하라고 합니다.

진행률이 안 보일 때의 문제:

막막함·불안 끝이 안 보이는 폼은, 사용자를 불안하게 합니다. ‘이거 언제 끝나지?’, ‘몇 개나 더 남았지?’ 하며 막막해하죠.

이탈 위험 진행 상황을 모르면, 사용자가 ‘너무 길다’ 느껴 중간에 포기합니다. 끝이 보이면 조금만 더 하면 된다고 동기부여가 되는데요.

현재 위치 모름 지금 어느 단계인지 안 보이면, 전체 흐름에서 길을 잃습니다.

그래서 BP-069는 — 단계 완수·진행률을 표시하라고 합니다:

단계 표시기(Step Indicator) 전체 단계와 현재 단계를 보여주는 표시기를요. 예: ‘1. 개인정보 > 2. 신청내용 > 3. 확인’ 중 현재 단계 강조. 사용자가 전체 흐름과 현재 위치를 한눈에 알죠(단계표시기 컴포넌트 CP-307~315 연계).

완수 표시 이미 완료한 단계는, 완료 표시(체크 ✓·다른 색)로요. 사용자가 어디까지 했는지 알게요.

진행률 전체 중 얼마나 진행됐는지를(예: ‘3단계 중 2단계’, 진행 바). 남은 양을 가늠하게요.

진행률 표시의 효과:

안심·동기 — 끝이 보이면 — 사용자가 안심하고, ’거의 다 왔다’는 동기로 완료하죠.

위치 인지 — 현재 단계·완료 단계를 알아 — 흐름에서 길을 잃지 않습니다.

이탈 감소 — 진행률은 — 폼 완료율을 높이는 검증된 UX 패턴입니다.

단계표시기 컴포넌트와의 관계. 단계표시기 컴포넌트 규칙(CP-307~315)이 — 표시기 자체의 구조·스타일·접근성이었 다면, BP-069는 — 다단계 입력 폼에 그 표시기를 제공하라는 패턴 요구입니다. 컴포넌트(어떻게 생겼나) + 패턴(언제 쓰나)의 연계죠.

접근성. 단계 표시기는 — 스크린 리더에도 현재 단계·전체를 알려야 합니다(aria-current 등). 모두가 진행 상황을 알게요.

이 규칙은 입력 폼의 ’진행 가시성’을 담당합니다 — 단계 완수·진행률을 표시해(069), 사용자가 현재 위치와 남은 양을 알고 안심하며 완료하게 하죠. 논리적 단계(BP-068)와 짝을 이룹니다.

정리하면 — 다단계 폼에서 진행 상황이 안 보이면 사용자가 불안해 이탈하므로, 단계 표시기로 현재 단계·완료 단계·진행률을 표시해 위치 인지와 동기를 줘야 합니다.

3. 점검 / 개선

무엇을 점검하나

단계 표시기 — 전체 단계와 현재 단계를 보여주는가.

완수 표시 — 완료한 단계를 표시하는가(체크·색).

진행률·접근성 — 진행률을 알리고 스크린 리더도 현재 단계를 아는가(aria-current).

개선 방향

단계 표시기로 전체·현재·완료 표시(CP-307~315). 진행률(‘N단계 중 M’).

스크린 리더에 현재 단계 안내(aria-current). 동기·안심 제공.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
기획/UX	단계 표시 설계
퍼블리셔/개발	단계 표시기 구현

기관 유형	BP-069 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (다단계 폼 사용 시)

다단계 입력 폼을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 전체 단계와 현재 단계를 보여주나요?

□ 완료한 단계를 표시하나요(체크·색)?

□ 진행률을 알리고 스크린 리더도 현재 단계를 아나요(aria-current)?

❓ FAQ

Q1. 진행률이 왜 중요한가요? 끝이 안 보이는 폼은 불안하고 이탈을 부릅니다. 진행률이 보이면 ’거의 다 왔다’는 동기로 완료하죠. 검증된 UX 패턴이에요. Q2. 단계 표시기는 어떻게 생겼나요? ’1.개인정보 > 2.신청내용 > 3.확인’처럼 단계를 나열하고 현재를 강조합니다. 완료 단계는 체크(✓)로요(컴포넌트 CP-307~315). Q3. 스크린 리더에도 알려야 하나요? 네. aria-current 등으로 현재 단계·전체를 알립니다. 모두가 진행 상황을 알아야 하죠.

6. 마무리

BP-069의 메시지:

얼마나 남았는지 보이게 — 다단계 폼에 단계 완수·진행률을 표시하라.

진행 상황이 안 보이면 사용자가 불안해 이탈합니다. 단계 표시기로 현재·완료·진행률을 보여 안심과 동기를 주는 게 핵심 이죠. 다음 편은 단일 열 수직 정렬입니다.

다음 편 예고 ▶ 「636. (BP-070) 콘텐츠는 가능한 한 하나의 열에 수직으로 정렬하여 입력 받고 있다.」

ViewCheck는 다단계 폼에 단계 완수·진행률이 표시되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 입력 폼 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_08.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준