사용자 화면 · 마이페이지

프로필 관리

MYP-002 · 2026. 03. 20

화면 이름 프로필 관리
화면 위치 마이페이지 > 프로필 관리
화면 ID MYP-002
작성일 2026. 03. 20
MYP-002
Description
1 헤더 영역
  • 구성
    • 뒤로 가기 아이콘
    • 타이틀 : 프로필 관리
    • 뒤로 가기 클릭 시
      • 변경사항이 없는 경우
        • 직전 화면으로 이동
        • 화면 이동 차단
        • 토스트 메시지 노출
          • 변경 내용을 저장해주세요
      • 저장 버튼을 통해서만 반영 가능
    • 의도치 않은 변경 내용 유실 방지
      • 뒤로가기로 화면 이탈 불가
      • 모달 대신 토스트로 가볍게 안내
2 프로필 이미지 영역
  • 기본 상태
    • 프로필 이미지가 없는 경우
      • 기본 프로필 이미지 노출
    • 프로필 이미지 영역 클릭 시 이미지 선택 가능
    • 허용 확장자: jpeg, jpg, png, bmp
    • ios
      • 시스템 사진첩만 호출
      • 사진 촬영/파일 앱 진입 불가
      • 시스템 파일 선택기 호출
      • 기본 갤러리(사진첩) 우선 노출
      • 단말 정책에 따라 파일 앱 선택 가능
3 닉네임 입력 영역
  • 구성
    • 라벨, 입력필드, 수정 아이콘
    • 표기 방식
      • 닉네임#1234
    • #뒤 4자리 숫자
      • 동일 닉네임 중복 방지를 위한 고유 식별자
      • 시스템에서 자동 부여
      • 사용자 변경 불가
    • 닉네임 변경 시
      • # 앞 텍스트만 수정 가능
      • # 뒤 숫자는 기존 값 유지
    • 한글 기준 : 8글자
    • 영문 기준 : 16글자
    • 띄어쓰기 반영 안함
4 저장 버튼 영역
  • 구성 : 저장 버튼
  • 활성 조건
    • 닉네임 또는 프로필 이미지 변경 시 활성화
    • 변경 사항이 없는 경우 비활성화
    • 저장 성공
      • 변경 내용 서버 반영
      • 토스트 메시지 노출
        • 프로필이 저장되었습니다
      • 토스트 메시지 노출
        • 잠시 후 다시 시도해주세요
5 토스트 메시지 정의
  • 프로필 저장 완료
    • 프로필이 저장됐습니다
    • 이미지 업로드에 실패했어요
  • 지원하지 않는 이미지 형식 선택 시
    • 지원하지 않는 이미지 형식입니다
    • 네트워크 상태를 확인해주세요
  • 저장되지 않은 변경 사항을 둔 채 뒤로가기 버튼 눌렀을 경우
    • 변경 내용을 저장해주세요
6 공통 규칙
  • 프로필 변경 사항
    • 저장 버튼을 눌러야만 반영
    • 단독/동시 변경 모두 가능
  • 프로필 관리는 로그인 사용자만 이용 가능
    • 비로그인 접속 시, 로그인 안내 모달(LOG-008) 노출
    • 조회 및 수정 모두 로그인 상태에서만 가능

Design Output

UI 디자인 산출물

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

9:41
프로필 관리
닉네임#1234
저장
개발 구현 가이드 — MYP-002 프로필 관리

Update History

2026.03.19sb-wireframe-frame 패턴 전환 (MKT 품질 통일), DS v2 연동, 구조 정합성 수정
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.11저장 버튼 CTA 레드 그라디언트 적용, 구현 가이드 추가 (7섹션)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

프로필 이미지 + 닉네임 편집 단일 화면. MYP-001 프로필 영역 탭으로 진입. 하단 고정 "저장" CTA 포함. 변경사항은 저장 버튼 탭 시에만 서버 반영. 컨테이너 393x852px, 전체 배경 --bg #FAFAF8. 로그인 사용자만 접근 가능.

2. 레이어 구조 + 치수

