완성형 웹 앱 + 백엔드 만들기 (Google AI Studio + Firebase)

초기 설정

Firebase 프로젝트 생성 웹 앱 등록 이메일/비밀번호 인증 활성화 Google 로그인 활성화 인증 이메일 템플릿의 발신자 이름 수정 Firebase Web SDK 설정 복사

Google 로그인 요구 사항

앱을 배포하고 실제 도메인을 Firebase Authorized Domains에 추가하기 전까지는 Google 로그인이 작동하지 않을 수 있습니다.

배포 가이드

배포 가이드 보기

https://youtu.be/HGs-4QjyjHQ?si=9fXzfJtkd3UNsqhQ

Firebase Authentication 연결하기

Google AI Studio 프로젝트를 Firebase에 연결하고 회원가입, 로그인, 로그아웃을 활성화하세요.

Firebase Authentication 연결하기

이 SDK를 사용해 기존 웹 앱을 Firebase에 연결하세요...

Connect my existing web app to Firebase using this SDK: {{FIREBASE_CONFIG}} Requirements: - Use Firebase Authentication only - Do NOT use Firestore or Storage yet - Do NOT redesign the UI Authentication behavior: - Users can sign in using email and password - If credentials are incorrect, show: "Email or password is incorrect" - Users can sign up using email and password - If the email already exists, show: "User already exists. Please sign in" For now: - Authenticate users only - Do NOT save user profile data Flow: - On successful sign-in or sign-up, redirect to the dashboard - Add a logout button that signs the user out and returns to the auth screen

Firebase 설정 정보 (firebaseConfig)

firebaseConfig 객체를 여기에 붙여넣기

이메일 인증 구현하기

인증 이메일을 보내고 자동 로그인을 막으며, 이메일이 인증될 때까지 접근을 차단하세요.

이메일 인증 구현하기

Firebase Authentication만 사용해 이메일 인증을 구현하세요...

Implement email verification using Firebase Authentication only. - When a user registers with email/password, do not sign them in automatically. - Send a verification email and show a verification screen with this message: “We have sent you a verification email to [user email]. Please verify it and log in.” - Include a Login button on the verification screen. - If a user logs in and their email is not verified, block access and show the same verification screen. - Do not use Firestore or any database — Firebase Authentication only.

Firestore 설정

Firestore 데이터베이스 생성 Standard 에디션 선택 데이터베이스 리전 선택 Production 모드 선택 Firestore 보안 규칙 추가 및 게시

Firestore 보안 규칙 (사용자별 데이터 분리)

rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // Root user document match /users/{userId} { allow read, write: if request.auth != null && request.auth.uid == userId; // Anything nested inside this user: // subcollections, documents, folders, files, unlimited levels match /{allPaths=**} { allow read, write: if request.auth != null && request.auth.uid == userId; } } } }

대시보드에 Firestore 섹션 추가하기

파일, 메모, 팀원용 대시보드 섹션을 만들고 Firestore에 연결하세요.

대시보드에 Firestore 섹션 추가하기

사용자 데이터를 Firestore에 저장하고 불러오는 동적 대시보드 섹션을 추가하세요.

Enhance the current dashboard by adding 3 fully functional sections: 1) My Files 2) My Notes 3) Team Members IMPORTANT RULES: - Use Firebase Authentication + Firestore only. - Do NOT use browser prompts (window.prompt / alert). - Use clean in-app modals for all actions. - Each user sees ONLY their own data. - Keep the existing VaultFlow UI style (cards, spacing, buttons). ==================== DATA STRUCTURE ==================== Use Firestore under the authenticated user: users/{uid} - displayName - email - plan - createdAt users/{uid}/folders/{folderId} - name - createdAt users/{uid}/files/{fileId} - name - folderId (optional) - size - createdAt (Note: metadata only, no real uploads yet) users/{uid}/notes/{noteId} - title - content (optional) - createdAt users/{uid}/teamMembers/{memberId} - name - role (optional) - createdAt ==================== UI BEHAVIOR ==================== My Files - Buttons: "New Folder" and "Add File" - Show folders and files - Empty state + loading state My Notes - Button: "New Note" - Show notes as cards - Empty state + loading state Team Members - Button: "Add Member" - Show list of members - Empty state + loading state ==================== MODALS (NO BROWSER PROMPTS) ==================== - New Folder: input name → save to Firestore - Add File: name + optional folder + size → save - New Note: title + content → save - Add Member: name + role → save All modals: - Cancel / Create - Validation - Loading state - Update UI instantly after save ==================== SECURITY ==================== Add Firestore rules so: - Only the logged-in user can read/write their own data - request.auth.uid must match {uid} ==================== RESULT ==================== After refresh: - Data persists - Buttons work - Counts update - No browser dialogs - Dashboard feels like a real SaaS app

Storage 설정

