Chart.js 연동: 데이터 시각화 자바스크립트 우선순위 대시보드

작성자:

안녕하세요! 10번의 프로젝트를 통해 우리는 데이터를 저장하고 관리하는 법을 배웠습니다. 하지만 문득 이런 생각이 들더군요. “할 일을 10개 적어놨는데, 내가 얼마나 해냈는지 한눈에 알 방법은 없을까?”

단순히 텍스트가 줄 그어지는 것보다, 원형 그래프가 실시간으로 차오르는 모습을 본다면 성취감의 차원이 다를 것입니다. 그래서 11번째 프로젝트는 ‘코드로 그림을 그리는’ 영역인 데이터 시각화에 도전했습니다. 자바스크립트 우선순위 대시보드를 테마로 잡아, 외부 라이브러리인 Chart.js를 연동해, 단순한 To-Do 리스트를 멋진 우선순위 대시보드로 업그레이드한 과정을 공유합니다.

자바스크립트 우선순위 대시보드 메인 화면

1. 기획 의도: 왜 그래프가 필요한가?

우리는 정보 과잉의 시대에 살고 있습니다. 텍스트로 된 리스트가 길어질수록 뇌는 피로를 느끼고 우선순위를 놓치기 쉽죠. 이번 자바스크립트 우선순위 대시보드 형태의 시각화는 다음과 같은 이점을 줍니다.

  • 직관적인 상태 파악: “아직 할 일이 절반이나 남았네?”라는 인식을 0.1초 만에 하게 합니다. 인지 부하를 줄여주는 것이 시각화의 핵심입니다.
  • 동기 부여: 완료 체크를 할 때마다 파란색 그래프 영역이 넓어지는 시각적 보상은 사용자 경험(UX)의 핵심입니다. 일종의 ‘게이미피케이션(Gamification)’ 요소를 도입한 셈이죠.
  • 전문성 있는 UI: 정적인 웹페이지에 동적인 그래프가 추가되는 순간, 단순한 연습용 앱이 아닌 ‘진짜 서비스’처럼 보이기 시작합니다. 이는 포트폴리오의 퀄리티를 결정짓는 중요한 요소입니다.

2.핵심 기술: Chart.js 연동과 실시간 업데이트

이번 자바스크립트 우선순위 대시보드의 주인공은 Chart.js입니다. 이 라이브러리를 활용하면 복잡한 Canvas 드로잉 없이도 세련된 차트를 구현할 수 있습니다.

// 차트 초기화 로직: 대시보드의 기반을 닦습니다.
myChart = new Chart(ctx, {
    type: 'doughnut', // 세련된 도넛 모양 차트 선택
    data: {
        labels: ['미완료', '완료'],
        datasets: [{
            data: [pending, completed], // 실시간 상태 데이터 반영
            backgroundColor: ['#e2e8f0', '#6366f1'],
            borderWidth: 0
        }]
    },
    options: {
        cutout: '70%', // 도넛의 두께 조절로 세련미 추가
        plugins: {
            legend: { position: 'bottom' } // 범례 위치 조정
        }
    }
});

가장 중요한 기술적 포인트는 ‘데이터와 UI의 동기화’입니다. 단순히 차트를 그리는 데 그치지 않고, todos 배열의 상태가 변할 때마다 filter 메서드로 완료된 항목을 계산하고, myChart.update()를 호출하여 차트만 부분적으로 다시 그리도록 설계했습니다. 이는 전체 페이지를 새로고침하지 않고도 매끄러운 사용자 경험을 제공하는 현대적인 웹 개발의 표준 방식입니다.

function updateChart() {
    const completed = todos.filter(t => t.completed).length;
    const pending = todos.length - completed;
    myChart.data.datasets[0].data = [pending, completed];
    myChart.update();
    localStorage.setItem('priority-todos', JSON.stringify(todos));
}

3. 경험: 라이브러리와 내 코드의 ‘협업’ 과정

외부 라이브러리를 처음 쓸 때 가장 큰 고민은 “내가 만든 데이터와 어떻게 연결할 것인가?”입니다.

