내부 데이터를 시각화해야 할 때, 대부분 두 가지 선택지 사이에서 고민하게 됩니다.
- Metabase 같은 BI 툴을 쓸 것인가
- 직접 프론트엔드/백엔드를 개발할 것인가
BI 툴은 설정이 간편하지만 커스터마이징이 어렵고, 직접 개발은 자유도가 높지만 리소스가 많이 듭니다.
둘 사이 어딘가에, 조금 더 가볍고 빠른 방법이 있을까 하는 생각에서 이번 구성을 시도해보게 됐습니다.
SQL + YAML + Chart.js 조합
이번에 구성해본 방식은 다음 세 가지 도구를 조합한 형태입니다.
- SQL: 데이터를 가져오기 위한 쿼리
- YAML: 페이지와 필터 등 구조 정의
- Chart.js: 시각화 라이브러리
이 세 가지를 연결해주는 툴로는 셀렉트어드민을 사용했습니다.
복잡한 설정 없이도 대시보드를 만들 수 있는지 확인해보는 실험이었습니다.
기본 구조
YAML을 이용해 페이지와 필터를 정의하고,
SQL로 데이터를 조회하고,
Chart.js로 시각화를 구성합니다.
예시로는 이커머스 월별 매출 데이터를 시각화하는 대시보드를 구성해봤습니다.
menus:
- path: pages/sales
pages:
- path: pages/sales
title: 매출 대시보드
params:
- key: date_range
label: 분석 기간
format: date
range: true
blocks:
- id: monthly-sales
type: query
sql: SELECT ...
display: chartjs
displayFn: |
// chart.js 설정SQL 쿼리
YAML에서 정의한 필터 값은 자동으로 쿼리 파라미터에 바인딩됩니다.
SELECT
DATE_FORMAT(order_date, '%Y-%m') as month,
SUM(total_amount) as total_revenue
FROM orders
WHERE order_date >= :date_range1
AND order_date <= :date_range2
GROUP BY DATE_FORMAT(order_date, '%Y-%m')
ORDER BY monthChart.js 설정
SQL 결과는 rows 배열로 전달되고, 이걸 그대로 Chart.js에 연결할 수 있습니다.
const labels = rows.map(row => row.month);
const revenueData = rows.map(row => row.total_revenue);
const data = {
labels: labels,
datasets: [{
label: '매출 (원)',
data: revenueData,
backgroundColor: 'rgba(54, 162, 235, 0.6)'
}]
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
scales: {
y: {
title: { display: true, text: '매출 (원)' }
}
}
}
};
const myChart = new Chart(ctx, config);실제 동작
위와 같이 구성하면 셀렉트어드민의 /pages/sales 경로 페이지에서 다음과 같은 대시보드가 만들어집니다.
- 상단에는 날짜 필터가 있고
- 그 아래에는 월별 매출 차트가 표시됩니다
- 필터 값을 바꾸면 쿼리가 자동으로 다시 실행되고
- 차트가 즉시 업데이트됩니다
프론트엔드 상태 관리나 별도 API 작성 없이도 이런 구조가 만들어졌습니다.
이 방식이 가질 수 있는 장점
- 작성하는 코드는 매우 단순합니다 (YAML + SQL + Chart.js)
- Chart.js 문법을 그대로 활용할 수 있어 시각화 자유도가 높습니다
- 필터 값과 SQL 파라미터가 자동으로 연결됩니다
- 인증이나 배포 같은 부분은 플랫폼에서 처리합니다
이런 상황이라면 어울릴 수 있습니다
- 내부 팀이 빠르게 지표를 확인해야 할 때
- 스타트업처럼 리소스가 제한된 환경에서
- SQL은 가능하지만 프론트엔드는 부담스러운 경우
- BI 툴로 표현이 어려운 복잡한 시각화가 필요한 경우
정리하며
SQL과 Chart.js만으로 대시보드를 구성하는 방법이 얼마나 실용적인지 확인해보고 싶었고,
이번 구성은 그런 가능성을 보여주는 좋은 실험이었습니다.
모든 상황에 적용할 수 있는 건 아니겠지만,
필요한 결과를 빠르게 만들고 개선해 나가는 구조로서는 꽤 괜찮은 선택이 될 수 있습니다.
전체 템플릿 예제나 구성 방식이 궁금하다면 아래 내용을 참고하셔도 좋습니다.
비슷한 고민을 하고 계셨다면, 이 방식이 하나의 힌트가 될 수 있을지도 모르겠습니다.
