인사 대시보드 구축의 필요성
시도하고자 했던 것과 그 이유를 알려주세요.
아무것도 없는 상태에서 AI(Gemini, CODEX)와 페어 프로그래밍을 진행하여, 파편화되어 있던 인사 데이터를 하나의 대시보드로 통합하고 보안 권한 체계 및 PDF/Excel 출력 기능까지 갖춘 '회사 통합 인사 대시보드 시스템'을 0부터 직접 설계 및 완전 구축.
이유
파일 파편화 및 관리 공수 증가: 기존에는 인사기록카드, 조직도, 부서별 인원 통계 등이 Excel과 구글 스프레드시트에 흩어져 있었음. 특히 전체 관리자, 경영관리실, 특정 리더 등 접근 권한별로 폴더와 파일을 다르게 나누어 관리하다 보니 관리해야 할 파일 수가 너무 많았음.
시각적 직관성 부족 및 즉흥적 자료 요청 대응: 데이터가 한눈에 들어오지 않았고, 경영진이나 외부에서 '부서별 인원 비중'이나 '근속연수 분포' 같은 자료 요청이 올 때마다 매번 수기로 데이터를 가공하고 장표를 새로 만들어야 하는 번거로움이 컸음.
통합 대시보드 및 PDF 출력 니즈: 경영진의 시각화 니즈에 맞춰 이 모든 인사 정보를 한곳에서 보기 쉽게 통합하고, 특정 인원의 인사기록카드 요청 시 개별 PDF로 바로 다운로드할 수 있는 체계가 필요했음.
프로젝트 진행 방향: 아무것도 없는 제로 베이스에서 대시보드 전체 기능과 보안 체계를 완전히 구축 완료한 뒤, 마감 단계에서 프론트엔드 동료에게 UI/UX 레퍼런스 피드백을 받아 완성도를 최종 끌어올림.
인사 대시보드 구축 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Gemini (제미나이): 비개발자 관점에서 전체 아키텍처 및 구현 로직 상담, CODEX에 던질 토큰 절약형 정밀 프롬프트 구조화 및 동료 피드백 해석 가이드 설계.
CODEX / Claude Code: 인사 대시보드 프론트엔드/백엔드 전체 코드 생성, 데이터 시각화 차트 구현, 권한별 보안 필터링, PDF 출력 및 반응형 UI 구축.
Playwright (Visual Review Tool): AI가 직접 브라우저 스냅샷(캡처)을 찍어 눈으로 확인하면서 폰트, 여백, 모바일 표/카드 전환 등 시각적 완성도를 90점 이상으로 끌어올리는 피드백 루프(Visual Feedback Loop) 수행.
Vercel & PowerShell: 로컬 환경에서 완성된 인사 대시보드 라이브 서버 배포 및 운영.
[1차 요청: 제로 베이스에서 인사 대시보드 전체 시스템 직접 구축]
"회사 인사 정보를 한눈에 관리할 수 있는 통합 인사 대시보드를 0부터 구축하고 싶어. 메인 화면에 입사자/퇴사자/재직자 현황, 직원 검색 및 프로필 카드, 조직도 대시보드, 부서별 인원 비중, 근속연수 분포 메뉴를 만들어 줘. 추가로 특정 인원의 인사기록카드를 즉시 PDF로 출력하는 기능과 로그인 사용자 권한(기본/인사/연봉/기밀)에 따라 데이터 접근 및 엑셀 다운로드 컬럼을 동적으로 제어하는 보안 로직까지 포함해 통째로 코드를 짜줘."
[2차 요청: 완성된 대시보드에 프론트엔드 동료 피드백 및 UI/UX 레퍼런스 적용]
"1차로 완전하게 완성해 둔 인사 대시보드의 UI/UX 마감 개편을 진행하려 해. 프론트엔드 동료가 공유해 준 컴포넌트 레퍼런스를 바탕으로 디자인을 고도화하자. CODEX 내 MCP(Context7, EXA)를 활용해 최신 웹 UI 트렌드와 디자인 가이드라인을 참조해 줘. 여백, 타이포그래피, 시각적 계층 구조를 보완하여 스스로 기준 점수를 세우고 90점 이상이 될 때까지 리팩토링을 수행해 줘."
[3차 요청: 시각적 피드백 루프(Playwright) 및 모바일/PC 디테일 정밀 수정]
"CODEX야, 코드로만 고치지 말고 Playwright나 브라우저 도구를 써서 실 제 화면을 스냅샷으로 찍고 확인하면서 미세 조정을 진행해 줘.
'퇴사자 조회' 메뉴는 모바일 화면(375px)에서 표 대신 직원별 카드(Card) 목록 형태로 자동 전환
모바일 카드 내 이름 줄바꿈, 닉네임 잘림, 부서 배지 레이아웃 겹침 문제 완전 해결
PC 전용 화면의 경우 우측 상단 붕 떠 있는 로그아웃 버튼을 사이드바 프로필 영역으로 자연스럽게 통합하고, 조직도 대시보드의 팀명/리더 글자 크기와 대비를 키워 한눈에 보이도록 다듬을 것."
성과와 배운 점
인사 대시보드 프로젝트의 교훈
0부터 시스템을 완성해 내는 커맨더(Commander)로서의 경험: 아무것도 없는 상태에서 대시보드의 메뉴 구조, 데이터 흐름, 권한 보안 체계, PDF 다운로드 기능까지 AI를 주도적으로 리드하여 실제 동작하는 완벽한 웹 시스템으로 구현해 냈음.
AI와 함께하는 시각적 피드백(Visual Feedback Loop)의 힘: 코드 기반 수정에 그치지 않고, Playwright를 이용해 AI가 직접 캡처본을 검수하며 스스로 채점하고 고치도록 지시함으로써 대시보드의 디자인 완성도를 비약적으로 상승시킬 수 있었음.
명확하고 구체적인 AI 컨트롤(Prompting): 추상적인 수정 요청보다는 "퍼센트(%) 위치를 오른쪽 끝으로 이동", "CEO/COO/고문 역할별 카드 배경색 구분"처럼 구체적인 UI/UX 요구사항을 구조화하여 지시할 때 AI가 의도에 정확히 부합하는 결과를 출력함.
시행착오와 해결책
모바일 반응형 최적화 시 PC 화면 레이아웃이 좁아지는 현상:
문제: 모바일 환경에 과도하게 맞추다 보니 정작 대시보드의 메인인 PC 화면에서 폰트가 작아지거나 공간 활용이 어색해짐.
해결: "모바일은 기존 상태로 유지하고, PC 화면의 시각적 완성도와 가독성에 집중하라"고 작업 범위를 명확히 제한하여 시원한 PC 전용 레이아웃을 확보함.
향후 계획
인건비 관리를 위한 가동/비가동 인력 대시보드 구축: 프로젝트 투입 인력(가동)과 대기/기타 인력(비가동) 현황을 시각화하여 인건비 효율을 한눈에 파악할 수 있는 전용 뷰 추가.
수습 기간 일정 자동 알림 시스템 대시보드 이식: 이전 기수에서 AI 및 구글 앱스크립트로 구축해 두었던 수습 기간 일정 자동 알림 로직을 본 대시보드 화면에 완전히 이식하여 중앙 알림 탭으로 관리.
부서/팀별 인사기록카드 Excel/스프레드시트 역변환 기능: 대시보드 내 데이터를 원본 Raw 형태의 부서/팀별 Excel이나 구글 스프레드시트 포맷으로 원복(Export)할 수 있는 가공 기능 도입.
