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

사용자 관리 메인

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 표시
    • 다른 메뉴 클릭 시 해당 화면 이동 (하위 이동은 매뉴별)
  • LOGO
    • 타사 관련 시 LOGO 기록
    • 화면명 · 사용자 관리
2 헤더
  • 사용자 통계 요약 데이터
    • 전체 사용자수
    • 활성/정지 사용자수
    • 탈퇴 사용자수
    • VIP 사용자수
3 검색 대시보드
  • 검색필터 구성
    • 가입일: 날짜 범위(YYYY.MM.DD) 기간
    • 검색유형: 드롭다운 선택(회원명/전화번호 뒤4자리/이메일)
    • 회원유형: 전체/일반/VIP
    • 상태: 체크박스(활성/정지/탈퇴)
  • 초기화 버튼 > 검색 조건 초기화
  • 조회 버튼 시 조건에 맞는 리스트 노출
4 검색 필터
  • 구조 조건
    • 가입일은 기간 검색
    • 검색 유형은 드롭다운 > 검색어 입력 상태
  • 결과 없을 시
    • 검색 결과 없는 상태 노출
    • Enter/검색 버튼 사용 시 조건 초기화 상태
  • 입력 결과 값을 > "검색 결과가 없습니다." 메시지 노출
5 사용자 리스트
  • 테이블 구성
    • no, 아이디(이메일), 로그인 타입, 상태, 본인 인증 여부, 가입 일시, 탈퇴 일시, 광고 수신 동의, 상세보기
  • 페이지네이션 기본
    • 기본 10개씩 표시
    • 건수 변경하면 리스트 하단에도 드롭다운으로 "요청" 출력
  • 상세보기
    • 각 사용자 행 최우측 "상세보기" 클릭
    • 사용자 상세 페이지 (BO-USR-004) 이동
    • 다른 탭(새로운 탭)에서 이동 불필요
    • 단일 페이지에서 뒤로가기 가능 / 다운로드 상세 시 페이지 이동으로
  • 사용자 리스트 > 드롭다운
    • 10/50/100/200개 보기
    • 선택 시 해당 개수로 리스트 노출 변경
6 토스트 예제 정의
  • "사용자 목록을 불러오지 못했습니다."
  • "잘못 검색된 시 검색기능을 다시 진행."
  • "더미 검색 값입니다."
  • "관련된 요소만에 맞도록 검색 노출"
7 공통 규칙
  • 헤더 타이틀
    • 화면 전환
    • 숨기기/펼치기 시드
    • 숨기기/펼치기 시드
  • 데이터
    • 리스트 타입에서는 최소 정보만 노출
    • 상세 화면은 데이터 수정이 메인해서 노출

Design Output

UI 디자인 산출물

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

사용자 관리
김운영 (관리자) · joonyoob.kim@chaart.co
CHRT.
사용자 관리
작품 관리
거래 관리
작품 문의 관리
전체기간
전체 사용자수
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: rgba(0,0,0,0.1)
상세보기 링크--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 표시
    • 다른 메뉴 클릭 시 해당 화면 이동 (하위 이동은 매뉴별)
  • LOGO
    • 타사 관련 시 LOGO 기록
    • 화면명 · 사용자 관리
2 헤더
  • 사용자 통계 요약 데이터
    • 전체 사용자수
    • 활성/정지 사용자수
    • 탈퇴 사용자수
    • VIP 사용자수
3 검색 대시보드
  • 검색필터 구성
    • 가입일: 날짜 범위(YYYY.MM.DD) 기간
    • 검색유형: 드롭다운 선택(회원명/전화번호 뒤4자리/이메일)
    • 회원유형: 전체/일반/VIP
    • 상태: 체크박스(활성/정지/탈퇴)
  • 초기화 버튼 > 검색 조건 초기화
  • 조회 버튼 시 조건에 맞는 리스트 노출
4 검색 필터
  • 구조 조건
    • 가입일은 기간 검색
    • 검색 유형은 드롭다운 > 검색어 입력 상태
  • 결과 없을 시
    • 검색 결과 없는 상태 노출
    • Enter/검색 버튼 사용 시 조건 초기화 상태
  • 입력 결과 값을 > "검색 결과가 없습니다." 메시지 노출
5 사용자 리스트
  • 테이블 구성
    • no, 아이디(이메일), 로그인 타입, 상태, 본인 인증 여부, 가입 일시, 탈퇴 일시, 광고 수신 동의, 상세보기
  • 페이지네이션 기본
    • 기본 10개씩 표시
    • 건수 변경하면 리스트 하단에도 드롭다운으로 "요청" 출력
  • 상세보기
    • 각 사용자 행 최우측 "상세보기" 클릭
    • 사용자 상세 페이지 (BO-USR-004) 이동
    • 다른 탭(새로운 탭)에서 이동 불필요
    • 단일 페이지에서 뒤로가기 가능 / 다운로드 상세 시 페이지 이동으로
  • 사용자 리스트 > 드롭다운
    • 10/50/100/200개 보기
    • 선택 시 해당 개수로 리스트 노출 변경
6 토스트 예제 정의
  • "사용자 목록을 불러오지 못했습니다."
  • "잘못 검색된 시 검색기능을 다시 진행."
  • "더미 검색 값입니다."
  • "관련된 요소만에 맞도록 검색 노출"
7 공통 규칙
  • 헤더 타이틀
    • 화면 전환
    • 숨기기/펼치기 시드
    • 숨기기/펼치기 시드
  • 데이터
    • 리스트 타입에서는 최소 정보만 노출
    • 상세 화면은 데이터 수정이 메인해서 노출
← 이전 화면: BO-LIN-003 다음 화면: BO-USR-002 →