SpreadJS PivotTable 애드온 실전: 피벗 요약·슬라이서 대시보드 구성 가이드

피벗 요약과 슬라이서를 한 화면에, 왜 지금 필요한가

 

판매·로그·고객 데이터를 표로만 보면 흐름이 보이지 않습니다. 피벗 요약과 슬라이서를 조합하면 클릭 몇 번으로 질문별 화면을 빠르게 바꿀 수 있습니다.

 

실무에서는 엑셀 피벗의 편리함을 웹에서도 원하지만, 직접 구현하면 필드 배치, 집계, 필터 UI까지 손이 큽니다. SpreadJS PivotTable 애드온은 이 부분을 구성 요소로 제공해 대시보드 초기 구축 시간을 줄여줍니다.

 

이 글은 초보자도 이해할 수 있도록 “무엇을 놓고(필드) → 어떻게 요약하고(합계/평균) → 슬라이서로 어떻게 걸러보는지” 순서로 설명합니다. 결과적으로 팀이 공통 화면을 공유하고, 숫자 확인에 드는 커뮤니케이션 비용을 낮출 수 있습니다.

 

> 주의: 피벗 요약은 데이터 구조가 깨지면 왜곡될 수 있습니다. 사용 전 날짜 형식, 지표 열의 숫자 타입처럼 기본 스키마를 간단히 검증해 두는 것이 안전합니다.

 

필드, 값, 슬라이서: 한눈에 잡는 기본 개념

 

피벗에는 세 가지 조각이 있습니다. 행/열에 놓는 ‘필드’, 합계·평균 같은 ‘값’, 조건을 빠르게 거르는 ‘슬라이서’입니다.

 

예를 들어 주문 데이터에서 ‘지역’을 행, ‘월’을 열에 두고, ‘매출’을 값으로 합계하면 지역×월 매출표가 만들어집니다. 슬라이서에 ‘제품군’을 연결하면 특정 제품군만 즉시 필터링해 봅니다.

 

실무 감각으로 보면 흐름은 이렇습니다: 원본 데이터(행 단위 기록) -> 필드 배치(그룹 축 선정) -> 값 집계(숫자 계산) -> 슬라이서 선택(조건 적용). 이 순서를 알고 있으면 어떤 데이터라도 같은 방식으로 구성할 수 있습니다.

 

> 안티패턴: 슬라이서에 지나치게 많은 항목을 넣으면 탐색이 느려집니다. 사용자 질문이 자주 모이는 기준(예: 제품군, 지역, 채널) 2~3개만 우선 배치하는 편이 좋습니다.

 

10분 컷 피벗·슬라이서 대시보드

 

먼저 흐름을 단순히 잡습니다. 스키마 확인 → 피벗 배치 → 슬라이서 연결 순서로 진행하세요.

 

- 데이터 준비: 날짜는 YYYY-MM-DD, 금액은 숫자형으로 통일하고 빈값·중복 키를 점검합니다.
- 시트 생성: 워크북·시트를 만들고 원본 데이터를 연결합니다.
- 피벗 배치: 행=지역, 열=월, 값=매출(합계)처럼 질문에 맞게 필드를 둡니다.
- 서식/정렬: 원화·소수점 서식과 내림차순 정렬로 상위를 먼저 보여줍니다.
- 슬라이서: 제품군·채널 등 자주 쓰는 2~3개 기준만 추가합니다.
- 검증: 총계와 표본 행을 골라 값이 맞는지 교차 확인합니다.

 

반복 설정은 코드로 고정하면 재사용이 쉽습니다. 아래 예시는 구조만 보여줍니다.

 

// 1) 워크북/시트
const spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
const sheet = spread.getActiveSheet();
sheet.setDataSource(data); // [{지역, 월, 제품군, 채널, 매출}, ...]

// 2) 피벗 캐시/테이블
const pc = new GC.Spread.Pivot.PivotCache(data);
const pt = new GC.Spread.Pivot.PivotTable(sheet, 'A1', pc);

// 3) 필드 배치
pt.addRowLabel('지역');
pt.addColumnLabel('월');
pt.addValue('매출', GC.Spread.Pivot.SubtotalType.sum);

// 4) 슬라이서
const sl = new GC.Spread.Slicers.Slicer('제품군Slicer', '제품군');
sheet.slicers.add(sl);
sl.connectPivotTable(pt);

 

