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

Supabase 프로젝트 설정

Supabase 열기

https://supabase.com/?utm_source=partner&utm_medium=social&utm_campaign=supasquad&dub_id=faVfKdcLWvKCbYNp

조직을 만들고 무료 플랜 선택 프로젝트를 만들고 가장 가까운 리전 선택 데이터베이스 비밀번호 저장 Project URL과 Publishable Key 복사

Project Settings Data API

Project URL

Project Settings API Keys

Publishable Key

프롬프트 1 — Supabase 연결

Supabase 연결

이 프로젝트를 위한 간단한 Supabase 연결 파일을 만드세요.

Create a simple Supabase connection file for this project. 1) Create a new file called: src/supabaseClient.js 2) Inside it, write a clean Supabase setup with two variables that I can replace later: const SUPABASE_URL = "{{SUPABASE_URL}}"; const SUPABASE_PUBLIC_KEY = "{{SUPABASE_KEY}}"; 3) Import createClient from "@supabase/supabase-js" and export one Supabase client: export const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLIC_KEY); Make the file very simple and show clearly where I should paste my URL and my public key.

Supabase 프로젝트 URL

Supabase project URL을 여기에 붙여넣기

Supabase Publishable Key

Supabase publishable key를 여기에 붙여넣기

프롬프트 2 — 이메일 인증 로직

이메일 인증 로직

이 프로젝트의 로그인 및 회원가입 페이지를 Supabase Auth에 연결하세요.

Connect the Sign In and Sign Up pages in this project to Supabase Auth. Use the Supabase client from: src/supabaseClient.js 1) For Sign Up: - Use supabase.auth.signUp({ email, password }) 2) For Sign In: - Use supabase.auth.signInWithPassword({ email, password }) 3) After successful login or signup: - Redirect the user to the Home page ("/") 4) Add simple error handling: - If Supabase returns an error, show a small error message under the form Do not change the UI design — only add the logic to make these forms work. Show me only the updated Sign In and Sign Up files.

프롬프트 3 — 이메일 확인 문제 해결

이메일 확인 문제 해결

미인증 사용자를 올바르게 처리하도록 Supabase 인증 로직을 수정하세요.

Fix Supabase auth logic: * After signUp(), if data.session is null, don’t redirect to the dashboard. * Just show: "Check your email and confirm your account before logging in." * Only redirect when a real session exists after login. * Protect private pages with supabase.auth.getSession() — if no session, redirect to /login.

프롬프트 4 — 회원가입 사용성 개선

회원가입 사용성 개선

Supabase 이메일/비밀번호 가입 흐름의 UX를 개선하세요.

Improve the UX of my Supabase email/password signup flow. Current behavior: - When the user completes Sign Up, the app goes back to the Sign In page, but there is no success message and the email field is empty. I want the following behavior: 1) After a successful Supabase signUp({ email, password }): - Do NOT auto-login. - Redirect the user to the Sign In page. - Keep / pre-fill the email they just used for signup in the Sign In form. 2) On the Sign In page: - If the user comes from a successful signup: - Show a clear success message above the form, for example: "Your account has been created. Please check your email and verify your address before logging in." - The email input should already contain the email used during signup. 3) You can pass the email from Sign Up to Sign In using: - router state, OR - a query parameter, OR - any simple, clean method that works well with this project. 4) Keep the existing design and layout exactly the same. Just add: - the logic for passing the email - the success message on the Sign In screen - and basic error handling if signup fails. Show me only the updated Sign Up and Sign In components.

배포 (Google OAuth에 필요)

웹 앱 배포

배포 영상 보기

배포 영상 보기

https://youtu.be/HGs-4QjyjHQ?si=b2qf5p0-stltUKw4

Supabase에 Site URL과 Redirect URL 추가 Google Cloud 프로젝트 생성 OAuth 동의 화면 구성 웹 OAuth 클라이언트를 만들고 필요한 URL 추가 Client ID와 Client Secret을 Supabase에 추가한 뒤 Google 로그인 활성화

Prompt 5 — Google Sign-In

Google Sign-In

“Continue with Google” 버튼이 Supabase OAuth로 작동하도록 만드세요.

Make the “Continue with Google” button work using Supabase OAuth. Use the supabaseClient.js file. Add the Google login function and connect it to the button. Keep all UI exactly the same.

프롬프트 6 — 테이블 + CRUD 생성하기

테이블 + CRUD 생성하기

이 앱에 필요한 데이터베이스 테이블, CRUD 로직, 사용자별 보안 정책을 생성하세요.

I want you to connect this web app to Supabase. 1) Analyze the existing project and detect all the data that should be saved in the database (for example: notes, tasks, posts, projects, or any items the app uses). 2) Based on the UI and the current features, generate the ideal SQL code to create the main table(s) in Supabase — including fields, types, timestamps, and user_id relations. Make sure rows belong only to the authenticated user using RLS + policies with auth.uid(). 3) After generating the SQL, write the Supabase code needed for: - loading the user's data - creating new items - updating items - deleting items 4) Use the existing components in the codebase without changing the design. Just replace the placeholder/local data logic with real Supabase queries. Keep everything simple, clean, and easy to copy-paste.

