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

백오피스 진입 — 각종 모달

BO-LIN-003 · 2026. 03. 04

화면 이름 백오피스 진입 — 각종 모달

화면 위치 백오피스 진입 · 각종 모달

화면 ID BO-LIN-003

작성일 2026. 03. 04

로그인 실패

아이디(이메일) 또는 비밀번호를
확인해주세요

확인

비밀번호 찾기

성명을 입력해 주세요.

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

휴대폰 연락을 입력해주세요.

이메일을 비밀번호 재설정

2-1

비밀번호 찾기

성명을 입력해 주세요.

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

* 이메일 형식이 아닙니다.

핸드폰 번호를 입력해주세요.

이메일을 비밀번호 재설정

2-2

이메일을 확인 해주세요

등록된 이메일 주소로
비밀번호 재설정 메일을
전송했습니다

확인

관리자 정보 확인

성명 또는 아이디(이메일)

휴대폰 번호 확인해주세요

확인

Description

0	화면 접근 조건	BO-LIN-001 로그인 화면에서 특정 이벤트 발생 시 호출 백오피스 로그인 관련 모달 다이얼로그(약 5가지) 배경은 딤처리
1	로그인 실패 모달	발생 조건 로그인 실패(이 또는 비밀번호 틀림)기 구성 타이틀: "로그인 실패" 내용: "아이디(이메일) 또는 비밀번호를 확인해주세요" 동작 확인 클릭 시 모달 닫힘 포커스 아이디(이메일)필 유지 이전에 입력된 값 유지
2-1	비밀번호 찾기 모달	로그인 화면에서 "성명/비번 찾기" 클릭 구성 "비밀번호 찾기" 성명 아이디(이메일) 휴대폰 연락처 우측 상단 닫기(X) 버튼 동작 모든 필드 입력 후 하단 연결 선택하면 비밀번호 재설정 이메일을 비밀번호 재설정 안내 발송
2-2	비밀번호 찾기 — 이메일 형식 오류	발생 조건 아이디 필드값이 이메일 형식이 아닌 경우 동작 이메일 입력란에 "이메일 형식이 아닙니다" 노출 빨간색 에러 텍스트 비밀번호 재설정 메일은 전송 불가
3	비밀번호 재설정 메일 발송 완료	이메일로 정보 확인하라의 안내 구성 "이메일을 확인 해주세요" 비밀번호 재설정 메일을 전송했습니다 동작 확인 클릭 시 모달 닫힘 로그인 화면 이동
4	관리자 정보 확인 모달	발생 조건 "관리자 정보 확인" 요청 시 구성 성명, 또는 아이디(이메일) 또는 휴대폰 번호를 확인해주세요 동작 확인 클릭 시 모달 닫힘 로그인 화면 이동
5	토스트 메시지 정책	비밀번호 이상으로(변경 해당) 성공된(변경) 시 로 보내던 비밀번호 재설정 링크 유효성의 검약하어 다시 시도해주세요 재전송 버튼 1.5초 쿨타임 확인 후 리다이렉트 시 사용자적 검증 토스트 위치와 테스트로 위치
6	공통규칙	모달과 입력 소거 건 (클래스 초기화 규칙) ESC 키 또는 닫기 클릭 시 서재적에서 (입력값 초기화기의 바와) 비밀번호 재설정 메일 전송 후 시간이 5분을 넘겨서 차단 재전송 가능 관리자 정보 불일치기 여하는 서버 관할 적용의 기준

Design Output

UI 디자인 산출물

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

로그인 실패

아이디(이메일) 또는 비밀번호를
확인해주세요

확인

비밀번호 찾기

성명을 입력해 주세요.

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

휴대폰 연락을 입력해주세요.

이메일을 비밀번호 재설정

비밀번호 찾기

성명을 입력해 주세요.

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

* 이메일 형식이 아닙니다.

핸드폰 번호를 입력해주세요.

