[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 5회 - 엑셀 파일을 넣고 정리·차트 만들기: 파일 첨부와 데이터 문제 진단 요청, 가계부 표 정리와 월별 시각화 차트, 원본 대조 검증 습관

[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 5회 - 엑셀 파일을 넣고 정리·차트 만들기: 파일 첨부와 데이터 문제 진단 요청, 가계부 표 정리와 월별 시각화 차트, 원본 대조 검증 습관

지난 4회에서 우리는 사용자가 직접 화면에 숫자를 입력하면 알아서 계산해 주는 '스마트 더치페이 계산기'를 만들었습니다. 입력할 숫자가 서너 개일 때는 손으로 직접 타이핑해도 아무 문제가 없습니다.

하지만 회사 업무나 일상생활에서 다루는 실제 데이터는 어떤가요? 지난 6개월 동안의 카드 결제 명세서, 가계부 지출 내역, 스마트스토어 주문 목록처럼 적게는 수십 줄에서 많게는 수백 줄이 넘는 엑셀 파일을 마주할 때가 훨씬 많습니다. 게다가 이런 파일들은 날짜 형식도 제각각이고(2026.11.01, 11/2, 2026-11-03), 금액에 쉼표나 원 글자가 뒤섞여 있으며, 카테고리도 엉망인 경우가 대부분입니다.

이 지저분한 데이터를 일일이 손으로 고치고 엑셀 함수를 짜서 그래프를 그리려면 반나절이 훌쩍 지나갑니다. 하지만 클로드(Claude)에게 파일을 통째로 건네주면 단 3분 만에 깔끔하게 정돈된 표와 마우스로 만져보는 인터랙티브 대시보드 차트로 탈바꿈합니다.

오늘 5회: 엑셀 파일을 넣고 정리·차트 만들기에서는 파일 첨부와 데이터 문제 진단 요청, 지저분한 데이터를 말끔히 씻어내는 가계부 표 정리와 월별 시각화 차트, 그리고 AI의 계산 환각(오류)을 잡아내는 원본 대조 검증 습관까지 50분 만에 완전 정복해 보겠습니다.

1. 엑셀 파일을 넣고 정리·차트 만들기: 오늘 만들 결과물과 50분 실습 준비

오늘 우리는 내 컴퓨터에 있는 엑셀(.xlsx) 또는 메모장 텍스트(.csv) 파일을 클로드에 넣고, 눈으로 즐기는 멋진 '지출 분석 대시보드 웹 앱'을 만들어 볼 것입니다.

(1) 오늘의 실습 요약표

항목	상세 내용
오늘 만들 결과물	뒤죽박죽 섞인 지출 내역을 깔끔한 표로 정돈하고, 월별 총지출 막대그래프와 카테고리별 도넛 차트를 마우스로 탐색할 수 있는 반응형 가계부 대시보드 웹 앱
소요 시간	약 50분
이번 회차 세팅	추가 설치 및 가입 없음 (Claude(claude.ai)에서 새 대화를 열어 시작)
핵심 실습 3단계	① 엑셀/CSV 파일 첨부 후 문제 진단 먼저 요청하기 $\rightarrow$ ② 정돈된 표와 시각화 차트 웹 화면으로 뽑아내기 $\rightarrow$ ③ 합계 금액 1~2개를 원본과 대조 검증하기
오늘 깨우칠 핵심 원리	"AI에게 데이터를 분석시킬 때는 무작정 결론을 내라고 하지 말고, '데이터의 이상한 점을 먼저 진단(Data Cleansing)'하게 해야 실수가 없다."

(2) 실습용 예시 엑셀(CSV) 텍스트 준비하기

실제 개인 카드 명세서에는 카드번호나 실명 등 민감한 정보가 들어있을 수 있으므로, 이번 실습을 위해 일부러 날짜와 형식이 엉망으로 섞인 현실적인 연습용 가계부 데이터(12줄)를 준비했습니다.

컴퓨터 메모장을 열어 아래 네모 박스 안의 내용을 그대로 복사해 붙여 넣은 뒤, 바탕화면에 sample_expense.csv라는 이름으로 저장해 두세요. (만약 파일 저장이 번거로우시다면, 클로드 채팅창에 글자 그대로 복사해 붙여 넣으셔도 100% 똑같이 동작합니다!)

[실습용 연습 데이터 (일부러 뒤죽박죽 섞인 지출 내역)]

날짜,항목,지출내역,금액,결제수단
2026-10-02,식비,스타벅스 아메리카노,5500,신한카드
2026.10.05,교통,지하철 충전,15,000원,현금
10/12,쇼핑,교보문고 베스트셀러,18000,네이버페이
2026-10-18,식비,삼겹살 모임 회비,35000,카카오페이
2026.10.25,여가,CGV 영화관람,"15,000",신한카드
2026-11-01,식비,편의점 도시락,5900,토스카드
11/04,통신,알뜰폰 요금,22000원,자동이체
2026-11-10,쇼핑,가을 니트 구매,45000,신한카드
2026.11.15,교통,KTX 부산 기차표,"59,800원",현대카드
2026-11-20,식비,동네 분식집 라면김밥,8500,카카오페이
2026-11-28,여가,도서관 카페 커피,4500,신한카드
2026-11-30,쇼핑,무선 마우스 교체,29000,네이버페이

데이터를 자세히 보세요. 어떤 날짜는 2026-10-02이고 어떤 날짜는 10/12입니다. 금액도 어떤 것은 그냥 5500인데, 어떤 것은 따옴표("15,000")나 원 글자, 쉼표가 붙어 있습니다. 사람이 엑셀에서 수식을 걸면 백발백중 #VALUE! 에러가 나는 전형적인 데이터입니다.

2. 파일 첨부와 데이터 문제 진단 요청: 무작정 분석시키지 말고 "진단 먼저" 시키는 비결

초보자분들이 가장 많이 하는 실수는 파일을 올리자마자 "이거 보고 차트랑 통계 만들어줘"라고 바로 명령을 내리는 것입니다.

데이터가 오염되어 있으면 AI도 속으로 계산하다가 엉뚱한 숫자를 더하거나 빼서 거짓말(환각)을 하게 됩니다. 마치 의사가 수술하기 전에 엑스레이를 먼저 찍듯, 클로드에게도 "데이터에 어떤 문제점이 있는지 먼저 찾아서 나한테 보고해 줘"라고 진단 단계(Data Diagnostics)를 거쳐야 결과가 100% 완벽해집니다.

Step 1. 파일 첨부 후 문제 진단 요청하기

Claude(claude.ai)에서 [+ 새 채팅]을 누르고, 채팅 입력창 아래의 [클립 모양(파일 첨부) 아이콘]을 눌러 방금 저장한 sample_expense.csv 파일을 올립니다. (파일을 안 만드셨다면 프롬프트 아래에 위 텍스트를 그대로 복사해 붙여 넣으세요.)

그리고 아래 프롬프트를 함께 입력해 엔터를 누릅니다.

[복사해서 붙여 넣을 프롬프트 1 - 데이터 문제 진단 요청]

내가 첨부한 파일(또는 텍스트)은 지난 두 달간의 개인 가계부 지출 내역이야. 아직 차트나 대시보드를 만들지 말고, 데이터에 어떤 불규칙한 문제점들이 있는지 먼저 진단해서 알려줘.

1. 날짜 표기 형식에 어떤 차이들이 있는가?
2. 금액 컬럼에 쉼표(,), 따옴표("), '원' 글자 등 숫자로 계산하기 어렵게 만드는 방해 요소가 있는가?
3. 카테고리(항목)는 총 몇 종류로 나뉘어 있는가?
4. 이것을 깨끗한 표와 차트로 만들기 위해 데이터를 어떻게 표준화(정제)할 것인지 계획을 3줄로 먼저 설명해 줘.

Step 2. 클로드의 진단 결과 관찰하기

엔터를 누르면 클로드가 사람 데이터 분석가처럼 꼼꼼하게 파일의 문제점을 짚어냅니다.

• "날짜 형식이 YYYY-MM-DD, YYYY.MM.DD, MM/DD 세 가지로 혼용되어 있습니다. 연도가 생략된 데이터는 2026년으로 통일하겠습니다."
• "금액에 쉼표(,)와 '원' 단위 문자, 따옴표가 섞여 있어 순수 숫자로 정제가 필요합니다."
• "카테고리는 식비, 교통, 쇼핑, 여가, 통신 총 5가지로 분류되어 있습니다."

이 답변을 확인하는 순간, 클로드는 이미 파일의 전체 맥락과 숫자 구조를 머릿속에 완벽하게 파악한 상태가 됩니다. 이제 안심하고 예쁜 대시보드로 만들어 달라고 요청할 수 있습니다!

3. 가계부 표 정리와 월별 시각화 차트: 아티팩트 대시보드 웹 앱 만들기

데이터 정제 계획을 확인했으니, 이제 오른쪽 미리보기(아티팩트) 창에 한눈에 들어오는 가계부 분석 대시보드를 띄워달라고 요청해 보겠습니다.

Step 1. 대시보드 제작 요청 프롬프트 보내기

같은 대화창에서 이어서 아래 프롬프트를 복사해 붙여 넣으세요.

[복사해서 붙여 넣을 프롬프트 2 - 가계부 대시보드 제작]

진단 내용이 정확해! 네가 계획한 대로 데이터를 깔끔하게 정제해서, 브라우저에서 바로 볼 수 있는 **'인터랙티브 가계부 분석 대시보드 웹 앱'**을 단일 HTML 파일로 만들어줘.

[대시보드에 들어갈 3대 영역 구성]

1. 상단 요약 카드 (3개):
   • 💳 총지출 금액 (전체 합계 원)
   • 📅 10월 총지출 vs 11월 총지출 비교
   • 🏆 가장 돈을 많이 쓴 카테고리 1위
2. 중단 시각화 차트 (2개 나란히 배치):
   • 외부 유료 라이브러리 설치 없이 가볍게 작동하도록 표준 차트(Chart.js CDN 또는 깔끔한 SVG/CSS 막대)를 사용해 줘.
   • 차트 A: 10월 vs 11월 월별 총지출 비교 막대그래프
   • 차트 B: 카테고리별(식비/쇼핑/교통/여가/통신) 지출 비중 도넛(원형) 차트 (마우스를 올리면 금액과 퍼센트가 툴팁으로 뜨게)
3. 하단 정돈된 지출 내역 표:
   • 날짜는 2026-10-02처럼 단정하게 표준화하고, 금액은 5,500원처럼 세 자리 쉼표를 찍어 우측 정렬해 줘.
   • 표 상단에 [전체 보기], [식비만], [쇼핑만], [교통만]처럼 카테고리별로 쏙쏙 골라볼 수 있는 필터 버튼을 달아줘.

[디자인 분위기]

• 금융 앱 토스(Toss)나 뱅크샐러드처럼 세련된 화이트 카드와 부드러운 그림자, 파스텔 톤 차트 색상으로 만들어줘.

Step 2. 화면에서 직접 차트 만져보고 필터 눌러보기

오른쪽 미리보기 창에 완성된 대시보드가 나타나면 마우스로 다음 세 가지를 직접 조작해 보세요!

1. 상단 요약 카드 보기: 10월과 11월에 각각 얼마를 썼는지, 어떤 카테고리가 1위인지 숫자가 보기 쉽게 정리되어 있습니다.
2. 도넛 차트에 마우스 올려보기: 원형 차트의 색깔 조각 위에 마우스 커서를 올려보세요. *"식비: 54,900원 (23.5%)"*처럼 풍선 도움말(툴팁)이 부드럽게 떠오르는 것을 확인할 수 있습니다!
3. 표 필터 버튼 클릭해 보기: 하단 표 위에 있는 [식비만] 버튼을 눌러보세요. 12줄의 복잡한 표가 순식간에 줄어들며 식비 4건만 쏙 추려집니다. 다시 [전체 보기]를 누르면 원래대로 돌아옵니다.

우리가 엑셀에서 피벗 테이블을 만들고 복잡한 필터를 걸지 않아도, 말 한마디로 완전한 미니 웹 서비스를 구축한 것입니다.

4. 원본 대조 검증 습관: AI 분석 결과는 반드시 한두 개를 직접 맞춰봐야 하는 이유

화면이 아무리 예쁘고 화려해도 숫자가 틀리면 쓰레기(Garbage In, Garbage Out)입니다. 바이브 코딩으로 데이터 분석이나 가계부를 다룰 때는 '전체 합계'와 '무작위 한 항목' 딱 2개만 원본과 대조해 보는 습관을 반드시 들여야 합니다.

지금 바로 우리 눈으로 직접 검산해 볼까요?

Step 1. 전체 총지출 합계 대조하기 (암산 검증)

우리가 처음에 넣었던 12개 항목의 금액을 실제로 더해보겠습니다.

• 10월 지출 (5건):
  • 스타벅스(5,500) + 지하철(15,000) + 교보문고(18,000) + 삼겹살(35,000) + 영화(15,000) = 88,500원
• 11월 지출 (7건):
  • 편의점(5,900) + 알뜰폰(22,000) + 니트(45,000) + 기차표(59,800) + 라면(8,500) + 도서관카페(4,500) + 마우스(29,000) = 174,700원
• 전체 총지출: 88,500원 + 174,700원 = 263,200원

자, 여러분의 클로드 미리보기 상단 카드에 적힌 '총지출 금액'이 정확히 263,200원으로 적혀 있나요? 그리고 10월 합계 88,500원, 11월 합계 174,700원이 맞게 표시되어 있나요?

만약 숫자가 1원이라도 틀렸다면, 파일의 특수문자나 쉼표를 AI가 잘못 읽은 것입니다. 이때는 채팅창에 "10월 합계는 88,500원이고 11월은 174,700원인데 숫자가 달라. 원본 텍스트를 다시 읽고 계산식을 수정해 줘"라고 한 줄만 말하면 즉시 오차를 바로잡습니다.

Step 2. 단일 카테고리 하나 콕 집어 대조하기 (식비 검증)

전체 합계가 맞더라도 카테고리 분류가 엉뚱하게 섞였을 수 있습니다. 가장 빈번한 '식비' 4건을 검증해 볼까요?

• 스타벅스(5,500) + 삼겹살(35,000) + 편의점(5,900) + 라면(8,500) = 54,900원

대시보드 도넛 차트나 표 필터에서 식비 합계가 정확히 54,900원으로 나오는지 확인합니다.

이처럼 '전체 합계 1개 + 개별 카테고리 1개' 딱 2가지만 원본과 맞춰보는 30초의 검산 습관이 여러분의 업무와 프로젝트를 허술한 AI 환각의 위험에서 완벽하게 지켜줍니다.

마음에 드는 대시보드가 완성되었다면 우측의 [다운로드] 버튼을 눌러 expense_dashboard.html 파일로 소중히 보관해 두세요!

5. 5회 핵심 원리 정리 및 다음 회차 예고: 데이터 분석은 '진단 → 시각화 → 검증' 3단계로 완성된다

오늘 50분 동안 여러분은 지저분한 원본 데이터를 정리하고, 기업용 비즈니스 인텔리전스(BI) 도구 부럽지 않은 가계부 대시보드 웹 앱을 완성하셨습니다.

(1) 오늘 배운 것 3줄 요약

1. 진단 먼저(Data Diagnostics): 엑셀이나 CSV 파일을 분석시킬 때는 무작정 결론부터 내라고 하지 말고, 날짜 형식이나 문자 섞임 같은 데이터 결함을 먼저 찾아내게 해야 실수를 방지할 수 있습니다.
2. 시각화의 힘(Visualization): 수백 줄의 엑셀 표를 글자로 읽는 대신, 월별 막대그래프와 도넛 차트, 카테고리 필터 버튼을 결합하면 누구나 한눈에 데이터 흐름을 파악할 수 있습니다.
3. 대조 검증(Cross-Check) 습관: AI가 도출한 통계나 차트는 맹신하지 말고, 최소한 전체 합계와 1개 카테고리를 원본과 손으로 대조해 보는 습관을 반드시 가져야 합니다.

(2) 5회 완료 셀프 체크리스트

오늘 실습을 성공적으로 끝냈는지 체크해 보세요.

• [x] 날짜와 금액 형식이 뒤섞인 연습용 데이터를 첨부하고, 문제점 진단을 먼저 요청했다.
• [x] 상단 요약 카드, 2종 시각화 차트, 카테고리 필터 표가 포함된 가계부 대시보드를 아티팩트로 띄웠다.
• [x] 총지출 금액(263,200원)과 식비 합계(54,900원)를 원본과 직접 대조해 계산 오차가 없음을 검증했다.

(3) 다음 6회 예고: 새로고침해도 남아 있는 할 일 앱

지금까지 1회부터 5회까지 만든 웹페이지와 앱들에는 한 가지 치명적인 약점이 있습니다. 화면에 열심히 새로운 지출을 적어 넣거나 숫자를 바꾼 뒤, 브라우저의 '새로고침(F5)' 버튼을 누르면 방금 입력했던 내용이 감쪽같이 사라지고 처음 상태로 리셋된다는 점입니다!

우리가 매일 쓰는 투두리스트(할 일 앱)나 메모장 앱은 컴퓨터를 껐다 켜도 내가 적어둔 글이 그대로 남아 있어야 진짜 쓸모가 있습니다.

다음 6회 [새로고침해도 남아 있는 할 일 앱]에서는 할 일 추가·완료 체크·삭제·마감일 필터를 갖춘 세련된 할 일 앱을 만들고, 새로고침해도 내 데이터가 컴퓨터 브라우저 안에 안전하게 살아남는 로컬 저장소(localStorage)의 비밀을 파헤쳐 보겠습니다! (그리고 왜 이 앱이 '다른 컴퓨터'에서는 보이지 않는지, 17회 백엔드와 연결되는 결정적 원리까지 함께 배웁니다!)