사용자 화면 · 마이페이지

알림 설정

MYP-009 · 2026. 01. 30

화면 이름 알림 설정
화면 위치 마이페이지 > 알림 설정
화면 ID MYP-009
작성일 2026. 01. 30
MYP-009
Description
0 화면 접근 조건
  • 알림 설정은 로그인/비로그인 사용자 전체 접근 가능
1 헤더 영역
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 알림 설정
    • 뒤로가기 버튼 클릭 시
      • 마이페이지(메인(MYP-001)으로 이동
2 앱 푸쉬 알림 세부 설정
  • 공통 규칙
    • 기기(OS) 알림이 OFF 상태인 경우
      • 모든 알림 토글 비활성화 상태로 노출
      • 알림 활성화를 위해 기기 알림 설정 필요
    • 시스템 알림 안내 모달 노출
    • 기기 설정에서 알림을 켜주세요
    • 확인 시, 기기 설정-알림 화면 호출
    • 기기 알림 ON 상태
      • 앱 푸쉬 알림 받기 토글 활성화 가능
      • 상세 알림 항목 개별 설정 가능
        • 마케팅, 광고성 정보 알림 / 시스템 알림 / 거래 알림 / 찜한 작품 상태 변경 알림
      • 앱 푸쉬 알림 받기 토글 활성화 가능
      • 제한 알림 항목
        • 거래 알림 수신 동의
        • 찜한 작품 상태 변경 수신 동의
    • 초기 상태
      • 회원가입 시 마케팅 수신 동의 미체크 사용자는 OFF 상태로 노출
      • 마케팅 수신 동의 처리
      • 서버 사용자 정보의 마케팅 수신 동의 값 함께 업데이트
    • 토글 OFF 시
      • 마케팅 수신 동의 철회
      • 서버 사용자 정보에 즉시 반영
3 토스트 메시지 정의
  • 알림 설정 변경 완료 시
    • 알림 설정이 변경되었습니다
    • 마케팅 정보 수신에 동의하였습니다
    • 마케팅 정보 수신이 해제되었습니다
  • 로그인 필요 알림 클릭 시
    • 로그인 후 설정할 수 있어요
4 공통 규칙
  • 기기(OS) 알림 OFF 상태
    • 앱 내 알림 설정만으로는 알림 수신 불가
  • 모든 알림 설정 변경 사항
    • 즉시 서버에 반영
    • 앱 재실행 시에도 유지됨

Design Output

UI 디자인 산출물

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

9:41
알림 설정
MYP-009
앱 푸쉬 알림 받기
마케팅, 광고성 정보 알림 수신 동의
시스템 알림 수신 동의
거래 알림 수신 동의
찜한 작품 상태 변경 수신 동의
개발 구현 가이드 — MYP-009 알림 설정

Update History

2026.03.19sb-wireframe-frame 패턴 전환 (MKT 품질 통일), DS v2 연동, 구조 정합성 수정
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.16구현 가이드 최신화 (8섹션 재작성: 화면구조개요, 레이어구조+치수, 핵심인터랙션, 상태변화, 네비게이션플로우, 에러/예외처리, 모션스펙, 여백간격요약)
2026.03.11구현 가이드 추가 (7섹션: 화면구조, 레이어구조, 토글항목, 토글상태, 히어로, 에러처리, 예외처리)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

  • 단일 전체 화면 뷰 — 알림 설정 토글 리스트
  • 구성: 상태바(44px) → 네비게이션 바(48px) → Paper-Catalog Hero → 토글 리스트(5개 항목) → 홈 인디케이터(34px)
  • 전체 배경: --bg (#FAFAF8)
  • 로그인/비로그인 사용자 전체 접근 가능

2. 레이어 구조 + 치수

#영역높이/위치배경/스타일
1상태바44pxiOS 시스템 상태바
2네비게이션 바48px--bg (#FAFAF8), 좌우 패딩 24px, gap 12px
3Paper-Catalog Heroauto (sb-dp-hero 클래스)--paper (#F0EDE6) + linen 텍스처, CHRT 모노그램(60x70), 레드 악센트 바
4토글 리스트flex:1 (나머지 영역)5개 항목, 각 항목 padding 16px 24px, border-bottom 1px solid rgba(26,26,26,0.06)
5홈 인디케이터34pxiOS 홈 바 영역
  • 네비게이션 바 구성: 뒤로가기 아이콘(chevron-left, 20x20px, --charcoal #1A1A1A stroke, 1.5px, round/round) + 타이틀 "알림 설정"(--sans Pretendard 17px/700, --charcoal #1A1A1A, letter-spacing:var(--ls-tight))
  • 토글 항목 텍스트: --sans Pretendard 15px/500, --charcoal #1A1A1A, letter-spacing:var(--ls-normal)
  • 토글 트랙: 44x24px, border-radius: 0 (직각, CHAART 브랜드 원칙)
  • 토글 핸들: 20x20px, #FFFFFF, border-radius: 0, position:absolute top:2px
  • 토글 ON 상태: 배경 --charcoal (#1A1A1A), 핸들 right:2px
  • 토글 OFF 상태: 배경 rgba(26,26,26,0.12), 핸들 left:2px

3. 핵심 인터랙션

  • 토글 탭: 각 토글 항목 탭 시 ON/OFF 상태 전환, 즉시 서버 API 저장 + 로컬 상태 동시 업데이트
  • 마스터 토글 (앱 푸쉬 알림 받기): OFF 전환 시 하위 4개 토글 모두 비활성화, ON 전환 시 하위 토글 개별 설정 가능
  • 마케팅 수신 동의 토글: ON 시 서버 사용자 정보에 마케팅 수신 동의 값 동시 업데이트, OFF 시 마케팅 수신 철회 즉시 반영
  • 뒤로가기 버튼: 마이페이지 메인(MYP-001)으로 이동

4. 상태 변화

  • 토글 ON→OFF: 배경 --charcoal → rgba(26,26,26,0.12), 핸들 right:2px → left:2px
  • 토글 OFF→ON: 배경 rgba(26,26,26,0.12) → --charcoal, 핸들 left:2px → right:2px
  • 기기(iOS) 알림 OFF 상태: 모든 토글 비활성 상태(disabled), 토글 탭 시 시스템 알림 안내 팝업 노출 → 기기 설정 앱으로 이동 버튼 제공
  • 비로그인 사용자: 앱 주요 알림 받기 토글만 활성화 가능, 거래 알림/찜한 작품 상태 변경은 로그인 시에만 활성화
  • 저장 실패 시: 토글 롤백(원래 상태로 복원) + 에러 토스트

5. 네비게이션 플로우

  • 진입: 마이페이지 메인(MYP-001) → 알림 설정(MYP-009)
  • 뒤로가기: MYP-001로 이동
  • 기기 설정 이동: 기기 알림 OFF 상태에서 토글 ON 시도 → 시스템 팝업 → 기기 설정 앱으로 딥링크

6. 에러 / 예외 처리

  • 네트워크 오류: 토스트 "알림 설정 변경에 실패했습니다" + 토글 롤백
  • 마케팅 ON: 토스트 "마케팅 알림 수신이 동의되었습니다"
  • 마케팅 OFF: 토스트 "마케팅 정보 수신이 해제되었습니다"
  • 로그인 필요 시: 토스트 "로그인이 필요합니다"
  • OS 알림 권한 미허용: 시스템 설정 유도 토스트, 기기 설정으로 이동 버튼 제공

7. 모션 스펙

  • 토글 전환: 핸들 이동 200ms ease-out, 배경색 전환 200ms ease-out
  • 토스트: 하단에서 fadeIn 300ms, 2.5초 후 자동 dismiss fadeOut 300ms
  • 화면 전환: 뒤로가기 시 iOS 기본 pop transition (right-to-left slide, 350ms)

8. 여백 · 간격 요약

요소값
콘텐츠 좌우 패딩24px
네비바 gap (아이콘↔타이틀)12px
토글 항목 상하 패딩16px
항목 간 구분선1px solid rgba(26,26,26,0.06)
토글 트랙 크기44x24px
토글 핸들 크기20x20px, 내부 여백 2px
홈 인디케이터하단 34px

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 헤더 뒤로가기: chevron-left · round/round → --charcoal, 20px, 1.5px stroke
  • 헤더 타이틀: --sans · 17px · 700 → Pretendard, --charcoal, ls: -0.02em
  • 토글 항목 텍스트: --sans · 15px · 500 → Pretendard, --charcoal, ls: -0.01em
  • 토글 ON 배경: --charcoal → #1A1A1A, 직각 (R=0)
  • 토글 OFF 배경: rgba(26,26,26,0.12) → 비활성 상태, 직각 (R=0)
  • 토글 핸들: #fff · 20x20 → 직각 핸들, ON=right / OFF=left
  • 토글 트랙 사이즈: 44x24px → 터치 타겟 44px 확보
  • 리스트 구분선: rgba(26,26,26,0.06) → 1px solid, 항목 간 분리
  • 좌우 패딩: 24px → 전체 콘텐츠 마진
  • 항목 상하 패딩: 16px → 각 토글 행의 상하 여백
  • Paper-Catalog Hero: --paper + linen → CHRT 모노그램 각인, 레드 악센트 바
← 이전 화면: MYP-008 다음 화면: MYP-010 →