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

이메일 로그인 ID/PW 입력 바텀시트

LOG-003 · 2026. 03. 04

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

아이디

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

비밀번호

비밀번호를 입력해주세요.
로그인 하기

비밀번호 찾기

1
Description
1 이메일 로그인 바텀시트
  • 노출 방식
    • 화면 하단에서 슬라이드 업 형태로 노출되는 바텀시트
    • 로그인 진입 화면(LOG-001)에서 '이메일 로그인' 버튼 클릭 시 노출
  • 닫기
    • 우측 상단 닫기(X) 버튼 클릭 시 바텀시트 닫힘
    • 바텀시트 닫힘 시 로그인 프로세스 중단
    • 로그인 진입 화면(LOG-001)으로 복귀
  • 아이디(이메일) 입력 영역
    • 입력 필드
      • 아이디(이메일) 입력 필드 노출
      • 플레이스홀더: 아이디(이메일)를 입력해주세요
    • 입력 규칙
      • 이메일 형식 입력만 허용
      • 이메일 형식이 아닌 경우 로그인 버튼 비활성화 유지
    • 입력 상태
      • 입력값 존재 시 로그인 버튼 활성화 조건 판단에 포함
  • 비밀번호 입력 영역
    • 입력 필드
      • 비밀번호 입력 필드 노출
      • 플레이스홀더: 비밀번호를 입력해주세요
    • 입력 규칙
      • 비밀번호 마스킹 처리
      • 입력값 존재 시 로그인 버튼 활성화 조건 판단에 포함
  • 로그인 하기 버튼
    • 기본 상태: 비활성화
    • 활성화 조건
      • 아이디(이메일) 입력 완료
      • 비밀번호 입력 완료
    • 클릭할 경우
      • 입력된 아이디/비밀번호 정보로 로그인 요청
  • 로그인 결과 처리
    • 로그인 성공 시
      • 입력된 이메일 계정이 기존 소셜 로그인 계정과 연동 가능한 상태일 경우
        • 로그인 성공 메시지 토스트 노출 후, 소셜 로그인 계정 머지(연동) 안내 화면으로 이동
      • 머지 대상이 없는 경우
        • 로그인 요청 발생 시점의 원래 화면으로 이동
    • 로그인 실패 시
      • 오류 바텀 시트 이동 (LOG-005)
  • 비밀번호 찾기
    • 로그인 버튼 하단에 텍스트 버튼 형태로 노출
    • 클릭 시 비밀번호 재설정 바텀시트로 이동 (LOG-006)
  • 예외 및 차단 케이스
    • 아이디 또는 비밀번호 미입력 상태 → 로그인 버튼 비활성화 유지
    • 바텀시트 닫기(X) 클릭 시
      • 이메일 로그인 프로세스 종료
      • 이전 화면(LOG-001)으로 복귀

Design Output

UI 디자인 산출물

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

9:41
차트 Chaart
Top Collectors'
Picks
아이디(이메일)를 입력해주세요.
비밀번호를 입력해주세요.
로그인 하기

비밀번호 찾기

Applied Design Tokens
요소Token값
바텀시트 배경 --bg #FAFAF8 — 직각 (R=0)
딤 오버레이 --charcoal 40% rgba(26,26,26,0.4)
필드 라벨 --mono · 12px · 600 TASA Orbiter, ls: 0.04em, uppercase
입력 필드 48px height · --charcoal 4% bg 직각, border: 1px solid rgba(26,26,26,0.07)
플레이스홀더 --sans · 14px · --text-muted Pretendard, #888888
로그인 하기 버튼 --charcoal bg · 50px 직각, 15px font, 600 weight
비밀번호 찾기 --sans · 13px · --text-muted 텍스트 버튼, center-aligned
닫기(X) 아이콘 22×22 · --text-muted stroke: square/miter, 1.5px
핸들 바 --charcoal 12% 36×4px, rgba(26,26,26,0.12)
좌우 패딩 24px 바텀시트 내부 콘텐츠 마진
필드 간격 20px top padding 아이디↔비밀번호 섹션 간격
Design Description

Update History

2026.03.04초기 디자인 작성
1 이메일 로그인 바텀시트
  • 노출 방식
    • 화면 하단에서 슬라이드 업 형태로 노출되는 바텀시트
    • 로그인 진입 화면(LOG-001)에서 '이메일 로그인' 버튼 클릭 시 노출
  • 닫기
    • 우측 상단 닫기(X) 버튼 클릭 시 바텀시트 닫힘
    • 바텀시트 닫힘 시 로그인 프로세스 중단
    • 로그인 진입 화면(LOG-001)으로 복귀
  • 아이디(이메일) 입력 영역
    • 입력 필드
      • 아이디(이메일) 입력 필드 노출
      • 플레이스홀더: 아이디(이메일)를 입력해주세요
    • 입력 규칙
      • 이메일 형식 입력만 허용
      • 이메일 형식이 아닌 경우 로그인 버튼 비활성화 유지
    • 입력 상태
      • 입력값 존재 시 로그인 버튼 활성화 조건 판단에 포함
  • 비밀번호 입력 영역
    • 입력 필드
      • 비밀번호 입력 필드 노출
      • 플레이스홀더: 비밀번호를 입력해주세요
    • 입력 규칙
      • 비밀번호 마스킹 처리
      • 입력값 존재 시 로그인 버튼 활성화 조건 판단에 포함
  • 로그인 하기 버튼
    • 기본 상태: 비활성화
    • 활성화 조건
      • 아이디(이메일) 입력 완료
      • 비밀번호 입력 완료
    • 클릭할 경우
      • 입력된 아이디/비밀번호 정보로 로그인 요청
  • 로그인 결과 처리
    • 로그인 성공 시
      • 입력된 이메일 계정이 기존 소셜 로그인 계정과 연동 가능한 상태일 경우
        • 로그인 성공 메시지 토스트 노출 후, 소셜 로그인 계정 머지(연동) 안내 화면으로 이동
      • 머지 대상이 없는 경우
        • 로그인 요청 발생 시점의 원래 화면으로 이동
    • 로그인 실패 시
      • 오류 바텀 시트 이동 (LOG-005)
  • 비밀번호 찾기
    • 로그인 버튼 하단에 텍스트 버튼 형태로 노출
    • 클릭 시 비밀번호 재설정 바텀시트로 이동 (LOG-006)
  • 예외 및 차단 케이스
    • 아이디 또는 비밀번호 미입력 상태 → 로그인 버튼 비활성화 유지
    • 바텀시트 닫기(X) 클릭 시
      • 이메일 로그인 프로세스 종료
      • 이전 화면(LOG-001)으로 복귀
← 이전 화면: LOG-002 다음 화면: LOG-004 →