소개
매월 조직 인사 데이터를 정리하여 리포트로 만드는 작업을 자동화하고 싶었어요. 코딩은 전혀 모르지만, 최근에 알게 된 바이브 코딩 개념과 클로드 코드 기능이 궁금해서 무작정 도전해보았습니다.
설치한 도구는 VS Code와 클로드 코드 환경 정도였고, 진행하면서 모르는 부분은 Gemini를 활용해 질문하며 하나씩 해결해 나갔습니다. 😊
진행 방법
사용한 도구
Claude Code (클로드 코드 실행 환경)
VS Code (코딩 편집기)
Gemini (질문/도움 받기용)
CSV 인사 데이터
주요 프롬프트 (Claude에게 전달한 메시지 예시)
연습파일에 인원명부.csv 파일이 있어. 이 파일 안의 데이터를 분석하여 인사이트 얻을 수 있도록 HR Report를 예쁘게 보여주는 대시보드를 만들고 싶어.
전체적으로 네이비 색은 사무직, 초록색은 판매직 / 파란색은 남자, 빨간색은 여자 / 나머지는 회색으로 표현해줘.
표기는 모두 영어로 해줘.
CSV 파일을 업데이트할 때마다 대시보드 내용도 자동으로 반영되었으면 해. 분석 항목은 아래와 같아:
1. 본부별 인원현황 (영어구분 + Function 기준)
2. 팀별 인원현황 (Function 기준, 사무직만)
3. 사원구분 현황 (Regular / Contractor / 3rd Party)
4. 성비 분석 (정규직 기준 원형그래프)
5. 근속연수별 현 황 (3구간 막대그래프, 직종별 구분)
6. 평균 근속연수 (숫자 + '년')
7. 연령대 분포 (20~50대, 만나이 기준)
8. 직위별 인원수 (사무직 대상)
9. 직책별 인원수 (사무직 대상)
10. Title 기준 인원수 (ENGLISH_TITLE_NM 기준)
11. 계약직/파견직 사무직 인원 Function별 막대그래프
나는 바이브 코딩 초보자이니 초등학생에게 설명하듯 알려줘. 설정값이나 결정할 사항이 있다면 질문해줘.
웹페이지 형태로 보고 싶고, .md 파일로 정리할 지식창고도 구성하고 싶어.
지식 창고 구조 만들기
Gemini의 도움으로 아래와 같은 폴더 구조를 만들었습니다:
01_concepts/: MCP, Agent 같은 용어를 초등학생도 이해할 수 있게 정리02_projects/: 내가 만든 실습 파일 저장03_logs/: 날짜별 학습 기록.md파일
폴더 생성 및 문서 작성 요약
vibe-coding이라는 이름의 폴더 생성 → VS Code에서 열기터미널 열고
mkdir명령으로 서브 폴더 3개 생성.md문서들 생성:vibe-coding-terms.md(용어집)data-dictionary.md(CSV 구조 설명)2026-01-28-study-log.md(학습 일지)
구현 단계 요약 (.md 문서 계획)
## 7. Implementation Steps
### Step 1: Create folder structure (01_Concepts, 02_projects, 03_logs)
### Step 2: Create documentation files (.md files)
### Step 3: Create hr-dashboard.html with basic structure
### Step 4: Add CSS styling (grid layout, colors, cards)
### Step 5: Implement CSV parsing with PapaParse
### Step 6: Create data processing functions
### Step 7: Implement charts 1-3
### Step 8: Implement charts 4-6
### Step 9: Implement charts 7-9
### Step 10: Implement charts 10-11
### Step 11: Test and refine
확인 계획
파일 더블클릭 → MS Edge에서 열림
CSV 업로드 → 차트 자동 생성
몇 개 항목 수작업 확인 → 정확성 체크
색상 규칙 일치 확인
CSV 변경 후 리로드 → 자동 반영 확인
생성된 파일 요약
File
Purpose
01_Concepts/vibe-coding-terms.md
바이브 코딩 용어집
01_Concepts/data-dictionary.md
CSV 컬럼 정의
02_projects/hr-dashboard.html
대시보드 HTML 코드
03_logs/2026-01-28-study-log.md
학습 일지
프롬프트는 길고 자세히 작성하였습니다.
연습파일에 인원명부.csv 파일이 있어. 이 파일 안의 데이터를 분석하여 인사이트 얻을 수 있도록 HR Report를 예쁘게 보여주는 대시보드를 만들고 싶어. 전체적으로 네이비 색은 사무직을 표시하는 색으로 표현하고 초록색은 판매직을 표시하는 색으로 표현해줘. 남자를 의미하는 색은 파란색, 여자는 빨간색상을 사용 해줘. 나머지 그래프나 표시선은 회색을 사용해줘. 모든 표기는 영어로 해줘. 향후 내가 CSV 파일을 계속 날짜별로 업데이트 할 거고 대쉬보드 내용이 이 업데이트 되는 파일 기준으로 계속 데이터 값이 변동되었으면 좋겠어. 연습파일.csv파일의 내용을 읽어보고 1. 본부별 인원현황 알려줘. 다만 표기시 영어구분 열과 Function 열을 참고해서 이 두 행에 있는 단어들로 나란히 표기해줘. 2. 각 팀별 인원현황 알려줘. 팀명으로 표기 대신 Function 열을 참고해서 해당 열의 단어로 표기해줘. 인원현황은 사무직 기준으로 막대그래프 표시 해주고 판매직은 표기하지마. 3. 사원구분 현황은 사무직 판매직 모두 보여줘. 다만 임원+정규직=Regular Employee 로 표기, 계약직=Contractor로 표기, 파견직은=3rd Party로 표기. 4번부터는 임원+정규직 데이터만 가지고 작업해줘. 4. 직종 정보를 활용해서 사무직과 판매직의 성비를 알려줘. 이때 정규직 인원의 현황만 성비로 보여주고 원형 그래프로 표시해줘. 남자는 Male, 여자는 Female이라고 해줘. 5. 근속연수별 인원현황 보고 싶은데 0~5년까지, 6~10년까지, 11년~15년까지 3개의 막대그래프로 표기해줘. 사무직과 판매직을 구분해서 보여줘 6. 평균 근속연수를 알고싶어 사무직과 판매직의 평균 근속연수를 구해서 소수점까지 “년”을 붙여서 숫자로 표기해줘. 7. 연령대 분포를 알고싶어. 적절한 그래프를 활용해서 사무직과 판매직의 연령대를 표시해. 연령대는 20대, 30대, 40대, 50대로 구분하고 만나이를 활용해줘. 8. 직위는 사무직 인원만 대상으로 사원~사장 순으로으로 몇 명 있는지 막대그래프로 알려줘. 9. 직책은 사무직 인원만 대상으로 팀원~대표이사 순으로 몇 명 있는지 보여줘. 10. ENGLISH_TITLE_NM 열을 활용해서 각 해당되는 Title의 인원수를 사무직 인원만 대상으로 해서 보여줘. 11. 사원구분 중 계약직, 파견직의 사무직 인원만 추려서 영어구분과 Function열의 단어를 활용하여 각 Function별로 몇 명 있는지 확인 할 수 있도록 막대그래프로 보여줘. 단, 나는 바이브 코딩 입문자이기 때문에 초보자임을 감안해서 초등학생 5학년에게 설명하듯이 말해주고 혹시 내가 결정해야 할 사항이 있거나 해줘야 할 설정값이 있다면 알려주면서 각 단계를 진행해줘. MS Edge에서 열리는 웹페이지 형태로 만들고 싶어. 내가 모르는 내용이 있을 수도 있으니 내 확인이 필요한 사항이 있다면 역질문해주면서 진행해. 나중에 이 내용을 찾기 쉽도록 폴더 안에 01_Concepts/: MCP,Agent 같은 바이브 코딩 시 나오는 용어정리 문서-각 용어 옆에는 초등학생도 이해할 수 있도록 비유를 한줄씩 넣어. 02_projects/: 내가 직접 만든 코드나 실습 파일들 03_logs/: 날짜별 공부일기도 같이 정리해줘. 모든 것은 .md 파일로 해줘. 나중에 검토해야 되니까.
작업중인 클로드 코드
중간중간 저에게 질문하는 내용을 대답하며 넘어갔습니다.
작업 중인 모습
결과 (가상의 데이터)
결과와 배운 점
코딩을 몰라도 Claude의 코드 기능과 Gemini의 도움으로 11개의 HR 리포트 차트를 성공적으로 구현했습니다.
프롬프트를 구체적으로 짜면 AI가 HTML 코드, CSS, JavaScript까지 완성도 있게 생성해줘서 놀라웠습니다.
.md문서 정리와 폴더 구조로 학습 흐름도 잘 정리되었습니다 📂
앞으로 해결하고 싶은 것들
📌 다른 포맷의 CSV (입퇴사자/휴복직자)도 대시보드에 연결하고 싶어요.
📌 스크롤 없이 메뉴 버튼 형태로 이동할 수 있는 UI 구성하고 싶어요.
📌 실제 조직 데이터 활용 시 보안 처리 방식 (익명화, 로컬 처리 등) 궁금합니다.
추가 궁금했던 점
VS Code 터미널 로그를
.md파일로 자동 저장하거나 정리하는 좋은 방법?VS Code 기초 사용법을 초보자 시선에서 단계별로 알려주는 자료 추천?
위 작업에서 어떤 로직으로 결과물이 나왔는지 전체 흐름을 설명받고 싶어요
앞으로 파일을 쌓아가며 아카이빙할 때 개발자들이 사용하는 팁은?
도움 받은 글
Gemini: VS Code 사용법, 터미널 활용, Markdown 정리 방법
Claude: 복잡한 조건과 시각화를 포함한 HTML + JS 코드 생성
🙌 이 사례가 AI와 함께 하는 리포트 자동화에 도전하고 싶은 분들께 도움이 되었길 바랍니다.
