관리자 화면 · 백오피스 로그인
백오피스 진입 — 이메일 형식 오류
BO-LIN-002 · 2026. 02. 25
| 0 | 화면 접근 조건 | - BO-LIN-001 로그인 화면에서 아이디(이메일) 입력값이 이메일 형식이 아닐 경우 노출
- 서버 요청 이전 프론트 단 Validation 단계에서 발생
- 로그인 버튼 클릭 시 또는 입력 포커스 아웃 시 검증 수행
|
| 1 | 오류 안내 메세지 | - 위치
- 스타일
- 빨간색 텍스트
- 입력 필드 에러 상태(보더 강조 또는 배경 강조)
- 올바른 이메일 형식으로 수정 시 즉시 에러 메시지 제거
- 에러 상태에서는 로그인 버튼 비활성
|
| 2 | 공통 규칙 | - 이메일 형식 오류 상태에서는 서버 로그인 요청 실행되지 않음
- 이메일 형식이 정상이고 비밀번호 입력값 존재 시에만 로그인 버튼 활성
- 입력값 삭제 시 에러 메시지 자동 제거
- 본 화면은 독립 페이지가 아닌 BO-LIN-001 로그인 화면의 상태 화면임
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
* 이메일 형식이 아닙니다.
비밀번호 찾기
로그인
| 요소 | 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 | 데스크탑 중앙 정렬 |
| 0 | 화면 접근 조건 | - BO-LIN-001 로그인 화면에서 아이디(이메일) 입력값이 이메일 형식이 아닐 경우 노출
- 서버 요청 이전 프론트 단 Validation 단계에서 발생
- 로그인 버튼 클릭 시 또는 입력 포커스 아웃 시 검증 수행
|
| 1 | 오류 안내 메세지 | - 위치
- 스타일
- 빨간색 텍스트
- 입력 필드 에러 상태(보더 강조 또는 배경 강조)
- 올바른 이메일 형식으로 수정 시 즉시 에러 메시지 제거
- 에러 상태에서는 로그인 버튼 비활성
|
| 2 | 공통 규칙 | - 이메일 형식 오류 상태에서는 서버 로그인 요청 실행되지 않음
- 이메일 형식이 정상이고 비밀번호 입력값 존재 시에만 로그인 버튼 활성
- 입력값 삭제 시 에러 메시지 자동 제거
- 본 화면은 독립 페이지가 아닌 BO-LIN-001 로그인 화면의 상태 화면임
|