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

백오피스 진입 페이지

BO-LIN-001 · 2026. 03. 04

화면 이름 백오피스 진입 페이지
화면 위치 백오피스 진입 · 로그인 페이지
화면 ID BO-LIN-001
작성일 2026. 03. 04
CHRT
ADMIN
1
2
로그인
4
Description
0 화면 접근 조건
  • 백오피스 전용 url 직접 접근 시 진입
  • 로그인 세션이 만료되거나 없는 사용자에게 노출
  • v1.0 개발 범위에서는 "백오피스 사내공구 관리" 로 최종 네이밍(현재 ID 추후 작성)
  • 2차 개발 범위에서 "백오피스-다이렉트" 로 전체 이름화면(ID 추후 작성)
1 차트로고 + 사이트 아이덴티티
  • 구성
    • 좌측 : 차트 로고
    • Admin 텍스트
  • 동작
    • 클릭 시 별도 이동 없음
    • 단순 사이트 표시
2 아이디 입력필드
  • 구성
    • 단일 입력 필드, "아이디(이메일)을 입력해주세요."
  • 동작
    • 포커스 입력란
    • 유효성 검증
      • 이메일 형식이 아닐 경우 에러 텍스트 노출
      • BO-LIN-002
    • 공백인 입력 시 유효성검사 미적용 없음
3 비밀번호 입력필드
  • 구성
    • 마스크 처리
    • 플레이스 홀더, "비밀번호를 입력해주세요."
  • 동작
    • 포커스 입력란
    • 공백인 입력 시 공등조건으로 연동작가적 없음
4 성명/비번 찾기 버튼
  • 동작
    • 텍스트 버튼, "성명/비번 찾기"
    • 클릭 시
      • 비밀번호 찾기 모달 오출
      • BO-LIN-003
5 로그인 버튼
  • 구성
    • 풀 폭 텍스트 "로그인"
    • 활성 조건
      • 아이디(이메일) 입력값 존재
      • 비밀번호 입력값 존재
      • 둘 다 채워져야 활성화
  • 클릭 시 동작
    • 서버 측 백엔드에서 "백오피스 사용자 관리" 로 자체 이름화면(현재 ID 추후 작성)
    • 2차 개발 범위에서 "백오피스 다이렉트" 로 자동 이름화면(ID 추후 작성)
    • 로그인 실패 모달 호출
      • BO-LIN-003
6 토스트 메시지 정책
  • 로그인 성공 시
    • "로그인 성공"
    • 웨어하우스 대쉬보드 토스트 노출
  • 토스트 기본 규칙
    • 1.5초 또는 하단에서
    • 포인트 색(charcoal 배경 / 흰 텍스트)
    • "로그인 관련 실패시 제발이 섞인이라도 비밀번호를 확인 해주세요"
    • 별도의 대쉬보드 토스트 노출
  • 별도 2차 개발 범위의 토스트 사용자기적 있음
    • 검색 처리 오류
    • BO-LIN-003
7 공통규칙
  • 로그인 스크린은 반듯 전 화면 시 1회 실행
  • 이동 등 후에는 비밀번호이나 값이
  • 쿠키 해제 방식
  • 자동로그인 시 보안에 고른 활성화 존재
  • 이메일 및 비밀번호 대한 대한 유효성의 수행
  • 대시보드 접근 시 순서 상 유효
  • 로그인 상태 확인 쿠키를 세션 기준으로 서버에서 카운트
    • 세션 일괄 관리
    • 세션 만료 리스트 작성
    • 서재삭정은 해제된 문의를 프로 그인 가능
    • 설비비는 페이징 통한 프로 시스템
  • 검색 현황
    • 로그인 버튼 클릭 시 서버 관할이 입력 토스트 노출

Design Output

UI 디자인 산출물

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

