데이터 시각화 입문: 가계부 숫자를 그래프로 바꾸는 가장 쉬운 방법

지출을 꼼꼼히 기록해도 막상 “그래서 내가 돈을 잘 쓰고 있는 걸까?”라는 질문에는 쉽게 답하기 어렵습니다. 저 역시 엑셀 표에 숫자를 정리해두고도 소비 흐름은 잘 보이지 않았습니다.

그래서 선택한 방법이 웹에서 바로 사용할 수 있는 무료 그래프 도구였습니다. 별도 프로그램 설치 없이, 인터넷에 있는 기능을 잠깐 빌려 쓰는 방식입니다. 어렵게 느껴지지만 구조는 아주 단순합니다.

인터넷에 있는 기능을 “불러온다”는 것은 무슨 뜻일까?

초보자 입장에서 가장 헷갈렸던 부분이 바로 이것이었습니다.
“스크립트를 불러온다”는 표현이 낯설게 느껴졌습니다.

쉽게 말하면 이런 개념입니다.

  • 유튜브 영상을 보려면 주소를 입력합니다.

  • 그러면 유튜브 서버에서 영상이 열립니다.

그래프 도구도 같습니다.
그래프를 그려주는 기능이 인터넷 어딘가에 저장되어 있고, 우리는 그 주소를 통해 그 기능을 가져옵니다.

그 주소는 다음과 같습니다.

https://www.gstatic.com/charts/loader.js

이 주소는 “그래프 기능이 들어 있는 파일의 위치”라고 이해하면 충분합니다.

HTML 파일은 어떻게 만드는가?

HTML 파일은 웹페이지 설계도입니다.
메모장에 글을 쓰듯 코드를 적고 저장하면 됩니다.

만드는 방법은 다음과 같습니다.

  1. 메모장을 엽니다.

  2. 아래 코드를 복사합니다.

  3. 다른 이름으로 저장 → 파일 이름을 chart.html로 입력합니다.

  4. 저장한 파일을 더블클릭하면 브라우저에서 열립니다.

그래프 기능을 연결하는 기본 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>가계부 그래프</title>

  <!-- 인터넷에 있는 그래프 기능을 불러오는 부분 -->
  <script src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<body>

<h2>주간 지출 그래프</h2>
<div id="chart_div" style="width:700px; height:400px;"></div>

</body>
</html>

여기서 핵심은 이 한 줄입니다.

<script src="https://www.gstatic.com/charts/loader.js"></script>

의미는 간단합니다.
“이 주소에 있는 기능을 이 페이지에서 사용하겠습니다.”라는 뜻입니다.

이제 데이터를 넣어보겠습니다

위 코드만으로는 아직 그래프가 보이지 않습니다.
도구만 연결했고, 데이터를 주지 않았기 때문입니다.

아래 코드를 <body> 아래에 추가합니다.

<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['요일', '지출 금액'],
    ['월', 12000],
    ['화', 8000],
    ['수', 15000],
    ['목', 7000],
    ['금', 20000],
    ['토', 25000],
    ['일', 10000]
  ]);

  var options = {
    title: '주간 지출 현황',
    legend: { position: 'none' }
  };

  var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div')
  );

  chart.draw(data, options);
}
</script>

구조는 이렇게 이해하면 쉽습니다.

  1. 표처럼 데이터를 작성합니다.

  2. 막대 그래프를 선택합니다.

  3. 화면에 그려 달라고 요청합니다.

그러면 브라우저가 자동으로 그래프를 만들어 줍니다.

상단에 AI 지출 요약 문장이 위치하고 하단에 일주일간의 소비 흐름을 보여주는 막대 그래프가 배치되어, 숫자로만 된 데이터를 한눈에 들어오는 그림으로 변환하여 소비 패턴을 즉각적으로 파악하게 해주는 직관적인 대시보드 화면입니다.


제가 겪은 시행착오

처음에는 주소를 한 글자 잘못 적어 화면이 하얗게 나오기도 했습니다.
괄호 하나가 빠져 오류가 나기도 했습니다.

하지만 차근차근 보니 구조는 단순했습니다.

  • 기능을 연결하고

  • 데이터를 적고

  • 출력 요청을 한다

이 세 단계만 이해하면 됩니다.

요약 및 정리

웹 기반 그래프 도구는 설치 없이 바로 사용할 수 있다는 점이 가장 큰 장점입니다.