Firebase Storage 활성화 결제 계정 연결 후 Blaze 요금제로 업그레이드 스토리지 위치 선택 Production 모드 선택 Firebase Storage 보안 규칙 추가 및 게시

Storage를 사용하려면 결제 설정이 필요합니다. 사용량이 포함된 무료 한도를 초과할 때만 요금이 부과됩니다.

Firebase Storage 보안 규칙 (사용자별 파일 분리)

rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /user_uploads/{uid}/{allPaths=**} { allow read, write: if request.auth != null && request.auth.uid == uid; } } }

My Files를 Firebase Storage에 연결하기

My Files를 Firebase Storage에 연결하기

앱의 파일 업로드 시스템을 사용자별 보안 폴더를 사용해 Firebase Storage에 연결하세요.

Connect the existing “My Files” section to Firebase Storage + Firestore. CONTEXT - Firebase Auth + Firestore already work in this project. - Firebase Storage is enabled. - Storage rules allow only: /user_uploads/{uid}/{allPaths=**} for the logged-in user. GOAL Make these buttons fully functional: 1) Add File (upload) 2) Download 3) Delete And keep the current UI style (table, buttons, spacing). No redesign. IMPORTANT RULES - Use Firebase Authentication + Firestore + Firebase Storage only. - Do NOT use browser prompts (window.prompt/alert). - Use clean in-app modal for “Add File”. - Each user sees ONLY their own files. - Upload path MUST be: user_uploads/{uid}/{fileName} - Save metadata in Firestore under: users/{uid}/files/{fileId} UI BEHAVIOR A) Add File button - Open an in-app modal: “Upload File” - Inside modal: - File picker (click to choose file) using a hidden <input type="file"> - Optional: select folder (if folders exist) - Upload button - Show upload progress (percentage) + loading state - When upload finishes: - Save metadata doc to Firestore: users/{uid}/files/{fileId} with: - name (original file name) - storagePath (e.g. user_uploads/{uid}/{fileId}-{name}) - downloadURL - size - type (mimeType) - folderId (optional) - createdAt (serverTimestamp) - Update the UI immediately (add row in the table) B) Display files - In “My Files” table, show: - name - type - size - actions: Download + Delete - Use the Firestore list under users/{uid}/files ordered by createdAt desc. C) Download button - Use the stored downloadURL from Firestore - Open it safely in a new tab OR trigger download (but no alert). D) Delete button - Delete from Storage using storagePath - Then delete the Firestore document - Update UI instantly EDGE CASES - If user is not logged in, block access. - Handle errors with inline UI message in the modal (no alerts). - Prevent double uploads (disable button during upload). - If upload fails, show error message. DELIVERABLE - Implement the missing handlers, modal, and Storage/Firestore logic. - Keep current design. Do not refactor unrelated code.

동적 사용자 인터페이스 확인

인증된 계정으로 로그인 인터페이스가 로그인한 사용자를 인식하는지 확인 대시보드가 해당 사용자의 Firestore 데이터를 불러오는지 확인 업로드한 파일이 올바르게 표시되는지 확인

무료 플랜 파일 제한 추가

무료 플랜 파일 개수 제한 추가하기

무료 사용자가 업로드할 수 있는 파일 수를 제한하고, 한도에 도달하면 업그레이드 안내를 표시하세요.

Add a free-plan limit to this app: • Max files allowed: 5 • Count files under: users/{uid}/files • If file count >= 5: – Disable Add File – Show message: “You’ve reached the free plan limit.” – Add an Upgrade button that opens a simple modal (title: “Upgrade your plan”, text + Close button) No real payments. UI only. Keep current design. Apply logic only to the logged-in user.

무료 플랜 제한 테스트

무료 한도에 도달할 때까지 파일 업로드 추가 업로드가 차단되는지 확인 업그레이드 안내 메시지가 올바르게 표시되는지 확인

영상에서 사용한 것과 동일한 Google AI Studio 프로젝트를 복사해 내 계정에 추가하세요.

VaultFlow 프로젝트

튜토리얼에서 사용한 Google AI Studio 프로젝트

https://aistudio.google.com/app/prompts?state=%7B%22ids%22:%5B%221P-lytf__6kOkQnOcczVdgIbnOWuRwNF0%22%5D,%22action%22:%22open%22,%22userId%22:%22112386544465239683494%22,%22resourceKeys%22:%7B%7D%7D&usp=sharing

사용 방법

위의 프로젝트 링크를 엽니다. 필요하면 Google 계정에 로그인합니다. Google AI Studio에서 “Copy”를 클릭합니다. 프로젝트가 계정에 추가되어 자유롭게 편집할 수 있게 됩니다.

중요한 참고 사항

프로젝트를 복사한 뒤, 포함된 Firebase 설정을 본인의 Firebase Web SDK 설정으로 교체하세요.