More density,
fewer clicks.
관리자단은 운영자가 표 · 필터 · 로그를 동시에 본다. 4px 리듬 · 작은 폼 · dense table을 기본으로, 위험 액션은 항상 명시하고 운영 상태는 항상 보이게 한다.
디자인 원칙
사용자단 7원칙을 상속하되, 관리자단은 다음 5가지를 우선한다.
운영자는 표·필터·로그를 동시에 본다. 4px 리듬, 작은 폼, dense table을 기본. 여백·라운드·그림자는 최소.
같은 작업의 반복. 키보드 친화(⌘K 명령 팔레트, / 검색 포커스), 일괄 선택, 저장된 필터.
모든 mutating action은 사유 입력 + 컨펌, 감사 로그 기록. UI에서 위험도 시각화(빨간 ring·라벨).
점검 모드·발송 임박·인증서 만료 등 운영 상태는 상단 배너·사이드바 배지로 항상 보여야 한다.
사용자단 시안은 백오피스 메뉴 트리만 정본. 화면 디자인은 본 문서가 정본.
컬러
slate 무채색으로 90%, blue 액센트는 강조에만. 색은 항상 Tailwind 토큰으로.
Primary Tailwind blue
primary in app.config.tsNeutral Tailwind slate
neutral in app.config.tsSemantic Nuxt UI 토큰
Channel dots 점 표시 전용
타이포그래피
DM Sans + Pretendard. 본문 13px이 기본. 사용자단의 28px Display는 사용 안 함.
간격 — 4px 리듬
관리자단은 사용자단보다 한 단계 dense. 모든 spacing은 4px의 배수.
라운드 · ring
관리자단은 그림자 대신 ring-1로 분리.
배지 · UBadge
상태 · 분류 · 카운트. variant = subtle 기본.
폼 입력
UInput · USelect · UCheckbox · UTextarea · UFormField.
테이블 — dense
행 44px · 헤더 36px · 호버 bg-slate-50 · 구분선 divide-slate-100.
| 계정 ID | 이름 | 역할 | 상태 | 최근 활동 | 동작 | |
|---|---|---|---|---|---|---|
| AC-0042 | 김덕조 | 대표 | 정상 | 14분 전 | ||
| AC-0041 | 이영희 | 운영 | 정상 | 1시간 전 | ||
| AC-0040 | 박철수 | 운영 | 차단 | 어제 22:11 | ||
| AC-0039 | 최승연 | 읽기 | 대기 | 4일 전 |
레이아웃 — Shell
LNB(256px sticky) + TopBar(64px sticky) + 콘텐츠 영역.
- LNB 256px sticky · TopBar 64px sticky · 콘텐츠 영역 flex-1 px-6 py-5
- 페이지 헤더: eyebrow(11px) + h1(20px) + 배지 + 우측 액션 버튼
- 오른쪽 보조 패널이 필요한 경우 360px sticky (예: 고객사 상세 메모 패널)
위험 액션 패턴
차단 · 강제 발송 · 키 회전 · 크레딧 무료 발급 — 모두 사유 입력 + 컨펌.
차단 시 해당 고객사의 모든 발송이 즉시 중단되며 actor · IP · before-after가 자동 기록됩니다.
- 사유 필수
- 컨펌 단계 단일 클릭 즉시 실행 금지
- 위험도 시각화 ring-red-200 + 라벨
- 실행 버튼 color="error"
- 감사 로그 백엔드 자동 기록
상태 가시화
운영 상태는 상단 배너 · 칩으로 항상 보여야 한다.
톤 · 마이크로카피
관리자단은 영문 약어(RBAC · DKIM · FCM · 2FA 등) 허용 — 운영자 친화 어휘 우선.
| 상황 | 권장 | 지양 |
|---|---|---|
| 빈 목록 | 아직 등록된 항목이 없습니다. | 데이터 없음 |
| 신규 유도 | 새 고객사 추가 | 등록 (맥락 없음) |
| 일반 오류 | 처리 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요. | Error 500 |
| 권한 부족 | 이 작업을 수행할 권한이 없습니다. RBAC 정책에 따라 super_admin에게 요청하세요. | Forbidden |
| 위험 액션 컨펌 | 정말 차단하시겠습니까? 사유를 입력해야 진행됩니다. | 확인하시겠어요? |
| 임박 알림 | APNs 인증서가 7일 후 만료됩니다. | Expires soon |