사용자 화면 · 마이페이지

계정 정보

MYP-008 · 2026. 01. 30

화면 이름 계정 정보
화면 위치 마이페이지 > 계정 정보
화면 ID MYP-008
작성일 2026. 01. 30
MYP-008 MYP-008
Description
0 화면 접근 조건
  • 계정 정보는 로그인 사용자만 접근 가능
  • 비로그인 상태에서
    • 마이페이지 > 계정 정보 선택 시
      • 로그인 안내 모달(LOG-008) 노출
      • 로그인 완료 후 구매 내역 화면으로 이동
1-1 헤더 영역
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 계정 정보
    • 뒤로가기 버튼 클릭 시
      • 마이페이지(메인(MYP-001)으로 이동
1-2 내 계정 정보 (소셜로그인)
  • 노출 정보
    • 소셜 로그인 유형 표시
    • 계정 식별 아이디(이메일 또는 내부 식별값) 표시
    • 소셜 로그인 설정하기 버튼 미노출
    • 비밀번호 재설정 버튼 미노출
  • 설명
    • 이미 소셜 로그인으로 인증이 완료된 계정으로 추가적인 소셜 연동 또는 비밀번호 설정이 필요하지 않은 상태
2 내 계정 정보 (아이디 로그인)
  • 노출 조건
    • 이메일(아이디)로 가입 및 로그인한 사용자
    • 아이디(이메일 주소) 표시
  • 추가 기능
    • 소셜 로그인 설정하기 텍스트 버튼 노출
      • 계정 머지(연동)을 위한 기능
      • 클릭 시 소셜 로그인 인증 플로우 진행
      • 클릭 시 비밀번호 재설정 바텀시트(LOG-006) 노출
7 토스트 메시지 정의
  • 소셜 로그인 머지(연동) 완료 시 토스트 메시지
    • 소셜 계정이 연결됐습니다
8 공통 규칙
  • 본 화면은 로그인 사용자만 접근 가능
    • 비로그인 상태에서 접근 시 로그인 안내 모달(LOG-008) 노출
    • 로그인 완료 후 본 화면으로 이동
    • 소셜 로그인 사용자: 1-2 영역 기준
    • 이메일 로그인 사용자: 2 영역 기준
  • 보안/인증 관련 주요 오류 발생 시
    • 시스템 정책에 따라 로그인 진입 화면(LOG-001)으로 이동

Design Output

UI 디자인 산출물

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

9:41
계정 정보

내 계정

소셜로그인 카카오톡
아이디 BetterSleep@Growth.com
9:41
계정 정보

내 계정

소셜로그인 소셜 로그인 설정하기
아이디 BetterSleep@Growth.com
비밀번호 재설정
개발 구현 가이드 — MYP-008 계정 정보

Update History

2026.03.19sb-wireframe-frame 패턴 전환 (MKT 품질 통일), DS v2 연동, 구조 정합성 수정
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.11구현 가이드 추가 (7섹션: 화면구조, 레이어구조, 헤더프로필, 설정항목, 네비게이션, 에러처리, 예외처리)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

  • 화면 ID: MYP-008, 계정 정보
  • 뷰포트: 393 x 500px (컴팩트 높이), 전체 배경 --bg #FAFAF8
  • 수직 구조: 상태바(44px) → 네비바(48px) → 레드 악센트 라인(1px) → 내 계정 섹션(auto) → 홈 인디케이터
  • 2개 변형: (1) 소셜 로그인 사용자 — 연동 정보만 표시, (2) 이메일 로그인 사용자 — 소셜 로그인 설정하기 링크 + 비밀번호 재설정 포함
  • 로그인 필수 화면 — 비로그인 시 로그인 안내 모달(LOG-009) 노출

2. 레이어 구조 + 치수

#영역높이/위치세부 스펙
1상태바44pxiOS 시스템 상태바, 시간 9:41
2네비바48pxbg: --bg #FAFAF8, padding: 0 24px. 좌: 뒤로가기 20x20 stroke --charcoal stroke-width:1.5 round/round. 중앙: "계정 정보" --sans 17px/700 --charcoal ls:-0.02em. 우: 20px 빈 공간
2-1레드 악센트 라인1pxmargin: 0 24px, bg: --red-brand #961E23, opacity: 0.15. 네비바 직하단 브랜드 시그니처 라인
3내 계정 섹션autopadding: 24px 24px 0. 섹션 타이틀 "내 계정" --sans 17px/700 --charcoal ls:-0.02em mb:20px. 하위 정보 행 목록
4홈 인디케이터34pxiOS 하단 홈바

3. 핵심 인터랙션

  • 정보 행 구조: display:flex, justify-content:space-between, align-items:center. 좌: 라벨 14px --sans --text-secondary #555555 ls:-0.005em. 우: 값 표시
  • 변형 1 — 소셜 로그인 사용자:
    • 행 1: "소셜로그인" / "카카오톡" 14px/600 --charcoal ls:-0.01em | padding: 14px 0, border-bottom: 1px solid rgba(26,26,26,0.06)
    • 행 2: "아이디" / 이메일 주소 --mono 14px --charcoal ls:0.01em | padding: 14px 0
    • 소셜 로그인 설정하기, 비밀번호 재설정 미노출
  • 변형 2 — 이메일 로그인 사용자:
    • 행 1: "소셜로그인" / "소셜 로그인 설정하기" 링크 — --sans 13px/500 --blue-50 #2563EB ls:-0.005em, border-bottom: 1px solid --blue-50 | padding: 14px 0, border-bottom: 1px solid rgba(26,26,26,0.06)
    • 행 2: "아이디" / 이메일 주소 --mono 14px --charcoal ls:0.01em | padding: 14px 0, border-bottom: 1px solid rgba(26,26,26,0.06)
    • 행 3: "비밀번호 재설정" — --sans 14px/500 --text-secondary ls:-0.005em, border-bottom: 1px solid --text-muted | padding: 18px 0
  • "소셜 로그인 설정하기" 탭: 소셜 로그인 인증 플로우 진행 (사전 미연결/미등록 위한 기능)
  • "비밀번호 재설정" 탭: 비밀번호 재설정 바텀시트(LOG-006) 노출
  • 뒤로가기: 마이페이지 메인(MYP-001)으로 이동

4. 상태 변화

  • 소셜 로그인 사용자: 소셜로그인 유형(카카오톡 등) + 아이디(이메일) 정보만 표시. 소셜 로그인 설정하기/비밀번호 재설정 숨김
  • 이메일 로그인 사용자: 소셜 로그인 설정하기 링크 노출(--blue-50 밑줄) + 아이디 표시 + 비밀번호 재설정 링크 노출
  • 소셜 연동 완료 시: 토스트 "소셜 계정이 연결되었습니다" + 화면 갱신

5. 네비게이션 플로우

  • 진입 경로: MYP-001 마이페이지 메인 → 계정 정보
  • 뒤로가기 (chevron): → MYP-001 마이페이지 메인
  • "소셜 로그인 설정하기" 링크: → 소셜 로그인 인증 플로우
  • "비밀번호 재설정" 링크: → LOG-006 비밀번호 재설정 바텀시트
  • 비로그인 접근: → LOG-009 로그인 안내 모달 → 로그인 완료 후 본 화면 복귀

6. 에러/예외 처리

  • 계정 정보 로드 실패: 빈 필드 표시 + 재시도 버튼
  • 소셜 연동 실패: 에러 토스트 + 재시도 안내
  • 비로그인 접근: 로그인 안내 모달(LOG-009) 노출 → 로그인 유도 (오류가 아닌 정상 상태)
  • 로그인 유형별 분기: 소셜 로그인 사용자는 변형 1, 이메일 로그인 사용자는 변형 2 UI 렌더링

7. 모션 스펙

  • 화면 진입: translateX(100% → 0), duration 350ms, easing --ease-ios-spring
  • 링크 pressed: opacity 1 → 0.6, duration 100ms
  • 토스트 등장: translateY(100% → 0) + opacity 0 → 1, duration 300ms, easing ease-out. 2.5초 후 자동 dismiss
  • 화면 퇴장 (뒤로가기): translateX(0 → 100%), duration 300ms, easing ease-in

8. 여백 · 간격 요약

요소속성값
네비바padding0 24px
레드 악센트 라인margin0 24px (네비바 직하단)
내 계정 섹션padding24px 24px 0
섹션 타이틀margin-bottom20px
정보 행 (소셜/아이디)padding14px 0
비밀번호 재설정 행padding18px 0
행 구분선border-bottom1px solid rgba(26,26,26,0.06)

9. 적용 디자인 토큰

  • [색상]
  • --bg: #FAFAF8
  • --charcoal: #1A1A1A
  • --red-brand: #961E23
  • --text-secondary: #555555
  • [타이포그래피]
  • --mono: TASA Orbiter
  • --sans: Pretendard Variable
← 이전 화면: MYP-007 다음 화면: MYP-009 →