삭제하는 앱이 신뢰를 얻는 법: 미리보기와 되돌리기 UI

파일 하나를 지웠는데 되돌릴 방법이 없으면, 사용자는 그 앱을 다시 신뢰하기 어려워요. 삭제는 단순한 기능이 아니라 신뢰의 문제예요. 프론트엔드에서 이걸 어떻게 화면으로 풀어내는지 정리해 봤어요.

삭제 버튼 하나로는 부족해요

"삭제하시겠습니까?" 확인창 하나만 띄우는 방식은 오래된 습관이에요. 사용자는 무엇이 지워지는지 정확히 모른 채 확인을 누르거든요. 직접 만들어 보니, 확인 문구보다 중요한 건 "무엇이 사라지는지"를 눈으로 보여주는 미리보기였어요.

삭제 대상이 3개라면 그 3개의 이름과 총 용량을 리스트로 먼저 보여줘요. 폴더라면 안에 든 항목 수까지요. 이 미리보기 패널을 붙였더니 잘못 누른 삭제가 눈에 띄게 줄었어요.

삭제 클릭대상 미리보기확인되돌리기 스낵바

되돌리기를 "정말 삭제할까요?" 앞단에만 두면 매번 클릭이 늘어나 피곤해요. 저는 순서를 바꿨어요. 일단 삭제를 실행하고, 화면 아래 스낵바에 "되돌리기" 버튼을 5초 동안 띄워요. 낙관적 UI(optimistic UI) 패턴이에요.

실제로 돌려 보니 흐름이 이래요. 목록에서 항목을 즉시 감추고, 서버 요청은 5초 뒤에 보내요. 그 안에 되돌리기를 누르면 요청 자체를 취소하고 항목을 원래 자리로 되살려요. 스낵바가 사라진 뒤에야 진짜 삭제가 확정돼요.

프론트에서 삭제를 한 번에 처리하려 하면 코드가 꼬여요. 테스트해 보면 상태를 나눌 때 훨씬 깔끔했어요.

화면에서 숨김은 UI에서만 안 보이게 하고 데이터는 아직 남겨둬요. 되돌리기 대기는 타이머가 돌면서 취소가 가능한 구간이에요. 삭제 확정은 서버에 반영되고, 여기서부터는 휴지통 같은 별도 공간으로 넘어가요.

라이프케어로그의 플랜비(plan-b)에서 멤버를 내보낼 때도 이 흐름을 적용해 봤더니, 실수로 뺀 멤버를 스낵바 한 번으로 되살릴 수 있어서 편했어요.

항목이 사라지고 되살아나는 움직임은 짧게 잡아요. 200ms 정도의 fade면 눈이 따라가기 좋아요. 너무 길면 답답하고, 아예 없으면 뭐가 지워졌는지 헷갈려요.

작은 도구를 혼자 운영하면서 배운 건, 삭제 UX의 목표가 "못 지우게 막기"가 아니라 "언제든 되돌아갈 길을 열어두기"라는 점이었어요. 그 안심이 결국 사용자를 다시 앱으로 돌아오게 만들어요.