사용자 화면 · 회원가입/로그인

이메일 로그인 실패 바텀시트

LOG-005 · 2026. 03. 04

화면 이름 이메일 로그인 실패 바텀시트
화면 위치 기능 클릭 > 로그인 진입 화면 > 이메일 로그인 > 바텀시트
화면 ID LOG-005
작성일 2026. 03. 04
9:41
CH
차트 Chaart
Top Collectors'
Picks
거래 안내
프라이빗 세일
P5존
마켓

로그인 실패

비밀번호를 다시 확인해주세요

비밀번호 찾기/재설정
확인
1
Description
1 이메일 로그인 실패 바텀시트
  • 노출 방식
    • 화면 하단에서 슬라이드 업 형태로 노출되는 바텀시트
    • 이메일 로그인 ID/PW 입력 바텀시트(LOG-003)에서 로그인 실패 시 자동 노출
  • 목적
    • 로그인 실패에 대한 명확한 안내 제공
    • 비밀번호 재설정 등 다음 행동 유도
  • 안내 문구 영역
    • 타이틀 문구
      • 로그인 실패
    • 안내 문구
      • 비밀번호를 다시 확인해주세요
  • 버튼 구성
    • 비밀번호찾기/재설정 버튼
      • 버튼 클릭 시 비밀번호 재설정 바텀시트로 이동
    • 확인 버튼
      • 클릭 시 로그인 실패 바텀시트 닫힘
      • 이메일 로그인 ID/PW 입력 바텀시트(LOG-003) 복귀
      • 아이디(이메일) 입력값 유지
      • 비밀번호 입력값 초기화
  • 바텀시트 닫기 및 차단 규칙
    • 별도의 닫기(X) 버튼 없음
    • 사용자는 '확인' 또는 '비밀번호 찾기/재설정' 중 하나의 액션을 반드시 선택해야 함
  • 예외 및 UX 보완 처리(QA 기준)
    • 로그인 실패 반복 시
      • 동일 바텀시트 반복 노출 가능
      • 별도 제한 정책은 추후 정의 가능
    • 바텀시트 노출 중
      • 기존 화면(메인/로그인 진입 화면)은 비활성화 상태 유지

Design Output

UI 디자인 산출물

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

9:41
차트 Chaart
Top Collectors'
Picks
거래 안내
프라이빗 세일
P5존
마켓

로그인 실패

비밀번호를 다시 확인해주세요

비밀번호 찾기/재설정
확인
Applied Design Tokens
요소Token값
바텀시트 배경 --bg #FAFAF8 — 직각 (R=0)
딤 오버레이 --charcoal 45% rgba(26,26,26,0.45)
타이틀 "로그인 실패" --sans · 18px · 700 Pretendard, --charcoal, center
안내 문구 --sans · 18px · 500 · --text-secondary #6B6B6B, center
확인 버튼 (Primary) --charcoal bg · 50px 직각, 14px, 600 weight
비밀번호 찾기 버튼 (Secondary) --text-secondary bg · 50px #6B6B6B, 직각, 14px, 600 weight
버튼 배치 flex, gap: 12px 2버튼 동일 너비 나란히 배치
닫기(X) 버튼 없음 사용자 필수 선택 — 닫기 버튼 미제공
핸들 바 없음 알림형 바텀시트 — 핸들 바 미제공
좌우 패딩 24px 바텀시트 내부 콘텐츠 마진
문구↔버튼 간격 48px 안내 문구 하단 ~ 버튼 영역 상단
Design Description

Update History

2026.03.04초기 디자인 작성
1 이메일 로그인 실패 바텀시트
  • 노출 방식
    • 화면 하단에서 슬라이드 업 형태로 노출되는 바텀시트
    • 이메일 로그인 ID/PW 입력 바텀시트(LOG-003)에서 로그인 실패 시 자동 노출
  • 목적
    • 로그인 실패에 대한 명확한 안내 제공
    • 비밀번호 재설정 등 다음 행동 유도
  • 안내 문구 영역
    • 타이틀 문구
      • 로그인 실패
    • 안내 문구
      • 비밀번호를 다시 확인해주세요
  • 버튼 구성
    • 비밀번호찾기/재설정 버튼
      • 버튼 클릭 시 비밀번호 재설정 바텀시트로 이동
    • 확인 버튼
      • 클릭 시 로그인 실패 바텀시트 닫힘
      • 이메일 로그인 ID/PW 입력 바텀시트(LOG-003) 복귀
      • 아이디(이메일) 입력값 유지
      • 비밀번호 입력값 초기화
  • 바텀시트 닫기 및 차단 규칙
    • 별도의 닫기(X) 버튼 없음
    • 사용자는 '확인' 또는 '비밀번호 찾기/재설정' 중 하나의 액션을 반드시 선택해야 함
  • 예외 및 UX 보완 처리(QA 기준)
    • 로그인 실패 반복 시
      • 동일 바텀시트 반복 노출 가능
      • 별도 제한 정책은 추후 정의 가능
    • 바텀시트 노출 중
      • 기존 화면(메인/로그인 진입 화면)은 비활성화 상태 유지
← 이전 화면: LOG-004 다음 화면: LOG-006 →