Chart.js 대시보드를 위한 가장 단순한 환경

대시보드는 매출, 재고, 캠페인 성과 같은 데이터를 한눈에 보여주는 강력한 도구입니다. 하지만 프레임워크와 API 개발로 대시보드를 만들려면 시간과 노력이 듭니다. Chart.js로 멋진 차트를 만들고 싶지만 복잡한 설정은 피할 수는 없을까요? SQL, YAML, Chart.js만 있으면 됩니다.

무엇이 다른가요

chart.js는 시각화의 자유도가 높지만, 데이터를 연결하고 UI를 구성하려면 프론트엔드, 백엔드 작업이 필수입니다. 셀렉트어드민은 이 과정을 단순화합니다:

SQL로 데이터 쿼리 작성
YAML로 페이지와 필터 정의
Chart.js로 차트 그리기
인증, 필터 연동, 배포는 자동 처리

Metabase 같은 BI 도구는 쉬운 대신 커스터마이징이 제한적이고, 맞춤 개발은 너무 무겁습니다. 셀렉트어드민은 이 중간지대에서 Chart.js의 강점을 살리며 복잡함을 덜어냅니다.

대시보드 만들기: 매출 추이 차트

이커머스 팀이 월별 매출을 보여주는 대시보드를 만들어 보겠습니다. 날짜 필터 하나와 막대 차트 하나로 시작합니다. 아래는 최소한의 설정입니다.

1. YAML: 페이지와 필터 설정

페이지 구조와 날짜 범위 필터를 YAML로 정의해요. 이 파일이 대시보드의 뼈대입니다.

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 설정

2. SQL: 데이터 가져오기

월별 매출 데이터를 가져오는 간단한 쿼리입니다. :date_range1, :date_range2는 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 month

3. chart.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);

4. 결과는?

이제 브라우저에서 셀렉트어드민 경로 /pages/sales로 접속하면:

상단에 날짜 범위 필터가 있고,
아래에 월별 매출 막대 차트가 표시됩니다.

필터를 바꾸면 SQL이 재실행되고 차트가 바로 갱신됩니다. API나 상태 관리 코드는 쓰지 않았습니다.

이 환경의 장점

셀렉트어드민으로 chart.js 대시보드를 만드는 건 왜 이렇게 간단할까요?

최소한의 코드: 위 예시처럼 YAML, SQL, Chart.js만 쓰면 끝. 프론트엔드 UI나 API 엔드포인트 만들 필요 없음
Chart.js 그대로: Chart.js 공식 문서의 코드 그대로 써도 동작. 애니메이션, 플러그인 등 원하는 기능 활용 가능
자동 필터 연동: :date_range1 같은 파라미터는 필터와 자동 연결, 로직 작성 없이 인터랙티브 대시보드 완성
인프라 제로: 인증, 권한, 호스팅은 셀렉트어드민이 처리. 서버 설정이나 보안 걱정 없이 배포
AI 도움받기: SQL이나 Chart.js 코드를 ChatGPT, Claude, Gemini로 생성하면 초보자도 쉽게 시작

언제 이 환경이 딱일까

이 단순한 환경은 특정 상황에서 빛을 발해요:

소규모 팀: 분석가/개발자 1–5명인 스타트업 또는 팀, 빠르게 대시보드 필요할 때
내부 보고: 매출, 재고 같은 KPI를 팀이나 경영진이 확인할 때
SQL 친화: SQL 조금이라도 아는 팀, Chart.js는 배워도 금방 익힘
프로토타입: 아이디어 테스트 후 필요하면 복잡한 개발로 확장

하지만 이런 경우엔 다른 선택지도 고려해보세요:

고객용 대시보드: B2C 포털처럼 브랜딩이 중요하면 React 개발이 나음
초실시간: 초단위 데이터 업데이트(예: 주식 차트)는 특화 도구 필요
비기술자: SQL 모르면 Tableau 같은 드래그앤드롭 도구가 편함

대규모 데이터(수백만 행)나 동시 사용자 많은 경우, 셀렉트어드민 팀의 별도 지원이 필요합니다.

단점은 없을까

모든 상황을 커버하는 완벽한 도구는 없습니다:

약간의 학습: YAML과 displayFn 구문은 1–2시간 익혀야. SQL/Chart.js 아는 사람에겐 쉬움
플랫폼 의존: YAML 설정은 셀렉트어드민 전용이라, 나중에 다른 도구로 옮기려면 작업 필요

하지만 LLM과 AI의 도움으로 학습이 더 쉬워졌고, 차트 프레임워크를 더 잘 활용할 수 있게 되었습니다. 동시에 UI와 다르게 YAML 스펙을 그대로 받아서 LLM이 변환시켜줄 수도 있습니다.

앞으로는 차트 프레임워크의 애매한 변환이나 부분적인 UI 지원보다 그대로 사용할 수 있는데 많은 장점이 있어보입니다.

단순함과 코드의 Sweet spot

SQL + YAML + chart.js + 셀렉트어드민은 Chart.js 대시보드를 위한 가장 단순한 환경입니다. 복잡한 인프라 없이, 최소한의 코드로, Chart.js의 자유도를 누릴 수 있어요. AI까지 곁들이면 초보자도 금방 만들 수 있습니다.

BI 툴을 사용하지 않고, 개발 없이 대시보드를 만든다는 것이 어쩌면 새로운 일처럼 들릴 수 있겠지만, 결국 중요한 건 ‘어떻게 지금 필요한 대시보드를 빠르게 만들고 개선할 수 있을까’에 대한 답일지도 모릅니다.

그런 고민을 하고 계셨다면, 이 방식이 하나의 출발점이 될 수 있을 거예요. 여러분 팀은 지금 어떤 방식으로 대시보드를 만들고 계신가요?

전체 템플릿 예제와 관련 사용법은 아래에서 확인할 수 있습니다.

[이커머스 대시보드 템플릿 보러가기]

[displayFn 사용법 더 알아보기 - plotly, billboardjs, echarts, chartjs]