관리자 화면 · 백오피스 사용자 관리

사용자 관리 메인

BO-USR-001 · 2026. 02. 26

화면 이름 사용자 관리 메인
화면 위치 백오피스 로그인 진입 > 사용자 관리 메뉴 클릭
화면 ID BO-USR-001
작성일 2026. 02. 26
화면 이름
사용자 관리 메인
화면 위치
백오피스 로그인 진입 > 사용자 관리 메뉴 클릭
화면 ID
BO-USR-001
작성일
2026. 02. 26
[CHRT]
1
사용자 관리
작품 관리
거래 관리
작품 문의 관리
2 사용자 관리
김운영 (관리자) · joonyoob.kim@chaart.co
전체기간
전체 사용자수
123,456
활성/정지 사용자수
120,000 / 3,456
탈퇴 사용자수
56
VIP 사용자수
1,234
3 검색필터
가입일 20YY-MM-DD   ~   20YY-MM-DD
검색 유형 회원명 회원명을 입력해주세요.
회원 유형 일반
상태 ☐ 활성   ☐ 정지   ☐ 탈퇴
초기화
조회
4 사용자 리스트
10개씩 보기 ▼ 엑셀 다운로드
no 아이디(이메일) 로그인 타입 상태 본인 인증 여부 가입 일시 탈퇴 일시 광고 수신 동의 상세보기
10abcd@efgh.comGoogle활성인증20YY. MM. DD HH:MM20YY. MM. DD HH:MMY상세보기
9abcd@efgh.comKakao정지미인증20YY. MM. DD HH:MM-N상세보기
8abcd@efgh.comApple탈퇴인증20YY. MM. DD HH:MM20YY. MM. DD HH:MMY상세보기
7abcd@efgh.comNaver활성미인증20YY. MM. DD HH:MM-N상세보기
6abcd@efgh.com이메일활성인증20YY. MM. DD HH:MM20YY. MM. DD HH:MMY상세보기
5abcd@efgh.comGoogle활성미인증20YY. MM. DD HH:MM-N상세보기
4abcd@efgh.comKakao활성인증20YY. MM. DD HH:MM20YY. MM. DD HH:MMY상세보기
3abcd@efgh.comApple활성미인증20YY. MM. DD HH:MM-N상세보기
2abcd@efgh.comNaver활성인증20YY. MM. DD HH:MM20YY. MM. DD HH:MMY상세보기
1abcd@efgh.com이메일/Google활성미인증20YY. MM. DD HH:MM-N상세보기
«   1   2   3   4   5   6   7   8   9   10   »
Description
0 화면 접근 조건
  • 백오피스 로그인 완료 상태
  • 관리자 권한 계정만 접근 가능
  • 좌측 GNB > 사용자 관리 메뉴 클릭 시 진입
  • 진입 시 처리
    • 전체 사용자 수 통계 조회
    • 기본 검색 조건: 최근 가입순 정렬
    • 최초 진입 시 검색 자동 실행
    • 조회 실패 시: “사용자 목록을 불러오지 못했습니다.” 토스트
1 GNB
  • 좌측 메뉴 영역
  • 현재 메뉴: 사용자 관리 Active 표시
  • 다른 메뉴 클릭 시 해당 화면 이동
  • 이동 시 현재 검색 조건 유지하지 않음 (메뉴 이동은 독립)
  • LOG 적재
    • 메뉴 진입 시 LOG 기록
      • 메뉴명: 사용자 관리
2 헤더
  • 상단 사용자 관리 타이틀 영역
  • 우측 상단 로그인 관리자 정보 표시
3 간이 대시보드
  • 사용자 통계 요약 확인
  • 구성
    • 전체 사용자수 (이번달 추가 사용자수)
    • 활성/정지 사용자수
    • 탈퇴 사용자수
    • VIP 사용자수
    • 서버 집계 데이터 기반
    • 상태값 기준 집계
    • 등급=VIP 기준 집계
  • 예외 처리
    • 데이터가 없을 경우 0 표시
    • 로딩 시 스켈레톤 처리
4 검색 필터
  • 구성 요소
    • 가입일 기간 검색
    • 검색 유형 (회원명 / 전화번호 뒤4자리 / 이메일)
    • 검색어 입력
    • 회원 유형 (전체 / 일반 / VIP)
    • 상태 (전체 / 활성 / 정지 / 탈퇴)
    • 버튼: 초기화 / 조회
    • 조회 클릭 시 조건 기반 검색 실행
    • Enter 입력 시 검색 실행
    • 초기화 클릭 시 모든 조건 초기화 후 전체 조회
  • 예외
    • 검색 결과 없음 → “검색 결과가 없습니다.” 메시지 노출