핵심은 다음 세 가지입니다.

  • 인터넷 주소를 통해 기능을 연결한다

  • 데이터를 표 형태로 작성한다

  • 원하는 형태로 화면에 출력한다

숫자는 읽어야 이해되지만, 그래프는 보는 순간 이해됩니다.
한 번 직접 만들어보시면 기록이 단순한 숫자 목록이 아니라 흐름으로 보이기 시작할 것입니다.

"여러분의 지출 그래프는 어떤 모양인가요? 우상향인가요, 우하향인가요?"

댓글

댓글 쓰기

이 블로그의 인기 게시물

바이브코딩으로 5분만에 만드는 ‘하루 지출 자동 정리 도구’ (초보자 실전)

이미지
지출 정리는 늘 하려고만 했습니다 가계부를 써보겠다고 다짐한 적은 여러 번 있었습니다. 처음 며칠은 열심히 기록하다가도, 어느 순간부터는 귀찮아져서 멈추게 되었습니다. 앱을 깔아보기도 하고 엑셀을 열어보기도 했지만, 오래 가지는 못했습니다. 특히 기록 항목이 많아질수록 부담이 커졌고, 빠뜨린 날이 생기면 다시 시작하기가 더 어려워졌습니다. 그러다 바이브코딩을 접하면서 생각이 조금 바뀌었습니다. “완벽한 가계부”가 아니라, 오늘 쓴 돈만 간단히 정리하는 도구 라면 가능하겠다는 생각이 들었습니다. 매일 써야 하는 도구일수록, 기능은 적을수록 좋다는 결론에 이르렀습니다. 복잡한 가계부 대신 ‘하루 지출’만 정했습니다 처음부터 월별 통계나 그래프를 만들려고 하면 오히려 시작조차 어렵습니다. 그래서 목표를 아주 단순하게 잡았습니다. 오늘 쓴 지출 항목과 금액을 입력하면, 하루 총지출만 자동으로 계산해주는 도구 입니다. 이렇게 범위를 줄이니 “이건 내가 계속 쓸 수 있겠다”는 느낌이 들었습니다. 바이브코딩 초보자에게 가장 중요한 것은, 한 번 쓰고 끝나는 결과물이 아니라 계속 써볼 수 있는 작은 성공 경험 이라고 느꼈습니다. 입력 → 처리 → 출력으로 구조부터 정리해봅니다 8회차에서 정리한 [ 바이브코딩이 쉬워지는 3단계 사고법 ]을 그대로 적용했습니다. 막연한 아이디어를 바로 요청하지 않고, 구조부터 정리하는 과정이 핵심이었습니다. 입력: 사용자가 직접 적는 정보 입력은 두 가지만 필요했습니다. 첫째는 지출 항목, 둘째는 금액입니다. 커피인지, 식비인지 구분하는 정도면 충분하다고 생각했습니다. 항목을 세분화하지 않은 것도, 오래 쓰기 위한 선택이었습니다. 처리: 입력값으로 할 일 처리는 단순합니다. 입력된 금액들을 모두 더해서 하루 총지출을 계산합니다. 여기서 욕심을 내지 않고 “합계만 계산한다”로 정리한 것이 오히려 도움이 되었습니다. 처리가 단순할수록 오류도 줄고, 수정도 쉬웠습니다. 출력: 결과를 보여주는 방식 출력은 숫자를 ...
자세한 내용 보기

바이브코딩의 장점과 일상 활용 사례(가계부와 체크리스트 5분 만들기)

