매주 받은 매출 CSV를 열어도 어느 금액부터 다시 봐야 할지 한눈에 들어오지 않습니다. 바이브코딩으로 단일 HTML 점검표를 만들면 파일을 고른 뒤 평균과 크게 떨어진 확인 후보를 한 화면에서 볼 수 있습니다. 다만 이 화면은 오류나 부정을 판정하는 도구가 아니라, 사람이 먼저 살펴볼 행을 좁히는 보조 도구입니다.
▣ 30초 요약
- 첫 프롬프트에는단일 HTML,CSV 업로드,평균,평균 대비 편차,확인할 행을 함께 적습니다.
- CSV의 첫 줄은date,customer,amount처럼 열 이름으로 두고 금액은 숫자로 넣습니다.
- 예시 기준은 평균에서 30% 이상 벗어난 행을 확인 후보로 표시하는 방식입니다.
- 파일은 브라우저 안에서만 읽는 구조로 만들고, 실제 매출 원본은 샘플로 먼저 확인합니다.
이걸 만들면 무엇이 달라질까요?
엑셀에서 행을 한 줄씩 훑는 방식은 금액이 커질수록 ‘어디부터 확인할지’가 사람의 눈에 맡겨집니다. 작은 HTML 도구는 평균을 기준으로 각 행의 차이를 계산해 검토 순서가 필요한 행을 위로 모아주는 화면을 만들 수 있습니다.
예를 들어 다음처럼 세 행만 있다고 해보겠습니다.
date,customer,amount
2026-10-01,가온상사,98000
2026-10-02,다온유통,102000
2026-10-03,라온컴퍼니,480000
평균은 226,666.67원입니다. 세 번째 행은 평균보다 크게 높지만, 그것만으로 잘못된 거래라고 할 수는 없습니다.
계약 규모가 다른 거래일 수도 있으므로 화면의 역할은 확정이 아니라 확인 후보 표시입니다.
아래는 글에서 설명하는 결과를 이해하기 위한 예시 화면입니다. 버튼과 파일 선택 상자는 실제로 작동하지 않는 정적 데모이며, 실제 동작은 뒤의 프롬프트로 단일 HTML을 만들 때 구현합니다.
예시 데이터 · 매출 점검표
평균에서 튄 행 확인
| 고객 | 금액 | 판정 |
|---|---|---|
| 가온상사 | 98,000원 | 범위 안 |
| 라온컴퍼니 | 480,000원 | 확인 후보 |
첫 프롬프트는 기능보다 ‘확인할 화면’을 적습니다
바이브코딩은 코드를 한 줄씩 설계하기보다, 만들고 싶은 결과를 자연어로 설명하며 AI와 수정하는 방식입니다. 이번에는 서버나 별도 라이브러리 없이 브라우저에서 여는 단일 HTML을 목표로 잡습니다.
아래 프롬프트를 AI 코딩 도구에 그대로 붙여 넣고, 결과를 sales-check.html로 저장해 브라우저에서 엽니다.
초보자도 브라우저에서 바로 열 수 있는 단일 HTML 파일을 만들어줘.
목표: 매출 CSV를 선택하면 평균 금액과 평균에서 크게 벗어난 행을 보여주는 이상값 점검표.
조건:
1. 외부 라이브러리와 서버 없이 HTML, CSS, JavaScript만 사용한다.
2. 첫 줄의 열 이름을 읽고 date, customer, amount 열을 사용한다.
3. amount에서 쉼표와 원 표시를 정리해 숫자로 바꾼다.
4. 전체 평균을 계산하고, 각 행의 평균 대비 편차율을 계산한다.
5. 기본 임계값은 30%로 두고 사용자가 바꿀 수 있게 한다.
6. 임계값 이상 벗어난 행에는 ‘확인 후보’를 표시하고 후보부터 위에 보인다.
7. 빈 금액, 숫자가 아닌 금액, 열 이름이 없는 행은 오류 목록으로 분리한다.
8. 선택한 파일은 서버로 업로드하지 않고 브라우저 안에서만 처리한다.
9. 모바일 화면에서 카드와 표가 읽히도록 만든다.
10. 화면에 ‘이 결과는 오류 확정이 아니라 확인 우선순위’라는 안내를 넣는다.
처음에는 완성된 전체 HTML만 출력하고, 파일을 저장하고 확인할 순서도 짧게 안내해줘.
성공 기준은 코드가 길어 보이는지가 아닙니다. 파일을 열었을 때 CSV 선택 상자, 평균 금액, 후보 행, 오류 행이 모두 보이고 샘플 CSV를 넣었을 때 숫자가 바뀌면 첫 단계가 끝난 것입니다.
화면이 안 맞을 때는 한 번에 한 가지를 고칩니다
처음부터 모든 기능을 다시 요구하면 어디서 문제가 생겼는지 찾기 어렵습니다. 결과가 예상과 다를 때는 아래처럼 ‘관찰한 현상’과 ‘바꾸고 싶은 기준’을 함께 전달하세요.
수정해줘.
현재 문제: amount 값이 ‘₩480,000’처럼 들어오면 숫자로 인식하지 못한다.
원하는 결과: 쉼표, 원화 기호, 앞뒤 공백을 제거한 뒤 숫자로 계산하고,
변환에 실패한 행은 오류 목록에 원본 값과 행 번호를 보여줘.
기존의 평균·편차율·확인 후보 표시와 모바일 레이아웃은 유지해줘.
수정한 전체 HTML을 다시 출력하고, 어떤 부분을 바꿨는지 3줄로 설명해줘.
또 평균 자체가 이상해 보이면 ‘평균에서 30%’라는 기준을 먼저 의심해야 합니다. 금액 분포가 한쪽으로 치우친 업무라면 단순 평균은 대표값으로 충분하지 않을 수 있으므로, 이 작은 도구를 통계 검정 도구처럼 부르면 안 됩니다.
단일 HTML은 파일을 어떻게 읽고 계산할까요?
HTML은 화면의 뼈대이고, CSS는 모양을 정하며, JavaScript는 파일을 읽고 계산하는 동작을 맡습니다. <input type="file">에서 사용자가 고른 파일 목록을 얻고, FileReader.readAsText()로 내용을 문자열로 읽은 뒤 줄과 쉼표를 나눠 표를 만드는 흐름입니다.
MDN은 HTMLInputElement.files로 선택된 FileList에 접근할 수 있다고 설명합니다. readAsText()는 파일의 내용을 텍스트로 읽지만 전체 내용을 메모리에 올리므로 큰 파일에는 적합하지 않다고 안내합니다.
따라서 이 글의 MVP는 소규모 점검표로 두고, 큰 파일은 나중에 서버·스트리밍 구조를 별도로 설계해야 합니다.
계산은 복잡하지 않습니다.
평균 = 유효한 금액의 합계 ÷ 유효한 행 수
편차율 = |행의 금액 - 평균| ÷ 평균 × 100
확인 후보 = 편차율 ≥ 사용자가 정한 임계값
여기서 확인 후보라는 말이 중요합니다. 거래처별 계약 금액이 다르거나 특정 날짜에 대량 주문이 몰릴 수 있으므로, 화면의 빨간 표시를 승인 취소나 오류 확정으로 바꾸면 안 됩니다.
CSV를 넣기 전 세 가지만 확인하세요
첫 줄의 열 이름을 확인합니다. 프롬프트가 date,customer,amount를 기준으로 했다면 실제 파일의 customer_name, sales 같은 다른 이름을 그대로 넣었을 때 열을 찾지 못할 수 있습니다.
금액에 쉼표·원화 기호가 섞이는지 봅니다. AI에게 그 정리 규칙을 요청했더라도 1,200,000처럼 쉼표가 열 구분자로도 쓰이는 CSV는 따옴표 처리 여부에 따라 파싱이 달라질 수 있습니다.
개인정보가 있는 원본을 AI 채팅창이나 온라인 코드 도구에 그대로 올리지 않습니다. 먼저 고객명·주문번호를 가린 샘플로 화면과 계산을 확인하고, 필요한 데이터만 로컬 브라우저에서 다루는 흐름을 유지하세요.
언제 쓰고, 언제 멈춰야 할까요?
이 도구는 작은 CSV에서 ‘사람이 먼저 볼 행’을 좁히는 데 잘 맞습니다. 예를 들어 매일 받은 파일에서 금액이 유난히 큰 행을 찾아 원본 주문서와 대조하는 첫 관문으로 쓸 수 있습니다.
반대로 회계 마감, 세금 신고, 대량 데이터 처리처럼 정확한 파싱과 감사 기록이 필요한 일에는 이것만으로 충분하지 않습니다. 평균 대신 중앙값·사분위 범위가 필요한 분포인지, 여러 파일의 열 구조가 같은지, 누가 어떤 행을 확인했는지까지 별도로 설계해야 합니다.
CSV를 다시 내려받는 기능을 붙일 때도 조심해야 합니다. OWASP는 스프레드시트 프로그램에서 =, +, -, @ 등으로 시작하는 셀이 수식으로 해석될 수 있는 CSV 인젝션 위험을 설명합니다.
이 글의 화면은 데이터를 표에 보여주는 데서 멈추지만, 내보내기를 추가한다면 문자열을 어떻게 안전하게 처리할지 먼저 검토하세요.
작업 환경을 함께 정리한다면
이 도구는 특정 장비가 없어도 실행됩니다. 다만 로컬 HTML과 CSV를 나란히 확인하는 작업이 잦다면, 화면을 두 개 띄울 수 있는 작업 환경이나 파일을 안전하게 보관할 저장 장치를 고르는 것이 실제 흐름과 더 가깝습니다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
출처
- MDN: HTMLInputElement.files — 파일 입력에서 선택된 FileList를 다루는 브라우저 API 문서
- MDN: FileReader.readAsText() — 파일을 텍스트로 읽는 방법과 큰 파일의 제한
- OWASP: CSV Injection — CSV를 스프레드시트에서 열 때의 수식 주입 위험
- SheetJS 공식 저장소 — 복잡한 스프레드시트 처리가 필요할 때 검토할 수 있는 오픈소스 선택지. 이번 MVP는 외부 라이브러리 없이 구성한다.
핵심 정리: 다섯 가지 질문과 답
Q. 이 HTML은 무엇을 찾아주나요?
평균에서 설정한 비율 이상 벗어난 금액 행을 확인 후보로 보여줍니다. 오류나 부정을 확정하지는 않습니다.
Q. CSV의 기본 열은 무엇인가요?
예제는 date, customer, amount 세 열을 기준으로 합니다. 실제 파일의 열 이름이 다르면 프롬프트와 코드의 기준을 함께 바꿔야 합니다.
Q. 금액이 숫자로 안 읽히면 어떻게 하나요?
쉼표·원화 기호·공백을 제거하는 변환 규칙을 추가하고, 변환에 실패한 행은 오류 목록으로 분리하게 요청합니다.
Q. 큰 CSV에도 바로 써도 되나요?
아닙니다. readAsText()는 파일 전체를 메모리에 올리므로 큰 파일에는 적합하지 않습니다. 작은 점검표와 큰 데이터 처리를 구분하세요.
Q. 가장 먼저 지켜야 할 개인정보 주의는 무엇인가요?
고객명과 주문번호를 가린 샘플로 먼저 테스트하고, 원본을 AI 채팅이나 불필요한 온라인 도구에 올리지 않는 것입니다.
글을 읽어 주셔서 감사합니다.
이 글이 도움이 되었고 새로운 정보를 계속 받아보고 싶으시다면 구독해 주세요.
댓글