사용자 화면 · 마이페이지

회원 탈퇴 플로우

MYP-016 · 2026. 01. 30

화면 이름 회원 탈퇴 플로우
화면 위치 마이페이지 > 회원탈퇴
화면 ID MYP-016
작성일 2026. 01. 30
MYP-016 MYP-016
Description
0 화면 접근 조건
  • 회원탈퇴는 로그인 사용자만 접근 가능
  • 비로그인 상태에서 접근 시
    • 로그인 안내 모달(LOG-008) 노출
    • 로그인 완료 후 해당 문의 상세 화면으로 이동
1 회원탈퇴 사유 선택 화면
  • 구성
    • 뒤로가기 버튼
    • 타이틀 : 회원 탈퇴
    • 탈퇴 사유 선택 리스트
    • 더 이상 사용하지 않아요
    • 내가 찾는 작품이 없어요
    • 알림이 너무 많아요
    • 미술품에 관심이 사라졌어요
    • 기타
  • 동작
    • 탈퇴 사유 선택 시
      • 선택 즉시 다음 단계로 이동
      • 서비스 개선 의견 작성 화면으로 이동
2 회원탈퇴 서비스 개선 의견 작성 화면
  • 구성
    • 뒤로가기 버튼
    • 감사 안내 문구
      • 그동안 차트를 이용해주셔서 감사합니다!
    • 하단 고정 버튼: 탈퇴하기
    • 서비스 개선 의견 입력은 선택 사항
    • 입력하지 않아도 탈퇴 진행 가능
  • 버튼 동작
    • 탈퇴하기 버튼 클릭 시
      • 회원 탈퇴 최종 요청
      • 계정 비활성화 처리
      • 로그아웃 처리
      • 탈퇴 완료 토스트 메시지 노출
      • 초기 진입 화면 또는 홈 화면으로 이동
3 토스트 메시지 정의
  • 탈퇴 완료 시
    • 회원 탈퇴가 완료되었습니다
4 공통 규칙
  • 회원 탈퇴는 2단계 플로우로 진행
    • 사유 선택 → 최종 탈퇴 확정
  • 서비스 개선 의견은 통계/분석 목적이며 필수 입력이 아님
  • 탈퇴 완료 후 기존 계정으로 재접근 불가
  • 본 화면은 마이페이지 공통 규칙(MYP-001)을 따른다

Design Output

UI 디자인 산출물

위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.

9:41
회원 탈퇴

***님 어떤 이유로 탈퇴하시나요?

더 이상 사용하지 않아요
내가 찾는 작품이 없어요
알림이 너무 많아서요
미술품에 관심이 사라졌어요
기타
9:41
회원 탈퇴

그 동안 차트를 이용해주셔서 감사합니다!

(선택) 서비스가 개선될 수 있도록 의견을 남겨주세요.
탈퇴하기
개발 구현 가이드 — MYP-016 회원 탈퇴 플로우

Update History

2026.03.19sb-wireframe-frame 패턴 전환 (MKT 품질 통일), DS v2 연동, 구조 정합성 수정
2026.03.16구현 가이드 최신화 (8섹션 재작성)
2026.03.11탈퇴하기 CTA 레드 그라디언트 적용, 구현 가이드 추가 (7섹션)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