먼저 행·열·값을 확정한 뒤 슬라이서를 연결하세요. 피벗 배치를 바꾸면 슬라이서 연결도 다시 확인합니다.

 

> 팁: 슬라이서 항목이 너무 많으면 로딩이 느려질 수 있습니다. 상위 N개만 보이게 하거나 텍스트 검색을 켜세요.

 

흔한 실수와 선택 기준, 어디서 갈린다

 

피벗·슬라이서는 설정보다 기준 설계가 먼저입니다. 사용자가 자주 묻는 질문을 축과 슬라이서로 먼저 정하고 나머지는 뒤로 미룹니다.

 

아래 체크포인트를 통과하면 대시보드가 단순해지고 유지가 편합니다.

 

- 슬라이서 2~3개 제한: 제품군·지역·채널처럼 상위 질문 기준만 남깁니다.
- 날짜 축 통일: 월/분기 혼용 대신 YYYY-MM으로 한 가지를 고정합니다.
- 값 집계 규칙: 합계/평균/고유개수 중 하나를 화면별로 명확히 지정합니다.
- 서식 일관성: 통화/백분율 서식을 값 필드 생성 시점에 함께 적용합니다.
- 검증 포인트: 총계=원본 집계, 표본 행 대조, 필터 ON/OFF 전후 값 비교.

 

> 안티패턴: 같은 원본에 피벗을 여러 개 중첩해 차트·테이블·슬라이서를 모두 연결하면 상호작용이 느려집니다. 한 화면에는 피벗 1개 + 경량 차트 1개 정도로 제한하세요.

 

선택 기준은 목적에 맞춰 다르게 잡습니다. 비교가 핵심이면 행=지역, 열=월처럼 축을 명확히 두고, 탐색이 목적이면 슬라이서를 앞세우고 값 집계는 단순 합계로 시작합니다.

 

간단한 트레이드오프도 있습니다. 슬라이서를 늘리면 탐색 자유도가 오르지만 필터 조합이 많아져 성능 비용과 해석 혼란이 생깁니다.

 

초기 배포는 최소 기준으로 시작하고, 사용 로그를 보고 항목을 단계적으로 추가하는 편이 안전합니다.

 

지금 할 일: 30분 안에 첫 대시보드 완성

 

핵심은 단순한 규칙을 고정해 반복하는 것입니다. 스키마 확인 → 피벗 배치 → 슬라이서 2~3개 연결 → 결과 검증 순서로 끝냅니다.

 

먼저 데이터에서 날짜·금액 형식을 통일하고, 질문에 맞춰 행/열/값을 1개씩만 배치해 첫 화면을 만듭니다. 이후 슬라이서를 제품군·지역처럼 자주 묻는 기준으로만 추가합니다.

 

바로 실행 체크리스트입니다.

 

- 날짜 포맷 YYYY-MM, 금액 숫자형, 공백/중복 키 제거
- 행=지역, 열=월, 값=매출(합계)로 1차 피벗 구성
- 슬라이서 2~3개(제품군, 채널 등) 연결
- 원화 서식·정렬 적용 후 총계/표본 행 교차 검증

 

> 실무 팁: 한 화면에 피벗은 1개로 두고, 필요하면 별도 시트에 비교용 피벗을 분리하세요. 화면 전환 속도와 유지 보수가 수월합니다.

 

슬라이서로 만드는 ‘질문별 보기’ 예시

 

대시보드에서 가장 자주 바꾸는 건 조건입니다. 슬라이서는 ‘질문 단추’처럼 특정 조건만 남겨 화면을 즉시 재구성합니다.

 

예를 들어 제품군·지역 슬라이서를 두고 “올해 2분기, 온라인 채널에서 어떤 제품군이 강했나?”를 눌러가며 확인합니다. 데이터 흐름은 선택값 변경 -> 피벗에 필터 적용 -> 합계 재계산입니다.

 

실무 예시는 다음과 같이 단순하게 잡으면 충분합니다.

 

- 제품군 슬라이서: 대분류 수준으로만 노출
- 지역 슬라이서: 권역(예: 수도권/영남) 묶음 기준
- 채널 슬라이서: 온라인/오프라인 2~3개로 축약

 

> 안티패턴: 항목이 수십 개인 슬라이서를 그대로 올리면 사용자가 길을 잃습니다. 의미 없는 상세 항목은 접거나 상위 분류로 통일하세요.