사용자 화면 · 마이페이지

약관/정책

MYP-014 · 2026. 03. 20

화면 이름 약관/정책
화면 위치 마이페이지 > 약관/정책
화면 ID MYP-014
작성일 2026. 03. 20
MYP-014
Description
0 화면 접근 조건
  • 약관/정책은 로그인/비로그인 사용자 모두 접근 가능
1 약관/정책 헤더
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 약관/정책
    • 뒤로가기 버튼 클릭 시
      • 마이페이지 메인 화면(MYP-001)으로 이동
2 약관/정책 리스트
  • 구성
    • 개인정보 처리방침 / 서비스 이용약관 / 마케팅 정보 수신 동의 / 개인정보 수집∙이용 동의 / 거래 특약 / 회원탈퇴
    • 리스트 형태
    • 우측 화살표 아이콘 노출
  • 항목별 동작 정의
    • 개인정보 처리 방침
      • 클릭 시
        • 개인정보 처리방침 상세 화면으로 이동 (약관 상세 화면)
      • 클릭 시
        • 서비스 이용약관 상세 화면으로 이동 (약관 상세 화면)
      • 클릭 시
        • 마케팅 정보 수신 동의 상세 화면으로 이동 (약관 상세 화면)
      • 클릭 시
        • 개인정보 수집∙이용 동의 상세 화면으로 이동 (약관 상세 화면)
      • 클릭 시
        • 거래 특약 상세 화면으로 이동 (약관 상세 화면)
      • 클릭 시
        • 회원 탈퇴 안내 화면 이동
        • 로그인 사용자만 실제 탈퇴 진행 가능
3 공통 규칙
  • 약관/정책 콘텐츠는 관리자에 의해 관리되는 정적 콘텐츠
  • 사용자는 약관/정책 내용을 수정할 수 없음
  • 약관 상세 화면은 스크롤 기반 전체 문서 형태로 노출
  • 회원 탈퇴는 약관 화면 내 진입 경로일 뿐, 제 탈퇴 처리 로직은 별도 플로우를 따름
  • 본 화면은 마이페이지 공통 규칙(MYP-001)을 따른다

Design Output

UI 디자인 산출물

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

9:41
약관/정책
개인정보 처리방침
서비스 이용약관
마케팅 수신 동의
개인정보 제공 동의
거래 약관
회원 탈퇴
개발 구현 가이드 — MYP-014 약관/정책

Update History

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

Implementation Specification

1. 화면 구조 개요

약관/정책 화면은 6개 약관 항목을 세로 리스트로 나열하는 단일 메뉴 화면이다. 각 항목 클릭 시 해당 약관 상세 화면(MYP-015) 또는 회원 탈퇴 플로우(MYP-016)로 이동한다. 별도 CTA 버튼이나 고정 하단 바, 탭바 없이 정적 메뉴 구조. 전체 배경: --bg (#FAFAF8).

2. 레이어 구조 + 치수

# 영역 높이/위치 스타일 상세
1상태바44pxiOS 시스템 영역
2네비게이션 바48px뒤로가기(chevron-left 20px, --charcoal #1A1A1A, stroke 1.5, round/round) + 타이틀 "약관/정책" (--sans Pretendard 17px/700, --charcoal, ls:-0.02em), gap 8px
3약관 항목 리스트flex: 16개 메뉴 행, 각 행 = 약관명 + chevron-right

3. 핵심 인터랙션 — 리스트 메뉴 항목

  • 레이아웃: flexbox, justify-content: space-between, align-items: center
  • 좌측 텍스트: --sans Pretendard 15px/500, --charcoal (#1A1A1A), ls:-0.01em
  • 우측 아이콘: chevron-right SVG 8x14px, viewBox "0 0 8 14", stroke --text-muted (#888888) 1.5px, round/round
  • 패딩: 16px 24px (상하 좌우)
  • 구분선: 각 항목 하단 border-bottom 1px solid rgba(26,26,26,0.06)
  • 터치 영역: 전체 행 터치 가능, 최소 높이 44px 이상 확보

4. 상태 변화

  • 기본 상태: 6개 항목 정적 표시 (개인정보 처리방침 / 서비스 이용약관 / 마케팅 수신 동의 / 개인정보 제공 동의 / 거래 약관 / 회원 탈퇴)
  • 항목 탭: 해당 약관 상세 화면(MYP-015)으로 push 이동, 약관 종류 파라미터 전달
  • 회원 탈퇴 항목: 클릭 시 MYP-016(회원 탈퇴 플로우)으로 이동. 로그인 사용자만 실제 탈퇴 진행 가능
  • 콘텐츠 특성: 관리자 관리 정적 콘텐츠, 사용자 수정 불가

5. 네비게이션 플로우

  • 뒤로가기 클릭 → MYP-001(마이페이지 메인)으로 이동
  • 약관 항목 클릭 → MYP-015(약관 상세), 약관 종류 파라미터 전달
  • 회원 탈퇴 클릭 → MYP-016(회원 탈퇴 플로우)
  • 로그인/비로그인 모두 접근 가능

6. 에러/예외 처리

  • 약관 항목 로드 실패 → 에러 메시지 + 재시도 버튼
  • MYP-015 이동 실패 → 에러 토스트 표시, 현재 화면 유지

7. 모션 스펙

  • 화면 전환: iOS 표준 push navigation (translateX 100%→0, 300ms ease)
  • 행 터치 피드백: 0.97 scale, 100ms ease-out (선택적)

8. 여백 · 간격 요약

  • 전체 좌우 패딩: 24px
  • 각 메뉴 행 패딩: 16px 24px (상하 좌우)
  • 헤더 내부 gap: 8px (아이콘-타이틀 간)
  • chevron-right 아이콘 크기: 8x14px
  • 뒤로가기 아이콘 크기: 20x20px

9. 적용 디자인 토큰

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