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

백오피스 진입 페이지

BO-LIN-001 · 2026. 02. 25

화면 이름 백오피스 진입 페이지
화면 위치 백오피스 진입 · 로그인 페이지
화면 ID BO-LIN-001
작성일 2026. 02. 25
CHRT
ADMIN
1
2
로그인
4
Description
0 화면 접근 조건
  • 백오피스 전용 url 직접 접근 시 진입
  • 로그인 세션이 존재하지 않는 경우에만 노출
  • 로그인 세션이 유효한 경우
    • 1차 개발 범위에서 “백오피스-사용자 관리”로 자동 이동(화면 ID 추후 작성)
    • 2차 개발 범위에서 “백오피스-대시보드”로 자동 이동(화면 ID 추후 작성)
1 차트로고+ 사이트 아이덴티티
  • 구성
    • 차트 로고
    • Admin 텍스트
    • 클릭 시 별도 이동 없음
    • 단순 식별 요소
2 아이디 입력필드
  • 구성
    • 단일 입력 필드
    • 플레이스 홀더: “아이디(이메일)을 입력해주세요.”
    • 필수 입력값
    • 이메일 형식 검증 수행
    • 형식 오류시
      • 입력 필드 하단에 빨간색 텍스트 노출
      • BO-LIN-002
3 비밀번호 입력필드
  • 구성
    • 마스킹 처리
    • 플레이스 홀더: “비밀번호를 입력해주세요.”
    • 필수 입력값
    • 공백만 입력 시 유효값으로 인정하지 않음
4 비밀번호 찾기 버튼
  • 구성
    • 텍스트 버튼 : “비밀번호 찾기"
    • 클릭 시
      • 비밀번호 찾기 모달 호출
      • BO-LIN-003
5 로그인 버튼
  • 구성
    • 버튼 텍스트: “로그인"
    • 아이디 입력값 존재
    • 비밀번호 입력값 존재
    • 이메일 형식 오류가 없는 상태
  • 클릭 시 동작
    • 로그인 성공
      • 세션 발급
      • 1차 개발 범위에서 “백오피스-사용자 관리”로 자동 이동(화면 ID 추후 작성)
      • 2차 개발 범위에서 “백오피스-대시보드”로 자동 이동(화면 ID 추후 작성)
      • 로그인 실패 모달 호출
      • BO-LIN-003
6 토스트 메시지 정의
  • 로그인 성공 시
    • “로그인 완료"
    • 화면 하단 중앙 토스트 노출
    • 1.5초 후 자동 사라짐
    • “로그인 다수 실패로 계정이 잠겼습니다. 비밀번호를 재설정해주세요.”
    • 화면 하단 중앙 토스트 노출
    • 1.5초 후 자동 사라짐
  • 일반 로그인 실패 시 토스트 사용하지 않음
    • 실패는 모달로 처리
    • BO-LIN-003
7 공통규칙
  • 로그인 요청은 버튼 클릭 시 1회 실행
  • 요청 중 버튼 비활성 처리
  • 중복 클릭 방지
  • 세션 만료 시 재로그인 필요
  • 이메일 형식 검증은 서버 요청 이전에 수행
  • 입력값은 로그인 실패 시 유지
  • 로그인 실패 횟수는 계정 기준으로 서버에서 카운트
  • 5회 연속 실패 시
    • 계정 잠금 처리
    • 추가 로그인 시도 차단
    • 비밀번호 재설정 후에만 로그인 가능
  • 잠금 상태에서는
    • 로그인 버튼 클릭 시 서버 요청 없이 잠금 토스트 노출

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:var(--ls-wide)
입력 필드 --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 직접 접근 시 진입
  • 로그인 세션이 존재하지 않는 경우에만 노출
  • 로그인 세션이 유효한 경우
    • 1차 개발 범위에서 “백오피스-사용자 관리”로 자동 이동(화면 ID 추후 작성)
    • 2차 개발 범위에서 “백오피스-대시보드”로 자동 이동(화면 ID 추후 작성)
1 차트로고+ 사이트 아이덴티티
  • 구성
    • 차트 로고
    • Admin 텍스트
    • 클릭 시 별도 이동 없음
    • 단순 식별 요소
2 아이디 입력필드
  • 구성
    • 단일 입력 필드
    • 플레이스 홀더: “아이디(이메일)을 입력해주세요.”
    • 필수 입력값
    • 이메일 형식 검증 수행
    • 형식 오류시
      • 입력 필드 하단에 빨간색 텍스트 노출
      • BO-LIN-002
3 비밀번호 입력필드
  • 구성
    • 마스킹 처리
    • 플레이스 홀더: “비밀번호를 입력해주세요.”
    • 필수 입력값
    • 공백만 입력 시 유효값으로 인정하지 않음
4 비밀번호 찾기 버튼
  • 구성
    • 텍스트 버튼 : “비밀번호 찾기"
    • 클릭 시
      • 비밀번호 찾기 모달 호출
      • BO-LIN-003
5 로그인 버튼
  • 구성
    • 버튼 텍스트: “로그인"
    • 아이디 입력값 존재
    • 비밀번호 입력값 존재
    • 이메일 형식 오류가 없는 상태
  • 클릭 시 동작
    • 로그인 성공
      • 세션 발급
      • 1차 개발 범위에서 “백오피스-사용자 관리”로 자동 이동(화면 ID 추후 작성)
      • 2차 개발 범위에서 “백오피스-대시보드”로 자동 이동(화면 ID 추후 작성)
      • 로그인 실패 모달 호출
      • BO-LIN-003
6 토스트 메시지 정의
  • 로그인 성공 시
    • “로그인 완료"
    • 화면 하단 중앙 토스트 노출
    • 1.5초 후 자동 사라짐
    • “로그인 다수 실패로 계정이 잠겼습니다. 비밀번호를 재설정해주세요.”
    • 화면 하단 중앙 토스트 노출
    • 1.5초 후 자동 사라짐
  • 일반 로그인 실패 시 토스트 사용하지 않음
    • 실패는 모달로 처리
    • BO-LIN-003
7 공통규칙
  • 로그인 요청은 버튼 클릭 시 1회 실행
  • 요청 중 버튼 비활성 처리
  • 중복 클릭 방지
  • 세션 만료 시 재로그인 필요
  • 이메일 형식 검증은 서버 요청 이전에 수행
  • 입력값은 로그인 실패 시 유지
  • 로그인 실패 횟수는 계정 기준으로 서버에서 카운트
  • 5회 연속 실패 시
    • 계정 잠금 처리
    • 추가 로그인 시도 차단
    • 비밀번호 재설정 후에만 로그인 가능
  • 잠금 상태에서는
    • 로그인 버튼 클릭 시 서버 요청 없이 잠금 토스트 노출
← 이전 화면: BO-INQ-002 다음 화면: BO-LIN-002 →