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

비밀번호 재설정/발송 완료 바텀시트

LOG-006 · 2026. 03. 04

화면 이름 비밀번호 재설정/발송 완료 바텀시트

화면 위치 기능 클릭 > 로그인 진입 화면 > 이메일 로그인 > 바텀시트

화면 ID LOG-006

작성일 2026. 03. 04

9:41

차트 Chaart

Top Collectors'
Picks

거래 안내

프라이빗 세일

P5존

마켓

비밀번호 재설정

등록된 아이디(이메일)를 입력해주세요.

전송

9:41

차트 Chaart

Top Collectors'
Picks

거래 안내

프라이빗 세일

P5존

마켓

비밀번호 재설정 메일 발송 완료

등록된 이메일 주소를 확인해주세요

확인

Description

1	비밀번호 재설정 입력필드 바텀시트	노출 방식 화면 하단에서 슬라이드 업 형태로 노출되는 바텀시트 이메일 로그인 실패 바텀시트(LOG-005)에서 '비밀번호 찾기/재설정' 버튼 클릭 시 노출 목적 비밀번호 재설정을 위한 이메일 주소 입력 이메일 입력 영역 입력 필드 등록된 아이디(이메일) 입력 필드 노출 플레이스홀더: 등록된 아이디(이메일)를 입력해주세요 입력 규칙 이메일 형식 입력만 허용 이메일 형식이 유효하지 않을 경우 전송 버튼 비활성화 유지 전송 버튼 기본 상태: 비활성화 활성화 조건: 이메일 형식이 올바른 경우 클릭 시 비밀번호 재설정 메일 발송 요청 발송 성공 시 ❷ 바텀시트로 전환 닫기 버튼 클릭 시 비밀번호 재설정 프로세스 중단 이메일 로그인 ID/PW 입력 바텀시트(LOG-003)로 복귀 예외 및 UX 보완 처리 (QA 기준) 등록되지 않은 이메일 입력 시 메일 발송 실패 오류 안내 토스트 메세지 노출 가능
2	비밀번호 재설정 메일발송 완료 바텀시트	노출 방식 비밀번호 재설정 이메일 발송 성공 시 자동 노출 안내 문구 영역 타이틀 문구 비밀번호 재설정 메일 발송 완료 안내 문구 등록된 이메일 주소를 확인해주세요 확인 버튼 클릭 시 바텀시트 닫힘 이메일 로그인 ID/PW 입력 바텀시트(LOG-003)로 복귀 사용자는 재설정 완료 후 로그인 재시도 가능

Design Output

UI 디자인 산출물

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

9:41

차트 Chaart

Top Collectors'
Picks

비밀번호 재설정

등록된 아이디(이메일)를 입력해주세요.

전송

9:41

차트 Chaart

Top Collectors'
Picks

비밀번호 재설정 메일 발송 완료

등록된 이메일 주소를 확인해주세요

확인

Applied Design Tokens

요소	Token	값
바텀시트 배경	`--bg`	#FAFAF8 — 직각 (R=0)
딤 오버레이	`--charcoal` 45%	rgba(26,26,26,0.45)
타이틀 ❶	`--sans` · 18px · 700	Pretendard, `--charcoal`, left-align
타이틀 ❷	`--sans` · 18px · 700	Pretendard, `--charcoal`, center
안내 문구 ❷	`--sans` · 18px · 500 · `--text-secondary`	#6B6B6B, center
입력 필드 ❶	48px height · `--charcoal` 4% bg	직각, border: 1px solid rgba(26,26,26,0.07)
전송/확인 버튼	`--charcoal` bg · 50px	직각, 15px, 600 weight
닫기(X) 아이콘 ❶	22×22 · `--text-muted`	stroke: square/miter, 1.5px
핸들 바 ❶	`--charcoal` 12%	36×4px, rgba(26,26,26,0.12)
닫기/핸들 ❷	없음	알림형 — 확인 버튼만 제공
좌우 패딩	24px	바텀시트 내부 콘텐츠 마진

Design Description

Update History

2026.03.04초기 디자인 작성

1	비밀번호 재설정 입력필드 바텀시트	노출 방식 화면 하단에서 슬라이드 업 형태로 노출되는 바텀시트 이메일 로그인 실패 바텀시트(LOG-005)에서 '비밀번호 찾기/재설정' 버튼 클릭 시 노출 목적 비밀번호 재설정을 위한 이메일 주소 입력 이메일 입력 영역 입력 필드 등록된 아이디(이메일) 입력 필드 노출 플레이스홀더: 등록된 아이디(이메일)를 입력해주세요 입력 규칙 이메일 형식 입력만 허용 이메일 형식이 유효하지 않을 경우 전송 버튼 비활성화 유지 전송 버튼 기본 상태: 비활성화 활성화 조건: 이메일 형식이 올바른 경우 클릭 시 비밀번호 재설정 메일 발송 요청 발송 성공 시 ❷ 바텀시트로 전환 닫기 버튼 클릭 시 비밀번호 재설정 프로세스 중단 이메일 로그인 ID/PW 입력 바텀시트(LOG-003)로 복귀 예외 및 UX 보완 처리 (QA 기준) 등록되지 않은 이메일 입력 시 메일 발송 실패 오류 안내 토스트 메세지 노출 가능
2	비밀번호 재설정 메일발송 완료 바텀시트	노출 방식 비밀번호 재설정 이메일 발송 성공 시 자동 노출 안내 문구 영역 타이틀 문구 비밀번호 재설정 메일 발송 완료 안내 문구 등록된 이메일 주소를 확인해주세요 확인 버튼 클릭 시 바텀시트 닫힘 이메일 로그인 ID/PW 입력 바텀시트(LOG-003)로 복귀 사용자는 재설정 완료 후 로그인 재시도 가능

← 이전 화면: LOG-005 다음 화면: LOG-007 →