[AI 코딩 강의 #09] 숫자를 그림으로! Chart.js로 내 자산 현황 그래프 만들기

728x90

7강에서 데이터를 저장했고, 8강에서 실시간 환율까지 가져왔습니다. 하지만 내 자산 중 주식이 몇 %인지, 현금이 얼마인지 한눈에 보기는 어렵죠.

오늘은 AI에게 **"이 숫자들을 가지고 멋진 원형(Pie) 차트와 막대(Bar) 그래프를 그려줘"**라고 시켜볼 겁니다. 복잡한 그래픽 코딩은 필요 없습니다. 우리는 AI가 추천하는 라이브러리를 가져다 쓰기만 하면 됩니다.

그래프를 그리려면 화면에 도화지가 필요합니다.

Cursor에서 account.html 파일을 엽니다.
표(Table) 위나 아래 적당한 곳에 Ctrl + L을 눌러 요청하세요.
"내 자산 비중을 보여줄 원형 차트(Pie Chart)를 넣고 싶어. 화면 중앙에 적당한 크기의 <canvas> 태그를 추가하고 제목을 '내 자산 포트폴리오'라고 붙여줘."

차트를 직접 그리는 건 너무 힘들기 때문에, 전 세계 개발자들이 사용하는 Chart.js를 불러와야 합니다.

728x90

이제 LocalStorage에 저장된 내 자산 데이터를 차트에 뿌려줄 차례입니다.

자바스크립트 영역을 드래그하고 Ctrl + K를 누릅니다.
아래와 같이 요청하세요.
"LocalStorage에 저장된 자산 데이터를 읽어서 Chart.js로 원형 차트를 그려주는 updateChart 함수를 만들어줘. 종목명이 라벨이 되고, 금액(수량 * 현재가)이 차트의 조각이 되어야 해. 색상은 파스텔 톤으로 예쁘게 입혀줘."

지뢰 1: "데이터를 수정했는데 그래프가 안 바뀌어요!"

원인: 차트 객체가 처음 한 번만 생성되고, 데이터가 바뀔 때 갱신(Update)되지 않았기 때문입니다.
해결책: AI에게 **"데이터가 추가되거나 삭제될 때마다 chart.destroy()를 호출하고 새로 그리거나, chart.update()를 사용해서 그래프를 실시간으로 반영해줘"**라고 요청하세요.

지뢰 2: "차트가 너무 커서 화면을 다 가려요."

원인: 캔버스 태그는 부모 요소의 크기를 무시하고 커지는 경향이 있습니다.
꿀팁: AI에게 **"차트가 담긴 <div> 태그에 고정된 가로/세로 크기를 주고, Chart.js 설정에서 maintainAspectRatio: false를 적용해줘"**라고 말하면 깔끔하게 정돈됩니다.

숫자로만 존재하던 데이터에 '생명력'과 '통찰력'을 불어넣었습니다.

드디어 기초 체력이 모두 길러졌습니다! 다음 시간인 10강부터는 여러분이 기다리시던 본격적인 AI 서비스 개발로 들어갑니다. **"나만의 특화 PDF 챗봇 만들기"**를 통해 진짜 AI 개발의 세계로 초대합니다!

728x90

[AI 코딩 강의 #11] 말하면 그려주는 마법! DALL-E 3 API로 AI 이미지 생성기 만들기 (0)	2026.05.01
[AI 코딩 강의 #10] 드디어 실전! OpenAI API로 나만의 특화 AI 챗봇 만들기 (0)	2026.04.13
[AI 코딩 강의 #08] 내 앱에 생명을! 실시간 환율 API 연동으로 글로벌 자산 관리하기 (1)	2026.04.09
[AI 코딩 강의 #07] 내 데이터를 기억하는 프로그램: 초보자를 위한 데이터베이스(DB) 입문 (0)	2026.04.08
[AI 코딩 강의 #06] 영어가 무서워? Cursor 에디터 한글 설정 및 필수 초기 세팅 완벽 가이드 (0)	2026.04.06