사용자 화면 · 마이페이지

마이페이지 메인 + 로그아웃 모달

MYP-001 · 2026. 03. 19

화면 이름 마이페이지 메인 + 로그아웃 모달
화면 위치 마이페이지 메인
화면 ID MYP-001
작성일 2026. 03. 19
MYP-001 MYP-001
Description
1 헤더
  • 타이틀 : 마이페이지
  • 우측 아이콘
    • 알림 아이콘
    • 알림 아이콘 클릭 시
      • 알림 목록 화면으로 이동 (화면 ID 써야함)
      • 현재 버전에서는 동작 미확정
      • 추후 채팅 기능 도입 시 메시지 화면으로 연결 예정
  • UX/예외
    • 메시지 기능이 비활성 상태일 경우
      • 아이콘 비노출
2 프로필 영역
  • 구성
    • 프로필 아이콘
    • 닉네임 표시
    • 우측 화살표
    • 형식 : 닉네임#1234
  • 동작
    • 영역 클릭 시 프로필 관리 화면으로 이동 (MYP-002)
    • 닉네임은 최대 N자 초과 시 말줄임 처리 (추후 정리 필요)
    • 프로필 이미지 미설정 시 기본 프로필 이미지 노출
    • 비로그인 상태에서는 로그인 안내 문구 노출
      • 문구 : 차트 로그인 하기
      • 마이페이지 > 프로필 관리 영역 클릭 시
        • 로그인 안내 모달(LOG-008) 노출
3 내 활동 영역
  • 구성
    • 구매 내역
    • 판매 내역
    • 찜한 작품
    • 구매 내역 클릭 시 구매 내역 화면으로 이동 (MYP-003~MY
P-004)
    • 판매 내역 클릭 시 판매 내역 화면으로 이동 (MYP-005~MYP-006)
    • 찜한 작품 클릭 시 찜한 작품 목록 화면으로 이동 (MYP-007)
  • UX
    • 각 아이콘은 동일한 터치 영역 유지
    • 데이터 존재 여부와 관계없이 항상 진입 가능
    • 데이터 없는 경우 각 화면에서 별도 안내 문구 노출
4 설정/정보 리스트 영역
  • 구성
    • 계정 정보, 알림 설정, 공지사항, 1:1문의, 자주 묻는 질문(FAQ), 약관/정책, 버전 정보, 로그아웃
    • 각 항목 클릭 시 대응 화면으로 이동
    • 로그아웃 버튼 클릭 시, ❺ 모달 노출
  • 버전 정보
    • 비클릭 텍스트
    • 형식
      • 최신 버전일 경우 : vX.X.X (최신버전입니다)
      • 최신 버전이 아닐 경우 : vX.X.X (최신버전이 아닙니다)
    • 리스트 항목은 전체 영역 클릭 가능
    • 로그아웃 항목은 하단 배치하여 오동작 방지
5 로그아웃 모달
  • 노출 조건
    • 설정/정보 리스트 영역에서 로그아웃 텍스트 버튼 클릭 시 노출
    • 타이틀 : 로그아웃 안내
    • 안내 문구 : 로그아웃 하시겠어요?
    • 버튼
      • 취소
        • 클릭 시 모달 닫기
        • 마이페이지 유지
        • 클릭 시 로그아웃 처리
        • 사용자 세션 종료
        • 마이페이지 유지
    • 모달 외 영역 터치 닫기 불가
    • 로그아웃 처리 중 중복 클릭 방지
  • 예외 처리
    • 로그아웃 실패 시
      • 모달 유지
      • 토스트 메시지 노출
        • 로그아웃에 실패했어요. 다시 시도해주세요.
6 공통 규칙
  • 마이페이지는 비로그인 상태에서도 접근 가능
    • 단 아래 메뉴는 로그인 이후 이용 가능
      • 프로필 관리, 내 활동, 계정 정보, 1:1문의
    • 로그인 안내 모달(LOG-008) 노출
    • 로그인 완료 후 선택한 메뉴로 재진입
    • 성공 여부는 토스트 메시지로 안내
  • 데이터 없음 상태는 오류가 아닌 정상 상태로 처리
    • 안내 문구만 노출
    • 추가 액션 강제 없음

Design Output

UI 디자인 산출물

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

9:41
마이페이지

닉네임#1234

내 활동

구매 내역
판매 내역
찜한 작품
계정 정보
알림 설정
공지사항
1:1 문의
자주 묻는 질문(FAQ)
약관/정책
버전 정보
v2.X.X (최신버전입니다.)
로그아웃
홈
마켓
PS
MY

로그아웃 안내

로그아웃 하시겠어요?

