사용자 화면 · 마이페이지

프로필 관리

MYP-002 · 2026. 03. 04

화면 이름 프로필 관리
화면 위치 마이페이지 > 프로필 관리
화면 ID MYP-002
작성일 2026. 03. 04
9:41
프로필 관리

닉네임

닉네임#1234
저장
1
2
3
4
Description
0 화면 접근 조건
  • 마이페이지(MYP-001)에서 프로필 영역 클릭 시 진입
  • 로그인 사용자만 접근 가능
  • 비로그인 상태에서 접근 시 로그인 안내 모달(LOG-009) 노출
1 헤더 영역
  • 구성
    • 뒤로 가기 아이콘
    • 타이틀: 프로필 관리
  • 동작
    • 뒤로 가기 클릭 시
      • 변경 사항이 있는 경우: 직전 화면으로 이동
      • 변경 사항이 없는 경우: 직전 이동 처리
    • 변경 내용 저장 전 이탈 시 토스트 메시지 노출
      • "변경 내용을 저장해주세요."
  • 보안 설정
    • 프로필 변경을 통해서만 반영 가능
    • 미도달한 변경 내용 유실 방지
    • 비밀번호 재입력 불필요
    • 알림 대신 토스트로 가볍게 안내
2 프로필 이미지 영역
  • 기본 상태
    • 프로필 이미지가 없는 경우: 기본 프로필 이미지 노출
  • 이미지 변경
    • 이미지 또는 이미지 영역 클릭 시 이미지 선택 가능
  • 이미지 형식 제한
    • 허용 확장자: jpeg, jpg, png, bmp
  • 사진 촬영/갤러리 호출
    • 시스템 사진 권한만 호출
    • 사진 촬영/파일 업 진입 불가
  • Auto
    • 시스템 파일 선택기 호출
    • 기본 갤러리(사진앱) 상단 노출
    • 입풀 갤러리에서 다른 파일 앱 선택 가능
3 닉네임 입력 영역
  • 구성
    • 라벨, 입력 필드, 수정 아이콘
  • 닉네임 정책
    • 표시 방식: 닉네임#1234
    • '닉네임' 구조
      • 한/영 4자리 숫자
      • 동일 '닉네임' 중복 방지를 위한 고유 식별자
      • # 이후 4자리 식별자는 시스템 자동 부여
      • 사용자 변경 불가
  • '닉네임' 수정
    • 닉네임 변경 시
      • # 앞 텍스트만 수정 가능
      • # 뒤의 숫자는 기존 값 유지
    • 최대 글자 수: N
    • 현재 미정
    • 모든 언어 허용 가능
4 저장 버튼 영역
  • 구성: 저장 버튼
  • 활성 조건
    • 닉네임 또는 프로필 이미지 변경 시 활성화
    • 변경 사항이 없는 경우 비활성화
  • 저장 동작
    • 저장 성공
      • 변경 내용 서버 반영
      • 토스트 메시지 노출: "프로필이 저장되었습니다."
    • 저장 실패
      • 토스트 메시지 노출: "저장에 실패했어요. 다시 시도해주세요."
5 토스트 메시지 정의
  • 프로필 저장 완료: "프로필이 저장되었습니다."
  • 이미지 업로드 실패: "이미지 업로드에 실패했어요."
  • 지원하지 않는 이미지 형식 선택 시: "지원하지 않는 이미지 형식입니다."
  • 네트워크 오류: "네트워크 상태를 확인해주세요."
  • 저장하지 않은 채 뒤로가기 버튼 눌렀을 경우: "변경 내용을 저장해주세요."
6 공통 규칙
  • 프로필 변경 사항
    • 저장 버튼을 눌러야만 반영
    • 프로필 이미지 변경 및 닉네임
  • 되돌리기 시 변경 값 유지
  • 프로필 관리는 로그인 사용자만 이용 가능
  • 비로그인 상태: 로그인 안내 모달(LOG-009) 노출
  • 회차 및 수정은 프로필 관리에서만 가능

Design Output

UI 디자인 산출물

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

9:41
프로필 관리

닉네임

