메모 앱을 만들어 봤으니 이제 좀 더 실용적인 걸 만들어 보자. 이번에 만들 건 직원 출퇴근 관리 앱이다. 내가 바이브 코딩을 시작한 계기가 업무에 필요한 기능을 만들고 싶어서였는데 출퇴근 관리는 소규모 회사에서 항상 애매한 영역이다. 엑셀로 관리하자니 귀찮고 전문 솔루션을 쓰자니 비용이 부담스럽다. 이런 틈새를 바이브 코딩으로 채울 수 있다.
이 프로젝트는 메모 앱보다 복잡하기 때문에 두 편에 걸쳐 진행한다. 이번 편에서는 기획과 로그인 기능까지 만들고 다음 편에서 출퇴근 기록과 관리자 화면을 만든다.
1. 만들기 전에 기획부터
메모 앱 때는 바로 AI에게 만들어달라고 했지만 좀 더 복잡한 앱은 기획이 먼저다. 기획이라고 해서 거창한 게 아니다. 누가 쓰는지 어떤 기능이 필요한지 화면이 몇 개인지 정리하는 것이다. 출퇴근 관리 앱의 사용자는 두 종류다. 직원과 관리자. 직원은 출근 버튼과 퇴근 버튼을 누른다. 관리자는 전체 직원의 출퇴근 기록을 확인한다. 이걸 정리하면 이렇다.
직원 기능은 로그인, 출근 버튼 누르기, 퇴근 버튼 누르기, 내 출퇴근 기록 보기 이렇게 네 가지다. 관리자 기능은 로그인, 전체 직원 출퇴근 현황 보기, 날짜별 기록 조회 이렇게 세 가지다. 화면은 로그인 화면, 직원용 메인 화면, 관리자용 대시보드 이렇게 세 개면 된다.
이 정도만 정리해도 AI에게 요청할 때 훨씬 명확해진다. 처음 글에서도 말했지만 AI는 내 머릿속을 읽지 못한다. 내가 뭘 원하는지 구체적으로 말해줘야 원하는 결과가 나온다.
2. 프로젝트 세팅
새 폴더를 만들고 커서에서 연다. 그리고 채팅창에 이렇게 요청한다.
React + Vite + Tailwind CSS 기반의 출퇴근 관리 앱 프로젝트를 세팅해줘. Firebase Firestore를 데이터베이스로 쓰고 Firebase Authentication으로 로그인을 구현할 거야. 먼저 프로젝트 초기 세팅과 폴더 구조만 만들어줘. 기능 구현은 아직 하지 마.
마지막 문장이 중요하다. 원하는 것을 말하면 즉시 AI가 한꺼번에 모든 기능을 만들려다가 코드가 복잡해질 수 있다. 단계를 나눠서 요청하는 게 바이브 코딩의 핵심 전략이다. AI가 프로젝트를 세팅해 주면 폴더 구조를 확인한다. 3편에서 했던 것처럼 .env 파일에 Firebase 설정값을 넣고 Firebase 콘솔에서 Authentication을 활성화해야 한다. AI에게 Firebase Authentication 이메일/비밀번호 로그인 방식을 사용할 거야. 설정 방법 알려줘 라고 하면 Firebase 콘솔에서 어디를 클릭해야 하는지 안내해 준다. 간단히 설명하자면 Firebase에서 데이터베이스 생성 후 Authentication 메뉴에서 이메일/비밀번호 로그인을 활성화시키면 된다.
3. 로그인 화면 만들기
세팅이 끝났으면 첫 번째 기능인 로그인을 만든다. 채팅창에 로그인 페이지를 만들어달라고 말한다. 이메일/비밀번호 외에 구글도 연동할 수 있는데 원할 경우 구글 연동을 하고 싶다고 하면 세팅법을 알려준다. 원하는 방식으로 선택하자. 로그인 페이지 구현 후 원하는 액션이 있다면 구체적으로 정리하자. 로그인에 성공하면 메인 페이지로 이동하게 해줘. 계정이 없는 사람을 위한 회원가입 링크를 넣어줘. 디자인은 화면 중앙에 로그인 폼이 오도록 해줘. 이런 요청들을 하면 AI가 원하는대로 로그인 페이지를 만들어 줄 것이다. npm run dev로 확인해 보면 이런 화면이 나온다.
4. 회원가입 기능 추가
로그인이 있으려면 회원가입도 있어야 한다. 바로 이어서 요청한다.
회원가입 페이지도 만들어줘. 이메일, 비밀번호, 이름을 입력받아. Firebase Authentication으로 계정을 만들고 Firestore에 사용자 정보도 저장해줘. 사용자 정보에는 이름과 역할을 포함해. 기본 역할은 employee로 설정해.
여기서 역할(role) 필드가 핵심이다. 나중에 관리자 화면과 직원 화면을 분리할 때 이 역할 값을 기준으로 어떤 화면을 보여줄지 결정한다. admin이면 관리자 대시보드를 보여주고 employee면 출퇴근 화면을 보여주는 식이다. 회원가입을 테스트해 보자. 가입 후 Firebase 콘솔을 확인하면 두 군데에 데이터가 생긴다. Authentication 탭에 새 사용자가 추가되어 있고 Firestore에는 users 컬렉션에 이름과 역할 정보가 저장되어 있을 것이다.
5. 로그인 후 화면 분기
이제 로그인하면 역할에 따라 다른 화면을 보여줘야 한다. 이 부분이 메모 앱에는 없었던 새로운 개념이다.
"로그인 성공 후 Firestore에서 해당 사용자의 role을 확인해줘. role이 admin이면 관리자 대시보드 페이지로, employee면 직원 메인 페이지로 이동하게 해줘. 아직 각 페이지의 내용은 '관리자 페이지입니다' '직원 페이지입니다'라는 텍스트만 넣어줘."
복잡한 기능을 만들 때 이런 식으로 빈 껍데기 페이지를 먼저 만들고 나중에 내용을 채우는 전략이 좋다. 한 번에 모든 걸 만들면 문제가 생겼을 때 로그인이 잘못된 건지 페이지 내용이 잘못된 건지 구분이 안 된다. 단계를 나누면 각 단계에서 뭐가 잘못됐는지 명확하게 알 수 있다.
테스트해 보자. 회원가입한 계정으로 로그인했을 때 "직원 페이지입니다"가 나오면 성공이다. 관리자 계정은 Firebase 콘솔에서 직접 만들 수 있다. Firestore에서 해당 사용자 문서의 role 값을 employee에서 admin으로 바꿔준다. admin 계정으로 로그인했을 때 "관리자 페이지입니다"가 나오면 로그인과 역할 분기가 모두 정상 작동하는 것이다.
6. 로그아웃 기능
로그인이 있으면 로그아웃도 있어야 한다. 빠뜨리기 쉬운데 없으면 테스트할 때도 불편하고 나중에 다른 계정으로 전환이 안 된다.
"각 페이지 상단에 로그아웃 버튼을 추가해줘. 누르면 Firebase에서 로그아웃하고 로그인 페이지로 돌아가게 해줘."
간단한 요청이지만 로그인 상태가 유지되는지도 확인해 보자. 로그인한 상태에서 브라우저를 새로고침해도 로그인이 풀리지 않아야 한다. 만약 새로고침하면 로그인 페이지로 돌아간다면 AI에게 "새로고침해도 로그인 상태가 유지되게 해줘. Firebase의 onAuthStateChanged를 사용해서 처리해줘"라고 요청한다.
7. 여기까지의 점검
이번 편에서 만든 건 이렇다. 프로젝트 세팅, 로그인 페이지, 회원가입 페이지, 역할별 페이지 분기, 로그아웃. 기능 자체는 단순해 보이지만 인증이라는 개념이 처음 들어왔다. 메모 앱에서는 누구든 접속하면 모든 메모가 보였는데 이제는 로그인한 사람만 들어올 수 있고 역할에 따라 보이는 화면이 다르다.
다음 편에서는 직원 화면에 출퇴근 버튼과 기록 화면을 만들고 관리자 대시보드에 전체 현황을 보여주는 기능을 구현한다. 그리고 완성된 앱을 Netlify에 배포하는 것까지 진행한다.
'실전 바이브코딩' 카테고리의 다른 글
| 8. 전용 AI 카피라이터 만들기(OpenAI API 활용) (0) | 2026.02.24 |
|---|---|
| 7. 외부 API 활용 - 환율 계산기 만들기 (0) | 2026.02.22 |
| 4. 첫 번째 앱 만들기 - 메모 앱 (0) | 2026.02.10 |
| 3. Firebase와 Netlify 설정하기 (0) | 2026.01.23 |
| 2. 너무 간단한 커서 사용법(프로 모델) (0) | 2026.01.18 |