# 영역 높이/위치 세부 스펙
1상태 표시줄47pxiOS system status bar
2헤더height:48pxbg:--bg, padding:0 24px, gap:12px. 뒤로가기 10x18 stroke:--charcoal 1.5px round/round. "프로필 관리" Pretendard(--sans) 17px/700 --charcoal #1A1A1A ls:-0.02em
3프로필 이미지padding:32px 24px, center80x80px circle(border-radius:50%) bg:rgba(26,26,26,0.04). user icon 36x36 stroke:--text-muted 1.5px. 편집 뱃지: position:absolute bottom:0 right:0, 24x24 circle bg:--charcoal #1A1A1A, pencil 12x12 stroke:#fff 2px square
4닉네임 입력 필드padding:0 24px라벨 "닉네임" Pretendard 12px --text-muted ls:0.02em mb:8px. 입력값 Pretendard 15px --charcoal ls:-0.01em flex:1. border-bottom:1.5px solid --charcoal, padding:10px 0, gap:8px. 우측 편집 pencil 16x16 stroke:--text-muted 1.5px
5저장 CTAposition:absolute bottom:50px left:24px right:24pxheight:50px, bg:--cta-gradient (레드 그라디언트), text "저장" Pretendard 15px/600 #fff ls:-0.01em, 직각(R=0)

3. 핵심 인터랙션

  • 프로필 이미지 탭: iOS 이미지 선택 시트 호출 (카메라/갤러리 선택). 허용 형식: JPEG, PNG
  • 닉네임 필드 탭: 키보드 활성화, 현재 닉네임 pre-fill 상태에서 편집 가능. 최대 20자 권장
  • 저장 버튼 탭: 변경 내용을 서버에 반영. 성공 → 토스트 "프로필이 저장되었습니다." + MYP-001로 pop. 실패 → 토스트 "저장에 실패했어요. 다시 시도해주세요."
  • 뒤로가기 탭: 변경사항 있으면 토스트 "변경 내용을 저장해주세요." + MYP-001로 pop. 변경사항 없으면 바로 pop

4. 상태 변화

  • 초기 상태: 서버에서 받은 프로필 이미지 + 닉네임 표시. 변경사항 없음
  • 편집 중: 이미지 또는 닉네임 수정 시 dirty flag 활성화. 저장 버튼은 항상 활성(닉네임 비어있으면 비활성)
  • 닉네임 공란: 저장 버튼 비활성화 opacity:var(--state-disabled-opacity) 0.4
  • 저장 로딩: CTA 버튼 내 로딩 스피너 또는 opacity 변경

5. 네비게이션 플로우

  • 진입: MYP-001 프로필 영역 탭 → push navigation
  • 이탈: 뒤로가기 또는 저장 성공 → MYP-001로 pop
  • 비로그인: 이 화면은 로그인 사용자만 접근 가능, 비로그인 시 LOG-009 안내 모달

6. 에러/예외 처리

  • 이미지 업로드 실패: 토스트 "이미지 업로드에 실패했어요."
  • 지원하지 않는 형식: 토스트 "지원하지 않는 이미지 형식입니다."
  • 네트워크 오류: 토스트 "네트워크 상태를 확인해주세요."
  • 닉네임 중복: 토스트 "이미 사용 중인 닉네임입니다."
  • 저장 API 실패: 토스트 "저장에 실패했어요. 다시 시도해주세요." 화면 유지

7. 모션 스펙

  • 화면 진입: translateX(100%→0), duration 350ms, easing --ease-ios-spring
  • 화면 이탈 (pop): translateX(0→100%), duration 300ms, easing ease-in
  • 저장 버튼 pressed: opacity 1→0.8, duration 100ms
  • 토스트 등장: translateY(20px→0) + opacity 0→1, duration 300ms, easing ease-out

8. 여백 · 간격 요약

항목 값
좌우 콘텐츠 패딩24px
프로필 이미지 영역 padding32px 24px (justify-content:center)
라벨-입력필드 gap8px (margin-bottom)
입력필드 내부 padding10px 0
입력필드-편집아이콘 gap8px
저장 CTA 하단 위치absolute bottom:50px, left:24px right:24px

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 헤더: --sans Pretendard 17px/700, --charcoal #1A1A1A, 뒤로가기 아이콘 stroke round/round
  • 프로필 아바타: 80px, border-radius:50%(원형 예외), bg rgba(26,26,26,0.04)
  • 편집 아이콘 뱃지: 24px, border-radius:50%, bg --charcoal #1A1A1A, stroke #fff, 연필 아이콘
  • 라벨: --sans Pretendard 12px, --text-muted, letter-spacing:var(--ls-normal)
  • 입력 필드: --sans Pretendard 15px, --charcoal, border-bottom 1.5px solid --charcoal, 직각
  • 저장 버튼: bg --cta-gradient (레드 그라디언트), color #fff, height 50px, font-weight 600, 직각(R=0)
  • 좌우 패딩: 24px 전체 콘텐츠 마진
← 이전 화면: MYP-001 다음 화면: MYP-003 →