통계가 열리는 시간을 줄이고, 운영 모니터로 이어 붙였습니다.

이커머스 관리자 통계는 정산, 매출, 원가, 할인처럼 성격이 다른 테이블을 한 번에 조인해서 보느라 화면 조회에 긴 시간이 걸렸습니다. ASP.NET 화면의 조회는 MSSQL 저장 프로시저에서 인덱스를 타고, 조인 전에 행을 줄이고, 어제까지의 숫자는 별도 통계 테이블에 저장해 반복 집계를 줄였습니다. 같은 지표는 Vue.js DID로 올려 운영자가 매출과 이익, 카테고리 현황을 모니터처럼 보게 했습니다.

MY CONTRIBUTION
01인덱스
실행 계획
탈 수 있는 인덱스부터 적용
MY CONTRIBUTION
02조인 전 축소
필요한 행만
테이블을 줄인 뒤 조인
MY CONTRIBUTION
03전날 집계
통계 테이블
어제까지는 스케줄로 저장
MY CONTRIBUTION
04운영 모니터
Vue.js DID
매출 · 이익 · 카테고리

BEFORE

화면을 열 때마다 원본 테이블을 넓게 조인했습니다.

관리자가 통계를 볼 때마다 정산·매출·원가·할인을 한 질의에서 맞추면, 인덱스가 빠져 있거나 조인 대상이 커질수록 대기 시간이 길어집니다.

AFTER

어제까지는 모아 두고, 오늘만 붙여 화면에 올립니다.

저장 프로시저가 이미 줄어든 집합을 조인하고, 전날 집계는 스케줄이 통계 테이블에 남겨 둡니다. ASP.NET 관리자 화면과 Vue.js 운영 DID는 그 결과를 읽습니다.

01 / WIDE JOINS

통계 한 화면이 여러 원장 테이블을 한꺼번에 읽었습니다.

PROBLEM

숫자가 맞으려면 조인을 빼기 어렵고, 그대로 두면 화면이 멈춥니다.

관리자 통계는 정산이 맞는지, 매출이 얼마인지, 원가와 할인까지 반영한 이익이 얼마인지를 한 화면에서 봐야 했습니다. 테이블을 따로 보면 숫자가 어긋나고, 한 질의로 붙이면 행 수가 커져 조회 대기가 길어졌습니다.

SOLUTION

화면은 ASP.NET에 두고, 무거운 계산은 저장 프로시저로 모았습니다.

관리자 페이지는 ASP.NET으로 이미 운영 중이었습니다. 조회 경로를 애플리케이션에서 늘리기보다 MSSQL 저장 프로시저에서 실행 계획과 조인 순서를 맞춰, 같은 화면이 더 적은 일로 답을 내게 했습니다.

통계 질의에 붙이던 데이터

구분	원본	통계에서 하는 일
정산	정산 데이터	기간별 정산 내역과 정산 상태
매출	매출 데이터	주문·결제 기준 매출
원가	원가 정보	이익을 내기 위해 붙이는 원가
할인	할인 정보	프로모션·할인으로 빠지는 금액

02 / STORED PROCEDURE

인덱스를 타고, 행을 줄인 뒤 조인하고, 어제 숫자는 미리 저장했습니다.

PROBLEM

조인만 고치면 어제 데이터까지 매번 처음부터 다시 셉니다.

인덱스와 조인 전 필터만으로도 부담은 줄어듭니다. 다만 관리자가 오늘을 볼 때마다 이미 끝난 날짜까지 원본에서 다시 집계하면, 테이블이 커질수록 같은 일을 반복합니다.

SOLUTION

어제까지는 미리 집계하고, 오늘 데이터는 15초마다 갱신했습니다.

매일 새벽 스케줄 작업으로 당일 00시 이전 데이터의 총매출·총비용 등을 계산해 별도 통계 테이블에 저장합니다. DID 대시보드는 15초마다 당일 데이터만 조회하고 과거 집계와 합산합니다. 누적 전체를 반복 계산하는 대신 오늘 발생한 데이터로 조회 범위를 줄였습니다.

01인덱스가 타는지 확인
실행 계획에서 검색 조건과 조인 키가 인덱스를 쓰는지 보고, 탈 수 있는 인덱스를 적용했습니다. 없는 인덱스를 먼저 만드는 것보다, 지금 질의가 인덱스를 건너뛰는지 확인하는 쪽이 우선이었습니다.
02행을 줄인 상태에서 조인
정산·매출·원가·할인을 통째로 붙인 뒤 기간을 자르지 않았습니다. 각 테이블에서 필요한 기간·상태의 행만 남긴 다음 조인해, 중간 집합이 커지지 않게 했습니다.
03어제까지는 통계 테이블에 저장
이미 끝난 날짜는 스케줄이 필요한 숫자만 통계 테이블에 남겨 둡니다. 화면 조회는 그 결과와 15초마다 조회하는 당일 데이터를 합칩니다.

03 / VUE DASHBOARD DID

빨라진 숫자를 운영자가 한눈에 보는 모니터 화면으로 올렸습니다.

PROBLEM

관리자 메뉴 안의 통계는, 현장에서 현황을 보기엔 깊숙했습니다.

조회가 짧아져도 ASP.NET 관리자 페이지는 로그인하고 메뉴를 찾아 들어가는 화면입니다. 운영 중 매출과 이익이 어떻게 움직이는지 바로 보려면, 통계를 다시 열어 보는 흐름과는 다른 화면이 필요했습니다.

SOLUTION

Vue.js로 대시보드 DID를 두고, 매출·이익·카테고리 현황을 띄웠습니다.

분석해 둔 지표를 Vue.js 대시보드로 구성해, 회사 운영자가 모니터처럼 보게 했습니다. 관리자 통계와 같은 집계를 읽되, 화면은 현황 확인에 맞춰 매출, 이익, 카테고리별 매출을 앞에 두었습니다.

매출
운영 중 매출 현황을 바로 확인
이익
매출에서 원가·할인을 반영
카테고리별 매출
어느 카테고리가 움직이는지 현황

RESULT

관리자 통계 조회를 개선하고, 운영 대시보드로 확장했습니다.

관리자 페이지의 쿼리 튜닝 경험을 바탕으로, 과거 집계와 당일 조회를 분리한 Vue.js DID 대시보드를 만들었습니다. 매일 새벽 누적값을 저장하고 당일 데이터는 15초 주기로 갱신해 영업 중 현황을 확인할 수 있게 했습니다. 실제 영업 담당자가 사용했고 업무에 도움이 됐다는 피드백을 받았습니다.

MSSQL stored procedure 과거 집계 저장 · 당일 15초 갱신 Vue.js DID