엑셀(CSV) HR 데이터를 끌어다 놓으면 한눈에 보이는 대시보드를 만들어 봅니다.
도구는 VS Code + 로컬 Git, 예상 30~40분. 환경 세팅부터 STEP 순서대로 따라오세요.
당신은 HR 담당자입니다. 매달 부서별 인력 현황을 엑셀로 받지만, 행이 수십~수백 줄이라 한눈에 파악하기 어렵습니다. "부서별 인원은? 직급 분포는? 평균 근속연수는? 퇴사율은?" 같은 질문에 매번 수식을 다시 짜야 하죠.
그래서 엑셀 데이터를 끌어다 놓기만 하면 핵심 지표와 차트가 자동으로 그려지는 나만의 대시보드를 바이브코딩으로 만들려고 합니다.
아래는 완성 이미지(목업)예요. 실제 데이터에 따라 숫자·그래프가 채워집니다.
↑ KPI 카드 · 부서별 인원(막대) · 직급 분포(도넛) · (아래엔 표 + 필터 + 내보내기 버튼)
사내 환경을 가정한 실습이라 보안 규칙이 핵심이에요.
정답 프롬프트를 외우는 게 아니라, 스스로 설계하는 법을 익혀요. 그래야 어떤 작업이든 응용할 수 있어요.
지금 뭘 만드는 중인지, 기술 스택(단일 HTML·CDN 등)을 먼저 알려줘요.
무엇을, 어떤 결과가 보이면 성공인지 구체적으로.
지켜야 할 규칙(업로드 금지, npm 대신 CDN 등)을 명시.
바로 시키지 말고, 구현 계획부터 세우게 한 뒤 검토하세요.
한 번에 다 시키지 말고, 한 단계씩. 되면 다음으로.
안 되면 "안 돼"가 아니라 에러 메시지 + 원하는 동작을 그대로.
"되는 것 같다" 금지. 기대 결과를 먼저 정하고 직접 확인(그레이존 금지).
원하는 출력 형태·예시를 주면 훨씬 정확해져요.
작업 폴더를 만들고 첫 세이브 포인트를 찍어요.
바로 코드부터 시키지 말고, 무엇을 어떤 순서로 만들지 AI에게 계획을 먼저 받아 검토해요.
큰 그림에서 벗어나지 않도록, 코드 전에 단계별 계획을 받아 검토합니다.
샘플 CSV를 받아 작업 폴더에 넣고, AI에는 '스키마'만 복사해 둡니다.
컬럼 구조 (이것만 AI에 알려주세요):
CSV 파일을 화면에 끌어다 놓으면 표로 그려지게 만듭니다.
git commit -m "feat: CSV 표 렌더링"표 위에 한눈에 보이는 요약 카드를 추가합니다.
git commit -m "feat: KPI 카드"검증된 차트 라이브러리를 CDN으로 불러와 그립니다.
git commit -m "feat: 차트 추가"원하는 조건만 보고, 화면 전체가 함께 바뀌게 합니다.
git commit -m "feat: 필터"완성 화면을 저장·공유할 수 있게 정리합니다.
git commit -m "feat: 내보내기 + 단일 HTML 정리"기능이 늘수록 모든 코드를 index.html 하나에 넣으면 맥락 잡기 어렵고 스파게티 코드가 돼요. 역할별로 파일을 나누고(모듈화), 사내 반입 땐 빌드한 결과물(dist)만 가져갑니다.
git commit -m "build: 반입용 dist 생성"