본문으로 건너뛰기
Dot Design System
v0.3.1

확인 문구

중요한 선택의 대상, 영향과 선택권을 투명하게 설명합니다.

목표

확인은 사용자의 결정을 존중하면서 작업 손실과 운영 영향을 막는다. 매번 한 번 더 묻는 것이 아니라 위험과 되돌릴 수 있는지에 맞는 만큼만 사용한다.

확인이 필요한 경우

  • 영구 삭제 또는 복구 비용이 큰 행동
  • 다른 사용자, 공개 상태, 결제, 외부 발송에 영향
  • 미저장 작업을 잃는 이동
  • 대량 대상에 대한 변경
  • 사용자가 예상하기 어려운 결과가 즉시 발생

확인이 필요하지 않은 경우

  • 즉시 되돌릴 수 있고 undo를 제공할 수 있음
  • 같은 내용을 바로 앞 단계에서 명시적으로 선택함
  • 영향이 작고 사용자의 의도가 분명함
  • 단순 성공 사실을 알려주기만 함
  • 저장·새로고침 같은 일상 행동

불필요한 확인은 중요한 확인까지 습관적으로 넘기게 한다.

확인의 구조

제목

  • 대상과 결정을 질문한다.
  • 정말 진행할까요?처럼 맥락 없는 질문을 피한다.

설명

다음 순서로 쓴다.

  1. 즉시 바뀌는 것
  2. 다른 사람이나 자동화에 미치는 영향
  3. 유지되는 것
  4. 되돌릴 수 있는지

취소 행동

  • 현재 상태를 유지하는 결과를 말한다.
  • 단순히 dialog를 닫는다면 계속 편집, 돌아가기가 취소보다 명확할 수 있다.

확인 행동

  • 대상과 실제 결과를 말한다.
  • 파괴 행동이면 destructive tone을 사용한다.

예시

미저장 이탈

사용 코드 · Text
제목: 저장하지 않고 나갈까요?
설명: 이 화면에서 바꾼 질문 3개가 사라져요. 이전에 저장한 초안은 유지돼요.
취소: 편집 계속
확인: 변경 없이 나가기

연결 해제

사용 코드 · Text
제목: 워크스페이스 연결을 해제할까요?
설명: 자동 동기화가 중단돼요. 지금까지 저장한 실행 기록은 유지돼요.
취소: 연결 유지
확인: 연결 해제

영구 삭제

사용 코드 · Text
제목: 선택한 커리큘럼 3개를 삭제할까요?
설명: 예약 발송이 중단되고 목록에서 사라져요. 삭제한 항목은 복구할 수 없어요.
취소: 삭제하지 않기
확인: 커리큘럼 3개 삭제

위험도에 맞는 마찰

  • 낮은 위험: 직접 실행 + undo
  • 중간 위험: ConfirmActionDialog
  • 높은 위험: 영향 검토 route, 재인증, 명시적 확인
  • 문자열 재입력은 대상 오인 가능성이 크고 다른 안전장치로 부족할 때만 사용한다.
  • 긴 문구를 읽게 하는 것 자체를 안전장치로 간주하지 않는다.

Pending과 결과

  • 처리 중에는 원래 동사를 유지한다: 삭제 중…, 연결 해제 중….
  • pending 동안 취소·확인 button을 비활성화하고 dialog가 닫히지 않게 한다.
  • 성공한 뒤에만 dialog를 닫는다.
  • 실패하면 사용자가 읽은 대상과 설명을 유지한 채 복구 행동을 제공한다.
  • 요청 접수와 실제 비동기 완료를 구분한다.

Bulk 확인

  • 선택 개수와 적용 범위를 title 또는 confirm label에 포함한다.
  • 숨겨진 page 전체가 선택되었는지 현재 화면만 선택되었는지 말한다.
  • 일부 대상에 다른 영향이 있으면 요약과 상세 확인 경로를 제공한다.
  • 부분 실패 결과를 준비한다.
  • 수백 개 대상을 작은 dialog 안에 모두 나열하지 않는다.

접근성

  • title과 description이 dialog와 연결되어야 한다.
  • 위험은 색상이나 icon만이 아니라 문장으로 전달한다.
  • dialog가 열리면 focus가 내부로 이동하고 닫히면 안전한 trigger로 돌아간다.
  • trigger가 삭제되면 목록 heading이나 다음 record처럼 남아 있는 요소로 focus를 보낸다.
  • confirmAriaDescribedBy로 추가 경고를 확인 button에 연결할 수 있다.
  • keyboard 반복 입력으로 중복 실행되지 않게 한다.

컴포넌트 예제

사용 코드 · TSX
<ConfirmActionDialog
  open={open}
  title="저장하지 않고 나갈까요?"
  description="이 화면에서 바꾼 질문 3개가 사라져요. 이전에 저장한 초안은 유지돼요."
  cancelLabel="편집 계속"
  confirmLabel="변경 없이 나가기"
  returnFocusRef={backButtonRef}
  onOpenChange={setOpen}
  onConfirm={leaveWithoutSaving}
/>

피해야 할 사용

  • 모든 행동에 습관적으로 확인 추가
  • 성공 알림을 확인 dialog로 표시
  • 정말, 확인, 예/아니요만으로 대상과 결과 생략
  • 파괴가 아닌 행동에 destructive tone 사용
  • 긴 정책 전문을 작은 dialog에 넣음
  • pending 중 dialog 닫기와 중복 실행 허용
  • 실패했는데 dialog를 닫아 맥락 손실
  • 취소가 무엇을 유지하는지 알 수 없는 레이블

검토 체크

  • 확인 대신 undo나 더 안전한 기본값을 쓸 수 없는지 검토했다.
  • 위험도와 되돌릴 수 있는지에 맞는 마찰을 선택했다.
  • title에 대상과 결정이 있다.
  • 설명에 영향, 유지되는 것, 복구 가능성이 있다.
  • 취소와 확인 레이블만 읽어도 결과를 예측할 수 있다.
  • bulk action의 개수와 범위가 명확하다.
  • pending 동안 중복 실행과 닫기를 막는다.
  • 성공 후에만 닫고 실패 시 맥락을 유지한다.
  • 닫힌 뒤 focus가 안전한 위치로 돌아간다.

관련 항목