오늘 처리해야 할 문의는 몇 건일까요? 정산 진행 상황은 어디까지 왔고, 신규 가입자는 얼마나 늘었을까요? 운영자 대시보드는 이 모든 흐름을 한눈에 보여줍니다.
이제까지 설계한 모든 운영 기능들, 고객 문의, 정산, 리뷰, 매출, 로그, 메모 등 각각의 기능이 잘 돌아가는 것도 중요하지만 운영자는 매일 아침 전체 흐름을 한 눈에 파악해야 합니다.
이번 12편에서는 Vue + Laravel 기반으로 실시간 연결되는 운영자용 통합 대시보드를 설계합니다.
- 실시간 매출/주문 요약 카드
- 미처리 문의, 신규 리뷰, 지급 대기 정산
- 운영자 접속/권한 변경 로그
- 신규 가입자, 탈퇴자 현황
- 각 기능별 최근 이슈 핀포인트
- 알림/할 일 관리 + 전체 권한별 대시보드 맞춤화
이제 분산된 운영 정보를 하나의 흐름으로 연결해봅시다.
목차
실시간 요약 카드 영역
운영자는 매일 아침, 매출, 주문, 문의, 정산 상태를 한눈에 봐야 합니다. 요약 카드는 전체 흐름을 10초 만에 파악할 수 있도록 설계합니다.
- 오늘 매출 / 주문 수 / 평균 객단가
- 미처리 1:1 문의 수 / 신규 리뷰 수
- 정산 대기 / 지급 완료 건 수
- 신규 가입자 / 탈퇴자
Vue에서는 <DashboardCardGroup />으로 카드 UI를 구성하고, Laravel에서는 DashboardSummaryService를 통해 각 기능별 통계를 캐싱/집계합니다.
운영자 할 일 리스트
“오늘 안에 끝내야 할 일”을 명확히 보여주는 것이 운영자 대시보드의 진짜 역할입니다. CS, 정산, 승인 요청 등 각 기능의 긴급/우선 순위 항목을 리스트업합니다.
| 할 일 유형 | 예시 |
|---|---|
| 미답변 문의 | 24시간 초과 문의 3건 |
| 정산 확정 대기 | 총 5건, 지급일 기준 3일 이내 |
| 상품 등록 승인 | 신규 상품 8건 승인 대기 |
Vue에서는 <TodoListBox />, Laravel에서는 각 기능별 todo count를 합산한 TodoAggregator 클래스를 따로 둡니다.
기능별 주요 위젯 (문의, 정산, 리뷰 등)
운영자는 한 페이지 안에서 전체 흐름의 맥을 잡아야 합니다. 이를 위해 각 주요 기능의 '핵심 위젯'을 배치해 미처리, 이상, 급한 항목을 실시간으로 보여줍니다.
- 📩 문의 위젯: 미답변 수, SLA 초과 비율
- 💰 정산 위젯: 대기/확정/지급 요약, 예정일
- ⭐ 리뷰 위젯: 신규 리뷰, 블라인드 요청 건
- 📦 주문 위젯: 미출고, 반품, 교환 진행 상태
각 위젯은 <WidgetPanel type="inquiry" /> 형태로 구성되며, Laravel에서는 DashboardWidgetService에서 기능별 미처리 건만 집계합니다.
운영자 로그 및 접속 현황
운영자의 움직임도 대시보드에 담아야 책임과 투명성이 함께 생깁니다.
최근 접속 기록과 주요 변경 로그를 요약해 보여줍니다.
- 최근 7일간 접속 관리자 수
- 신규 관리자 생성/삭제 이력
- 최근 권한 변경 및 메모 등록 건수
- 이상 작업 탐지 내역 요약 (야간 수정 등)
Vue에서는 <AdminLogPreview />, Laravel에서는 AdminActivityDigestService로 로그를 집계해 API로 제공합니다.
Vue 컴포넌트 구조와 권한별 맞춤화
대시보드는 모든 운영자가 보는 첫 화면입니다. 하지만 역할에 따라 보이는 위젯과 정보가 달라져야 합니다.
- CS 운영자 → 문의/리뷰/고객 관련 위젯 중심
- 재무팀 → 정산, 예치금, 매출 요약 위젯 중심
- 상품 관리자 → 상품 승인, 등록 요청 중심
Vue에서는 <DashboardLayout /> 하위에 <DashboardSection v-if="can('cs.view')" /> 형태로 권한별 렌더링을 제어합니다. Laravel API에서는 로그인된 운영자의 권한 정보로 표시 가능한 섹션 목록을 동적으로 리턴합니다.
자동 새로고침 & 캐싱 전략
대시보드는 실시간에 가까운 정확도와 불필요한 서버 부하 방지를 동시에 만족해야 합니다.
- 요약 수치는 5분 간격 캐시 (서버 캐시 or Redis)
- Vue에서는
setInterval로 주기적 refresh 수행 - 사용자가 직접 새로고침 버튼 클릭도 가능
- 변동성이 큰 항목(문의, 리뷰)은 더 짧은 주기로 처리
Laravel에서 DashboardCacheService를 통해 섹션별 TTL 기준으로 데이터를 관리하며, Vue는 <AutoRefreshBox /> 컴포넌트를 통해 시각적 새로고침 타이머를 보여줍니다.
운영은 결국 "한눈에 보이고, 한 번에 파악되는 흐름"이 있어야 빠르게 움직이고, 실수를 줄일 수 있습니다.
이번 12편에서는 매출/주문 요약, 문의/정산 위젯, 할 일 리스트, 로그 현황, 실시간 자동화까지 모든 운영 흐름을 하나의 화면에 연결하는 Vue + Laravel 기반 통합 대시보드를 설계했습니다. 운영자가 **페이지를 옮기지 않고도 운영을 이해할 수 있게** 그것이 진짜 대시보드의 힘입니다.
다음 편에서는 그간의 시리즈를 종합하며 운영 툴 개발의 전체 플로우와 배포 시 고려사항까지 정리해보겠습니다.
실제 운영 툴을 만들기 전 꼭 필요한 마지막 설계, 마무리까지 함께 갑시다. ✅
'💻 쇼핑몰 자동화 & 웹 개발 가이드' 카테고리의 다른 글
| [백오피스] 운영 시스템 전체 플로우 & 배포 전략 (10) | 2025.06.20 |
|---|---|
| [백오피스] 메모 시스템 설계: 기록·협업·이력 관리 방법 (5) | 2025.06.18 |
| [백오피스] 권한 설정 시스템: RBAC·접근제어·보안 설계법 (5) | 2025.06.17 |
| [백오피스] 운영 로그 설계: 이력 추적·접속 기록·보안 강화 (1) | 2025.06.16 |
| [백오피스] 매출 대시보드 설계: 실시간 통계와 시각화 전략 (2) | 2025.06.13 |