사용자 화면 · 마이페이지

계정 정보

MYP-008 · 2026. 03. 04

화면 이름 계정 정보
화면 위치 마이페이지 > 계정 정보
화면 ID MYP-008
작성일 2026. 03. 04
9:41
계정 정보

내 계정

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

내 계정

소셜로그인 소셜 로그인 설정하기
아이디 BetterSleep@Growth.com
비밀번호 재설정
2
Description
0 화면 접근 조건
  • 계정 정보는 로그인 사용자만 접근 가능
  • 비로그인 상태에서
    • 마이페이지 > 계정 정보 클릭 시
    • 로그인 안내 모달(LOG-009) 노출
    • 로그인 완료 후 구매 내역 화면으로 이동
1-1 헤더 영역
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 계정 정보
  • 동작
    • 뒤로가기 버튼 클릭 시
      • 마이페이지(메인)(MYP-001)으로 이동
1-2 내 계정 정보 (소셜로그인)
  • 노출 정보
    • 소셜 로그인 유형(아이디)(이메일 또는 내부 식별값) 표시
  • 노출 하위 항목
    • 소셜로그인 설정하기 버튼 미노출
    • 비밀번호 재설정 버튼 미노출
  • 설명
    • 이미 소셜 로그인으로 이용이 아닌데 계정으로 추가(아닌 소셜 연결 또는 비밀번호 설정이 필요하지 않은 선택)
2 내 계정 정보 (아이디 로그인)
  • 노출 조건
    • 이메일(아이디)으로 가입 및 로그인한 사용자
  • 노출 정보
    • 아이디(이메일) 주소 표시
  • 추가 기능
    • 소셜 로그인 설정하기 텍스트 버튼 노출
      • 사전 미연결(미등록) 위한 기능
    • 클릭 시 소셜 로그인 인증 플로우 진행
    • 비밀번호 재설정
      • 클릭 시 비밀번호 재설정 바텀시트(LOG-006) 노출
7 토스트 메시지 정의
  • 소셜 로그인 머지(연동) 완료 시 토스트 메시지
    • 소셜 계정이 연결되었습니다
8 공통 규칙
  • 본 화면은 로그인 사용자만 접근 가능
  • 비로그인 상태에서 접근 시 로그인 안내 모달(LOG-009) 노출
    • 로그인 완료 후 본 화면으로 이동
  • 가입시(이메일) 이용시 로그인 설정 보기
    • 소셜 로그인 사용자: 1-2 영역만 기준
    • 이메일 로그인 사용자: 2 영역이 기준
  • 비밀번호 변경으로 조건 상태 변경 가능
    • 마이페이지 진입(LOG-001)으로 이동
  • 시스템 정책에 따라 로그인 진입 확인(LOG-001)으로 이동

Design Output

UI 디자인 산출물

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

9:41
계정 정보

내 계정

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

내 계정

소셜로그인 소셜 로그인 설정하기
아이디 BetterSleep@Growth.com
비밀번호 재설정
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 타이틀 --sans · 17px · 700 Pretendard, --charcoal, ls: -0.02em
섹션 타이틀 --sans · 17px · 700 "내 계정", --charcoal, ls: -0.02em
라벨 (좌측) --sans · 14px · --text-secondary #555555, ls: -0.005em
값 (우측) --sans · 14px · 600 --charcoal, ls: -0.01em
이메일 주소 --mono · 14px TASA Orbiter, --charcoal, ls: 0.01em
링크 텍스트 --blue-50 · 13px · 500 #2563EB, underline
비밀번호 재설정 --sans · 14px · --text-secondary underline, --text-muted border
구분선 rgba(26,26,26,0.06) 1px solid
레드 악센트 라인 --red-brand · 15% opacity 헤더 하단 1px, 브랜드 악센트
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 계정 정보는 로그인 사용자만 접근 가능
  • 비로그인 상태에서
    • 마이페이지 > 계정 정보 클릭 시
    • 로그인 안내 모달(LOG-009) 노출
    • 로그인 완료 후 구매 내역 화면으로 이동
1-1 헤더 영역
  • 구성
    • 뒤로가기 버튼
    • 타이틀: 계정 정보
  • 동작
    • 뒤로가기 버튼 클릭 시
      • 마이페이지(메인)(MYP-001)으로 이동
1-2 내 계정 정보 (소셜로그인)
  • 노출 정보
    • 소셜 로그인 유형(아이디)(이메일 또는 내부 식별값) 표시
  • 노출 하위 항목
    • 소셜로그인 설정하기 버튼 미노출
    • 비밀번호 재설정 버튼 미노출
  • 설명
    • 이미 소셜 로그인으로 이용이 아닌데 계정으로 추가(아닌 소셜 연결 또는 비밀번호 설정이 필요하지 않은 선택)
2 내 계정 정보 (아이디 로그인)
  • 노출 조건
    • 이메일(아이디)으로 가입 및 로그인한 사용자
  • 노출 정보
    • 아이디(이메일) 주소 표시
  • 추가 기능
    • 소셜 로그인 설정하기 텍스트 버튼 노출
      • 사전 미연결(미등록) 위한 기능
    • 클릭 시 소셜 로그인 인증 플로우 진행
    • 비밀번호 재설정
      • 클릭 시 비밀번호 재설정 바텀시트(LOG-006) 노출
7 토스트 메시지 정의
  • 소셜 로그인 머지(연동) 완료 시 토스트 메시지
    • 소셜 계정이 연결되었습니다
8 공통 규칙
  • 본 화면은 로그인 사용자만 접근 가능
  • 비로그인 상태에서 접근 시 로그인 안내 모달(LOG-009) 노출
    • 로그인 완료 후 본 화면으로 이동
  • 가입시(이메일) 이용시 로그인 설정 보기
    • 소셜 로그인 사용자: 1-2 영역만 기준
    • 이메일 로그인 사용자: 2 영역이 기준
  • 비밀번호 변경으로 조건 상태 변경 가능
    • 마이페이지 진입(LOG-001)으로 이동
  • 시스템 정책에 따라 로그인 진입 확인(LOG-001)으로 이동
← 이전 화면: MYP-007 다음 화면: MYP-009 →