5 사용자 리스트
  • 컬럼
    • no
    • 아이디(이메일)
    • 로그인 타입
    • 상태
    • 본인 인증 여부
    • 가입 일시
    • 총 거래액(거래 건수)
      • 구매 금액(건수) + 판매 금액(건수)
    • 상세보기 (CTA)
    • 무조건 비밀번호 재인증 모달 호출
      • 개인정보 보호 정책상 예외 없음
    • 인증 실패 시 모달 유지
  • 페이지네이션
    • 10/50/100/200개 보기
    • 페이지 번호 이동
    • 페이지 이동 시 검색 조건 유지
    • 상세보기 클릭 시
      • 대상 사용자 ID 기록
  • 엑셀 다운로드 버튼
    • 기본 정책
      • 즉시 다운로드 불가
      • 클릭 시 “엑셀 다운로드 요청 모달” 호출
      • 사유 입력 후 요청
      • 상태: 승인 대기
      • 슈퍼관리자 승인
      • 승인 시 알림 적재
      • 승인된 경우에만 다운로드 버튼 활성
    • 다운로드 실행
      • 승인 완료 상태에서만 다운로드 가능
      • 다운로드 실행 시 파일 생성 후 다운로드
      • 사유 미입력 → 토스트
      • 이미 승인 대기 중 → 중복 요청 불가
6 토스트 메세지 정의
  • 조회 관련
    • “사용자 목록을 불러오지 못했습니다.”
    • “검색 결과가 없습니다.”
    • “비밀번호를 입력해주세요.”
    • “비밀번호가 올바르지 않습니다.”
  • 엑셀 다운로드 관련
    • “요청 사유를 입력해주세요.”
    • “엑셀 다운로드 요청이 접수되었습니다.”
    • “이미 승인 대기 중인 요청이 있습니다.”
    • “엑셀 다운로드 요청이 승인되었습니다.”
7 공통 규칙
  • 보안 정책
    • 개인정보 포함 상세 화면은 반드시 재인증 필요
    • 권한과 무관하게 무조건 모달 노출
    • 메뉴 진입
    • 검색 실행
    • 상세보기 시도
    • 엑셀 요청
    • 엑셀 다운로드
    • 페이지 이동
  • 데이터 보안
    • 리스트 화면에는 최소 정보만 노출
    • 상세 정보는 재인증 이후에만 노출

Design Output

UI 디자인 산출물

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

사용자 관리
김운영 (관리자) · joonyoob.kim@chaart.co
사용자 관리
작품 관리
거래 관리
작품 문의 관리
전체기간
전체 사용자수
123,456
활성/정지 사용자수
120,000 / 3,456
탈퇴 사용자수
56
VIP 사용자수
1,234
검색필터
가입일20YY-MM-DD ~ 20YY-MM-DD
검색 유형회원명 회원명을 입력해주세요.
회원 유형일반
상태☐ 활성   ☐ 정지   ☐ 탈퇴
초기화
조회
사용자 리스트
10개씩 보기 ▼ 엑셀 다운로드
(데이터 테이블: 10 rows × 9 columns)
Applied Design Tokens
요소Token값
전체 배경--bg#FAFAF8
사이드바--sidebar-width140px, --bg 배경, border-right: --border
사이드바 활성 항목--red-brand좌측 2px 바 + rgba 배경
통계 카드--mono 24px 700TASA Orbiter, --charcoal, border: --border
검색필터 라벨--sans 11px 600Pretendard, --neutral-95 배경
테이블 헤더--neutral-95 bgfont-weight 600, border: var(--alpha-8)
상세보기 링크--red-brand#961E23, font-weight 600
버튼 (조회)--charcoal bgR=0, #fff 텍스트
엑셀 다운로드--charcoal bg직각 버튼, --sans 10px 600
페이지네이션--mono 11px활성: --charcoal 700, 비활성: --text-muted
Design Description

Update History

