💭 왜 차트가 필요했나

직무 번아웃 테스트를 만들면서 고민이 생겼습니다. 5개 영역(정서적 고갈, 냉소, 성취감 저하, 신체/정신 증상, 환경적 요인)의 점수를 어떻게 보여줄까? 그냥 숫자로 나열하면 사용자가 자신의 상태를 한눈에 파악하기 어렵겠더군요.

"이미 위험한 영역이 어딘지 바로 보여줘야 하는데..." 고민하다가 **막대 그래프**가 떠올랐습니다. 각 영역의 점수를 시각적으로 비교할 수 있으니까요. 그래서 Chart.js를 도입하기로 결정했습니다.

🎯 설계 단계

차트를 만들기 전에 어떤 정보를 담을지 고민했습니다:

💻 구현 과정

1단계: Chart.js 추가

CDN으로 간단하게 추가했습니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2단계: Canvas 요소 준비

차트를 그릴 캔버스 영역을 HTML에 만들었습니다.

<div class="bg-gray-50 rounded-2xl p-6">
    <canvas id="categoryChart" height="300"></canvas>
</div>

3단계: 데이터 준비

사용자의 검사 결과를 영역별로 정리했습니다.

// 영역별 점수 (LocalStorage에서 로드)
const categoryScores = {
    '정서적 고갈': 35,
    '비인격화(냉소)': 28,
    '개인적 성취감 저하': 42,
    '신체적/정신적 증상': 38,
    '환경적 요인': 20
};

// 각 영역의 만점
const categoryMaxScores = {
    '정서적 고갈': 50,
    '비인격화(냉소)': 50,
    '개인적 성취감 저하': 50,
    '신체적/정신적 증상': 50,
    '환경적 요인': 25
};

4단계: 차트 생성

이제 Chart.js로 막대 그래프를 그렸습니다.

const ctx = document.getElementById('categoryChart').getContext('2d');

const labels = Object.keys(categoryScores);
const data = Object.values(categoryScores);
const maxScores = labels.map(cat => categoryMaxScores[cat]);

new Chart(ctx, {
    type: 'bar',  // 막대 그래프
    data: {
        labels: labels,
        datasets: [{
            label: '현재 점수',
            data: data,
            backgroundColor: 'rgba(249, 115, 22, 0.7)',
            borderColor: 'rgba(249, 115, 22, 1)',
            borderWidth: 2
        }, {
            label: '만점',
            data: maxScores,
            backgroundColor: 'rgba(229, 231, 235, 0.5)',
            borderColor: 'rgba(156, 163, 175, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: true,
                position: 'top'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 10
                }
            }
        }
    }
});

5단계: 툴팁 커스터마이징

막대에 마우스를 올리면 퍼센트도 같이 보여주고 싶었습니다.

options: {
    // ... 기존 옵션들
    plugins: {
        tooltip: {
            callbacks: {
                label: function(context) {
                    const index = context.dataIndex;
                    const datasetLabel = context.dataset.label;
                    const value = context.parsed.y;
                    
                    if (datasetLabel === '현재 점수') {
                        const max = maxScores[index];
                        const percentage = ((value / max) * 100).toFixed(1);
                        return \`\${datasetLabel}: \${value}점 (\${percentage}%)\`;
                    }
                    return \`\${datasetLabel}: \${value}점\`;
                }
            }
        }
    }
}

🎨 시각화 개선

기본 차트만으로는 부족하다고 느껴서 몇 가지를 더 추가했습니다.

위험 영역 강조 표시

70% 이상인 영역은 별도로 경고 메시지를 표시했습니다.

// 70% 이상인 영역 찾기
Object.entries(categoryScores).forEach(([category, score]) => {
    const maxScore = categoryMaxScores[category];
    const percentage = (score / maxScore) * 100;
    
    if (percentage >= 70) {
        // 빨간 경고 박스 표시
        displayWarning(category, score, percentage);
    }
});

⚠️ 겪은 문제들

scales: {
    x: {
        ticks: {
            font: {
                size: 11  // 폰트 크기 줄임
            }
        }
    }
}

📈 다른 차트 타입 실험

막대 그래프 외에 다른 것들도 시도해봤습니다:

🎓 배운 점

💡 마치며

Chart.js를 사용하면서 "데이터 시각화"의 중요성을 다시 한번 깨달았습니다. 같은 데이터도 어떻게 보여주느냐에 따라 사용자의 이해도가 완전히 달라지더군요.

다음에는 히스토리 기능을 추가해서 시간에 따른 변화를 라인 차트로 보여주고 싶습니다. "지난 3개월간 번아웃 지수가 어떻게 변했는지" 확인할 수 있다면 더 유용할 것 같아요.