지난 편에서 로그인과 역할 분기까지 만들었다. 이번 편에서는 진짜 핵심인 출퇴근 기록 기능과 관리자 대시보드를 만들고 배포까지 마무리한다. 이번 편은 캡쳐 없이 빠르게 과정 설명으로만 진행하겠다.
1. 직원 화면 - 출퇴근 버튼 만들기
직원이 로그인하면 보이는 메인 화면에 출근 버튼과 퇴근 버튼을 넣는다. 커서에 이렇게 요청한다.
직원 메인 페이지에 출퇴근 기능을 만들어줘. 화면 구성은 이렇게 해줘.
- 상단에 오늘 날짜와 현재 시간을 실시간으로 표시
- 큰 출근 버튼과 퇴근 버튼
- 출근 버튼을 누르면 현재 시간이 Firebase에 저장되고 버튼이 비활성화돼
- 퇴근 버튼은 출근을 찍은 후에만 활성화돼
- 오늘 이미 출근했다면 출근 시간을 보여주고 출근 버튼은 비활성화해줘
- 하단에 이번 주 내 출퇴근 기록을 테이블로 보여줘
요청이 꽤 구체적인데 이게 바이브 코딩에서 결과물의 품질을 결정하는 핵심이다. 출퇴근 기능 만들어달라고만 하면 AI가 내 의도와 다른 방향으로 갈 확률이 높다. 구체적으로 말할수록 수정할 일이 줄어든다. AI가 코드를 만들면 npm run dev로 확인한다. 출근 버튼을 눌러보자. 현재 시간이 기록되면서 버튼이 비활성화되고 퇴근 버튼이 활성화되면 정상이다. Firebase 콘솔에서도 확인해 본다.
2. 자주 발생하는 문제들
이 단계에서 자주 마주치는 문제가 몇 가지 있다.
첫 번째는 시간대 문제다. Firebase에 저장된 시간이 한국 시간이 아니라 UTC로 저장되는 경우가 있다. 오전 9시에 출근 버튼을 눌렀는데 기록에 자정이 찍혀 있다면 이 문제다. AI에게 시간을 한국 시간(KST)으로 저장하고 표시해달라고 요청하면 된다.
두 번째는 날짜 변경 시점이다. 자정이 지나면 새로운 날의 출근이 가능해야 하는데 이게 제대로 안 되는 경우가 있다. 날짜 기준은 한국 시간 자정으로 해달라고 하고 자정이 지나면 새로운 출근이 가능하게 해달라고 명시한다.
세 번째는 중복 출근 방지다. 네트워크가 느려서 출근 버튼을 두 번 누르면 출근 기록이 두 개 생길 수 있다. 출근 버튼을 누르면 즉시 비활성화해서 중복 클릭을 방지하라고 요청하고 같은 날에 출근 기록이 이미 있으면 다시 출근할 수 없게 서버 측에서도 체크해달라고 요청한다.
이런 문제들은 직접 테스트하면서 발견하게 된다. 처음부터 완벽할 수 없으니 발견할 때마다 AI에게 수정을 요청하면 된다. 다만 수정을 요청하기 전에 반드시 현재 상태를 Git에 커밋해 두자.
3. 관리자 대시보드 만들기
직원 화면이 완성됐으면 관리자 화면을 만들 차례다. 관리자는 전체 직원의 출퇴근 현황을 한눈에 볼 수 있어야 한다.
관리자 대시보드를 만들어줘. 기능은 이렇게 해줘.
- 오늘 날짜 기준으로 전체 직원의 출퇴근 현황을 보여줘. 출근한 사람은 초록색, 아직 안 온 사람은 빨간색으로 표시
- 달력이나 날짜 선택기로 다른 날짜의 기록도 조회할 수 있게 해줘
- 직원별로 이번 달의 출퇴근 기록을 볼 수 있는 상세 보기 기능
- 전체 데이터를 테이블 형태로 깔끔하게 정리해줘
관리자 대시보드는 데이터를 읽어오는 양이 많기 때문에 로딩 속도가 느릴 수 있다. 데이터를 불러오는 동안 로딩 스피너를 보여달라고 추가 요청하면 사용자 경험이 좋아진다. 빈 화면에서 갑자기 데이터가 뜨는 것보다 로딩 중이라는 표시가 있는 게 훨씬 자연스럽다.
4. 테스트용 데이터 넣기
관리자 대시보드를 테스트하려면 여러 직원의 출퇴근 데이터가 필요하다. 혼자 테스트하면 데이터가 하나뿐이라 대시보드가 허전하다. 테스트용으로 가상의 직원 5명과 지난 일주일간의 출퇴근 데이터를 Firebase에 넣어주는 스크립트를 만들어달라고 해보자. AI가 테스트 데이터를 생성하는 스크립트를 만들어 줄 것이다. 이걸 한 번 실행하면 대시보드에 여러 직원의 데이터가 표시되어 제대로 작동하는지 확인할 수 있다. 테스트가 끝나면 가짜 데이터는 지우자.
5. 디자인 다듬기
기능이 완성됐으면 디자인을 좀 다듬을 차례다. AI가 만든 기본 디자인도 나쁘지 않지만 몇 가지를 손보면 훨씬 프로페셔널해 보인다.
전체적인 UI를 좀 더 다듬어줘. 로그인 페이지에 회사 이름을 크게 넣어주고 직원 페이지의 출근/퇴근 버튼을 좀 더 크고 눈에 띄게 만들어줘. 출근 버튼은 파란색 계열, 퇴근 버튼은 주황색 계열로 해줘. 그리고 모바일에서도 잘 보이도록 반응형으로 만들어줘.
모바일 대응은 꼭 해야 한다. 직원들이 출퇴근을 찍을 때 대부분 핸드폰을 쓸 테니까. 크롬 개발자 도구에서 모바일 화면 크기로 확인하거나 실제 핸드폰으로 테스트해 보자.
6. 배포 전 체크리스트
Netlify에 배포하기 전에 확인해야 할 것들이 있다.
첫째로 환경변수다. .env 파일의 Firebase 설정값이 Netlify에도 등록되어 있는지 확인한다. 4편에서도 언급했지만 이걸 빠뜨리면 배포된 사이트에서 Firebase 연결이 안 된다.
둘째로 Firebase 보안 규칙이다. 테스트할 때 모든 읽기쓰기를 허용해 뒀다면 이제 제한을 걸어야 한다. AI에게 Firebase 보안 규칙을 설정해달라고 요청하자. 로그인한 사용자만 자기 출퇴근 기록을 읽고 쓸 수 있게 하고 관리자는 모든 기록을 읽을 수 있게 해달라고 요청한다.
셋째로 에러 처리다. 인터넷이 끊겼을 때, 로그인 세션이 만료됐을 때 등 예외 상황에서 앱이 멈추지 않는지 확인한다. 네트워크 에러가 발생했을 때 사용자에게 알림을 보여주는 에러 처리를 추가해달라고 요청하면 좋다.
7. Netlify에 배포
체크리스트를 확인했으면 배포한다. 과정은 메모 앱 때와 같다. 먼저 Git에 최종 커밋을 한다. Netlify에서 GitHub 저장소를 연결하면 자동으로 빌드와 배포가 진행된다. 배포가 완료되면 URL을 받아서 테스트한다. 핸드폰으로도 접속해서 출퇴근 버튼이 잘 작동하는지, 관리자 대시보드가 제대로 보이는지 확인한다.
8. 완성 후 느낀 점
메모 앱에서 출퇴근 관리 앱으로 넘어오면서 복잡도가 꽤 올라갔다. 로그인, 역할 분기, 날짜 처리, 관리자 전용 화면 등 새로운 개념이 여러 개 들어왔다. 하지만 기본 구조는 같다. 데이터를 만들고 읽고 수정하고 삭제하는 CRUD다. 출근 버튼을 누르면 데이터를 만들고 대시보드에서 보여주면 읽는 것이다. 이 패턴을 이해하면 다음에는 더 복잡한 앱도 만들 수 있다. 재고 관리 앱이든 고객 관리 앱이든 결국 CRUD의 확장이다. 복잡한 앱이라고 해서 완전히 새로운 개념이 필요한 게 아니라 같은 패턴을 더 많은 데이터에 적용하는 것이다.