✨ AI-Pass MVP: 토스 스타일 UI 적용부터 Firebase 연동까지의 2주차 개발 기록
👋 소개
이번 작업에서는 기존 1주차에 만든 디자인을 토스 스타일로 전면 리디자인하고, Google 로그인 및 Firebase 연동을 통해 사용자가 입력한 내용을 실제로 저장할 수 있는 MVP 기반 구조를 완성했습니다.
이 모든 과정은 회사 구성원들의 AI 역량을 진단·평가하고 등급화하는 시스템을 빠르게 검증하기 위한 MVP 개발의 일환이었어요.
🛠️ 진행 방법
🔧 사용한 도구 & 기술
Gemini: PRD 작성
Figma Make: PRD 기반으로 프롬프트 생성
Figma: UI 제작
GitHub: 디자인 및 코드 저장
Antigravity: 프로젝트 로딩 및 개발 진행
React(Vite), Tailwind CSS, shadcn/ui
Firebase(Auth, Firestore)
🧩 주요 구현 흐름
PRD 작성 → 디자인 프롬프트 생성 → UI 제작 → 코드 개발의 일관된 프로세스 확립
Google 로그인 기능 완성
Firestore로 사용자 입력 및 메시지 기록 저장 처리
🐞 UI 이슈 해결 과정
가장 큰 난관은 모바일 채팅 화면에서 메뉴 버튼들과 입 력창이 겹치는 문제였어요.
문제를 해결하려다 레이아웃이 좌측으로 틀어지고, 심지어 완전 흰 화면이 뜨는 상황도 발생 😭
Antigravity의 자체 웹 미리보기 기능을 활용해 한 줄씩 원인을 좁혀가며 디버깅
이 과정만 약 2시간, 결국 토큰을 모두 소진…! 하지만 문제 해결에는 성공 🎉
🌱 결과와 배운 점
✔️ 성과
하단 메뉴와 입력창이 겹치던 UI 문제 해결
다양한 화면 깨짐 문제를 직접 추적하며 디버깅 능력 향상
💡 배운 점
Antigravity는 Cursor와 유사하지만,
자동 생성되는 초기 계획서를 수정하며 진행할 수 있고
자체 테스트를 실행해볼 수 있다는 점이 특징
다만 문제 해결 속도는 조금 느릴 수 있음
모델을 Claude로 전환 후 안정성 향상
무엇보다 무료라는 점이 가장 큰 강점 🙌
📚 도움 받은 글 (옵션)
필요 시 관련 자료나 참고 링크를 추가할 수 있습니다.
📘 원문 PRD (참고용)
📘 SK AI-Pass : Final MVP PRD (v3.0)
1. Project Overview
Product Name: AI-Pass
Vision: "Chatting is Growing" (채팅이 습관이 되고, 기록이 성과가 된다)
Target: SK에코플랜트 전 임직원 (Mobile First, Desktop Compatible)
Core Tech: Figma (Design), Antigravity (Web Builder), Firebase (Auth/DB)
2. User Flow (Onboarding)
Splash & Login:
Google Workspace (사내 메일) 로그인 버튼 단일 노출.
Tutorial Overlay (최초 1회):
배경이 어두워지며 하이라이트.
Step 1: "여기에 업무를 물어보세요." (채팅창)
Step 2: "10일간 대화하면 L1 자격이 주어집니다." (프로필)
Step 3: "동료들의 비법을 훔쳐보세요." (커뮤니티)
3. Detailed Screen Specifications (4 Tabs)
💬 Tab 1: AI Chat (Home)
"업무의 시작점"
Header:
좌측: 햄버거 메뉴 (히스토리).
우측: 프로필 링 (현재 레벨 색상 표시: 회색/동색/은색/금색).
Empty State (대화 전):
SK 로고와 함께 [Random Prompt Chips] 3개 노출.
Chat Interface:
Simulated LLM Chat UI (User: 우측, AI: 좌측).
[Action]: 답변 복사, 좋아요, 공유하기(Feed로 보내기).
Logic:
하루 1회 이상 메시지 전송 시 "출석 완료! (N/10일) 🔥" 토스트 노출.
📊 Tab 2: My Status (Growth Hub)
"성장의 시각화 & L2/L3 승급 관문"
Dashboard:
Current Level, Next Goal, Action Buttons, My History 등.
🎯 Tab 3: Today's Mission
"습관 형성 퀘스트"
Daily List: 3가지 일일 미션.
Reward: 3개 완료 시 포인트 지급.
🌐 Tab 4: Prompt Gram (Community)
"집단지성 공유 & L3 명예의 전당"
Hall of Fame, Feed, Use This 버튼, 글쓰기 모달.
4. Level-Up Application UI
🥈 L2 승급 신청 화면: 과제명, 사용 도구, 시간 절감 계산, 증빙 첨부 등.
🥇 L3 승급 신청 화면: 프로젝트명, 성과 유형, 정량적 성과, 파일 업로드.
5. Admin Dashboard UI (관리자용)
DAU, 절감 시간, L2/L3 심사, 승인/반려 로직 포함.
<PRD>
<Figma Make Prompt 작성>
<Antigravity>
