관리자 화면 · 백오피스 공통

GNB / 헤더 (알림 버튼 / 관리자 정보)

BO-ETC-001 · 2026. 03. 04

화면 이름 GNB / 헤더 (알림 버튼 / 관리자 정보)
화면 위치 백오피스 로그인 진입
화면 ID BO-ETC-001
작성일 2026. 03. 04
사용자 관리
joonyoob.kim joonyoob.kim@chaart.co
CHRT.
사용자 관리
작품 관리
거래 관리
작품 문의 관리
1

메인 콘텐츠 영역

(각 메뉴별 화면이 이 영역에 표시됩니다)

2
3
Description
0 화면 접근 조건
  • 백오피스 로그인 후 모든 사용자에게 공통 노출
  • 인증 여부 및 권한(Role)에 따라서 메뉴 노출 범위 달라짐
  • 비인가(Role) 기준으로 접근 위규 노출 현황 달라짐
1 GNB (좌측 사이드바)
  • 구성
    • 상단 : 로고 영역 (CHRT 메인/기본 화면으로 이동)
    • 관리자(이전전달화면하기) 목록으로 이동
    • 메뉴 목록
      • 사용자 관리
      • 작품 관리
      • 거래 관리
      • 작품 문의 관리
    • 추후 메뉴 확장 가능 구조
  • 메뉴 동작
    • 각 메뉴 클릭 시 백오피스 메인(기본 화면)으로 이동
    • 현재 활성 메뉴 표시 (흰색 텍스트 + 배경 강조)
    • 비활성 메뉴 : 50% 불투명도
    • 다단(하위메뉴) 메뉴는 클릭 시 10개 추가 포함
  • 로고 동작
    • CHRT. 로고 클릭 시 백오피스 메인 화면 복귀
    • 50% 크기 시 다른 게 보이도록 설정
    • 직접 검색 요건만 현재 상태 기준 가능
2 알림(아이콘) 버튼
  • 노출 제한
    • 헤더 오른쪽 상단 를 대라건 평대
  • 기능 범위
    • 클릭 시 서버 드롭다운 형식으로 알림 리스트 노출
    • 미읽 알림이 있으면 뱃지 표시
    • 각각의 알림에 읽음 / 미읽음 표시
  • 알림 유형 목록
    • 거래 상태 변경 알림 : 판매 완료된 건에 대한 상태 전환
    • 각종 단관노드도 승인 모달 표현
    • 공지 사항 업데이트 알림
    • 보안 인증 만료 알림
  • 알림 리스트 상세
    • 최근 단관노드도로드(이름)는 클릭 시 10개 추가 포함
    • 각 알림 클릭 시 해당 화면 이동
    • 시간 (상대 표시 : "3분 전", "1시간 전" 등)
3 관리자 정보
  • 구성
    • 관리자 이름
    • 관리자 이메일
    • 동작
  • 동작
    • 클릭 시 드롭다운 노출
      • 계정 설정(마이 그라프트로 API 페이지)
      • 세션 연장
      • 로그인 이력(이전전달화면하기) 이동
      • 로그아웃
  • 로그아웃 결과
    • 로그인 화면으로 이동
4 토스트 / 에러처리 관리
  • 알림 관련
    • 알림 접근 실패 : "알림을 불러오지 못했습니다."
    • 접근 차단 시 : "권한이 부족합니다."
    • 로그 데이터가 없습니다 : "기록 정보가 없습니다."
    • 세션 관련 : "새 세션 진입으로 이용할 수 없습니다."
  • 로그아웃 관련
    • "로그아웃 되었습니다."
    • "비밀 값을 불러오는 것이 지연합니다."
    • "로그아웃 처리 중 오류가 발생하셨습니다."
