위험한 액션 버튼은 어떻게 설계해야 할까

먼저 던질 질문

삭제, 결제, 권한 변경 같은 액션은 어떻게 경고해야 할까

핵심 관점

위험한 액션 버튼의 본질은 빨간색이 아니라 결과의 이해다. 사용자는 버튼을 누르기 전에 무엇이 바뀌고 되돌릴 수 있는지 알아야 한다.

회복 가능성이 보이는 장면

프로젝트 삭제 버튼 옆에 삭제 대상과 복구 불가능성을 설명하고 최종 확인에서 프로젝트명을 다시 보여준다.

권한 변경 버튼을 누르기 전 변경 후 접근 범위를 요약한다.

위험이 커지는 흐름

삭제 버튼을 빨간색으로만 표시하고 어떤 데이터가 사라지는지 설명하지 않는다.

결제 발생 버튼 라벨을 계속하기로만 둔다.

행동 보호 사례와 근거

위험 버튼은 색보다 대상과 결과가 먼저다

GOV.UK의 버튼 가이드는 버튼 문구가 수행하는 행동을 설명해야 한다고 말한다. 위험한 액션일수록 삭제보다 프로젝트 삭제처럼 대상과 결과가 드러나는 문구가 필요하다.

저장소 삭제처럼 손실이 큰 작업은 빨간 버튼 하나로 끝나지 않는다. 경고 문구, 대상 재입력, 권한 확인, 복구 가능성 안내가 함께 작동한다.

실무 해석

WCAG의 Use of Color 기준처럼 색상만으로 위험을 전달해서는 안 된다. 텍스트, 아이콘, 위치, 확인 절차를 함께 써야 한다.

위험 판단 기준

• 버튼 라벨이 실제 결과를 말하는지 확인한다
• 위험도에 따라 설명과 확인 강도를 조절한다
• 색상 외의 텍스트와 구조적 단서를 제공한다

자주 빠지는 함정

위험 버튼을 빨갛게 만들면 충분하다고 생각하기 쉽다. 하지만 색은 경고의 보조 수단일 뿐, 대상과 결과를 설명하지 못한다.

추가로 비교할 회복 흐름

• 저장소 삭제 버튼, 결제 승인 버튼, 팀원 권한 변경 버튼을 비교한다
• 버튼 라벨이 모호한 위험 액션 사례를 찾는다
• 강한 확인 단계가 필요한 관리자 액션 사례를 모은다

위험 설계 질문

• 색상 외에 문구와 위치, 확인 단계를 다뤘는가
• 위험도별로 확인 강도를 다르게 설명했는가

출처

• GOV.UK Design System, Button: https://design-system.service.gov.uk/components/button/
• GitHub Docs, Deleting a repository: https://docs.github.com/en/repositories/creating-and-managing-repositories/deleting-a-repository
• W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
• MDN Web Docs, HTML disabled attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/disabled