닉네임#1234
저장
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 --sans · 17px · 700 Pretendard, --charcoal, 뒤로가기 square/miter
프로필 아바타 50% radius (원형 예외) 80px, rgba(26,26,26,0.04) bg
편집 아이콘 뱃지 --charcoal bg · 50% radius 24px, #fff stroke, 연필 아이콘
라벨 --sans · 12px · --text-muted letter-spacing: 0.02em
입력 필드 --sans · 15px · --charcoal 1.5px bottom border, 직각
저장 버튼 --charcoal bg · #fff 50px 높이, 600 weight, 직각 (R=0)
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 마이페이지(MYP-001)에서 프로필 영역 클릭 시 진입
  • 로그인 사용자만 접근 가능
  • 비로그인 상태에서 접근 시 로그인 안내 모달(LOG-009) 노출
1 헤더 영역
  • 구성
    • 뒤로 가기 아이콘
    • 타이틀: 프로필 관리
  • 동작
    • 뒤로 가기 클릭 시
      • 변경 사항이 있는 경우: 직전 화면으로 이동
      • 변경 사항이 없는 경우: 직전 이동 처리
    • 변경 내용 저장 전 이탈 시 토스트 메시지 노출
      • "변경 내용을 저장해주세요."
  • 보안 설정
    • 프로필 변경을 통해서만 반영 가능
    • 미도달한 변경 내용 유실 방지
    • 비밀번호 재입력 불필요
    • 알림 대신 토스트로 가볍게 안내
2 프로필 이미지 영역
  • 기본 상태
    • 프로필 이미지가 없는 경우: 기본 프로필 이미지 노출
  • 이미지 변경
    • 이미지 또는 이미지 영역 클릭 시 이미지 선택 가능
  • 이미지 형식 제한
    • 허용 확장자: jpeg, jpg, png, bmp
  • 사진 촬영/갤러리 호출
    • 시스템 사진 권한만 호출
    • 사진 촬영/파일 업 진입 불가
  • Auto
    • 시스템 파일 선택기 호출
    • 기본 갤러리(사진앱) 상단 노출
    • 입풀 갤러리에서 다른 파일 앱 선택 가능
3 닉네임 입력 영역
  • 구성
    • 라벨, 입력 필드, 수정 아이콘
  • 닉네임 정책
    • 표시 방식: 닉네임#1234
    • '닉네임' 구조
      • 한/영 4자리 숫자
      • 동일 '닉네임' 중복 방지를 위한 고유 식별자
      • # 이후 4자리 식별자는 시스템 자동 부여
      • 사용자 변경 불가
  • '닉네임' 수정
    • 닉네임 변경 시
      • # 앞 텍스트만 수정 가능
      • # 뒤의 숫자는 기존 값 유지
    • 최대 글자 수: N
    • 현재 미정
    • 모든 언어 허용 가능
4 저장 버튼 영역
  • 구성: 저장 버튼
  • 활성 조건
    • 닉네임 또는 프로필 이미지 변경 시 활성화
    • 변경 사항이 없는 경우 비활성화
  • 저장 동작
    • 저장 성공
      • 변경 내용 서버 반영
      • 토스트 메시지 노출: "프로필이 저장되었습니다."
    • 저장 실패
      • 토스트 메시지 노출: "저장에 실패했어요. 다시 시도해주세요."
5 토스트 메시지 정의
  • 프로필 저장 완료: "프로필이 저장되었습니다."
  • 이미지 업로드 실패: "이미지 업로드에 실패했어요."
  • 지원하지 않는 이미지 형식 선택 시: "지원하지 않는 이미지 형식입니다."
  • 네트워크 오류: "네트워크 상태를 확인해주세요."
  • 저장하지 않은 채 뒤로가기 버튼 눌렀을 경우: "변경 내용을 저장해주세요."
6 공통 규칙
  • 프로필 변경 사항
    • 저장 버튼을 눌러야만 반영
    • 프로필 이미지 변경 및 닉네임
  • 되돌리기 시 변경 값 유지
  • 프로필 관리는 로그인 사용자만 이용 가능
  • 비로그인 상태: 로그인 안내 모달(LOG-009) 노출
  • 회차 및 수정은 프로필 관리에서만 가능
← 이전 화면: MYP-001 다음 화면: MYP-003 →