취소
로그아웃
개발 구현 가이드 — MYP-001 마이페이지 메인 + 로그아웃 모달

Update History

2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.11구현 가이드 추가 (7섹션: 화면구조, 레이어구조, 프로필영역, 내활동, 로그아웃모달, 버튼스타일, 에러처리)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

마이페이지 메인 + 로그아웃 확인 모달로 구성된 전체화면. 하단 탭바(MY 탭 활성)를 포함하며, 비로그인 상태에서도 접근 가능하고 기능 진입 시 로그인을 유도한다. 프로필 영역, 내 활동(구매/판매/찜) 바로가기, 설정/정보 리스트로 구성. 컨테이너 393x852px, 전체 배경 --bg #FAFAF8.

2. 레이어 구조 + 치수

# 영역 높이/위치 세부 스펙
1상태 표시줄47px (statusbar)iOS system status bar
2헤더height:48pxbg:--bg #FAFAF8, padding:0 24px, justify-content:space-between. 좌: "마이페이지" Pretendard(--sans) 17px/700 --charcoal #1A1A1A ls:-0.02em. 우: 알림 bell SVG 17x20 stroke:--charcoal 1.5px square/miter
3프로필 영역padding:20px 24pxflex row, gap:14px, border-bottom:1px rgba(26,26,26,0.06). 아바타 48x48 circle(border-radius:50%) bg:rgba(26,26,26,0.04), user icon 24x24 stroke:--text-muted 1.5px. 닉네임 Pretendard 15px/600 --charcoal ls:-0.01em. 우측 chevron 8x14 stroke:--charcoal 1.5px square/miter
4내 활동padding:20px 24px타이틀 Pretendard 15px/700 --charcoal ls:-0.02em mb:16px. 3열 flex space-around. 각 아이콘 48x48 bg:--charcoal #1A1A1A 직각(R=0), icon 20x20 stroke:#fff 1.5px square. 라벨 Pretendard 12px --charcoal ls:-0.01em, icon-label gap:8px
5섹션 구분선border-top:8pxsolid rgba(26,26,26,0.03)
6설정/정보 리스트flex:1, 스크롤각 항목 padding:14px 24px, flex space-between align-items:center. 텍스트 Pretendard 14px/400 --charcoal ls:-0.01em, border-bottom:1px rgba(26,26,26,0.06). 우측 chevron 8x14 stroke:--text-muted 1.5px square. 버전 정보 값: TASA Orbiter(--mono) 12px --text-muted ls:0.02em. 로그아웃: Pretendard 14px --text-muted text-decoration:underline, 하단 border 없음
7하단 탭바position:absolute bottom:0, height:80pxbg:--bg, border-top:1px rgba(26,26,26,0.06), padding:0 24px, flex space-around. 비활성 아이콘 24x24 stroke:--text-muted 1.5px round/round, 라벨 10px/500 --text-muted ls:-0.01em. MY 활성: stroke:#961E23(--red-brand) 1.8px, 라벨 10px/600 #961E23
8로그아웃 모달 (오버레이)position:absolute 전체 덮음딤: bg:rgba(26,26,26,0.5) flex center. 모달 컨테이너: width:280px bg:--bg #FAFAF8 padding:32px 24px 20px text-align:center 직각(R=0). 타이틀 Pretendard 16px/700 --charcoal ls:-0.02em mb:8px. 본문 14px --text-secondary #555555 ls:-0.005em mb:24px. 버튼 row flex gap:8px. 각 버튼 flex:1 height:44px 14px Pretendard. 취소: border:1px rgba(26,26,26,0.12) --charcoal. 로그아웃: bg:--charcoal #1A1A1A color:#fff 600

3. 핵심 인터랙션

  • 프로필 영역 탭: 전체 영역이 탭 영역 → MYP-002 프로필 관리로 push navigation
  • 내 활동 아이콘 탭: 구매 내역(MYP-003), 판매 내역(MYP-005), 찜한 작품(MYP-007) 각각 push navigation. 탭 가능 영역 최소 48x48px (터치 타겟 확보)
  • 설정 리스트 항목 탭: 각 항목 탭 시 해당 화면으로 push navigation (계정 정보→MYP-008, 알림 설정, 공지사항, 1:1 문의, FAQ, 약관 등)
  • 로그아웃 트리거: "로그아웃" 텍스트 탭 → 로그아웃 확인 모달 오버레이 노출
  • 모달 "취소" 탭: 모달 닫힘, 마이페이지 유지
  • 모달 "로그아웃" 탭: 로그아웃 API 호출 → 세션 종료 → 마이페이지 유지 (비로그인 상태)
  • 딤 영역 탭: 모달 닫힘 (정책에 따라 조정 가능)