처음에는 할 일을 추가할 때마다 차트 전체를 새로 그리려 했습니다. 하지만 그렇게 하니 화면이 깜빡거리고 성능상 효율적이지 못하더군요. 대신 기존 차트 객체의 data 값만 수정하고 업데이트(update())하는 방식을 선택했습니다. 이 과정을 통해 라이브러리의 생명주기(Lifecycle)를 이해하고, 효율적으로 자원을 사용하는 법을 배웠습니다.

4. 시행착오: 캔버스 크기 조절과 반응형 레이아웃

개발 도중 HTML의 canvas 태그가 부모 요소의 크기를 무시하고 화면을 뚫고 나가는 현상이 발생했습니다. 캔버스는 기본적으로 고유의 비율을 가지려 하기 때문에 발생하는 문제입니다.

저는 이 문제를 해결하기 위해 CSS에서 position: relative 속성을 가진 컨테이너로 캔버스를 감싸고, Chart.js의 옵션 중 maintainAspectRatio: false를 고려하거나 컨테이너의 height를 명확히 고정하는 방식을 사용했습니다. 또한, 레이아웃을 grid로 구성하여 왼쪽에는 리스트, 오른쪽에는 대시보드가 오도록 배치하여 정보 전달의 효율성을 높였습니다. 디자인 디테일이 한 끗 차이로 프로젝트의 완성도를 결정한다는 것을 다시금 깨달았습니다.

5. 발전 방향 및 보완점: 더 똑똑한 대시보드를 위하여

지금 만든 자바스크립트 우선순위 대시보드도 훌륭하지만, 실제 서비스로 발전시키기 위해 다음과 같은 기능들을 추가해볼 수 있습니다.

  1. 우선순위 가중치 부여: 모든 할 일이 똑같은 비중을 갖는 대신, ‘중요도’를 선택하게 하여 중요한 일을 끝냈을 때 그래프가 더 크게 차오르는 로직을 구현할 수 있습니다.
  2. 시간대별 성취도 그래프: 현재는 누적 데이터만 보여주지만, 하단에 선형 차트(Line Chart)를 추가해 월요일부터 일요일까지 요일별로 얼마나 많은 일을 처리했는지 추이를 보여주면 훨씬 전문적인 대시보드가 됩니다.
  3. LocalStorage 확장: 현재는 하나의 리스트만 저장하지만, ‘공부’, ‘운동’, ‘업무’ 등 카테고리별로 대시보드를 나누어 관리하는 기능을 추가한다면 상용 앱 수준의 가치를 가질 것입니다.
  4. 다크 모드 지원: 장시간 화면을 보는 사용자를 위해 차트의 테마 색상(backgroundColor)을 동적으로 변경하는 기능을 구현하여 접근성을 높일 수 있습니다.

6. 자바스크립트 우선순위 대시보드 실행 화면

자바스크립트 우선순위 대시보드 실행 화면

11번째 프로젝트를 통해 자바스크립트가 단순히 숫자를 계산하는 도구를 넘어, 시각적인 정보를 전달하는 매개체가 될 수 있음을 확인했습니다.

외부 라이브러리인 Chart.js를 처음 도입해 보면서 공식 문서를 읽고 내 프로젝트에 맞게 커스텀하는 법을 익혔습니다. 데이터를 단순히 숫자로 보는 것보다 그래프로 시각화했을 때 사용자가 느끼는 직관성이 얼마나 커지는지 알 수 있었고, 반응형 차트 레이아웃을 잡으면서 CSS Grid와 Flexbox에 대한 이해도 한층 깊어졌습니다.

여러분도 이제는 텍스트 위주의 UI에서 벗어나, Chart.js와 같은 도구를 활용해 사용자에게 ‘보는 즐거움’을 선물해 보는 건 어떨까요? 데이터 시각화의 세계는 무궁무진하며, 이는 여러분의 포트폴리오를 더욱 빛나게 해줄 것입니다.

시각적 표현에 관심이 생기셨다면 [자바스크립트 캔버스 그림판] 프로젝트를 통해 브라우저 그래픽 기초를 더 공부해보세요.

다음 프로젝트에서는 또 어떤 새로운 기술로 우리의 코드를 풍성하게 만들지 기대해 주세요.

댓글 남기기