04 · Patterns · 피드백 · 상태
파괴적 액션Destructive Action
삭제·취소·영구 변경처럼 되돌리기 어렵거나 불가능한 행동. 버튼 색만 빨갛게 칠한다고 해결되지 않습니다 — 흐름 전체에 ‘멈춰 서는 순간’이 필요합니다.
되돌림 가능성 스펙트럼
| 유형 | 예시 | 권장 UX |
|---|---|---|
| Soft (복구 가능) | 게시글 휴지통 이동, 신청 초안 제거. | 즉시 실행 + Undo Toast (5~10초). |
| Hard (복구 어려움) | 게시글 삭제, 신청 취소. | danger 버튼 + 확인 다이얼로그. |
| Permanent (불가) | 교적 삭제, 회원 탈퇴, 헌금 송금. | 이름 입력 확인 + 영향 범위 고지. |
시각 설계
- 삭제 버튼은 danger 변형. Primary와 나란히 두어 실수하지 않게.
- “취소” 버튼은 항상 삭제 왼쪽, 덜 강한 스타일(ghost/secondary).
- 아이콘(
Trash2)을 텍스트와 병기해 ‘삭제’를 빠르게 식별. - 기본 포커스는 취소에. Enter 연타로 파괴가 실행되지 않도록.
게시글 삭제
이 게시글과 하위 댓글 23개가 영구 삭제됩니다. 이 작업은 되돌릴 수 없습니다.
흐름 설계
- 의도 확인 — 버튼 클릭. 즉시 실행하지 않고 다이얼로그/영역 등장.
- 영향 고지 — 무엇이 사라지고 얼마만큼인지 수치로.
- 의도적 마찰 — 확인 버튼 / 이름 입력 / 3초 지연 등.
- 실행 — 서버 요청. 로딩 상태. 성공 시 Toast로 결과 안내.
- 복구 경로 — 가능하다면 Undo 또는 휴지통 링크.
Do· 결과의 수치화
“댓글 3개, 첨부파일 5개가 함께 삭제됩니다” — 구체적 숫자가 사용자 판단을 바꿉니다.
Don't· 모호한 경고
“모든 관련 데이터가 사라질 수 있습니다” 같은 추상적 문구는 아무것도 경고하지 않은 것과 같습니다.
일괄 삭제의 안전장치
- 선택된 개수를 확인 다이얼로그에 표시(“12개 항목 삭제”).
- 1개 삭제와 다수 삭제를 문구로 구분. 복수형이 들어간 문장이 경각심을 줍니다.
- 일괄 삭제는 Undo 시간을 평소보다 길게(15~20초) 잡으세요.
접근성
- 파괴 버튼은 색뿐 아니라 텍스트·아이콘으로도 구분.
- 스크린리더 사용자에게 영향 범위를 명시적으로 알릴 것. 시각 아이콘 외에 본문 텍스트로.
- 확인 다이얼로그의 기본 포커스는 덜 파괴적인 버튼에.