사용자 화면 · 회원가입/로그인
비밀번호 재설정/발송 완료 바텀시트
LOG-006 · 2026. 03. 19
Description
| 2 | 비밀번호 재설정 메일발송 완료 바텀시트 |
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
로그인 하기
비밀번호 찾기
비밀번호 재설정
올바른 이메일 형식을 입력해주세요.
전송
인증 메일이 발송되었습니다
메일함을 확인해주세요
확인
개발 구현 가이드 — LOG-006 비밀번호 재설정/발송 완료 바텀시트
디자인 상태
완료
완료
최종 승인
류우상 ✅
류우상 ✅
승인일
2026-03-27
2026-03-27
Update History
2026.03.26구현 가이드 최신화 검증 — Description 전수 대조 누락 0건, 토큰 섹션 통합 확인, 디자인 산출물 동기화 완료
2026.03.25구현 가이드 실코드 기준 전면 최신화 — 레이어 구조 5개로 확정(홈 배경/딤/로그인 시트/❶ 재설정 시트/❷ 발송완료 시트), ❷ 확인 동작을 "LOG-003 복귀"에서 "❶ 상태 리셋 + 로그인 시트 슬라이드업"으로 수정, 이메일 에러 메시지 visibility:hidden/visible 방식 명시, 딤 클릭 조건부 로직(❷ 열림 시 무시) 기재, 전송 테스트 케이스(fail@test.com → 에러 토스트, 1.2s 딜레이 시뮬레이션) 추가, 입력 필드 focus/blur 상태 스펙 보정.
2026.03.25풀폰(852px) 전환 — LOG-003 홈 화면 배경 + 딤(z-index:25) + ❶ 재설정 시트(z-index:28) + ❷ 발송완료 시트(z-index:28) + 로그인 바텀시트(z-index:28) 구조. 닫기 시 로그인 바텀시트 슬라이드업(350ms 후). 로그인 바텀시트 인터랙티브(이메일/비밀번호 입력, X 닫기).
2026.03.24인터랙션 구현 — ❶ 닫기(핸들/X/딤) 로직, ❶→❷ 전환 애니메이션, ❷ 발송완료 UI(Lucide mail SVG), ❷ 확인→로그인 시트 복귀. 토큰 치환: #D32F2F→var(--color-error-toast), #fff→var(--bg)
2026.03.17잔여 불일치 수정 — text-secondary hex #555555 보정 (가이드+디자인 인라인)
2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.11디자인 섹션: 폰 배경 제거 → 바텀시트 컴포넌트 전용 뷰로 전환, CTA 레드 그라디언트 적용
2026.03.11구현 가이드 전면 확장 — animation spec, focus state, toast spec, typography 상세화
2026.03.10홈 화면 배경 HOM-001 디자인 반영
2026.03.04초기 디자인 작성
Implementation Specification
1. 화면 구조 개요
LOG-006은 풀폰(852px) 목업이다. 비밀번호 재설정 플로우의 2개 시퀀셜 바텀시트(❶ 이메일 입력 → ❷ 발송 완료)로 구성된다. LOG-005 "비밀번호 찾기/재설정" CTA에서 진입한다. ❶은 핸들 탭·X·딤 탭으로 닫기 허용이고, ❷는 강제 확인형(핸들 바·닫기 버튼 없음, 딤 탭 차단)이다. ❶·❷ 닫기 시 모두 페이지 이동 없이 로그인 바텀시트(id=loginSheet)가 인라인으로 복귀한다.
2. 레이어 구조 + 치수
| # | 영역 | 높이/위치 | 비고 |
|---|---|---|---|
| 1 | 배경 (LOG-003 홈+로그인 화면) | 전체 화면, id="homePreview" | pointer-events:none. 홈 카드 섹션 + 탭바 포함. |
| 2 | 딤 오버레이 | inset:0, z-index:25, rgba(26,26,26,0.45) | id="log006Dim". ❶ 열림 상태: 딤 탭 → 시트 닫힘. ❷ 열림 상태: 딤 탭 무시 (pointer-events:none). ❶·❷ 모두 닫힌 후 로그인 시트 열릴 때 딤 유지. |
| 3 | 로그인 바텀시트 (복귀용) | bottom:0, z-index:28, 초기 translateY(100%) 숨김 | id="loginSheet". ❶ 또는 ❷ 닫기 후 350ms 딜레이 → 슬라이드업 등장. 이메일/비밀번호 입력 인터랙티브, X 닫기(id=loginCloseBtn) 제공. 이메일 에러(id=loginEmailError) display:none/block 방식. X 닫기 → 딤 opacity:0, pointer-events:none. |
| 4 | ❶ 비밀번호 재설정 바텀시트 | bottom:0, z-index:28, 초기 translateY(0) 표시 | id="sheet1". 핸들 바(id=sheet1Handle) + X 닫기(id=sheet1Close). 타이틀 + 이메일 입력(id=resetEmail) + 에러(id=resetEmailError, visibility:hidden/visible 방식) + 전송 버튼(id=resetCta). |
| 5 | ❷ 발송 완료 바텀시트 | bottom:0, z-index:28, 초기 translateY(100%) 숨김 | id="sheet2". 강제 확인형 — 핸들 바 없음, X 없음. Lucide mail SVG 아이콘 + 타이틀 + 안내문구 + 확인 버튼(id=sheet2Confirm). |
3. 핵심 인터랙션
- ❶ 이메일 입력 (id=resetEmail): 정규식
/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/실시간 검사. 오류 시 에러 메시지(id=resetEmailError) visibility:visible + borderColor:var(--red-brand). 통과 시 전송 버튼(id=resetCta) opacity:1/pointer-events:auto, dataset.enabled='true'. - ❶ 입력 필드 focus: borderColor →
var(--charcoal)(단, 빈 입력 또는 유효한 경우에만 — 에러 상태면 유지) - ❶ 입력 필드 blur: 오류 여부 재검사 → borderColor: var(--red-brand) 또는 var(--border-strong)
- ❶ 전송 클릭: dataset.enabled 확인 → 버튼 텍스트 "전송 중..." + pointer-events:none → 1.2초 딜레이(API 시뮬레이션) → 성공 시 ❶→❷ 전환 / fail@test.com 입력 시 에러 토스트 "이메일 발송에 실패했습니다. 다시 시도해주세요." + 버튼 복원
- ❶ → ❷ 전환 (transitionToSheet2): ❶
translateY(-20px) + opacity:0(200ms ease-in) → 210ms 후 ❶ display:none + ❷translateY(100%) → translateY(0)(400ms,var(--ease-ios-spring)) + dim.pointerEvents:none (❷ 강제 확인형) - ❶ 핸들(id=sheet1Handle)/X(id=sheet1Close) 탭: closeSheet1() → ❶
translateY(100%)+opacity:0(300ms ease-in) → 딤 유지(로그인 시트 위해) → 350ms 후 로그인 시트(openLoginSheet) 슬라이드업 - 딤 탭 (id=log006Dim): ❷ 열림 상태이면 무시. ❶ 열림 상태(sheet1.display !== 'none')이면 closeSheet1() 호출.
- ❷ 확인 (id=sheet2Confirm): closeSheet2() → ❷
translateY(100%)(300ms ease-in) + dim.pointerEvents:auto → 350ms 후 ❶ 상태 리셋(display:'', opacity:1, transform:translateY(100%), resetEmail.value='', resetEmailError visibility:hidden, borderColor:var(--border-strong)) + 로그인 시트(openLoginSheet) 슬라이드업. 페이지 이동 없음. - 로그인 시트 X (id=loginCloseBtn): closeLoginSheet() → loginSheet translateY(100%) + dim opacity:0, pointer-events:none
4. 상태 변화
- ❶ Default: 이메일 빈 입력, 전송 버튼 비활성(opacity:0.4, pointer-events:none), 에러 메시지 visibility:hidden
- ❶ 이메일 유효: 전송 버튼 활성(opacity:1, pointer-events:auto, dataset.enabled='true')
- ❶ 이메일 형식 오류: 에러 메시지 visibility:visible, borderColor:var(--red-brand), 전송 버튼 비활성 유지
- ❶ 전송 중: 버튼 텍스트 "전송 중...", pointer-events:none (1.2초)
- ❷ Default: 발송 완료 안내 + 확인 버튼 활성, 딤 pointer-events:none (강제 확인)
- 로그인 시트 활성: 이메일+비밀번호 모두 유효 시 로그인 버튼(id=loginCta) 활성화. 이메일 에러(id=loginEmailError) display:none/block 방식.
5. 네비게이션 플로우
- 진입: LOG-005 (이메일 로그인 실패) → "비밀번호 찾기/재설정" CTA (스토리보드 시뮬레이션 — 토스트) → 실제 앱에서는 LOG-006 ❶로 직접 진입
- ❶ 전송 성공: ❶ → ❷ 자동 전환 (transitionToSheet2)
- ❷ 확인: ❷ 닫힘 → ❶ 상태 리셋 → 로그인 바텀시트 인라인 슬라이드업 (페이지 이동 없음)
- ❶ 닫기 (핸들/X/딤): ❶ 닫힘 → 350ms 후 로그인 바텀시트 슬라이드업 (페이지 이동 없음)
- 로그인 시트 X: 로그인 시트 닫힘 → 딤 해제 → 홈 배경만 남음
6. 에러/예외 처리
- 이메일 형식 오류 (입력 중): 에러 메시지(id=resetEmailError) visibility:visible, borderColor:var(--red-brand). 전송 버튼 비활성. 별도 에러 토스트 미노출.
- 전송 실패 시뮬레이션: 입력값
fail@test.com→ 1.2초 후 에러 토스트 "이메일 발송에 실패했습니다. 다시 시도해주세요." + 버튼 텍스트 "전송" 복원 + updateResetCtaState() 재호출 - 등록되지 않은 이메일 (실제 앱): "등록되지 않은 이메일입니다" — 에러 토스트 bg:
var(--color-error-toast), text:var(--bg), 폰 내부 bottom:24px, border-radius:0, 2.6초 fade-out, 바텀시트 유지 - 네트워크 오류: 동일 에러 토스트 스펙, 바텀시트 유지, 재시도 가능
- ❷ 딤 탭: 무시 (pointer-events:none으로 이벤트 자체 차단)
- 토스트 공통 사양: 에러 bg:
var(--color-error-toast)/ 정보 bg:var(--charcoal), text:var(--bg), position:absolute bottom:24px left:50% transform:translateX(-50%), z-index:50, border-radius:0, 2.6초 후 opacity:0, 3초 후 DOM 제거
7. 모션 스펙
- ❶ 초기 표시: translateY(0) (페이지 로드 시 이미 노출 상태)
- ❶ 닫힘 (closeSheet1):
translateY(100%) + opacity:0, 300ms, ease-in (transform·opacity 동시) - ❶ → ❷ 전환: ❶
translateY(-20px) + opacity:0, 200ms ease-in → 210ms 후 ❶ display:none + ❷translateY(0), 400ms,var(--ease-ios-spring) - ❷ 닫힘 (closeSheet2):
translateY(100%), 300ms, ease-in → 350ms 후 ❶ 리셋 + 로그인 시트 등장 - 로그인 시트 등장 (openLoginSheet):
translateY(0), 400ms,var(--ease-ios-spring) - 로그인 시트 닫힘 (closeLoginSheet):
translateY(100%)(transition 미지정, 즉시) + dim opacity:0, pointer-events:none - 딤: 초기 opacity:1, transition:opacity 0.3s ease-out — ❶·❷ 진행 중 상시 유지, 로그인 시트 X 닫기 시에만 opacity:0
8. 여백·간격 요약
| 구간 | 값 |
|---|---|
| ❶ 핸들 바 상단 여백 | padding-top:12px |
| ❶ X 닫기 위치 | position:absolute top:16px right:20px, padding:4px |
| ❶ 콘텐츠 패딩 | 20px 24px 0 |
| ❶ 타이틀 → 입력 필드 | margin-bottom:16px |
| ❶ 입력 필드 높이 | 48px |
| ❶ 에러 메시지 영역 | margin:6px 0 0, height:18px (레이아웃 고정, visibility 방식) |
| ❶ 전송 버튼 패딩 | padding:24px 24px 0 |
| ❶ 하단 여백 | padding-bottom:32px |
| ❷ 콘텐츠 패딩 | 48px 24px 0 |
| ❷ 아이콘 → 타이틀 | margin-bottom:16px (아이콘 wrapper) |
| ❷ 타이틀 → 안내문구 | margin-bottom:8px |
| ❷ 안내문구 → 확인 버튼 | margin-bottom:40px |
| 버튼 높이 (공통) | 50px (.sb-dp-cta) |
| 좌우 패딩 (공통) | 24px |
9. 적용 디자인 토큰
- 바텀시트 배경 (❶❷ 공통):
--bg→ #FAFAF8, border-radius:0 (R=0) - 딤 오버레이: rgba(26,26,26,0.45) — charcoal 45%
- ❶ 타이틀 "비밀번호 재설정":
--sansvar(--size-xl-font)700,--charcoal, left-align (실제 코드:.sb-dp-modal__titlestyle 인라인 text-align:left) - ❶ 입력 필드: height:48px, bg:
var(--alpha-8), border:1px solidvar(--border-strong), focus → borderColor:var(--charcoal), R=0 - ❶ 에러 메시지:
var(--text-xs)font-size, color:var(--red-brand), visibility:hidden/visible 방식 (레이아웃 shift 방지) - ❶ 전송 버튼:
.sb-dp-cta,--cta-gradientbg, height:50px, R=0 - ❶ 핸들 바: 36x4px,
var(--alpha-12)→ rgba(26,26,26,0.12) - ❶ 닫기(X) 아이콘: 22x22, stroke:
var(--text-muted), 1.5px, stroke-linecap:square, stroke-linejoin:miter - ❷ 아이콘: Lucide mail SVG 24x24, stroke:
var(--red-brand), stroke-linecap:square - ❷ 타이틀:
--sansvar(--size-xl-font)700,--charcoal, center,--ls-tight - ❷ 안내문구:
--sansvar(--size-md-font)500,--text-secondary, center,--ls-normal - ❷ 확인 버튼:
.sb-dp-cta,--cta-gradientbg, height:50px, R=0 - 로그인 시트 이메일 에러:
var(--size-xs-font)12px, color:var(--red-brand), display:none/block 방식 (레이아웃 shift 허용) - 핸들 바 ❷: 없음 (강제 확인형)
- 닫기(X) ❷: 없음