5 공통 규칙
  • 권한 및 접근 범위
    • GNB 상 메뉴는 로그인 사용자만 접근 가능
    • 각 메뉴 노출은 Role별 기반 진행 작업
    • 권한(관리자)이 없으면 메뉴 숨김 처리
  • 디자인 가이드
    • 사이드바 너비 : 160px (고정)
    • 헤더 높이 : 44px (고정)
    • 메뉴 아이템 높이 : 40px
    • 활성 메뉴 : 흰색 텍스트 + rgba(255,255,255,0.1) 배경
    • 비활성 메뉴 : rgba(255,255,255,0.5) 텍스트
  • 세션 관리
    • 로그인 세션 만료 시 자동 로그아웃 + 안내 모달
    • 다른 기기에서 로그인 시 현재 세션 종료 안내
  • 노출 정보
    • 관리자 이름 노출
    • 디바이스 시 시간(아버지만 시) 추가 변도
    • 직접 검색 시 요건만 50%로 크기 조절(확인소)
  • 확장성 대비 사항
    • 메뉴 추가 시 자동으로 GNB에 반영
    • 필터 기능/날짜 접근 보기 화면 구조
    • 비접근 시 서버 4초 로드시 스피너(자동 해제타) 설정
    • 관리자 화면 전용 공통(모바일 미대응, SPA 기준)
  • 데이터(비(비))/기준
    • 첫 접속 시 (능동) API 자기자연
    • 로그 및 활용 관리 기기기
    • 시트접석 접근 시 사용 제한 표시 사용할 결과
    • 알림 접근 사용 제한 대부분 안내하기/인접(SPA 기준)
  • GNB는 전체 화면에서 사용하며 담당 고유 유지
  • 메뉴(미) 관련 변경사항은 별도 화면에서 관리 (관재발행 확인)
  • 관리자 화면 전용 공통(모바일 미대응)으로 본 화면 직업화면 포함

Design Output

UI 디자인 산출물

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

사용자 관리
joonyoob.kim joonyoob.kim@chaart.co
CHRT.
사용자 관리
작품 관리
거래 관리
작품 문의 관리

메인 콘텐츠 영역

MAIN CONTENT AREA

Applied Design Tokens
요소Token값
사이드바 배경 --charcoal #1A1A1A, 160px 고정
사이드바 로고 CHRT + --red-brand dot 16px, 700 weight, 28px 하단 여백
활성 메뉴 #fff + rgba(255,255,255,0.08) bg 600 weight, 10px 상하 패딩
비활성 메뉴 rgba(255,255,255,0.45) 일반 weight, 동일 패딩
헤더 배경 --bg 44px 고정 높이, border-bottom 0.08
알림 아이콘 bell SVG · square/miter --charcoal, 18px, stroke 1.5
알림 뱃지 --red-brand 7px 원형, 우상단 절대 배치
관리자 이름 --sans 12px 600 --charcoal
관리자 이메일 --mono 11px --text-muted, letter-spacing 0.02em
드롭다운 화살표 chevron-down · square --text-muted, 10px, stroke 2
메인 영역 배경 --bg #FAFAF8
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 백오피스 로그인 후 모든 사용자에게 공통 노출
  • 인증 여부 및 권한(Role)에 따라서 메뉴 노출 범위 달라짐
  • 비인가(Role) 기준으로 접근 위규 노출 현황 달라짐
1 GNB (좌측 사이드바)
  • 구성
    • 상단 : 로고 영역 (CHRT 메인/기본 화면으로 이동)
    • 관리자(이전전달화면하기) 목록으로 이동
    • 메뉴 목록
      • 사용자 관리
      • 작품 관리
      • 거래 관리
      • 작품 문의 관리
    • 추후 메뉴 확장 가능 구조
  • 메뉴 동작
    • 각 메뉴 클릭 시 백오피스 메인(기본 화면)으로 이동
    • 현재 활성 메뉴 표시 (흰색 텍스트 + 배경 강조)
    • 비활성 메뉴 : 50% 불투명도
    • 다단(하위메뉴) 메뉴는 클릭 시 10개 추가 포함
  • 로고 동작
    • CHRT. 로고 클릭 시 백오피스 메인 화면 복귀
    • 50% 크기 시 다른 게 보이도록 설정
    • 직접 검색 요건만 현재 상태 기준 가능
