바이브코딩 업무 자동화, CSV 중복 정리 도구 만들기

바이브코딩 업무 자동화는 반복하는 일에서 판단 기준을 꺼내고, 그 기준대로 처리되는지 확인하는 작은 앱부터 시작하면 된다. 이번에는 가상 주문 CSV의 중복 후보를 찾아, 제외할 행을 비교한 뒤 정리본을 내려받는 도구를 만들었다. 실행 도구와 전체 코드를 함께 공개한다.

같은 사람이 주문을 두 번 했다면 주문 하나를 지워도 될까요? 주문번호는 같지만 배송 메모가 바뀌었다면 어느 행을 남겨야 할까요? “중복을 지워 줘”라는 요청만으로는 이 결정을 전달할 수 없다. 이 글에서는 요구사항 → 구현 → 실패 입력 → 수정 → 검증을 파일과 함께 따라간다.

CSV 예제·전체 코드와 사용법·요구사항·검증 기록 PDF를 담았어요.

코드·CSV·PDF 받기도구 실행하기

3줄 요약

• 가상 주문 8행에서 주문번호를 기준으로 검사하면 2행이 제외 후보가 되고 6행이 남는다.
• 빈 주문번호는 합치지 않으며, 메모가 다른 행은 비교한 뒤 다시 살릴 수 있다.
• 파일 내용은 브라우저에서 처리한다. 앱 실행에는 설치·로그인·AI API 키가 필요 없다.

엑셀 기능이 있는데 왜 따로 만들까요?

CSV를 한 번 정리하는 것이 목적이라면 엑셀의 기존 기능부터 확인한다. 엑셀에는 비교할 열을 선택하는 중복 제거 기능이 있고, 원본을 복사한 뒤 작업하는 방법도 안내한다. Microsoft 중복 찾기·제거 안내

이 실습에서는 제외 이유를 나란히 보고, 특정 행을 살리고, 판단 기준과 행 번호를 따로 남기는 흐름을 직접 만든다. 자기 업무에 필요한 검토 과정을 화면으로 옮겨 보는 연습이다. 단순히 “AI로 앱을 만들었다”에서 끝나지 않으려면, 어떤 입력에서 어떤 결과가 나와야 하는지 설명할 수 있어야 한다.

HTML 파일을 처음 열어 본다면 첫 앱 만들기부터 진행한다. 이번 프로젝트는 파일 읽기, 비교 규칙, 내보내기까지 다루므로 첫 버튼 실습보다 복잡하다.

완성본에서 먼저 정답을 확인하세요

도구를 열고 가상 주문 8행으로 시작을 누른다. 이 버튼은 ‘주문번호’만 기준 열로 선택하고, 먼저 나온 행을 남긴다. 화면에는 읽은 데이터 8행, 남을 행 6행, 제외할 행 2행, 기준이 비어 유지한 행 2행이 표시된다.

‘원본과 나란히 비교’에서 4행과 2행 내용 비교를 펼쳐 본다. 주문번호는 A001로 같지만 배송 메모가 다르다. 4행의 ‘이 행도 유지’를 누르면 남는 행이 7행으로 바뀐다. 숫자가 바뀐 이유를 설명할 수 있다면 첫 확인은 끝났다.

설정	제외할 원본 행	정리본
주문번호가 같으면 먼저 나온 행 유지	4·5행	6행
위 설정에서 4행을 추가 유지	5행	7행
모든 열이 같은 경우만 제외	5행	7행
주문번호가 같으면 나중 행 유지	2·3행	6행

여기서 행 번호는 열 제목을 1행으로 센다. 셀 안에 줄바꿈이 있어도 그 셀이 들어 있는 CSV 레코드는 한 행이다. 주문번호가 없는 8·9행은 서로 합치지 않는다. A002와 A003은 같은 고객의 주문이지만 주문번호가 달라 둘 다 남는다.

예제 버튼과 직접 파일 불러오기의 초기 기준은 다르다. 가상 주문 CSV를 파일 선택으로 불러오면 모든 열이 선택된다. 실수로 다른 값을 지우지 않도록, 사용자의 파일은 더 엄격한 비교에서 시작하게 했다.

바이브코딩 업무 자동화의 첫 단계는 합격 조건

코드를 요청하기 전에 요구사항 PDF에 중복의 기준과 결과를 적었다. “잘 돌아가는 앱” 대신 실제로 확인할 수 있는 조건으로 바꿨다.

결정할 것	이번 실습의 선택
어떤 값이 같아야 중복인가요?	사용자가 고른 열의 값이 모두 같을 때
어느 행을 남기나요?	기본은 먼저 나온 행, 나중 행으로 변경 가능
기준 값이 비었다면요?	선택한 열 중 하나라도 비면 해당 행 유지
공백이나 영문 대소문자는요?	기본은 구별, 무시 옵션은 비교에만 적용
원본 파일을 바꾸나요?	원본은 두고 정리본을 새 파일로 저장
잘못된 CSV는요?	일부만 조용히 처리하지 않고 오류를 알려 중단

