사용자 화면 · 마이페이지
마이페이지 메인 + 로그아웃 모달
MYP-001 · 2026. 03. 04
버전 정보
v2.X.X (최신버전입니다.)
로그아웃
1
2
3
4
| 0 |
화면 접근 조건 |
- 하단 내비게이션의 'MY' 탭 클릭 시 진입
- 로그인 사용자만 접근 가능
- 비로그인 상태에서 MY 탭 클릭 시 로그인 안내 모달(LOG-009) 노출
|
| 1 |
헤더 |
- 구성
- 동작
- 알림 아이콘 클릭 시 알림 목록 화면으로 이동 (화면 ID 미정)
- 비활성 상태에서는 뱃지 미노출
- UX/예외
- 해시가 가능이 비활성 상태일 경우 아이콘 비노출
|
| 2 |
프로필 영역 |
- 구성
- 닉네임
- 동작
- 영역 클릭 시 프로필 관리 화면으로 이동 (MYP-002)
- UX
- 닉네임은 최대 N자로 시 말줄임 처리 (우측 공간 확보)
- 프로필 이미지 미설정 시 기본 프로필 아이콘 노출
- 비로그인 상태에서는 로그인 안내 문구 노출
|
| 3 |
내 활동 영역 |
- 구성
- 동작
- 구매 내역 클릭 시 구매 내역 화면으로 이동 (MYP-003~MYP-004)
- 판매 내역 클릭 시 판매 내역 화면으로 이동 (MYP-005~MYP-006)
- 찜한 작품 클릭 시 찜한 작품 목록 화면으로 이동 (MYP-007)
- UX
- 각 아이콘은 활성/비활성 상태 없이 고정 노출
- 하단에 각 항목별 미확인 건수 노출 가능
- 데이터 없는 경우 각 화면에서 빌드 안내 문구 노출
|
| 4 |
설정/정보 리스트 영역 |
- 구성
- 계정 정보, 알림 설정, 공지사항, 1:1문의, 자주 묻는 질문(FAQ), 약관, 버전 정보, 로그아웃
- 동작
- 버전 정보
- 최신 버전일 경우: vX.X.X (최신버전입니다)
- 비활성 텍스트
- 최신 버전이 아닐 경우: vX.X.X (최신버전이 아닙니다)
- UX
- 리스트 항목은 전체 영역에 클릭 가능
- 조건을 만족 하는 배지가에 오렌지색 점 발생
|
| 5 |
로그아웃 모달 |
- 노출 조건
- 설정/정보 리스트 영역에서 로그아웃 텍스트 버튼 클릭 시 노출
- 구성
- 타이틀: 로그아웃 안내
- 안내 문구: 로그아웃 하시겠어요?
- 버튼
- 취소: 클릭 시 모달 닫기 (유지)
- 로그아웃: 클릭 시 로그아웃 처리 후 마이페이지 유지 또는 홈 이동
- 자간 규칙
- 모달 식 영역터치 닫기 불가
- 로그아웃 처리 중 중복 클릭 방지
- 에러 케이스
- 로그아웃 실패 시
- 모달 유지
- 토스트 메시지 노출: "로그아웃에 실패했어요. 다시 시도해주세요."
|
| 6 |
공통 규칙 |
- 마이페이지는 비로그인 상태에서도 접근 가능
- 단 대부분은 로그인 이후 이용 가능
- 프로필 관리, 구매/판매, 찜한 작품, 1:1문의
- 비로그인 상태에서 로그인 필요 메뉴 선택 시
- 로그아웃 시 세션 만료 후 마이페이지 유지/홈 화면이동
- 마이페이지 내 설정 변경 표시 시
- 데이터 없는 상태는 오류가 아닌 정상 상태로 처리
- 안내 문구만의 표시
- 추가 액션 없음
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
버전 정보
v2.X.X (최신버전입니다.)
로그아웃
| 요소 | Token | 값 |
|---|
| 전체 배경 |
--bg |
#FAFAF8 |
| 헤더 타이틀 |
--sans · 17px · 700 |
Pretendard, --charcoal, letter-spacing: -0.02em |
| 프로필 아바타 |
50% radius (원형 예외) |
48px, rgba(26,26,26,0.04) bg, --text-muted stroke |
| 닉네임 |
--sans · 15px · 600 |
Pretendard, --charcoal |
| 내 활동 아이콘 |
--charcoal bg · 48px |
직각 (R=0), #fff stroke |
| 설정 리스트 항목 |
--sans · 14px · 400 |
--charcoal, 14px 패딩, 1px bottom border |
| 이동 화살표 |
chevron-right · square/miter |
--text-muted, 1.5px stroke |
| 로그아웃 모달 딤 |
rgba(26,26,26,0.5) |
CHAART charcoal 기반 반투명 |
| 모달 컨테이너 |
--bg · 직각 (R=0) |
280px 너비, 32px/24px 패딩 |
| 모달 확인 버튼 |
--charcoal bg · #fff |
44px 높이, 600 weight |
| 모달 취소 버튼 |
transparent · border |
rgba(26,26,26,0.12) border, --charcoal text |
| 탭바 활성 |
--charcoal · 600 weight |
비활성: rgba(26,26,26,0.06) bg + --text-muted |
| 좌우 패딩 |
24px |
전체 콘텐츠 마진 |
| 0 |
화면 접근 조건 |
- 하단 내비게이션의 'MY' 탭 클릭 시 진입
- 로그인 사용자만 접근 가능
- 비로그인 상태에서 MY 탭 클릭 시 로그인 안내 모달(LOG-009) 노출
|
| 1 |
헤더 |
- 구성
- 동작
- 알림 아이콘 클릭 시 알림 목록 화면으로 이동 (화면 ID 미정)
- 비활성 상태에서는 뱃지 미노출
- UX/예외
- 해시가 가능이 비활성 상태일 경우 아이콘 비노출
|
| 2 |
프로필 영역 |
- 구성
- 닉네임
- 동작
- 영역 클릭 시 프로필 관리 화면으로 이동 (MYP-002)
- UX
- 닉네임은 최대 N자로 시 말줄임 처리 (우측 공간 확보)
- 프로필 이미지 미설정 시 기본 프로필 아이콘 노출
- 비로그인 상태에서는 로그인 안내 문구 노출
|
| 3 |
내 활동 영역 |
- 구성
- 동작
- 구매 내역 클릭 시 구매 내역 화면으로 이동 (MYP-003~MYP-004)
- 판매 내역 클릭 시 판매 내역 화면으로 이동 (MYP-005~MYP-006)
- 찜한 작품 클릭 시 찜한 작품 목록 화면으로 이동 (MYP-007)
- UX
- 각 아이콘은 활성/비활성 상태 없이 고정 노출
- 하단에 각 항목별 미확인 건수 노출 가능
- 데이터 없는 경우 각 화면에서 빌드 안내 문구 노출
|
| 4 |
설정/정보 리스트 영역 |
- 구성
- 계정 정보, 알림 설정, 공지사항, 1:1문의, 자주 묻는 질문(FAQ), 약관, 버전 정보, 로그아웃
- 동작
- 버전 정보
- 최신 버전일 경우: vX.X.X (최신버전입니다)
- 비활성 텍스트
- 최신 버전이 아닐 경우: vX.X.X (최신버전이 아닙니다)
- UX
- 리스트 항목은 전체 영역에 클릭 가능
- 조건을 만족 하는 배지가에 오렌지색 점 발생
|
| 5 |
로그아웃 모달 |
- 노출 조건
- 설정/정보 리스트 영역에서 로그아웃 텍스트 버튼 클릭 시 노출
- 구성
- 타이틀: 로그아웃 안내
- 안내 문구: 로그아웃 하시겠어요?
- 버튼
- 취소: 클릭 시 모달 닫기 (유지)
- 로그아웃: 클릭 시 로그아웃 처리 후 마이페이지 유지 또는 홈 이동
- 자간 규칙
- 모달 식 영역터치 닫기 불가
- 로그아웃 처리 중 중복 클릭 방지
- 에러 케이스
- 로그아웃 실패 시
- 모달 유지
- 토스트 메시지 노출: "로그아웃에 실패했어요. 다시 시도해주세요."
|
| 6 |
공통 규칙 |
- 마이페이지는 비로그인 상태에서도 접근 가능
- 단 대부분은 로그인 이후 이용 가능
- 프로필 관리, 구매/판매, 찜한 작품, 1:1문의
- 비로그인 상태에서 로그인 필요 메뉴 선택 시
- 로그아웃 시 세션 만료 후 마이페이지 유지/홈 화면이동
- 마이페이지 내 설정 변경 표시 시
- 데이터 없는 상태는 오류가 아닌 정상 상태로 처리
- 안내 문구만의 표시
- 추가 액션 없음
|