사용자 화면 · 마이페이지

약관/정책 상세 화면s

MYP-015 · 2026. 03. 20

화면 이름 약관/정책 상세 화면s

화면 위치 마이페이지 > 약관/정책 > 각종 정책 상세 화면

화면 ID MYP-015

작성일 2026. 03. 20

Description

0	화면 접근 조건	약관/정책은 로그인/비로그인 사용자 모두 접근 가능
1	개인정보 처리방침 상세 화면	구성 뒤로가기 버튼 타이틀: 개인정보 처리방침 정책 본문 텍스트 영역 뒤로가기 버튼 클릭 시 약관/정책 목록 화면(MYP-014)으로 이동 관리자에서 등록한 개인정보 처리방침 전문 노출 스크롤 기반 전체 문서 형태
2	서비스 이용약관 상세 화면	구성 뒤로가기 버튼 타이틀: 서비스 이용약관 정책 본문 텍스트 영역 뒤로가기 버튼 클릭 시 약관/정책 목록 화면(MYP-014)으로 이동 관리자에서 등록한 서비스 이용약관 전문 노출 스크롤 기반 전체 문서 형태
3	마케팅 정보 수신 동의 상세 화면	구성 뒤로가기 버튼 타이틀: 마케팅 정보 수신 동의 정책 본문 텍스트 영역 뒤로가기 버튼 클릭 시 약관/정책 목록 화면(MYP-014)으로 이동 관리자에서 등록한 마케팅 정보 수신 동의 전문 노출 실제 수신 동의 여부 변경 알림 설정 화면(MYP-009) 회원가입/계정 설정 플로우에서 처리
4	공통 규칙	본 화면은 약관/정책 상세 공통 템플릿 화면 정책 종류에 따라 타이틀 및 본문 콘텐츠만 변경 사용자는 본문 내용을 수정할 수 없음 정책 콘텐츠는 관리자에 의해 관리 “개인정보 수집∙이용 동의”와 “거래 특약"도 “개인정보 처리방침", “서비스 이용약관", “마케팅 정보 수신 동의"와 같은 형식으로 화면 및 동작, 콘텐츠 구성 모든 정책 상세 화면은 스크롤 방식으로 전체 노출 본 화면은 마이페이지 공통 규칙(MYP-001)을 따른다

Design Output

UI 디자인 산출물

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

9:41

개인정보 처리방침

개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 처리방침 내용입니다. 개인정보 저리방침 내용입니다.

9:41

서비스 이용약관

서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다. 서비스 이용약관 내용입니다.

9:41

마케팅 수신 동의

마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다. 마케팅 수신 동의 내용입니다.

개발 구현 가이드 — MYP-015 약관/정책 상세

Update History

2026.03.19sb-wireframe-frame 패턴 전환 (MKT 품질 통일), DS v2 연동, 구조 정합성 수정

2026.03.16구현 가이드 최신화 (8섹션 재작성)

2026.03.11구현 가이드 추가 (7섹션)

2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

약관/정책 상세 화면은 3개 약관(개인정보 처리방침, 서비스 이용약관, 마케팅 수신 동의)을 동일한 화면 구조로 보여주는 스크롤 뷰이다. 헤더(뒤로가기 + 약관명)와 본문 텍스트 영역으로 구성되며, 약관 종류에 따라 타이틀과 콘텐츠만 교체된다. 별도 CTA 버튼이나 고정 하단 바 없음. 전체 배경: --bg (#FAFAF8). 하단 홈 인디케이터 포함.

2. 레이어 구조 + 치수

#	영역	높이/위치	스타일 상세
1	상태바	44px	iOS 시스템 영역
2	네비게이션 바	48px	뒤로가기(chevron-left 20px, `--charcoal` #1A1A1A, stroke 1.5, round/round) + 약관명 타이틀 (`--sans` Pretendard 17px/700, `--charcoal`, ls:-0.02em), gap 8px
3	본문 스크롤 영역	flex: 1, overflow-y: scroll	약관 전문 텍스트, padding 16px 24px
4	홈 인디케이터	34px	iOS 홈 바 영역

3. 핵심 인터랙션 — 본문 영역

본문 텍스트: --sans Pretendard 13px/400, --text-secondary (#555555), line-height 1.8, ls:-0.005em
조항 제목 (선택): --sans 15px/600, --charcoal (#1A1A1A), margin-bottom 8px
버전/날짜 표기 (선택): --mono TASA Orbiter 11px, --text-muted (#888888), 본문 최하단
본문 패딩: 상하 16px, 좌우 24px
스크롤: 본문 영역 overflow-y: scroll, 전문 텍스트 자연 스크롤
사용자 입력 불가: 정적 콘텐츠, 읽기 전용

4. 상태 변화 — 약관 종류별 분기

개인정보 처리방침: 헤더 타이틀 "개인정보 처리방침", 해당 전문 콘텐츠
서비스 이용약관: 헤더 타이틀 "서비스 이용약관", 해당 전문 콘텐츠
마케팅 수신 동의: 헤더 타이틀 "마케팅 수신 동의", 해당 전문 콘텐츠 + 수신 동의 철회 방법 포함
MYP-014에서 약관 종류 파라미터를 전달받아 타이틀 + 콘텐츠 동적 변경
동일 화면 구조, 콘텐츠만 교체하는 패턴

5. 네비게이션 플로우

뒤로가기 클릭 → 이전 화면(MYP-014 또는 LOG-002)으로 복귀
복귀 시 이전 화면 상태 완전 보존 (스크롤 위치, 체크박스 상태 등)
로그인/비로그인 모두 접근 가능
MYP-014(약관/정책 목록) 또는 LOG-002(회원가입 약관 동의 플로우)에서 진입

6. 에러/예외 처리

약관 콘텐츠 로드 실패 → 에러 메시지 + 재시도 버튼
알 수 없는 약관 타입 파라미터 → 이전 화면으로 자동 복귀 + 에러 토스트

7. 모션 스펙

화면 진입: iOS 표준 push navigation (translateX 100%→0, 300ms ease)
뒤로가기: iOS 표준 pop (translateX 0→100%, 300ms ease)
스크롤: 네이티브 iOS elastic scroll (bounce effect)

8. 여백 · 간격 요약

본문 영역 패딩: 16px 24px (상하 좌우)
헤더 내부 gap: 8px (아이콘-타이틀 간)
뒤로가기 아이콘 크기: 20x20px, viewBox 0 0 24 24
홈 인디케이터 높이: 34px

9. 적용 디자인 토큰

[색상]
--charcoal: #1A1A1A
--text-secondary: #555555
[타이포그래피]
--sans: Pretendard Variable

← 이전 화면: MYP-014 다음 화면: MYP-016 →