바이브 코딩으로 대시보드 만들어서 배포해보자!

소개

HRD 담당자들은 교육 수료율, 진단 참여율 등 현황을 확인하거나 보고할 일이 잦습니다.

이번 오프라인 스터디에서는 HRD 담당자로서 산업안전보건교육 이수율 보고가 매주 반복되는 업무라는 전제로 Antigravity와 함께 바이브 코딩으로 대시보드를 만들고 배포해봤어요.

20기 설명회 할 때 스터디장님이 보여주신 대시보드가 예쁘고 유용해 보여서
저도 해보고 싶었는데 기회가 생겨서 정말 보람있는 시간이었어요!
(단계별로 따라갈 수 있는, 떠먹여주는 스터디.. 최고....)

Antigravity: .md 기반으로 개발의 흐름을 이끌어주는 도구
ChatGPT: PRD.md 파일을 대화로 만들어줌
-> 부스터 ai 가 prd 파일을 작성하는데 특화되어 있다는 스터디원의 도움이 있었음
https://www.vooster.ai/ko
Streamlit: 결과물을 실제 서비스로 배포
-> Vercel로 배포하려 했지만 Antigravity가 시키는대로 Streamlit으로 배포해봄
엑셀 RAW DATA: LMS에서 매주 다운로드할 수 있는 이수 현황 자료

PRD.md 작성부터 시작!
바이브 코딩에서는 사람이 기획자 역할,
즉 Product Requirement Document(PRD)를 작성하는 게 핵심이에요.
이 과정도 AI와 함께 할 수 있어서 엄청 의지가 됐어요.
Antigravity와의 대화를 통해 "대시보드에 어떤 기능이 필요할지"를 구체화해 나갔고,
스터디장님이 공유해주신 이미지와 샘플 엑셀 파일이 큰 도움이 되었어요.
실제 데이터와 샘플 이미지를 기반으로 원하는 사항을 설명하니,
AI가 훨씬 정확하게 기능을 설계해주는 느낌이 들었습니다.
- 전체 이수율 요약
- 팀별 이수율 시각화
- 미이수자 리스트 출력
- 파란색 계열 디자인 🎨
자동 분석 구조 구현
엑셀 업로드 → 자동 분석 → 실시간 시각화까지 연결되도록 설계했습니다.
이건 그냥 Antigravity가 시키는 대로 했어요.
오히려 처음에 프로그램을 설치하고, 초반에 별도의 폴더를 생성해서 프로젝트를 시작하는게 낯설었어요.
배포까지 한 큐에!
완성된 대시보드를 github에 프로젝트로 업로드하고, Streamlit으로 배포해보았어요.
덕분에 깃허브에 프로젝트도 처음 만들어봤네요!