기획자, Supabase로 백엔드 개발까지?

by DD
3개월 전
조회수 58

기획자가 기존 CSV 기반 앱의 한계를 극복하고자 BaaS(Backend as a Service) 서비스인 Supabase를 활용하여 동적 DB 구축

커서 AI(Cursor AI)와 Supabase를 연결하여 인플루언서 커뮤니티 앱 '공구 블라인드'를 개발, Svelte 기반 웹 서비스 구현

Supabase의 쉬운 DB 관리, 회원가입/로그인 기능, Github 연동, Vercel 배포를 통해 백엔드 개발의 진입 장벽 감소를 경험

기획자는 AI 툴을 활용하여 복잡한 데이터 구조를 이해하고 제어하며, 서비스 본질에 집중하는 메이커로 진화

기획자가 경험한 Supabase의 장점

본문에 따르면 기획자는 Supabase를 통해 DB 구축의 어려움(DB Construction Difficulty) 없이 관계형 데이터베이스(RDBMS) 구조를 적용한 앱을 개발했다. 특히, 엑셀처럼 쉬운 DB 관리와 회원가입/로그인 기능을 설정 하나로 구현할 수 있다는 점에 만족감을 표했다.

BaaS(Backend as a Service)의 장점: DB 직접 구축, 보안, 세션 관리 등 백엔드 기술에 대한 지식 없이도 서비스 구현 가능

소셜 로그인(Social Login) 지원: 카카오톡, 구글, 디스코드 등 다양한 인증 제공

DB 스키마(DB Schema) 시각화: Database → Schema Visualizer를 통해 데이터 테이블 간의 관계를 쉽게 이해

바이브 코딩 툴 커서 AI(Cursor AI) 활용법

글에서는 기획자가 커서 AI(Cursor AI)를 활용하여 '공구 블라인드' 앱을 개발한 과정을 설명한다. 프롬프트(Prompt) 기반 개발 방식을 통해, 원하는 기능을 구현하기 위해 구체적인 지시를 반복적으로 입력했다.

프롬프트 엔지니어링(Prompt Engineering): 의도한 결과가 나올 때까지 구체적인 지시(Specific Instructions)를 반복

자동 기능 제안: 필터 클릭 시 필터링 동작 추가와 같은 관련 기능 제안

Github 연동: 커서에서 작성한 코드를 Github에 안전하게 저장하고, Vercel에 배포하는 과정 자동화

Supabase 연동 및 배포 과정

기획자는 Supabase 연동을 위해 Supabase의 URL과 API 키를 커서의 환경 변수에 저장했다. 또한, Github 연동을 통해 코드 관리 및 배포 과정을 자동화했다.

환경 변수 설정: Supabase URL과 API 키를 커서의 .env 파일에 저장

Github 연동: Github 레퍼지토리 생성, SSH 키 연결을 통해 코드 관리

Vercel 배포: 커서에서 배포 준비 및 URL 제공, 배포 후 Redirect URLs 설정 필요

로컬 환경에서는 문제없었지만, 배포 후 회원가입/로그인이 안 되는 문제를 겪었으며, Supabase에서 Redirect URLs와 Emails STEMP 설정을 통해 해결했다.

기획자의 백엔드 개발 경험의 의미

본문은 기획자가 Supabase와 AI 툴을 활용하여 백엔드 개발에 참여한 경험을 통해 얻은 시사점을 제시한다. 백엔드 기술 장벽(Backend Technical Barrier)이 낮아짐에 따라, 기획자는 서비스의 본질에 더 집중할 수 있게 되었다.

AI 툴 활용: 복잡한 데이터 구조 이해 및 제어, 단순 화면 설계 및 정책 정의를 넘어선 역할 수행

메이커(Maker)로의 진화: 정적인 아이디어를 동적인 프로덕트로 변화시키는 역할

서비스 본질 집중: 기술 구현 간소화로 서비스의 핵심 가치에 집중

기획자, Supabase로 백엔드 구현까지 해봤습니다