ADMIN
CHAART Back-Office v1.0
아이디(이메일)을 입력해 주세요.
비밀번호을 입력해주세요.
성명/비번 찾기
로그인
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
CHRT 로고 CHRT 모노그램 SVG --charcoal + --red-brand dot
ADMIN 텍스트 --sans · 32px · 300 Pretendard, --charcoal, letter-spacing: 0.06em
입력 필드 --size-lg-height 48px border: rgba(26,26,26,0.12), R=0 (직각)
플레이스홀더 --sans · 14px --text-muted
로그인 버튼 --charcoal bg · 50px 직각 (R=0), 텍스트 #fff, 600
성명/비번 찾기 --sans · 13px --text-secondary, underline
Hero 영역 --paper + linen Paper-Catalog 메타포
에디션 라벨 --mono · 8px TASA Orbiter, rgba(26,26,26,0.25)
폼 너비 360px centered 데스크탑 중앙 정렬
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 백오피스 전용 url 직접 접근 시 진입
  • 로그인 세션이 만료되거나 없는 사용자에게 노출
  • v1.0 개발 범위에서는 "백오피스 사내공구 관리" 로 최종 네이밍(현재 ID 추후 작성)
  • 2차 개발 범위에서 "백오피스-다이렉트" 로 전체 이름화면(ID 추후 작성)
1 차트로고 + 사이트 아이덴티티
  • 구성
    • 좌측 : 차트 로고
    • Admin 텍스트
  • 동작
    • 클릭 시 별도 이동 없음
    • 단순 사이트 표시
2 아이디 입력필드
  • 구성
    • 단일 입력 필드, "아이디(이메일)을 입력해주세요."
  • 동작
    • 포커스 입력란
    • 유효성 검증
      • 이메일 형식이 아닐 경우 에러 텍스트 노출
      • BO-LIN-002
    • 공백인 입력 시 유효성검사 미적용 없음
3 비밀번호 입력필드
  • 구성
    • 마스크 처리
    • 플레이스 홀더, "비밀번호를 입력해주세요."
  • 동작
    • 포커스 입력란
    • 공백인 입력 시 공등조건으로 연동작가적 없음
4 성명/비번 찾기 버튼
  • 동작
    • 텍스트 버튼, "성명/비번 찾기"
    • 클릭 시
      • 비밀번호 찾기 모달 오출
      • BO-LIN-003
5 로그인 버튼
  • 구성
    • 풀 폭 텍스트 "로그인"
    • 활성 조건
      • 아이디(이메일) 입력값 존재
      • 비밀번호 입력값 존재
      • 둘 다 채워져야 활성화
  • 클릭 시 동작
    • 서버 측 백엔드에서 "백오피스 사용자 관리" 로 자체 이름화면(현재 ID 추후 작성)
    • 2차 개발 범위에서 "백오피스 다이렉트" 로 자동 이름화면(ID 추후 작성)
    • 로그인 실패 모달 호출
      • BO-LIN-003
6 토스트 메시지 정책
  • 로그인 성공 시
    • "로그인 성공"
    • 웨어하우스 대쉬보드 토스트 노출
  • 토스트 기본 규칙
    • 1.5초 또는 하단에서
    • 포인트 색(charcoal 배경 / 흰 텍스트)
    • "로그인 관련 실패시 제발이 섞인이라도 비밀번호를 확인 해주세요"
    • 별도의 대쉬보드 토스트 노출
  • 별도 2차 개발 범위의 토스트 사용자기적 있음
    • 검색 처리 오류
    • BO-LIN-003
7 공통규칙
  • 로그인 스크린은 반듯 전 화면 시 1회 실행
  • 이동 등 후에는 비밀번호이나 값이
  • 쿠키 해제 방식
  • 자동로그인 시 보안에 고른 활성화 존재
  • 이메일 및 비밀번호 대한 대한 유효성의 수행
  • 대시보드 접근 시 순서 상 유효
  • 로그인 상태 확인 쿠키를 세션 기준으로 서버에서 카운트
    • 세션 일괄 관리
    • 세션 만료 리스트 작성
    • 서재삭정은 해제된 문의를 프로 그인 가능
    • 설비비는 페이징 통한 프로 시스템
  • 검색 현황
    • 로그인 버튼 클릭 시 서버 관할이 입력 토스트 노출
← 이전 화면: PRS-004 다음 화면: BO-LIN-002 →