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

백오피스 진입 — 각종 모달

BO-LIN-003 · 2026. 02. 25

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

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

화면 ID BO-LIN-003

작성일 2026. 02. 25

로그인 실패

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

확인

비밀번호 찾기

성명을 입력해 주세요.

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

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

이메일을 비밀번호 재설정

2-1

비밀번호 찾기

성명을 입력해 주세요.

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

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

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

이메일을 비밀번호 재설정

2-2

이메일을 확인 해주세요

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

확인

관리자 정보 확인

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

휴대폰 번호 확인해주세요

확인

Description

0	화면 접근 조건	BO-LIN-001 로그인 화면에서 특정 이벤트 발생 시 호출 독립 페이지 아님 (모달 오버레이 구조) 배경은 딤처리
1	로그인 실패 모달	발생 조건 아이디(이메일) 또는 비밀번호 불일치 타이틀: “로그인 실패" 내용: “아이디(이메일) 또는 비밀번호를 확인해주세요" 버튼: “확인" 동작 확인 클릭 시 모달 닫힘 로그인 화면 유지 아이디(이메일) 입력값 유지 비밀번호 입력값 초기화
2-1	비밀번호 찾기 모달	발생 조건 로그인 화면에서 “비밀번호 찾기" 클릭 타이틀: “비밀번호 찾기" 입력필드 성함 아이디(이메일) 휴대폰 번호 우측 상단 닫기(X) 버튼 동작 닫기(X)클릭 시 모달 종료 입력값 초기화
2-2	비밀번호 찾기 모달 - 이메일 형식 오류 안내 메세지	발생 조건 아이디 입력값이 이메일 형식이 아닐 경우 아이디 필드 하단에 “이메일 형식이 아닙니다" 노출 에러 상태에서는 재설정 버튼 비활성 정상 형식 입력 시 에러 문구 즉시 제거
3	비밀번호 찾기 후, 이메일 확인 모달	발생 조건 관리자 정보 일치 재설정 메일 발송 성공 내용 이메일을 확인해주세요 등록된 이메일 주소로 비밀번호 재설정 매일을 전송했습니다 동작 확인 클릭 시 모달 닫힘 로그인 화면 유지
4	비밀번호 찾기 모달 에서 입력한 정보가 없을 경우 발생한 모달	발생 조건 입력 정보 불일치 타이틀: “관리자 정보 확인" 내용 성함, 또는 아이디(이메일) 또는 휴대폰 번호를 확인해주세요 동작 확인 클릭 시 모달 닫힘 비밀번호 찾기 모달 유지 입력값 유지
5	토스트 메시지 정의	비밀번호 재설정 메일 발송 실패(서버 오류) 시 비밀번호 재설정 메일 발송에 실패했습니다. 다시 시도해주세요 화면 하단 중앙 1.5초 노출 필드 하단 에러 텍스트로 처리
6	공통 규칙	모달은 단일 스택 구조 (중첩 모달 금지) 모달 활성 시 배경 스크롤 불가 ESC 키 또는 딤 영역 클릭 시 닫히지 않음 (의도적 닫기만 허용) 재설정 메일은 동일 계정 기준 일정 시간 내 재요청 제한 가능 관리자 정보 불일치 여부는 서버 검증 기준

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 로그인 화면에서 특정 이벤트 발생 시 호출 독립 페이지 아님 (모달 오버레이 구조) 배경은 딤처리
1	로그인 실패 모달	발생 조건 아이디(이메일) 또는 비밀번호 불일치 타이틀: “로그인 실패" 내용: “아이디(이메일) 또는 비밀번호를 확인해주세요" 버튼: “확인" 동작 확인 클릭 시 모달 닫힘 로그인 화면 유지 아이디(이메일) 입력값 유지 비밀번호 입력값 초기화
2-1	비밀번호 찾기 모달	발생 조건 로그인 화면에서 “비밀번호 찾기" 클릭 타이틀: “비밀번호 찾기" 입력필드 성함 아이디(이메일) 휴대폰 번호 우측 상단 닫기(X) 버튼 동작 닫기(X)클릭 시 모달 종료 입력값 초기화
2-2	비밀번호 찾기 모달 - 이메일 형식 오류 안내 메세지	발생 조건 아이디 입력값이 이메일 형식이 아닐 경우 아이디 필드 하단에 “이메일 형식이 아닙니다" 노출 에러 상태에서는 재설정 버튼 비활성 정상 형식 입력 시 에러 문구 즉시 제거
3	비밀번호 찾기 후, 이메일 확인 모달	발생 조건 관리자 정보 일치 재설정 메일 발송 성공 내용 이메일을 확인해주세요 등록된 이메일 주소로 비밀번호 재설정 매일을 전송했습니다 동작 확인 클릭 시 모달 닫힘 로그인 화면 유지
4	비밀번호 찾기 모달 에서 입력한 정보가 없을 경우 발생한 모달	발생 조건 입력 정보 불일치 타이틀: “관리자 정보 확인" 내용 성함, 또는 아이디(이메일) 또는 휴대폰 번호를 확인해주세요 동작 확인 클릭 시 모달 닫힘 비밀번호 찾기 모달 유지 입력값 유지
5	토스트 메시지 정의	비밀번호 재설정 메일 발송 실패(서버 오류) 시 비밀번호 재설정 메일 발송에 실패했습니다. 다시 시도해주세요 화면 하단 중앙 1.5초 노출 필드 하단 에러 텍스트로 처리
6	공통 규칙	모달은 단일 스택 구조 (중첩 모달 금지) 모달 활성 시 배경 스크롤 불가 ESC 키 또는 딤 영역 클릭 시 닫히지 않음 (의도적 닫기만 허용) 재설정 메일은 동일 계정 기준 일정 시간 내 재요청 제한 가능 관리자 정보 불일치 여부는 서버 검증 기준

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