2 알림(아이콘) 버튼
  • 노출 제한
    • 헤더 오른쪽 상단 를 대라건 평대
  • 기능 범위
    • 클릭 시 서버 드롭다운 형식으로 알림 리스트 노출
    • 미읽 알림이 있으면 뱃지 표시
    • 각각의 알림에 읽음 / 미읽음 표시
  • 알림 유형 목록
    • 거래 상태 변경 알림 : 판매 완료된 건에 대한 상태 전환
    • 각종 단관노드도 승인 모달 표현
    • 공지 사항 업데이트 알림
    • 보안 인증 만료 알림
  • 알림 리스트 상세
    • 최근 단관노드도로드(이름)는 클릭 시 10개 추가 포함
    • 각 알림 클릭 시 해당 화면 이동
    • 시간 (상대 표시 : "3분 전", "1시간 전" 등)
3 관리자 정보
  • 구성
    • 관리자 이름
    • 관리자 이메일
    • 동작
  • 동작
    • 클릭 시 드롭다운 노출
      • 계정 설정(마이 그라프트로 API 페이지)
      • 세션 연장
      • 로그인 이력(이전전달화면하기) 이동
      • 로그아웃
  • 로그아웃 결과
    • 로그인 화면으로 이동
4 토스트 / 에러처리 관리
  • 알림 관련
    • 알림 접근 실패 : "알림을 불러오지 못했습니다."
    • 접근 차단 시 : "권한이 부족합니다."
    • 로그 데이터가 없습니다 : "기록 정보가 없습니다."
    • 세션 관련 : "새 세션 진입으로 이용할 수 없습니다."
  • 로그아웃 관련
    • "로그아웃 되었습니다."
    • "비밀 값을 불러오는 것이 지연합니다."
    • "로그아웃 처리 중 오류가 발생하셨습니다."
5 공통 규칙
  • 권한 및 접근 범위
    • GNB 상 메뉴는 로그인 사용자만 접근 가능
    • 각 메뉴 노출은 Role별 기반 진행 작업
    • 권한(관리자)이 없으면 메뉴 숨김 처리
  • 디자인 가이드
    • 사이드바 너비 : 160px (고정)
    • 헤더 높이 : 44px (고정)
    • 메뉴 아이템 높이 : 40px
    • 활성 메뉴 : 흰색 텍스트 + rgba(255,255,255,0.1) 배경
    • 비활성 메뉴 : rgba(255,255,255,0.5) 텍스트
  • 세션 관리
    • 로그인 세션 만료 시 자동 로그아웃 + 안내 모달
    • 다른 기기에서 로그인 시 현재 세션 종료 안내
  • 노출 정보
    • 관리자 이름 노출
    • 디바이스 시 시간(아버지만 시) 추가 변도
    • 직접 검색 시 요건만 50%로 크기 조절(확인소)
  • 확장성 대비 사항
    • 메뉴 추가 시 자동으로 GNB에 반영
    • 필터 기능/날짜 접근 보기 화면 구조
    • 비접근 시 서버 4초 로드시 스피너(자동 해제타) 설정
    • 관리자 화면 전용 공통(모바일 미대응, SPA 기준)
  • 데이터(비(비))/기준
    • 첫 접속 시 (능동) API 자기자연
    • 로그 및 활용 관리 기기기
    • 시트접석 접근 시 사용 제한 표시 사용할 결과
    • 알림 접근 사용 제한 대부분 안내하기/인접(SPA 기준)
  • GNB는 전체 화면에서 사용하며 담당 고유 유지
  • 메뉴(미) 관련 변경사항은 별도 화면에서 관리 (관재발행 확인)
  • 관리자 화면 전용 공통(모바일 미대응)으로 본 화면 직업화면 포함
← 이전 화면: BO-TRN-003 다음 화면 →