이미지
  바이브코딩이란 무엇인가? 지난 글에서 안티그래비티를 이용해 간단한 계산기 화면을 만들어보았죠. 이번에는 그 경험을 바탕으로  바이브코딩의 장점과 일상 속 활용 사례 를 살펴보겠습니다. 바이브코딩은 단순히 코드를 작성하는 행위가 아니라,  아이디어를 글로 표현하면 화면과 기능으로 바로 구현 해주는 도구입니다. 기존 코딩과 달리 문법 오류에 시달릴 필요가 없고, 초보자도 시각적으로 바로 결과를 확인할 수 있다는 점이 가장 큰 장점이에요. 제가 직접 사용해보면서 느낀 장점은 크게 세 가지였습니다. 즉시 피드백 : 입력한 문장대로 화면이 생성되니, 결과를 기다릴 필요가 없습니다. 시행착오 학습 : 작은 실수나 입력 오류가 발생해도, 반복 수정 과정을 통해 자연스럽게 문제 해결 능력을 기를 수 있습니다. 실용성 : 간단한 계산기, 메모 앱, 체크리스트 등 실생활에서 바로 쓸 수 있는 기능을 구현할 수 있어, 배운 것을 바로 활용할 수 있습니다. 특히 저는 처음 안티그래비티 화면을 띄웠을 때, 버튼 하나하나가 제대로 작동하지 않아 당황했던 경험이 있습니다. 하지만 반복적으로 입력값을 수정하고, 버튼 색상과 위치를 조정하면서  문과생인 저도 충분히 화면을 원하는 대로 설계할 수 있다 는 자신감을 얻었죠. 일상 속 활용 사례 제가 가장 먼저 시도한 활용은   생활에 직접 필요한 도구 만들기 였습니다. 예를 들어, 집안에서 자주 사용하는   가계부 계산기 나, 간단한   할 일 체크리스트 를 만들어보았습니다. 1. 가계부 계산기 프롬프트 가계부 계산기 화면을 만들어줘. - 숫자 입력 칸 2개: ‘지출 내역’과 ‘금액’ 입력 가능 - 더하기 버튼: 클릭 시 두 입력값의 합계 계산 - 결과 출력 칸: 합계가 표시됨 - 버튼 색상은 기본 파란색, 글씨는 검정색, 배경은 연한 회색 - 모든 버튼과 입력칸 보기 좋게 정렬 - 입력 칸에 안내 문구 포함: ‘지출 내역 입력’, ‘금액 입력’ 이 프롬프트를 입력하...
자세한 내용 보기

안티그래비티 사용법: 문과생이 프롬프트로 5분 만에 계산기 화면 만드는 법

이미지
  안티그래비티란 무엇일까? 제가 처음 안티그래비티를 만났을 때 솔직히 조금 두려웠습니다. 평생 문과생으로 살아오면서 숫자와 코드와는 거리가 멀었거든요. 그런데 안티그래비티는 그런 저 같은 사람도 친근하게 접근할 수 있도록 만들어진 도구였습니다. 안티그래비티는 말 그대로 “마법의 작업 공간” 같은 느낌이에요. 화면 안에는 우리가 만들고 싶은 프로그램의 요소들을 글로 입력하면, 내부 인공지능이 알아서 코드와 버튼, 화면을 만들어줍니다. 복잡한 명령어를 외울 필요 없이, 글로 원하는 내용을 쓰기만 하면 되는 것이죠. 무엇보다 마음에 들었던 점은,  초보자의 실수를 자연스럽게 흡수 한다는 겁니다. 제가 글자를 조금 잘못 입력해도 안티그래비티는 오류를 크게 내지 않고, 대부분 수정 제안이나 기본값으로 처리해 줍니다. 처음 접하는 사람에게는 정말 큰 장점입니다. 그리고 재미있는 점은, 입력하는 글의 문장만으로도 다양한 시도가 가능하다는 것입니다. 예를 들어, “빨간 버튼을 만들어줘”라고 입력하면 즉시 빨간 버튼이 나타나고, “버튼 크기는 크게”라고 덧붙이면 버튼이 조금 더 커지는 식이죠. 이런  직관적 반응  덕분에 문과생도 금세 재미를 느낄 수 있었습니다. 화면 구성과 첫 인상 처음 안티그래비티를 켜면 기본 화면은 크게 세 부분으로 나뉩니다. 입력창 : 프로그램에 원하는 기능이나 디자인을 글로 입력하는 공간 미리보기 창 : 입력 내용을 바탕으로 화면을 실시간으로 확인할 수 있는 곳 설정 메뉴 : 버튼 색상, 글씨 크기, 배경 색 등을 조절하는 영역 제가 처음 입력창에 글을 입력할 때, 조금 성의 있게 프롬프트를 작성했습니다. 예를 들어 단순히 “계산기 만들어줘”라고 입력하는 대신, 이렇게 썼습니다: “간단한 계산기 화면을 만들어줘. 숫자 입력 칸 2개, 더하기 버튼, 결과를 표시하는 출력 칸 포함. 버튼은 파란색, 글씨는 검정색, 배경은 연한 회색으로. 모든 버튼과 입력칸은 보기 좋게 정렬해줘.” 몇 초 후, 입력한 그대로 버튼과 입...
자세한 내용 보기