이메일을 비밀번호 재설정

이메일을 확인 해주세요

등록된 이메일 주소로
비밀번호 재설정 메일을
전송했습니다

확인

관리자 정보 확인

성명 또는 아이디(이메일)

휴대폰 번호 확인해주세요

확인

Applied Design Tokens

요소	Token	값
모달 배경	`--bg`	#FAFAF8
딤 배경	rgba(0,0,0,0.35)	모달 뒤 오버레이
모달 타이틀	`--sans` · 17px · 700	Pretendard, `--charcoal`
모달 본문	`--sans` · 13px	`--text-secondary`, line-height 1.7
확인 버튼	`--charcoal` bg · 44px	직각 (R=0), 텍스트 #fff
닫기(X) 아이콘	16px · square/miter	`--text-muted`, stroke 1.5
폼 라벨	`--sans` · 12px · 600	`--charcoal`
폼 입력 필드	42px height	border: rgba(26,26,26,0.12), R=0
에러 상태	`--red-brand`	border + 에러 텍스트 11px
구분선	rgba(26,26,26,0.06)	1px solid, 모달 하단 구분
모달 border	`--charcoal`	1px solid, 직각 (R=0)
정보 라벨	`--sans` · 13px · 600	`--charcoal`, min-width 80px

Design Description

Update History

2026.03.04초기 디자인 작성

0	화면 접근 조건	BO-LIN-001 로그인 화면에서 특정 이벤트 발생 시 호출 백오피스 로그인 관련 모달 다이얼로그(약 5가지) 배경은 딤처리
1	로그인 실패 모달	발생 조건 로그인 실패(이 또는 비밀번호 틀림)기 구성 타이틀: "로그인 실패" 내용: "아이디(이메일) 또는 비밀번호를 확인해주세요" 동작 확인 클릭 시 모달 닫힘 포커스 아이디(이메일)필 유지 이전에 입력된 값 유지
2-1	비밀번호 찾기 모달	로그인 화면에서 "성명/비번 찾기" 클릭 구성 "비밀번호 찾기" 성명 아이디(이메일) 휴대폰 연락처 우측 상단 닫기(X) 버튼 동작 모든 필드 입력 후 하단 연결 선택하면 비밀번호 재설정 이메일을 비밀번호 재설정 안내 발송
2-2	비밀번호 찾기 — 이메일 형식 오류	발생 조건 아이디 필드값이 이메일 형식이 아닌 경우 동작 이메일 입력란에 "이메일 형식이 아닙니다" 노출 빨간색 에러 텍스트 비밀번호 재설정 메일은 전송 불가
3	비밀번호 재설정 메일 발송 완료	이메일로 정보 확인하라의 안내 구성 "이메일을 확인 해주세요" 비밀번호 재설정 메일을 전송했습니다 동작 확인 클릭 시 모달 닫힘 로그인 화면 이동
4	관리자 정보 확인 모달	발생 조건 "관리자 정보 확인" 요청 시 구성 성명, 또는 아이디(이메일) 또는 휴대폰 번호를 확인해주세요 동작 확인 클릭 시 모달 닫힘 로그인 화면 이동
5	토스트 메시지 정책	비밀번호 이상으로(변경 해당) 성공된(변경) 시 로 보내던 비밀번호 재설정 링크 유효성의 검약하어 다시 시도해주세요 재전송 버튼 1.5초 쿨타임 확인 후 리다이렉트 시 사용자적 검증 토스트 위치와 테스트로 위치
6	공통규칙	모달과 입력 소거 건 (클래스 초기화 규칙) ESC 키 또는 닫기 클릭 시 서재적에서 (입력값 초기화기의 바와) 비밀번호 재설정 메일 전송 후 시간이 5분을 넘겨서 차단 재전송 가능 관리자 정보 불일치기 여하는 서버 관할 적용의 기준

← 이전 화면: BO-LIN-002 다음 화면: BO-USR-001 →