4. 상태 변화

  • 로그인 상태: 프로필 아바타 + 닉네임#1234 표시, 모든 내 활동 메뉴 접근 가능
  • 비로그인 상태: 프로필 영역에 "로그인이 필요해요" 안내 문구 표시, 프로필 탭 시 LOG-008 로그인 화면으로 이동. 내 활동 아이콘 탭 시에도 로그인 유도
  • 로그아웃 모달 노출/비노출: 기본 비노출, "로그아웃" 탭 시 딤+모달 노출
  • 설정 리스트 hover/pressed: 네이티브 앱 기본 pressed 피드백 (bg:rgba(26,26,26,0.04))

5. 네비게이션 플로우

  • 진입: 하단 탭바 MY 탭 직접 진입
  • 프로필 → MYP-002 프로필 관리 (push)
  • 구매 내역 → MYP-003 구매 내역 마켓 탭 (push)
  • 판매 내역 → MYP-005 판매 내역 마켓 탭 (push)
  • 찜한 작품 → MYP-007 찜한 작품 (push)
  • 계정 정보 → MYP-008 계정 정보 (push)
  • 비로그인 시 → LOG-008 로그인 화면 (present modal)

6. 에러/예외 처리

  • 로그아웃 성공: 모달 닫힘 → 토스트 "로그아웃되었습니다" → 마이페이지 비로그인 상태로 전환
  • 로그아웃 API 실패: 토스트 "로그아웃에 실패했습니다. 다시 시도해주세요." → 모달 유지
  • 비로그인 상태 메뉴 접근: 기능 제한, 로그인 유도 모달 노출
  • 네트워크 오류: 토스트 "네트워크 상태를 확인해주세요."
  • 데이터 로드 실패: 각 하위 페이지 내 빈 상태 안내 문구 노출

7. 모션 스펙

  • 모달 딤 등장: opacity 0→1, duration 200ms, easing ease-out
  • 모달 컨테이너 등장: opacity 0→1 + scale(0.95→1), duration 250ms, easing cubic-bezier(0.2, 0, 0, 1)
  • 모달 닫힘: opacity 1→0 + scale(1→0.95), duration 150ms, easing ease-in
  • push navigation (하위 화면 이동): translateX(100%→0), duration 350ms, easing --ease-ios-spring
  • 설정 리스트 pressed: bg 변경 즉시(0ms), 해제 시 150ms fade-out

8. 여백 · 간격 요약

항목 값
좌우 콘텐츠 패딩24px
프로필 영역 상하 패딩20px
프로필 아바타-닉네임 gap14px
내 활동 타이틀-아이콘 gap16px (margin-bottom)
내 활동 아이콘-라벨 gap8px (margin: 0 auto 8px)
섹션 구분선border-top 8px rgba(26,26,26,0.03)
설정 리스트 항목 padding14px 24px
리스트 항목 구분선border-bottom 1px rgba(26,26,26,0.06)
모달 컨테이너 padding32px(top) 24px(sides) 20px(bottom)
모달 타이틀-본문 gap8px
모달 본문-버튼 gap24px
모달 버튼 간 gap8px

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 헤더 타이틀: --sans Pretendard 17px/700, --charcoal #1A1A1A, letter-spacing:var(--ls-tight)
  • 프로필 아바타: 48px, border-radius:50%(원형 예외), bg rgba(26,26,26,0.04), stroke --text-muted
  • 닉네임: --sans Pretendard 15px/600, --charcoal #1A1A1A
  • 내 활동 아이콘: 48px 직각(R=0), bg --charcoal #1A1A1A, stroke #fff
  • 설정 리스트 항목: --sans Pretendard 14px/400, --charcoal, padding 14px 24px, border-bottom 1px rgba(26,26,26,0.06)
  • 이동 화살표: chevron-right 8x14, stroke --text-muted 1.5px square/miter
  • 로그아웃 모달 딤: rgba(26,26,26,0.5) CHAART charcoal 기반 반투명
  • 모달 컨테이너: --bg #FAFAF8, 직각(R=0), width 280px, padding 32px 24px 20px
  • 모달 확인 버튼: bg --charcoal #1A1A1A, color #fff, height 44px, font-weight 600
  • 모달 취소 버튼: transparent bg, border rgba(26,26,26,0.12), color --charcoal
  • 탭바 활성(MY): stroke #961E23 --red-brand 1.8px, 라벨 10px/600 #961E23. 비활성: --text-muted
  • 좌우 패딩: 24px 전체 콘텐츠 마진
← 이전 화면: MKT-013 다음 화면: MYP-002 →