설문 CSV 요약 도구 만들기, 엑셀에서 세지 말고 파일 한 장으로 비율 보기
설문 CSV에서 응답 수와 선택지별 비율만 빨리 보고 싶다면, 브라우저에서 열리는 단일 HTML 파일로 충분합니다. CSV를 고르고 질문 열 하나를 선택하면 각 답변의 개수와 비율을 바로 그리게 만들면 됩니다. 서버에 올리지 않고 내 컴퓨터 브라우저에서 처리하는 MVP라서, 공유 전 원본을 잠깐 확인하는 용도에도 맞습니다.
30초 요약
- CSV는 쉼표로 구분된 표 파일입니다. 이 글에서는 첫 줄이 열 이름인 단순 CSV를 씁니다.
- AI에게 한 번에 완성 코드를 맡기기보다, 첫 프롬프트와 수정 프롬프트를 나눠 주면 결과를 확인하기 쉽습니다.
- 완성본은
survey-summary.html로 저장해 더블클릭하면 됩니다.- 인용부호 안 쉼표나 여러 줄 답변이 많은 CSV는 이 간단한 버전의 범위를 벗어납니다.
이걸 만들면 무엇이 달라질까요?
예를 들어 만족도 열에 매우 만족, 만족, 보통, 만족이 들어 있다면, 매번 필터를 바꿔 세는 대신 화면에서 응답 4개, 만족 2개(50.0%)처럼 한 번에 확인합니다. 숫자를 베끼는 일이 줄어드는 것이 이 도구의 역할이지, 설문 결과를 해석하거나 대표성까지 판단해 주는 도구는 아닙니다.
업무 전에는 CSV를 열고 필터·피벗 테이블을 만지며 질문마다 다시 집계합니다. 업무 후에는 파일을 고르고 열을 선택해 요약을 보고, 필요한 판단만 엑셀이나 보고서에 옮깁니다. 첫 MVP는 ‘한 질문 열의 빈도와 비율’까지만 잡는 편이 오류를 찾기 좋습니다.
예시 데이터 · 만족도 요약 화면
| 선택지 | 개수 | 비율 |
|---|---|---|
| 만족 | 2 | 50.0% |
| 매우 만족 | 1 | 25.0% |
| 보통 | 1 | 25.0% |
예시 데이터이며, 파일 업로드 버튼은 작동하지 않는 정적 화면입니다.
바이브코딩에서 먼저 건넬 프롬프트
바이브코딩은 원하는 화면과 규칙을 말로 설명해 코드를 만드는 방식입니다. 여기서는 AI가 코드를 만들고, 나는 파일을 저장해 브라우저에서 결과를 읽는 역할을 나눕니다.
아래 문장을 코딩 AI에 그대로 붙여 넣으세요. 외부 라이브러리 없이 HTML·CSS·JavaScript 한 파일로 제한한 이유는, 초보자가 파일을 옮기거나 설치할 단계를 줄이기 위해서입니다.
단일 파일 survey-summary.html을 만들어줘.
사용자가 .csv 파일을 선택하면 브라우저 안에서 읽고, 첫 행을 헤더로 사용해 열 선택 목록을 보여줘.
선택한 열의 빈 값은 제외하고, 선택지별 개수와 전체 유효 응답 대비 비율(소수점 첫째 자리)을 내림차순 표와 막대그래프로 보여줘.
쉼표로 나뉜 단순 CSV만 지원한다고 화면에 표시해줘.
파일을 서버로 전송하지 말고, 외부 라이브러리·프레임워크·API 없이 HTML, CSS, JavaScript만 사용해줘.
파일을 고르기 전, 헤더가 없을 때, 유효 응답이 없을 때의 안내 문구도 넣어줘.
성공 화면은 파일 선택 영역, 열 선택 목록, 응답 수 카드, 선택지 표와 막대가 순서대로 보이는 모습입니다. 파일 선택 뒤 결과 표가 보이는지로 첫 성공을 판단하면 됩니다. 여기서 ‘서버 전송하지 않기’는 코드가 네트워크 요청을 만들지 않도록 요구한 범위의 설명이며, 회사 보안 정책이나 브라우저 확장 프로그램까지 대신 점검하지는 않습니다.
단일 HTML 안에서는 어떤 일이 일어나나요?
<input type="file">은 사용자가 파일을 고르는 HTML 입력 요소입니다. accept=".csv,text/csv"는 선택 창에서 CSV를 우선 보이게 하는 힌트일 뿐이므로, 파일 확장자만 믿지 말고 열 이름과 결과 표를 함께 확인해야 합니다.
선택한 파일의 텍스트는 FileReader.readAsText()로 읽습니다. 그다음 줄을 나누고 첫 줄을 헤더로 삼아, 고른 열의 값만 모은 뒤 같은 값의 개수를 누적합니다. reduce()는 배열을 순서대로 돌면서 하나의 누적값을 만드는 메서드라 이 집계에 알맞습니다.
작동 흐름을 짧게 쓰면 아래와 같습니다.
설문.csv 선택
→ 파일 내용을 텍스트로 읽기
→ 첫 줄에서 열 이름 표시
→ ‘만족도’ 선택
→ 빈 칸 제외 후 선택지별 개수 세기
→ 개수 ÷ 유효 응답 수 × 100을 표와 막대로 표시
아래 코드는 AI가 만든 결과에서 확인할 핵심 부분입니다. columnIndex가 선택한 질문의 위치이고, valid에는 비어 있지 않은 답만 남습니다.
const valid = rows
.map(row => row[columnIndex]?.trim())
.filter(Boolean);
const counts = valid.reduce((acc, answer) => {
acc[answer] = (acc[answer] || 0) + 1;
return acc;
}, {});
const total = valid.length;
const percentage = (count) => (count / total * 100).toFixed(1);
total이 0일 때는 나누기를 하지 말고 “유효 응답이 없습니다”를 보여야 합니다. 빈 응답을 제외한다는 기준을 화면에 적는 것도 중요합니다. 비율의 분모가 전체 행인지 유효 응답인지 모르면 숫자가 맞아도 보고서에서 오해가 생길 수 있습니다.
파일을 열어 보고, 원하는 결과가 아니면 이렇게 고칩니다
AI가 준 코드를 메모장이나 코드 편집기에 붙여 넣고 파일명을 survey-summary.html로 저장합니다. 확장자가 .html인지 확인한 뒤 파일을 더블클릭하면 기본 브라우저가 열립니다.
테스트용 CSV는 아래처럼 만드세요. 첫 줄은 질문 이름이고, 이 예시는 만족도 열을 고르면 응답 수 4와 세 가지 선택지를 보여야 합니다.
이름,만족도,재참여의사
가,만족,예
나,매우 만족,예
다,보통,아니오
라,만족,예
기대와 다른 결과가 보이면 코드를 처음부터 다시 달라고 하지 말고, 화면에서 본 사실을 붙여 수정 요청을 합니다. ‘무엇을 넣었고 무엇이 나왔는지’를 같이 말하면 AI도 추측할 부분이 줄어듭니다.
현재 survey-summary.html에서 ‘만족도’를 선택했는데 빈 칸도 응답 수에 포함됩니다.
빈 칸과 공백만 있는 값은 제외하고, 화면에 ‘유효 응답 n개 기준’이라고 표시하도록 기존 코드만 수정해줘.
다른 기능과 디자인은 바꾸지 마.
흔한 오류는 데이터 규칙부터 확인하세요
‘열 선택 목록이 비어 있다’면 CSV 첫 줄에 헤더가 있는지, 그리고 저장할 때 쉼표 구분 CSV로 내보냈는지 먼저 봅니다. 엑셀 화면에서 열이 나뉘어 보여도 파일 안의 구분자가 세미콜론이나 탭이면 단순 쉼표 분리 코드는 맞게 읽지 못합니다.
선택지에 "매우, 만족"처럼 쉼표가 들어가거나 한 셀이 여러 줄로 이어지는 CSV도 간단한 split(',') 방식에서는 열 위치가 밀릴 수 있습니다. 이 경우에는 데이터를 단순 CSV로 다시 내보내거나 검증된 CSV 파서를 쓰는 단계로 넘어가야 합니다.
개인정보가 담긴 설문이라면 이름·전화번호·이메일 열을 요약 대상으로 고르지 말고, 필요한 열만 가진 복사본을 만드세요. 이 도구는 응답을 ‘익명화’하지 않으며, 브라우저 안 처리라는 설명만으로 조직의 보관·공유 규칙이 사라지지 않습니다.
이 방식이 잘 맞는 경우와 아닌 경우
한 번에 한 질문의 분포를 빠르게 확인하려는 경우에 잘 맞습니다. 수십 개 질문의 교차 분석, 가중치 적용, 실시간 공동 편집이 필요하다면 스프레드시트 피벗 테이블이나 설문 분석 서비스가 더 적합합니다.
단일 HTML은 설치가 없고 전달하기 쉬운 대신, 기능을 늘릴수록 CSV 규칙과 예외 처리가 복잡해집니다. 두 번째 버전에서 필요한 기능이 생겼을 때만 복수 열 비교·상위 N개 표시·결과 CSV 다운로드를 추가하세요. 먼저 실제 설문 파일 하나로 입력과 결과를 대조한 뒤 기능을 늘리기가 안전합니다.
작업 환경을 함께 정리한다면
CSV 파일을 내려받고 HTML 파일을 열어 보는 일을 한 화면에서 하려면, 노트북 옆에 두는 외장 모니터가 화면 전환을 줄이는 보조 수단이 될 수 있습니다. 이 글의 집계 기능을 대신하는 제품은 아닙니다.
설문 원본과 결과 파일을 구분해 보관하려면 USB-C 외장 SSD를 별도 작업 사본용으로 둘 수 있습니다. 제품의 정확한 용량·호환 규격은 카드에서 확인해야 합니다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
출처
- MDN,
<input>HTML input element — file 입력과accept속성 확인, 2026-09-25. - MDN, FileReader.result — 파일 읽기 완료 후 결과 접근 방식 확인, 2026-09-25.
- MDN, Array.prototype.reduce() — 배열 누적 집계 원리 확인, 2026-09-25.
핵심 정리: 다섯 가지 질문과 답
Q. CSV 요약 도구의 첫 기능은 어디까지면 되나요?
한 질문 열의 유효 응답 수, 선택지별 개수와 비율이면 첫 MVP로 충분합니다.
Q. 왜 단일 HTML 파일로 시작하나요?
설치 없이 저장 후 브라우저에서 열어 입력과 결과를 바로 대조할 수 있기 때문입니다.
Q. 비율의 분모는 무엇으로 표시해야 하나요?
빈 값을 제외했다면 ‘유효 응답 수 기준’이라고 화면에 명시합니다.
Q. 단순 CSV가 깨지는 경우는 언제인가요?
셀 안에 쉼표·줄바꿈이 있거나 구분자가 쉼표가 아닐 때입니다.
Q. 개인정보가 있는 CSV도 그대로 써도 되나요?
필요한 열만 남긴 사본으로 확인하고, 조직의 보관·공유 규칙을 별도로 지켜야 합니다.
댓글