‘확인’ 말고 ’삭제’라고

KRDS BP-108 — 버튼의 레이블에 행동을 구체적으로 설명하고 있다.

0. 들어가며 — 기본 패턴(BP) 108개의 마지막 규칙

이번 674편은 버튼의 레이블에 행동을 구체적으로 설명하라는 규칙입니다. 확인 그룹(BP-105~108)의 마지막이자, 기본 패턴(BP) 108개 전체의 마지막 규칙입니다.

확인 버튼이 — 그냥 ‘확인’/‘예’면, 무엇을 확정하는지 모호하죠. ’삭제’/’제출’처럼 — 행동을 구체적으로 쓰면 명확합니다. BP-108은 버튼 레이블 구체화를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 버튼 레이블 행동 구체화

BP-108 (기본 패턴 > 확인) “버튼의 레이블에 행동을 구체적으로 설명하고 있다.”

버튼 레이블에 그 버튼이 하는 행동을 구체적으로 설명하라는 뜻입니다.

정리: 버튼 레이블에 행동을 구체적으로 쓰라. 이게 BP-108입니다.

2. 왜 레이블 구체화인가

확인 대화의 버튼은, 사용자가 행동을 선택하는 수단입니다(BP-107). 그 버튼의 레이블(글자)이, 무슨 행동인지 분명해야 사용자가 제대로 고르죠. BP-108은 구체적 레이블을 요구합니다.

레이블이 모호할 때의 문제:

무슨 행동인지 모름 버튼이 ‘확인’/‘예’/’OK’면, 무엇을 확정하는지 모호합니다. 특히 설명을 안 읽고 버튼만 보는 사용자는, ’예’를 무심코 눌렀다 예상 못 한 행동을 하죠.

확정/취소 혼동 ‘예’/‘아니오’는 질문 문구에 의존합니다. 질문이 부정형이면(’삭제하지 않으시겠습니까?’), ’예’가 무엇인지 헷갈리죠. 행동 레이블이면 이런 혼동이 없습니다.

스크린 리더 맥락 상실 스크린 리더 사용자가 버튼만 탭하면 ’확인 버튼’으로만 들립니다. 무슨 확인인지 모르죠. 행동 레이블이면 ’삭제 버튼’으로 명확합니다.

그래서 BP-108은 — 행동 구체화를 요구합니다:

행동을 레이블로 버튼에 그 행동을 구체적으로 씁니다. ‘확인’ 대신 ‘삭제’, ‘제출’, ‘신청’, ‘결제’, ‘탈퇴’ 처럼요. 사용자가 버튼만 봐도 무슨 행동인지 알게요.

확정/취소 명확 확정 버튼은 행동(‘삭제’), 취소 버튼은 ’취소’로요. ’예/아니오’보다 행동/취소가 명확하죠.

질문 독립 행동 레이블은 질문 문구에 의존하지 않습니다. ‘삭제’ 버튼은 어떤 질문이든 ’삭제함’이 분명하죠.

스크린 리더 명확 버튼이 ’삭제’면, 스크린 리더가 ’삭제 버튼’으로 읽어 맥락 없이도 무슨 버튼인지 압니다 (WCAG 2.4.4 링크·버튼 목적, 2.4.6 레이블).

좋은 버튼 레이블의 조건. 행동을 구체적으로, 동사로요(‘삭제하기’, ‘제출하기’). 간결하면서 명확하게요(레이블 간결·정확 BP-093 정신). ‘확인’·‘예’·‘OK’ 같은 모호한 일반어를 피하고요.

확인 그룹의 완성(BP-105~108). 좋은 확인 대화는:

BP-105 — 언제 확인할지(중요·비가역 행동).

BP-106 — 무엇을·어떤 영향인지 설명.

BP-107 — 확정·취소 둘 다.

BP-108 — 버튼 레이블 구체화.

이 넷이 — 함께 명확하고 안전한 확인 대화를 완성하죠.

이 규칙은 확인의 ’버튼 명확성’을 담당합니다 — 버튼 레이블에 행동을 구체화해(108), 사용자가 무슨 행동인지 알고 정확히 고르게 하죠. 확인 그룹과 기본 패턴(BP)의 마무리입니다.

정리하면 — 버튼이 ‘확인’/‘예’면 무슨 행동인지 모호하므로, 레이블에 행동(’삭제’·‘제출’)을 구체적으로 써 사용자가 버튼 만 봐도 무슨 행동인지 알게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

행동 구체화 — 버튼이 ‘확인’/‘예’ 대신 행동(‘삭제’·‘제출’)을 쓰는가.

확정/취소 명확 — 확정은 행동, 취소는 ’취소’로 명확한가.

스크린 리더 명확 — 버튼이 맥락 없이도 무슨 행동인지 읽히는가.

개선 방향

버튼 레이블에 행동 구체화(‘삭제’·‘제출’·‘신청’). ‘예’·‘OK’ 지양.

질문 독립적 행동 레이블. 간결·명확(BP-093, WCAG 2.4.6).

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

역할	책임
UX 라이터/기획	버튼 레이블 문구
퍼블리셔/개발	레이블 적용

기관 유형	BP-108 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (확인·액션 버튼)

확인·액션 버튼이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 버튼이 ‘확인’/‘예’ 대신 행동(‘삭제’·‘제출’)을 쓰나요?

□ 확정은 행동, 취소는 ’취소’로 명확한가요?

□ 버튼이 맥락 없이도 무슨 행동인지 읽히나요?

❓ FAQ

Q1. ‘확인’/‘예’가 왜 모호한가요?** 무엇을 확정하는지 안 보입니다. 특히 설명을 안 읽고 버튼만 보면 무심코 눌렀다 예상 못 한 행동을 하죠. ’삭제’·‘제출’처럼 행동을 쓰면 명확합니다. Q2. ’예/아니오’는 왜 안 좋나요? 질문 문구에 의존합니다. 부정형 질문이면 ’예’가 무엇인지 헷갈리죠. 행동 레이블 (’삭제’·‘취소’)이면 질문과 무관하게 명확합니다. Q3. 스크린 리더엔 어떤 차이가 있나요?** ’확인 버튼’으로만 들리면 무슨 확인인지 모릅니다. ’삭제 버튼’이면 맥락 없이도 명확하죠(WCAG 2.4.4/2.4.6).

6. 마무리

BP-108의 메시지:

‘확인’ 말고 ’삭제’라고 — 버튼 레이블에 행동을 구체적으로 설명하라.

버튼이 ‘확인’/‘예’면 무슨 행동인지 모호합니다. 레이블에 행동(’삭제’·‘제출’)을 구체화해 버튼만 봐도 알게 하는 게 핵심 이죠.

🎉 이로써 기본 패턴(BP) 108개 규칙(BP-001~108)이 모두 끝났습니다. 디자인 스타일(DS) 120 + 컴포넌트(CP) 446 + 기본 패턴(BP) 108 = 674규칙 완결. 다음 편부터는 846 규칙의 마지막 카테고리, 서비스 패턴(SP) 172개가 시작 됩니다.

다음 편 예고 ▶ 「675. (SP-001) 서비스 패턴(SP) 시작」

ViewCheck는 버튼 레이블이 행동을 구체적으로 설명하는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.4.6 Headings and Labels / 2.4.4 Link Purpose — https://www.w3.org/WAI/WCAG21/Understanding/

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

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