제출과 이전, 둘 다 주기

KRDS SP-145 — 행동을 확정하는 버튼과 함께 행동을 취소하고 이전으로 돌아갈 수 있는 버튼을 제공하여 사용자가 실수로 신청서를 제출하는 오류를 방지하고 있다.

0. 들어가며 — 확인/확정 서브섹션의 마지막

이번 819편은 행동을 확정하는 버튼과 함께 취소하고 이전으로 돌아갈 수 있는 버튼을 제공하여 실수로 신청서를 제출하는 오류를 방지하라는 규칙입니다. ‘확인/확정’ 서브섹션(SP-141~145)의 마지막이죠.

확인 단계에 — ‘제출’(확정) 버튼만 있고 ‘이전’(돌아가기)이 없으면, 수정하려는 사용자가 빠져나갈 길이 없죠. SP-145는 확정·취소 버튼 둘 다를 규정합니다. BP-107의 신청 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 확정·취소 버튼 모두

SP-145 (서비스 패턴 > 신청 > 확인/확정) “행동을 확정하는 버튼과 함께 행동을 취소하고 이전으로 돌아갈 수 있는 버튼을 제공하여 사용자가 실수로 신청서를 제출하는 오류를 방지하고 있다.”

확정 버튼과 이전 버튼을 모두 제공해 실수 제출을 방지하라는 뜻입니다.

정리: 확인 단계에 확정·이전 버튼을 모두 제공하라. 이게 SP-145입니다.

2. 왜 확정·취소 둘 다인가

확인·확정 단계(SP-141·142)에서, 사용자는 두 가지를 할 수 있어야 합니다: 확정(제출)과 이전 (돌아가 수정)이죠. SP-145는 두 버튼을 요구합니다. BP-107(확정·취소 버튼 모두)의 신청 적용입니다.

확정 버튼만 있을 때의 문제:

수정 못 함 확인 단계에, ‘제출’(확정) 버튼만 있으면, 잘못된 걸 발견한 사용자가 이전으로 돌아가 수정할 길이 없습니다. 그대로 제출하거나 헤매죠.

실수 제출 빠져나갈 길이 없으면, 사용자가 실수로 제출 버튼을 누를 위험이 커집니다.

그래서 SP-145는 — 확정 + 취소 둘 다를 요구합니다:

확정(제출) 버튼 신청을 제출(확정)하는 버튼을요. 확인을 마친 사용자가 신청을 완료하게요.

이전(취소·돌아가기) 버튼 행동을 취소하고 이전으로 돌아가는 버튼을요(‘이전’, ‘수정하기’). 잘못된 걸 발견한 사용자가, 돌아가 수정(SP-142)하게요.

실수 제출 방지 두 버튼으로, 사용자가 의도대로 선택합니다. 제출할지 돌아갈지요. ’제출’만 있어 실수로 누르는 오류를 막죠.

버튼 위계·구분 확정(주, primary)·이전(보조)을 시각적으로 구분(BP-072)하고, 위험한 비가역 확정은 신중히요. 명확한 레이블(‘제출하기’, ‘이전’, BP-108)로요.

BP-107의 신청 적용. 확인 대화 확정·취소 둘 다(BP-107)를, 신청 확인 단계에 적용한 게 SP-145입니다. 사용자에게 선택권(제출·수정)을 줘, 실수 제출을 막죠. 로그인 안내 ‘로그인 안 함’(SP-068)·세션 만료 연장·로그아웃(SP-093)과도 같은 정신입니다.

확인/확정 서브섹션의 종합. ‘확인/확정’(SP-141~145)은 확인 단계 포함(141)·최종 확인·수정(142)·중요 정보 요약(143)·불가 안내(144)·확정·취소 버튼(145)으로 실수 없는 제출을 보장합니다. SP-145는 그 마무리, 사용자에게 마지막 선택권을 주죠.

이 규칙은 신청(SP)의 ’실수 제출 방지’를 담당합니다 — 확정·이전 버튼을 모두 제공해(145), 사용자가 제출하거나 돌아가 수정하도록 선택해 실수 제출을 막죠. 확인/확정 서브섹션의 마무리입니다.

정리하면 — 확인 단계에 확정 버튼만 있으면 수정하려는 사용자가 빠져나갈 수 없고 실수 제출 위험이 크므로, 확정(제출)· 이전(수정) 버튼을 모두 제공해 선택하게 하고 실수 제출을 방지해야 합니다.

3. 점검 / 개선

무엇을 점검하나

확정·이전 둘 다 — 확인 단계에 확정(제출)·이전(수정) 버튼이 모두 있는가.

수정 경로 — 이전 버튼으로 돌아가 수정(SP-142)할 수 있는가.

위계·레이블 — 버튼 위계 구분(BP-072)·명확한 레이블(BP-108)인가.

개선 방향

확인 단계에 ‘제출하기’·‘이전’ 버튼 모두(BP-107). 이전으로 수정(SP-142).

버튼 위계(BP-072)·명확 레이블(BP-108). 실수 제출 방지.

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

역할	책임
기획/UX	확인 단계 버튼 구성
개발	확정·이전 구현

기관 유형	SP-145 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (신청서 제출 시)

신청서 제출 확인 단계가 있는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 확인 단계에 확정(제출)·이전(수정) 버튼이 모두 있나요?

□ 이전 버튼으로 돌아가 수정(SP-142)할 수 있나요?

□ 버튼 위계 구분(BP-072)·명확한 레이블(BP-108)인가요?

❓ FAQ

Q1. 확정 버튼만 있으면 왜 문제인가요? 잘못된 걸 발견한 사용자가 이전으로 돌아가 수정할 길이 없습니다. 그대로 제출 하거나 헤매고, 실수로 제출 버튼을 누를 위험도 크죠. Q2. 이전 버튼은 뭘 하나요? 행동을 취소하고 이전으로 돌아가 수정(SP-142)하게요. 잘못된 걸 발견하면 돌아가 고칩니다. ‘이전’·‘수정하기’ 레이블로요. Q3. BP-107과 같나요? 확인 대화 확정·취소 둘 다(BP-107)를 신청 확인 단계에 적용한 것입니다. 선택권(제출·수정)을 줘 실수 제출을 막죠. SP-068·SP-093과도 같은 정신입니다.

6. 마무리

SP-145의 메시지:

제출과 이전, 둘 다 주기 — 확인 단계에 확정·이전 버튼을 모두 제공하라.

확정 버튼만 있으면 수정하려는 사용자가 빠져나갈 수 없고 실수 제출 위험이 큽니다. 확정·이전 버튼을 모두 제공해 선택하게 하는 게 핵심이죠. ‘확인/확정’ 서브섹션이 끝났습니다. 다음 편부터는 ‘완료’ 서브섹션입니다.

다음 편 예고 ▶ 「820. (SP-146) 신청서 제출이 완료된 이후에는 반드시 완료 화면으로 이동하여 정상 제출을 확인하고 신뢰할 수 있는 단계를 제공하고 있다.」

ViewCheck는 확인 단계에 확정·이전 버튼이 모두 제공되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 신청 가이드 — https://www.krds.go.kr/html/site/service/service_04.html

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

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