이 조건을 적은 뒤 다음처럼 요청할 수 있다. 아래 문장은 재사용하도록 작성한 예시이며, 당시 AI 대화의 원문이나 한 번에 성공했다는 기록은 아니다.

첨부한 PDF의 ‘먼저 정한 요구사항’을 읽고 브라우저에서 실행하는 CSV 중복 정리 앱을 만들어 줘.
index.html, style.css, core.js, app.js로 나눠 줘.
외부 API·서버·로그인 없이 파일을 읽고 처리해야 해.
기준 열을 고르고, 제외할 원본 행을 비교한 뒤 필요하면 살릴 수 있게 해 줘.
입력이나 기준을 바꾸면 이전 결과와 검토 완료 상태를 지워 줘.
orders.csv의 기대 결과를 각각 비교하고 quotes.csv도 읽어 줘.

처음부터 새로 생성해 볼 수도 있고, 공개한 소스를 열어 한 가지 조건만 바꿀 수도 있다. 어떤 AI를 쓰든 결과가 같다고 가정하지 말고 같은 가상 입력으로 비교한다. 요청 예시와 변경 연습도 묶음에 들어 있다.

쉼표로 나누기만 하면 왜 실패할까요?

CSV라는 이름 때문에 모든 쉼표에서 문자열을 자르면 될 것처럼 보이다. 하지만 "쉼표, 보존"은 두 칸이 아니라 한 셀이다. 따옴표 안에는 줄바꿈도 들어갈 수 있고, 셀 안의 큰따옴표는 큰따옴표 두 개로 표현한다. RFC 4180의 CSV 형식 설명

이 차이를 보여 주려고 일부러 단순하게 만든 실패 코드를 넣었다. 실제 AI가 생성했다는 기록은 아니다.

text.trim().split('\n').map(line => line.split(','));

같은 quotes.csv를 읽히면 단순 코드는 물리 줄 5개를 만들고, 각 줄을 3·4·2·2·3칸으로 나눈다. 완성본은 열 제목을 제외한 데이터 3행·3열을 유지한다. 실행 결과 파일에서 셀 배열을 비교할 수 있다.

수정을 요청할 때도 “CSV 오류를 고쳐 줘”에서 멈추지 말고 깨지는 셀을 지정한다. 쉼표, 줄바꿈, 따옴표가 포함된 셀을 보존하고, 저장한 CSV를 다시 읽었을 때 셀 값이 같아야 한다는 조건을 붙인다. 화면의 행 수만 맞아도 셀 내용은 이미 잘렸을 수 있다.

실제로 고친 문제: 새 파일에 이전 설정이 남았다

제작 중 브라우저 검사에서 발견한 문제는 따로 있다. 한 파일에서 ‘나중에 나온 행’을 선택한 뒤 다른 파일을 읽어도 그 설정이 남았다. 새 데이터의 기준 열은 다시 선택되는데 보존 순서는 이전 값을 쓰는 상태였다.

새 파일 내용을 읽을 때 먼저 나온 행 유지, 공백 구별, 대소문자 구별로 되돌리도록 고쳤다. 이 동작을 확인하는 검사도 추가했다. 단순히 테스트 숫자를 늘린 것이 아니라, 데이터가 바뀌었을 때 낡은 판단 조건이 따라오지 않는지 확인한 것이다.

비슷한 이유로 입력이나 기준 열을 바꾸면 이전 결과를 숨긴다. 중복 후보를 수동으로 살려도 ‘기준 열과 제외 목록을 확인했어요’ 체크를 해제한다. 검토 전과 다른 결과를 그대로 저장하지 않도록 한 장치다. 이런 오류를 AI에게 설명하는 순서는 바이브코딩 오류 해결 실습에서도 연습할 수 있다.

파일을 저장하기 전에 확인할 세 가지

첫째, 이 앱이 보존하는 것은 셀 값이다. 정리본 CSV는 UTF-8 BOM과 쉼표 구분으로 새로 만든다. 원본의 구분 문자, 따옴표 모양, 빈 행까지 그대로 복제하지는 않는다. 00123을 숫자로 바꾸지는 않지만 엑셀에서 파일을 열 때 숫자로 해석하면 앞자리 0이 사라질 수 있다. 가져오기에서 해당 열을 텍스트로 지정한다. Microsoft 앞자리 0 안내

둘째, 수식처럼 읽힐 수 있는 셀이 있으면 CSV 저장을 멈춘다. =, +, -, @ 등으로 시작하는 값은 스프레드시트에서 수식으로 해석될 수 있다. 단순 인용만으로 모든 프로그램에서 안전해지지는 않는다. OWASP CSV Injection 설명