2026.02.26초기 디자인 작성
0 화면 접근 조건
  • 백오피스 로그인 완료 상태
  • 관리자 권한 계정만 접근 가능
  • 좌측 GNB > 사용자 관리 메뉴 클릭 시 진입
  • 진입 시 처리
    • 전체 사용자 수 통계 조회
    • 기본 검색 조건: 최근 가입순 정렬
    • 최초 진입 시 검색 자동 실행
    • 조회 실패 시: “사용자 목록을 불러오지 못했습니다.” 토스트
1 GNB
  • 좌측 메뉴 영역
  • 현재 메뉴: 사용자 관리 Active 표시
  • 다른 메뉴 클릭 시 해당 화면 이동
  • 이동 시 현재 검색 조건 유지하지 않음 (메뉴 이동은 독립)
  • LOG 적재
    • 메뉴 진입 시 LOG 기록
      • 메뉴명: 사용자 관리
2 헤더
  • 상단 사용자 관리 타이틀 영역
  • 우측 상단 로그인 관리자 정보 표시
3 간이 대시보드
  • 사용자 통계 요약 확인
  • 구성
    • 전체 사용자수 (이번달 추가 사용자수)
    • 활성/정지 사용자수
    • 탈퇴 사용자수
    • VIP 사용자수
    • 서버 집계 데이터 기반
    • 상태값 기준 집계
    • 등급=VIP 기준 집계
  • 예외 처리
    • 데이터가 없을 경우 0 표시
    • 로딩 시 스켈레톤 처리
4 검색 필터
  • 구성 요소
    • 가입일 기간 검색
    • 검색 유형 (회원명 / 전화번호 뒤4자리 / 이메일)
    • 검색어 입력
    • 회원 유형 (전체 / 일반 / VIP)
    • 상태 (전체 / 활성 / 정지 / 탈퇴)
    • 버튼: 초기화 / 조회
    • 조회 클릭 시 조건 기반 검색 실행
    • Enter 입력 시 검색 실행
    • 초기화 클릭 시 모든 조건 초기화 후 전체 조회
  • 예외
    • 검색 결과 없음 → “검색 결과가 없습니다.” 메시지 노출
5 사용자 리스트
  • 컬럼
    • no
    • 아이디(이메일)
    • 로그인 타입
    • 상태
    • 본인 인증 여부
    • 가입 일시
    • 총 거래액(거래 건수)
      • 구매 금액(건수) + 판매 금액(건수)
    • 상세보기 (CTA)
    • 무조건 비밀번호 재인증 모달 호출
      • 개인정보 보호 정책상 예외 없음
    • 인증 실패 시 모달 유지
  • 페이지네이션
    • 10/50/100/200개 보기
    • 페이지 번호 이동
    • 페이지 이동 시 검색 조건 유지
    • 상세보기 클릭 시
      • 대상 사용자 ID 기록
  • 엑셀 다운로드 버튼
    • 기본 정책
      • 즉시 다운로드 불가
      • 클릭 시 “엑셀 다운로드 요청 모달” 호출
      • 사유 입력 후 요청
      • 상태: 승인 대기
      • 슈퍼관리자 승인
      • 승인 시 알림 적재
      • 승인된 경우에만 다운로드 버튼 활성
    • 다운로드 실행
      • 승인 완료 상태에서만 다운로드 가능
      • 다운로드 실행 시 파일 생성 후 다운로드
      • 사유 미입력 → 토스트
      • 이미 승인 대기 중 → 중복 요청 불가
6 토스트 메세지 정의
  • 조회 관련
    • “사용자 목록을 불러오지 못했습니다.”
    • “검색 결과가 없습니다.”
    • “비밀번호를 입력해주세요.”
    • “비밀번호가 올바르지 않습니다.”
  • 엑셀 다운로드 관련
    • “요청 사유를 입력해주세요.”
    • “엑셀 다운로드 요청이 접수되었습니다.”
    • “이미 승인 대기 중인 요청이 있습니다.”
    • “엑셀 다운로드 요청이 승인되었습니다.”
7 공통 규칙
  • 보안 정책
    • 개인정보 포함 상세 화면은 반드시 재인증 필요
    • 권한과 무관하게 무조건 모달 노출
    • 메뉴 진입
    • 검색 실행
    • 상세보기 시도
    • 엑셀 요청
    • 엑셀 다운로드
    • 페이지 이동
  • 데이터 보안
    • 리스트 화면에는 최소 정보만 노출
    • 상세 정보는 재인증 이후에만 노출
← 이전 화면: BO-LIN-003 다음 화면: BO-USR-002 →