회원 탈퇴 플로우는 2단계로 구성된다. 1단계: 탈퇴 사유 선택 화면 (5개 사유 리스트), 2단계: 감사 메시지 + 피드백 입력 + "탈퇴하기" CTA 화면. 전체 배경: --bg (#FAFAF8). 로그인 사용자만 접근 가능.

2. 레이어 구조 + 치수

Screen 1 — 탈퇴 사유 선택

# 영역 높이/위치 스타일 상세
1상태바44pxiOS 시스템 영역
2네비게이션 바48px뒤로가기(chevron-left 20px, --charcoal #1A1A1A, stroke 1.5, round/round) + "회원 탈퇴" (--sans 17px/700, --charcoal, ls:-0.02em), gap 8px
3질문 영역padding 24px 24px 8px"***님 어떤 이유로 탈퇴하시나요?" --sans 20px/700, --charcoal, ls:-0.03em, line-height 1.4
4사유 리스트5개 행각 행: 텍스트 15px/500 + chevron-right 8x14px, padding 16px 24px, 구분선 rgba(26,26,26,0.06)
5홈 인디케이터34pxiOS 홈 바 영역

Screen 2 — 감사 메시지 + 피드백 + CTA

# 영역 높이/위치 스타일 상세
1상태바44pxiOS 시스템 영역
2네비게이션 바48px뒤로가기 + "회원 탈퇴" (동일 스타일)
3감사 메시지padding 24px 24px 16px"그 동안 차트를 이용해주셔서 감사합니다!" --sans 20px/700, --charcoal, ls:-0.03em, line-height 1.4
4피드백 텍스트에어리어min-height 240pxborder 1px solid rgba(26,26,26,0.12), padding 16px, R=0, placeholder --text-muted 13px
5탈퇴하기 CTAabsolute, bottom 48px, left/right 24pxheight 50px, --cta-gradient, R=0, 텍스트 #fff 15px/600 ls:-0.01em
6홈 인디케이터34pxiOS 홈 바 영역

3. 핵심 인터랙션

  • 사유 선택 (Screen 1): 5개 항목 중 하나 탭 → 즉시 Screen 2로 push 이동. 사유 목록: "더 이상 사용하지 않아요" / "내가 찾는 작품이 없어요" / "알림이 너무 많아서요" / "미술품에 관심이 사라졌어요" / "기타"
  • 사유 항목 스타일: flexbox space-between, 텍스트 --sans 15px/500 --charcoal ls:-0.01em + chevron-right SVG 8x14px --text-muted (#888888) stroke 1.5 round/round, padding 16px 24px, border-bottom rgba(26,26,26,0.06)
  • 피드백 입력 (Screen 2): 선택 사항, 입력 없이도 탈퇴 가능. placeholder "(선택) 서비스가 개선될 수 있도록 의견을 남겨주세요." --sans 13px --text-muted (#888888) ls:-0.005em
  • CTA "탈퇴하기": height 50px, background --cta-gradient (linear-gradient 135deg #961E23 → #B22A30 → #961E23), border-radius 0 (직각), 텍스트 #fff 15px/600 ls:-0.01em, position absolute bottom 48px left/right 24px

4. 상태 변화

  • Screen 1 → Screen 2: 사유 항목 탭 시 즉시 전환, 선택한 사유 값 저장
  • "탈퇴하기" 클릭 → 최종 확인: 확인 모달 표시 ("정말 탈퇴하시겠습니까?")
  • 확인 → 탈퇴 처리: 탈퇴 API 호출 → 계정 비활성화 → 로그아웃 → 탈퇴 완료 토스트 "회원 탈퇴가 완료되었습니다" → LOG-001(로그인 화면) 이동
  • 취소: 모달 닫힘, Screen 2 유지

5. 네비게이션 플로우

  • MYP-014(약관/정책) > "회원 탈퇴" 항목 클릭으로 진입
  • Screen 1 뒤로가기 → MYP-014(약관/정책 목록)으로 이동
  • Screen 2 뒤로가기 → Screen 1(사유 선택)으로 복귀
  • 탈퇴 완료 → 세션 완전 소멸, LOG-001(로그인 화면) 이동
  • 로그인 사용자만 접근 가능, 비로그인 시 로그인 안내 모달(LOG-009) 노출

6. 에러/예외 처리

  • 탈퇴 API 실패 → 에러 토스트 "탈퇴 처리 중 오류가 발생했습니다", Screen 2 유지
  • 네트워크 오류 → 재시도 안내 토스트, 탈퇴 화면 유지
  • 비로그인 상태 진입 시도 → 로그인 화면으로 리디렉션
  • 피드백 미입력 → 정상 처리 (선택 사항)

7. 모션 스펙

  • Screen 1 → Screen 2: iOS push navigation (translateX 100%→0, 300ms ease)
  • 확인 모달: opacity 0→1 + scale 0.95→1, 200ms ease-out, overlay rgba(0,0,0,0.4)
  • 토스트 등장: translateY(100%)→0, 300ms ease-out, 2.5초 후 자동 dismiss
  • CTA 터치: scale 0.97, 100ms ease-out

8. 여백 · 간격 요약

  • 전체 좌우 패딩: 24px
  • 질문/감사 메시지 영역: padding 24px 24px 8px (질문) / 24px 24px 16px (감사)
  • 사유 항목 패딩: 16px 24px
  • 텍스트에어리어 래퍼: padding 0 24px, 내부 padding 16px
  • CTA 위치: absolute, bottom 48px, left/right 24px (홈 인디케이터 34px + 여백 14px)
  • 헤더 내부 gap: 8px
  • chevron-right 아이콘: 8x14px, 뒤로가기 아이콘: 20x20px

9. 적용 디자인 토큰

  • [색상]
  • --charcoal: #1A1A1A
  • --text-muted: #888888
  • [타이포그래피]
  • --sans: Pretendard Variable
← 이전 화면: MYP-015 다음 화면: PRS-001 →