할지 말지 둘 다 고르게

KRDS BP-107 — 행동을 확정, 취소할 수 있는 버튼을 모두 제공하고 있다.

0. 들어가며 — 빠져나갈 길도 있어야 한다

이번 673편은 행동을 확정, 취소할 수 있는 버튼을 모두 제공하라는 규칙입니다.

확인 대화상자에 — ‘확인’ 버튼만 있고 ’취소’가 없으면, 마음을 바꾼 사용자는 빠져나갈 길이 없죠. BP-107은 확정과 취소 버튼을 모두 제공하라고 규정합니다. 사용자에게 선택권을 주는 거죠. 이번 편을 풀어냅니다.

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

BP-107 (기본 패턴 > 확인) “행동을 확정, 취소할 수 있는 버튼을 모두 제공하고 있다.”

확인 대화에 행동을 확정·취소하는 버튼을 모두 제공하라는 뜻입니다.

정리: 확인 대화에 확정·취소 버튼을 모두 제공하라. 이게 BP-107입니다.

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

확인 대화상자는 사용자에게 ’이 행동을 할지’를 묻습니다. 그렇다면 사용자는 두 가지 답을 할 수 있어야 하죠: 할 것(확정)과 안 할 것(취소). BP-107은 두 버튼을 모두 제공하라고 합니다.

취소 버튼이 없을 때의 문제:

빠져나갈 길 없음 확인 대화에 ‘확인’ 버튼만 있으면, 마음을 바꾼 사용자는 어떻게 빠져나가야 할지 모릅니다. 실수로 확인 창을 띄웠는데, 취소할 길이 없으면 곤란하죠.

강제된 선택 한 방향(확정)만 있으면, 사용자는 선택을 강요받는 느낌입니다. 통제권을 빼앗기죠.

실수 유발 빠져나갈 길이 분명치 않으면, 사용자가 당황해 잘못 누를 수 있습니다.

그래서 BP-107은 — 확정 + 취소 둘 다 제공하라고 합니다:

확정 버튼 행동을 실행하는 버튼(‘삭제’, ‘제출’, ‘확인’)이요. 사용자가 의도한 행동을 진행하게요.

취소 버튼 행동을 중단하고 빠져나가는 버튼(‘취소’, ‘닫기’)이요. 마음을 바꾼 사용자가 안전하게 빠져나가게요. 취소하면 아무 일도 일어나지 않고(원상태 유지), 대화상자가 닫히죠.

추가 탈출 수단 취소 버튼 외에도 ESC 키, 대화상자 바깥 클릭, 닫기(✕) 버튼으로도 빠져나가게 하면 좋죠 (모달 접근성). 다만 명시적 ‘취소’ 버튼은 항상 두고요.

기본 포커스·강조의 배려. 두 버튼 중 — 어디에 기본 포커스를 둘지, 무엇을 강조할지도 — 중요합니다:

비가역·위험 행동 삭제·탈퇴 같은 위험 행동은, 기본 포커스를 ’취소’에 두기도 합니다. 무심코 Enter를 눌러도 위험 행동이 실행 안 되게요(안전 기본값).

버튼 위계 주 행동(확정)과 보조(취소)를 시각적으로 구분하되(BP-072 버튼 위계), 위험 행동의 확정 버튼은 신중히 강조합니다(빨강 등). 취소가 묻히지 않게요.

선택권 = 통제권. 확정·취소 둘 다 있으면, 사용자는 자신의 의도대로 선택합니다. 통제권이 사용자에게 있죠. 한 방향만 있으면 강요가 됩니다. 좋은 확인 대화는 언제나 빠져나갈 길을 줍니다.

확인 그룹의 흐름. BP-105(언제 확인)·BP-106(무엇·영향 설명)에 이어, BP-107은 ’확정·취소 둘 다’를, BP-108은 ’버튼 레이블 구체화’를 다룹니다. 확인 대화의 버튼 구성이죠.

이 규칙은 확인의 ’선택권 제공’을 담당합니다 — 확정·취소 버튼을 모두 제공해(107), 사용자가 행동을 진행하거나 안전하게 빠져나가게, 통제권을 주죠.

정리하면 — 확인 대화에 확정 버튼만 있으면 마음을 바꾼 사용자가 빠져나갈 수 없으므로, 확정과 취소 버튼을 모두 제공하고 (위험 행동은 안전 기본값) 선택권을 줘야 합니다.

3. 점검 / 개선

무엇을 점검하나

둘 다 제공 — 확인 대화에 확정·취소 버튼이 모두 있는가.

취소 효과 — 취소하면 아무 일도 안 일어나고 대화가 닫히는가.

안전 기본값 — 위험 행동은 기본 포커스·강조가 안전하게 설정되는가.

개선 방향

확정(‘삭제’·‘제출’) + 취소(‘취소’) 버튼 모두. ESC·✕ 탈출도.

위험 행동은 기본 포커스 취소에. 버튼 위계(BP-072), 취소 안 묻히게.

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

역할	책임
기획/UX	확인 버튼 구성·기본값
개발	확정·취소·탈출 구현

기관 유형	BP-107 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (확인 대화 사용 시)

확인 대화상자를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 확인 대화에 확정·취소 버튼이 모두 있나요?

□ 취소하면 아무 일도 안 일어나고 대화가 닫히나요?

□ 위험 행동은 기본 포커스·강조가 안전하게 설정되나요?

❓ FAQ

Q1. ‘확인’ 버튼만 있으면 안 되나요? 마음을 바꾼 사용자가 빠져나갈 길이 없습니다. 실수로 창을 띄웠는데 취소 못 하면 곤란하죠. 취소 버튼을 항상 함께 제공해야 합니다. Q2. 위험 행동의 기본 포커스는요? 삭제·탈퇴 같은 위험 행동은 기본 포커스를 ‘취소’에 두기도 합니다. 무심코 Enter를 눌러도 위험 행동이 실행 안 되게요(안전 기본값). Q3. ESC·바깥 클릭으로 닫으면 취소 버튼이 필요 없나요? 추가 탈출 수단은 좋지만, 명시적 ’취소’ 버튼은 항상 둡니다. 모두가(특히 마우스만·키보드만 쓰는 사용자) 명확히 빠져나가게요.

6. 마무리

BP-107의 메시지:

할지 말지 둘 다 고르게 — 확정·취소 버튼을 모두 제공하라.

확정 버튼만 있으면 마음을 바꾼 사용자가 빠져나갈 수 없습니다. 확정·취소를 모두 제공하고 위험 행동은 안전 기본값으로 선택권을 주는 게 핵심이죠. 다음 편은 버튼 레이블 구체화 — BP의 마지막 규칙입니다.

다음 편 예고 ▶ 「674. (BP-108) 버튼의 레이블에 행동을 구체적으로 설명하고 있다. — BP 마지막 규칙」

ViewCheck는 확인 대화에 확정·취소 버튼이 모두 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 확인 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_11.html

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

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