데이터베이스 생성 및 확인

생성된 SQL 복사 Supabase SQL Editor 열기 SQL 붙여넣고 실행 테이블이 생성되었는지 확인 Row Level Security 정책 검토 앱에서 테스트 레코드 생성 해당 레코드가 Supabase에 표시되는지 확인

Supabase Storage 설정

Supabase Storage 열기 app-files라는 이름의 버킷 생성 버킷을 비공개로 유지 Supabase SQL Editor 열기 스토리지 정책 스크립트 실행 스토리지 정책이 생성되었는지 확인

Storage 정책

create policy "Users can view own files" on storage.objects for select to authenticated using ( bucket_id = 'app-files' and name like (auth.uid()::text || '/%') ); create policy "Users can upload to own folder" on storage.objects for insert to authenticated with check ( bucket_id = 'app-files' and name like (auth.uid()::text || '/%') ); create policy "Users can update own files" on storage.objects for update to authenticated using ( bucket_id = 'app-files' and name like (auth.uid()::text || '/%') ); create policy "Users can delete own files" on storage.objects for delete to authenticated using ( bucket_id = 'app-files' and name like (auth.uid()::text || '/%') );

프롬프트 7 — 파일 업로드 연결하기

파일 업로드 연결하기

모든 파일 업로드 기능을 사용자별 보안 폴더를 사용해 비공개 app-files 버킷에 연결하세요.

I already created a Supabase Storage bucket named "app-files" (private) and added all required security policies so each user can only access files under their own folder. Now analyze my project and identify every place where users upload or select files (attachments, images, avatars, covers, etc.). Connect all existing upload features to Supabase Storage using this bucket: "app-files". Important folder rule: every uploaded file path must start with the user id: ${auth.uid()}/... Use a clean structure like: ${auth.uid()}/${featureName}/${itemId}/${uuid}.${extension} After uploading a file: - Save the returned file path in the correct database table according to my current data model. - Display files using signed URLs since the bucket is private. - Add delete logic: remove the file from Storage and remove its reference from the database. - Do NOT redesign the UI. Only connect the existing upload buttons/components to Supabase Storage.

파일 업로드 테스트

최신 앱 변경 사항 게시 운영 중인 웹 앱 열기 테스트 계정으로 로그인 테스트 파일 업로드 파일이 앱에 표시되는지 확인 Supabase에서 app-files 버킷 열기 파일이 해당 사용자 폴더에 저장되었는지 확인

프롬프트 8 — 메모 개수 실시간 표시

메모 개수 실시간 표시

대시보드의 “Total Notes” 카드가 로그인한 사용자의 실제 메모 개수를 Supabase에서 가져와 표시하도록 만드세요.

You are working on my existing Supabase-powered AI Notes project. Goal: Make the "Total Notes" card on the dashboard show the real number of notes for the currently authenticated user. Requirements: 1. Fetch the current authenticated user using: supabase.auth.getUser() 2. Count the number of notes in the "notes" table where user_id = current user id. 3. Replace the static number in the dashboard with the real count from the database. 4. Do NOT redesign the UI. Only connect the existing "Total Notes" component to real Supabase data. 5. Keep the existing clean SaaS layout untouched. 6. Make sure it updates automatically when a note is created or deleted. Only modify necessary files. Do not change styling.

프롬프트 9 — 무료 플랜 제한

무료 플랜 제한

무료 사용자는 메모 3개로 제한하고, 한도에 도달하면 업그레이드 안내를 표시하세요.

Now add simple SaaS plan logic to my existing Supabase AI Notes app. Goal: Free users can create a maximum of 3 notes. Requirements: 1. Before creating a new note: - Count how many notes the current user already has. 2. If notes count >= 3: - Block note creation. - Show a clean modal or alert: "Free plan limit reached. Upgrade to Pro to create unlimited notes." 3. Do NOT redesign the UI. Keep the existing design system. 4. Keep logic simple. No Stripe integration yet. Just front-end + Supabase validation. 5. Make sure users cannot bypass this limit by calling the create function manually. Keep everything clean and production-ready.

무료 한도에 도달할 때까지 메모 생성 메모를 하나 더 생성 시도 메모 생성이 차단되는지 확인 업그레이드 안내 메시지가 표시되는지 확인

Supabase 튜토리얼에서 사용한 것과 동일한 Google AI Studio 시작 프로젝트를 복사하세요.

AI Notes — 완성형 SaaS 템플릿

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

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

안내

위의 프로젝트 링크를 엽니다. 필요하면 Google 계정에 로그인합니다. Google AI Studio에서 “Remix”를 클릭합니다. 포함된 Supabase Project URL과 Publishable Key를 본인 값으로 교체합니다. 제공된 데이터베이스 및 Storage SQL 스크립트를 Supabase SQL Editor에서 실행합니다.

중요 참고 사항

인증, 데이터베이스, 파일 업로드를 테스트하기 전에 포함된 Supabase Project URL과 Publishable Key를 교체하세요.