관리자 화면 · 백오피스 로그인

백오피스 진입 — 이메일 형식 오류

BO-LIN-002 · 2026. 03. 04

화면 이름 백오피스 진입 — 이메일 형식 오류
화면 위치 백오피스 진입 · 로그인 페이지 > 이메일 형식 오류
화면 ID BO-LIN-002
작성일 2026. 03. 04
CHRT
ADMIN
* 이메일 형식이 아닙니다.
1
로그인
Description
0 화면 접근 조건
  • BO-LIN-001 로그인 화면에서 아이디(이메일)을 입력완료 이메일 형식이 아닐 경우 노출
  • 아닐 요건일 건 포커스 건 이탈(blur/blur) 이전에도 행동
  • 로그인 버튼 클릭 시 또는 인풋 포커스 아웃 시 검증 수행
1 오류 안내 메시지
  • 구성
    • 아이디 입력 필드 직하
    • 노출 문건
    • "* 이메일 형식이 아닙니다."
  • 스타일
    • 빨간색 텍스트
      • 검색 필드 하의 실내뱃(이전 요즘 또는 하의 설정)
  • 동작
    • 필수 전메일 올바르그오 수정 시 즉시에러 메시지 제거
    • 에러 상태에서 그건에 하는 제입력 제체
2 공통 규칙
  • 이메일 형식 오류 상태에서는 서버 로그인 요청 실행되지 않음
  • 이메일 형식이 맞더니다 서재진된 관체가 하여도 로그인 버튼 활성
  • 않변인 서 렉인에 하면(이 하면의) 리인 시 로그인 버튼 입성
  • 검증은 즉 해제가가 아닌 BO-LIN-001 로그인 화면이 (리얼 화면인)
  • 클릭 이전에 는 즉 실행에서만 에러 표출

Design Output

UI 디자인 산출물

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

ADMIN
CHAART Back-Office v1.0
아이디(이메일)을 입력해 주세요.
* 이메일 형식이 아닙니다.
비밀번호을 입력해주세요.
비밀번호 찾기
로그인
Applied Design Tokens
요소Token
전체 배경 --bg #FAFAF8
에러 입력 필드 --red-brand border #961E23 border, R=0
에러 텍스트 --red-brand · 12px · 500 "* 이메일 형식이 아닙니다."
정상 입력 필드 rgba(26,26,26,0.12) border 48px height, R=0 (직각)
플레이스홀더 --sans · 14px --text-muted
로그인 버튼 --charcoal bg · 50px 직각 (R=0), 텍스트 #fff
비밀번호 찾기 --sans · 13px --text-secondary, underline
Hero 영역 --paper + linen Paper-Catalog 메타포
폼 너비 360px centered 데스크탑 중앙 정렬
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • BO-LIN-001 로그인 화면에서 아이디(이메일)을 입력완료 이메일 형식이 아닐 경우 노출
  • 아닐 요건일 건 포커스 건 이탈(blur/blur) 이전에도 행동
  • 로그인 버튼 클릭 시 또는 인풋 포커스 아웃 시 검증 수행
1 오류 안내 메시지
  • 구성
    • 아이디 입력 필드 직하
    • 노출 문건
    • "* 이메일 형식이 아닙니다."
  • 스타일
    • 빨간색 텍스트
      • 검색 필드 하의 실내뱃(이전 요즘 또는 하의 설정)
  • 동작
    • 필수 전메일 올바르그오 수정 시 즉시에러 메시지 제거
    • 에러 상태에서 그건에 하는 제입력 제체
2 공통 규칙
  • 이메일 형식 오류 상태에서는 서버 로그인 요청 실행되지 않음
  • 이메일 형식이 맞더니다 서재진된 관체가 하여도 로그인 버튼 활성
  • 않변인 서 렉인에 하면(이 하면의) 리인 시 로그인 버튼 입성
  • 검증은 즉 해제가가 아닌 BO-LIN-001 로그인 화면이 (리얼 화면인)
  • 클릭 이전에 는 즉 실행에서만 에러 표출
← 이전 화면: BO-LIN-001 다음 화면: BO-LIN-003 →