이번 앱은 값을 몰래 바꾸지 않는 쪽을 선택했다. 음수나 +로 시작하는 전화번호도 검사에 걸릴 수 있다. 원문을 확인하거나 문자열을 보존하는 JSON으로 보관한다. 이 기능을 모든 CSV의 안전성을 보증하는 검사로 받아들이면 안 된다.

셋째, 검토 기록과 정리본은 다르다. 정리본에는 남긴 데이터가 들어간다. 검토 기록 JSON에는 선택한 열과 옵션, 제외한 원본 행 번호, 수동으로 살린 행 번호가 들어간다. 나중에 결과가 달라진 이유를 확인할 때 사용할 수 있다.

파일 내용은 브라우저 메모리에서 읽고 처리한다. 외부 API와 분석 스크립트를 쓰지 않으며 입력값을 브라우저 저장소에 기록하지 않는다. 공개 페이지를 여는 일반 웹 요청은 서버 로그에 남을 수 있다. 인터넷 없이 써 보려면 ZIP을 풀고 같은 폴더의 index.html을 연다.

코드를 바꾼 뒤 무엇을 검사하나요?

ZIP 안의 verify.cjs에는 처리 규칙 37개 검사가 들어 있다. Node.js가 설치된 환경이라면 압축을 푼 폴더에서 실행할 수 있다. 앱을 쓰는 데 Node.js 설치가 필요한 것은 아니다.

node verify.cjs
node learning/naive.cjs

입력·행동	기대 결과
가상 주문, 주문번호 기준	4·5행 제외, 다른 주문과 빈 기준값 보존
쉼표·따옴표·줄바꿈이 있는 셀	CSV로 저장하고 다시 읽어도 값 동일
닫히지 않은 따옴표·열 수 불일치	읽기 중단과 오류 안내
기준 열 또는 입력 변경	이전 결과·검토 완료 상태 무효화
제외 후보 수동 유지	남는 행 증가, 저장 전 재검토
10,000행 입력	전체 결과 처리, 비교 화면은 20행씩 이동
수식처럼 보이는 셀	CSV 내보내기 중단, JSON 문자열 보존

이 프로젝트에서는 Node 처리 검사 37개와 Orca 브라우저 통합 검사 32개를 통과했다. 별도로 실제 가상 CSV 파일 선택을 확인했고, 폭 390px·1280px에서 시작·예제·비교표 펼침 상태의 페이지 가로 넘침을 DOM 수치로 검사했다.

브라우저의 CSV·JSON 저장은 생성한 파일 데이터인 Blob을 다시 읽어 검증했다. 다운로드 폴더에 저장이 끝났는지, 엑셀에서 의도대로 보이는지까지 확인한 결과는 아니다. 2026년 9월 7일 Orca에서 폭 390px·1280px의 본문·표·이미지와 도구의 시작·결과·행 비교 화면을 직접 확인했다. 제작·검증 기록 PDF에 범위를 구분해 두었다.

자기 업무로 바꿀 때도 기준부터 바꾸세요

출석 명단이라면 이메일 하나만으로 합치면 다른 날짜의 참석 기록을 지울 수 있다. ‘이메일 + 행사 날짜’를 함께 비교해야 하는지 먼저 결정한다. 상품 목록이라면 같은 상품명이라도 색상이나 옵션이 다를 수 있다. 기존 열을 그대로 둔 채 버튼 이름만 바꾸는 것으로는 업무용 앱이 되지 않는다.

가상 파일 몇 행과 남아야 할 행 번호를 먼저 적고, 한 가지 규칙만 바꿔 본다. 기존 37개 검사와 새 가상 입력을 함께 확인하면, 추가한 기능 때문에 원래 기능이 달라졌는지도 알 수 있다. 이번 앱은 .xlsx 직접 편집, 여러 파일 합치기, 이름 유사도 추정, 서버 저장은 지원하지 않는다.

혼자 실행할 수 있는 정적 앱까지 확인했다면 웹에 배포하는 순서로 이어갈 수 있다. 아직 시작할 위치가 헷갈린다면 바이브코딩 시작 가이드에서 첫 앱, 오류 해결, 업무 실습 중 자기 상황에 맞는 단계를 고른다.

검증 기준

• 마지막 확인: 2026-09-07
• 확인 환경: macOS, Node.js v22.22.0, Orca의 Chrome 150 계열 브라우저. 로컬 파일·로컬 HTTP 실행을 검사했으며 실제 모바일 기기와 다른 브라우저, 엑셀 표시, 처음 접하는 독자의 완주는 별도 확인 대상이다.
• 주요 근거: 사용 안내 PDF · 제작·검증 기록 PDF · CSV 인용 규칙 · CSV 수식 해석 주의점