초기화 버튼은 멀찍이 따로

KRDS SP-138 — 사용자가 실수로 입력값을 모두 삭제하지 않도록 초기화 버튼을 시각적, 공간적으로 다른 버튼과 구분하고 있다.

0. 들어가며 — ‘제출’ 대신 ’초기화’를 잘못 누르면

이번 812편은 사용자가 실수로 입력값을 모두 삭제하지 않도록 초기화 버튼을 시각적, 공간적으로 다른 버튼과 구분 하라는 규칙입니다.

‘제출’ 버튼 바로 옆에 ‘초기화’(전체 삭제) 버튼이 비슷하게 붙어 있으면, 사용자가 잘못 눌러 다 채운 신청서가 날아가죠. SP-138은 초기화 버튼을 구분하라고 규정합니다. 실수 방지죠. 이번 편을 풀어냅니다.

1. 원문 — 초기화 버튼 시각·공간 구분

SP-138 (서비스 패턴 > 신청 > 신청서 작성) “사용자가 실수로 입력값을 모두 삭제하지 않도록 초기화 버튼을 시각적, 공간적으로 다른 버튼과 구분하고 있다.”

초기화 버튼을 시각·공간적으로 다른 버튼과 구분하라는 뜻입니다.

정리: 초기화 버튼을 다른 버튼과 시각·공간적으로 구분하라. 이게 SP-138입니다.

2. 왜 초기화 버튼 구분인가

신청서에는 ‘초기화’(입력값 전체 삭제) 버튼이 있을 수 있습니다. 이 버튼이, ‘제출’·‘다음’ 같은 주 버튼과 비슷하게·가까이 있으면, 사용자가 실수로 눌러 다 채운 신청서가 날아가죠. SP-138은 구분 을 요구합니다.

초기화 버튼이 구분 안 될 때의 문제:

실수로 전체 삭제 ‘제출’ 버튼을 누르려다, 옆의 비슷한 ‘초기화’ 버튼을 잘못 누르면, 다 채운 입력값이 한 번에 사라집니다. 큰 손실이죠. 되돌릴 수도 없고요.

혼동 초기화와 제출이 비슷하면, 어느 게 어느 건지 헷갈립니다.

그래서 SP-138은 — 시각·공간 구분을 요구합니다:

시각적 구분 초기화 버튼을, 주 버튼(제출·다음)과 시각적으로 다르게요. 주 버튼은 강조(채운 색, primary), 초기화는 약하게·다른 스타일(외곽선·텍스트 버튼, 회색 등)로요. 위험·보조 동작임을 시각적으로요 (버튼 위계 BP-072).

공간적 구분 초기화 버튼을, 주 버튼과 떨어뜨려 배치합니다. 바로 옆에 붙이지 않죠. 멀찍이 떼거나, 다른 영역에요. 잘못 누를 가능성을 줄이게요.

확인 단계(권장) 초기화는 비가역(되돌릴 수 없음)이므로, 누르면 ‘정말 초기화하시겠습니까?’ 확인 (BP-105)을 받으면 좋죠. 실수로 눌러도 한 번 더 막아주게요.

명확한 레이블 초기화 버튼 레이블을 명확히(‘초기화’, ‘모두 지우기’, BP-108)요. 무엇을 하는 버튼인지 알게요.

비가역 행동의 실수 방지. 초기화는 입력값을 전체 삭제하는 비가역 행동입니다(BP-105). 실수로 누르면 큰 손실이라, 시각·공간 구분 + 확인으로 실수를 막죠. 액션 버튼 일관 배치(BP-072)·위험 행동 확인 (BP-105)의 정신입니다.

입력값 보호의 연장. SP-130(선행 초기화 방지)·SP-133(임시 저장)에 이어, SP-138도 입력값을 보호합니다. 시스템이 멋대로(130), 중단으로(133), 실수로(138) 입력값을 잃지 않게요. 사용자의 노력을 지키죠.

이 규칙은 신청(SP)의 ’실수 삭제 방지’를 담당합니다 — 초기화 버튼을 다른 버튼과 구분해(138), 사용자가 실수로 입력값을 전체 삭제하지 않게 하죠. SP-130·SP-133(입력 보호)과 함께 갑니다.

정리하면 — 초기화 버튼이 주 버튼과 비슷·가까우면 실수로 눌러 입력값이 다 날아가므로, 초기화 버튼을 시각적(약하게)·공간 적(떨어뜨려)으로 구분하고 확인 단계를 둬 실수를 막아야 합니다.

3. 점검 / 개선

무엇을 점검하나

시각 구분 — 초기화 버튼이 주 버튼과 시각적으로 다른가(약하게, BP-072).

공간 구분 — 초기화 버튼이 주 버튼과 떨어져 있는가.

확인 단계 — 초기화 시 확인을 받는가(BP-105).

개선 방향

초기화 버튼을 주 버튼과 시각(약하게)·공간(떨어뜨려) 구분(BP-072).

초기화 시 확인(BP-105). 명확한 레이블(BP-108). 입력값 보호.

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

역할	책임
디자이너	초기화 버튼 구분 디자인
개발	구분·확인 구현

기관 유형	SP-138 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (초기화 버튼 있는 신청서)

초기화 버튼이 있는 신청서가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 초기화 버튼이 주 버튼과 시각적으로 다른가요(약하게, BP-072)?

□ 초기화 버튼이 주 버튼과 떨어져 있나요?

□ 초기화 시 확인을 받나요(BP-105)?

❓ FAQ

Q1. 초기화 버튼이 구분 안 되면 왜 문제인가요? ‘제출’을 누르려다 옆의 비슷한 ’초기화’를 잘못 누르면 다 채운 신청서가 한 번에 사라집니다. 큰 손실이고 되돌릴 수도 없죠. Q2. 어떻게 구분하나요? 시각적으로 주 버튼은 강조(primary), 초기화는 약하게(외곽선·회색)요(BP-072). 공간적으로 주 버튼과 떨어뜨려 배치합니다. 잘못 누를 가능성을 줄이죠. Q3. 확인 단계도 필요한가요? 권장합니다. 초기화는 비가역이라 ’정말 초기화하시겠습니까?’ 확인(BP-105)을 받으면 실수 로 눌러도 한 번 더 막아주죠.

6. 마무리

SP-138의 메시지:

초기화 버튼은 멀찍이 따로 — 초기화 버튼을 다른 버튼과 시각·공간적으로 구분하라.

초기화 버튼이 주 버튼과 비슷·가까우면 실수로 눌러 입력값이 날아갑니다. 시각·공간 구분과 확인으로 실수를 막는 게 핵심 이죠. 다음 편은 현재 단계 스크린 리더 확인입니다.

다음 편 예고 ▶ 「813. (SP-139) 현재 단계를 스크린 리더로 확인할 수 있도록 제공하고 있다.」

ViewCheck는 초기화 버튼이 다른 버튼과 구분되는지를 진단합니다.

📚 참고 출처

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

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

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