지출 CSV 가계부, 빈 항목·잘못된 금액을 한 화면에서 찾는 단일 HTML
지출 CSV를 올리면 항목별 합계와 비어 있거나 금액이 이상한 행을 한 화면에 보여주는 가계부는 단일 HTML 파일로 시작할 수 있습니다. 코드를 처음부터 쓰는 대신, AI 코딩 도구에 CSV 열 이름·확인 규칙·화면 구성을 정확히 전달하면 됩니다.
첫 목표는 ‘자동 가계부’가 아니라 내 CSV를 읽고 판단할 수 있는 작은 MVP입니다.
30초 요약
- CSV는
날짜,항목,금액,메모네 열로 맞춥니다.- 단일 HTML은 브라우저에서 파일을 읽고 항목별 합계와 확인 목록을 계산합니다.
- 빈 항목, 숫자가 아닌 금액, 0원 이하 금액을 ‘확인 필요’로 먼저 분리합니다.
- 은행 연동이나 자동 저장은 이번 MVP 범위에 넣지 않습니다.
이걸 만들면 무엇이 달라질까요?
엑셀에서 식비만 따로 더하고, 빈 항목을 눈으로 훑는 일을 매번 반복하기 쉽습니다. 이 MVP는 CSV 한 장을 넣으면 먼저 항목별 합계와 확인이 필요한 행을 나눠 보여주므로, 다음 정리 행동이 분명해집니다.
예를 들어 2026-09-01,식비,12000,점심과 2026-09-02,,8500,이 들어오면 식비 합계에는 12,000원이 잡히고, 두 번째 행은 항목이 비어 있어 확인 필요 목록으로 분리됩니다. 예시 데이터이며 실제 지출을 판단하거나 분류를 대신하지는 않습니다.
예시 데이터 · 정적 데모 화면 (실제 업로드 버튼이 아닙니다)
42,500원
2건
| 항목 | 합계 | 상태 |
|---|---|---|
| 식비 | 24,000원 | 정상 |
| 교통 | 10,000원 | 정상 |
| (항목 없음) | 8,500원 | 확인 필요 |
단일 HTML이라서 가능한 범위부터 정합니다
HTML은 웹페이지의 뼈대, JavaScript는 화면에서 계산을 움직이는 코드입니다. 단일 HTML은 이 둘을 한 파일에 담는 방식이라, 별도 설치나 서버 없이 파일을 더블클릭해 시작할 수 있습니다.
MDN 문서에 따르면 FileReader.readAsText()는 사용자가 고른 File의 내용을 텍스트로 읽습니다. 다만 파일 전체를 메모리에 올리는 방식이므로, 이 글의 대상은 작은 개인 지출 CSV를 확인하는 로컬 MVP입니다.
큰 카드 명세서나 여러 해치 자료는 별도 데이터 처리 방식을 검토하세요.
이 글의 결과물은 서버에 저장하거나 은행에 연결하지 않습니다. 브라우저 안에서 선택한 CSV를 화면에 보여주는 구조라는 점을 먼저 정해두면, 처음 프롬프트가 덜 흔들립니다.
AI에게 처음으로 붙여넣을 프롬프트
AI 코딩 도구를 열고 새 프로젝트 또는 빈 작업 화면을 엽니다. 아래 상자 전체를 한 번에 복사해 붙여넣으세요.
결과물은 index.html 한 파일이어야 한다는 조건이 핵심입니다.
비개발자도 브라우저에서 바로 열 수 있는 단일 HTML 가계부 MVP를 만들어줘.
외부 라이브러리·서버·로그인·데이터 전송 없이 index.html 한 파일만 사용해.
사용자가 CSV 파일을 고르면 UTF-8 텍스트로 읽어. CSV의 첫 행은 반드시 날짜,항목,금액,메모 헤더라고 가정해.
쉼표로 구분하되 큰따옴표 안의 쉼표도 처리해.
화면에는 다음을 보여줘.
1. 파일을 고르는 영역과 예상 CSV 형식
2. 총 지출, 정상 행 수, 확인 필요 행 수
3. 항목별 지출 합계 표: 항목명과 원화 형식 합계
4. 확인 필요 내역 표: 행 번호, 날짜, 항목, 금액, 이유
확인 필요 규칙은 항목이 비어 있음, 금액이 비어 있음, 금액이 숫자가 아님, 금액이 0 이하임이야. 금액에서 쉼표와 원 기호는 제거한 뒤 숫자로 해석해.
빈 행은 무시해. 오류가 나면 기술 용어 대신 사용자가 다음에 할 행동을 알려줘.
모바일에서도 읽히는 CSS를 넣고, 파일을 고르기 전에는 예시 데이터 화면을 보여줘.
예시라는 점을 분명히 표시해. 실제 파일 내용은 화면 표시와 계산에만 쓰고
서버로 보내지 않아. 완성 코드는 index.html 하나로 전부 출력해.
‘한 파일·서버 없음·확인 규칙’ 세 조건을 빼면 보기 좋은 화면만 나오고, 정작 CSV 판단이 빠질 수 있습니다. AI가 여러 파일을 만들면 “외부 파일 없이 index.html 하나에 HTML·CSS·JavaScript를 모두 합쳐서 다시 출력해줘”라고 바로 수정 요청을 보내면 됩니다.
입력에서 결과까지, 무엇을 확인하면 될까요?
CSV는 쉼표로 칸을 나눈 텍스트 파일입니다. 표를 복사해 메모장에 붙인 뒤 spending.csv로 저장하면, 첫 검증용 파일이 됩니다.
스프레드시트에서 저장했다면 UTF-8 CSV인지도 확인하는 편이 좋습니다.
날짜,항목,금액,메모
2026-09-01,식비,12000,점심
2026-09-02,교통,"1,500",버스
2026-09-03,,8500,분류 확인
2026-09-04,생활,0,금액 확인
2026-09-05,취미,abc,입력 오류
파일을 고른 뒤 화면에서 세 곳을 봅니다. 식비 12,000원과 교통 1,500원이 항목별 합계에 보이고, 마지막 세 행은 확인 필요 목록에 나와야 합니다.
합계 숫자만 맞아도 빈 항목과 잘못된 금액이 목록에 없다면 MVP는 아직 덜 만든 상태입니다.
아래처럼 AI가 만든 결과와 비교하면, ‘작동한다’는 말을 화면 기준으로 바꿀 수 있습니다.
| 확인 위치 | 예시에서 기대할 결과 | 안 맞을 때 뜻 |
|---|---|---|
| 항목별 합계 | 식비 12,000원, 교통 1,500원 | 금액 정리 또는 항목 묶기 로직 점검 |
| 확인 필요 건수 | 3건 | 빈 값·0·문자 금액 규칙 점검 |
| 확인 목록 | 3·4·5번째 데이터 행의 이유 | 원본 행 번호와 이유 표시 점검 |
결과가 어긋날 때는 이 수정 프롬프트를 씁니다
CSV 파싱은 쉼표 하나만 보고 자르면 메모 칸의 쉼표에서 쉽게 틀어집니다. "1,500"처럼 따옴표로 감싼 값도 하나의 칸으로 읽게 해달라고 명시해야 하는 이유입니다.
현재 index.html을 고쳐줘. 큰따옴표 안의 쉼표를 일반 구분자로 자르지 말고
한 칸으로 파싱해. 각 데이터 행의 원래 행 번호를 유지해 확인 필요 표에 표시해.
금액은 쉼표·공백·원 기호를 제거한 뒤 Number로 검사하고,
NaN·빈 값·0 이하를 각각 다른 이유로 보여줘.
파일 선택 뒤에는 예시 데이터를 숨기고 실제 분석 결과만 보여줘.
수정된 index.html 전체를 다시 출력해.
오류 메시지를 만났을 때도 문장을 그대로 AI에게 전달하면 됩니다. 예를 들어 Cannot read properties of undefined는 ‘예상한 열이 없거나 행을 읽지 못했다’는 뜻일 수 있으니, “헤더 날짜,항목,금액,메모가 없을 때 화면에 필요한 열 이름을 안내하고 중단하도록 고쳐줘”라고 요청하세요.
개인정보와 CSV 안전선은 따로 둡니다
이 MVP는 파일을 브라우저에서 읽는 구조로 설계했지만, AI 코딩 도구의 미리보기·공유·배포 설정은 별개입니다. 실명, 계좌번호, 카드번호, 주소가 든 원본을 프롬프트 창에 붙이지 말고 처음 검증은 가짜 예시 CSV로 끝낸 뒤 실제 파일을 선택하세요.
또한 이 글은 CSV를 화면에 읽는 기능이 중심입니다. 나중에 결과를 CSV로 다시 내려받는 기능을 넣는다면, OWASP가 설명한 CSV/수식 인젝션을 고려해야 합니다.
=, +, -, @처럼 수식으로 해석될 수 있는 셀의 내보내기 정책은 별도로 정하고, 단순히 “안전하다”고 단정하지 않는 편이 낫습니다.
언제 이 방식이 맞고, 언제 멈춰야 할까요?
매달 형식이 비슷한 개인 지출 CSV를 빠르게 훑고, 항목별 합계와 빈 입력을 먼저 보고 싶은 경우에 맞습니다. 원본 파일을 서버에 보관하지 않는 작은 확인판이 필요할 때 특히 단순합니다.
반대로 가족과 공유, 여러 기기 동기화, 자동 분류 학습, 은행 연동이 목표라면 단일 HTML만으로는 부족합니다. 이때는 데이터 저장 위치·권한·백업을 먼저 설계하는 서비스를 검토하세요.
단순한 파일 확인판에 무거운 기능을 얹으면 가계부보다 설정 화면이 먼저 커집니다.
작업 환경을 함께 정리한다면
CSV 원본과 분석 결과를 나란히 보며 항목을 대조할 때 화면 높이를 정리하는 용도의 후보입니다. 실제 제품의 모델·가격·호환성은 아래 카드의 검증 정보만 따릅니다.
USB 저장장치나 SD 카드에 있는 CSV를 노트북으로 옮기는 연결 포트 용도의 후보입니다. 보유 기기 포트와 필요한 저장매체 규격은 구매 전에 별도로 확인하세요.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
출처
- MDN, FileReader: readAsText() method — File/Blob 텍스트 읽기와 대용량 파일 주의점
- MDN, HTML input element — 파일 선택 컨트롤과
accept속성 - OWASP Foundation, CSV Injection — CSV 내보내기 기능을 추가할 때 고려할 수식 인젝션
핵심 정리: 다섯 가지 질문과 답
Q. 이 가계부는 어떤 파일을 받나요?
첫 행이 날짜,항목,금액,메모인 UTF-8 CSV를 기준으로 합니다.
Q. 왜 단일 HTML로 시작하나요?
설치·서버 없이 작은 CSV 확인판을 먼저 만들고, 필요한 기능만 다음 단계로 늘릴 수 있기 때문입니다.
Q. 무엇을 확인 필요로 보나요?
빈 항목, 빈 금액, 숫자가 아닌 금액, 0 이하 금액입니다.
Q. 실제 지출 파일을 바로 넣어도 되나요?
먼저 가짜 예시 CSV로 화면과 규칙을 검증한 뒤 사용하세요. 공유·배포 설정은 별도로 확인해야 합니다.
Q. 다음에는 무엇을 더할 수 있나요?
원하는 항목명 통일, 월별 필터, CSV 내보내기처럼 검증 가능한 기능을 하나씩 추가할 수 있습니다.
댓글