지난 글 “기획자, 안티그래비티(Antigravity) 이렇게 써봤습니다“에서는 안티그래비티를 이용해 인플루언서 검색 앱을 만드는 경험을 공유했다. 해당 앱은 CSV 정적파일을 기반으로 만들었기에 한계점이 분명히 존재했는데, 사용자가 직접 글을 쓰고 서로 ‘좋아요’를 누르는 상호작용을 하려면 살아있는 동적 DB가 필요했다.

그래서 이번에는 대표적인 바이브 코딩 툴인 커서 AI와 슈퍼베이스를 연결해 커뮤니티 앱을 만들어 보았다. 슈퍼베이스(Supabase)는 DB를 직접 구축하지 않고도, 간단한 키 연결만으로 사용할 수 있는 BaaS(Backend as a Service) 형태의 서비스다. 엑셀처럼 쉬운 DB 관리와 회원가입/로그인 기능을 설정 하나만으로 구현할 수 있어서 개인적으로 매우 만족스러웠다.

이번 글에서는 기획자가 바이브 코딩과 슈퍼베이스로 관계형 데이터베이스(RDBMS) 구조를 적용해 만든 인플루언서 커뮤니티 앱 ‘공구 블라인드’의 구현 과정을 함께 살펴보고자 한다.

커서로 인플루언서 커뮤니티 앱 설계하기

우선 이 앱을 만들게 된 계기에 대해 간단히 설명하고자 한다. 현재 인스타그램 공구 시장은 복불복이다. 기대와 다르게 성과가 나기도 하고, 때로는 기대에 미치지 못하기도 한다. 이러한 시장에 인플루언서들이 솔직하게 정보를 나눌 수 있는 커뮤니티가 있다면, 공동구매 진행 정보와 함께 최적의 벤더 및 상품을 매칭할 수 있는 서비스를 만들 수 있지 않을까?라는 생각이 들었다.

그래서 MVP를 ‘공구 블라인드’로 정하고, 빠르게 시장 반응을 살펴보기로 했다. 이를 구현하기 위해 복잡한 설정 없이도 하루 만에 웹 서비스를 구현할 수 있는 스벨트(Svelte)를 만들고, PRD 및 기술 스택을 작성했다.

1) 커서에 스벨트 프로젝트 생성

우선 커서를 다운로드 후 로그인 및 node.js, git 설치까지 완료한다. 그다음 효율적인 프로젝트 초기 설정을 위해 스벨트 프로젝트를 만든다. 공구 블라인드의 경우 가볍고 빠른 웹 서비스이기에 스벨트를 선택했으나, 모바일 앱을 구축할 때는 플러터(Flutter)를 이용하는 것을 권장한다. 이처럼 프로젝트 목적에 따라 선택 사용하면 된다.

스벨트 프로젝트 생성을 위해 Git bash 터미널 창에 아래와 같이 입력 및 선택하여 진행했다.

npx sv create 
└─ Project name: Gonggu Blind 
└─ Template: SvelteKit minimal
└─ Add type checking: Yes, using TypeScript syntax 
└─ What would you like to add?: Tailwind CSS, ESLint, Prettier, Vitest, Sveltekt-Adapter 
└─ Which package manager?: npm

스벨트 프로젝트를 생성되면 Open Project를 열어 프로젝트(예: Gonggu Blind) 폴더를 선택한다. 그리고 Git bash 터미널 창에 npm run dev를 입력한 후 Local host 주소를 선택하면 브라우저가 뜬다.

2) PRD 및 기술 스택 작성으로 오류 최소화

여러 번 테스트해 본 결과 확실히 명확한 작업 지시서가 있으면 오류가 덜 발생한다. 따라서 기획, PRD, 기술 스택 작성은 제미나이로 만든 후, 커서에 *.md 파일을 저장해 놓는다. 그다음 에이전트에게 인플루언서 익명 커뮤니티인 ‘공구 블라인드’ 앱을 PRD와 기술 스택을 참고해서 만들어 달라고 했다.

3) 프롬프트로 공구 블라인드 앱 만들기

공구 블라인드의 주요 기능인 리얼톡과 AI 데이터 소싱 공구 인사이트를 구현하기 위해 프롬프트를 단계별로 입력했다. 바이브 코딩에서는 의도한 결과가 나올 때까지 프롬프트로 여러 번 구체적으로 지시하는 과정이 필요하다.

커서를 이용하면서 좋았던 점은 “필터 클릭 시 실제로 리스트가 필터링되도록 동작까지 붙일까?”와 같이 관련 기능을 추가로 제안해 준다는 것이었다. 그리고 맘에 들지 않을 때는 언제든지 쉽게 원복이 가능하다는 점에서도 편리했다. 다만 바이브 코딩할 땐 상식적으로 구현되어야 하는 동작 하나까지도 아래와 같이 일일이 프롬프트를 작성해야 해서 번거롭긴 했다.

프롬프트: AI 분석기 메뉴에 커서가 갔을 때 클릭커블한 어포던스를 줄 수 있도록 손가락 모양으로 변경해 주고, 검색창에 브랜드 또는 상품명을 입력하지 않고 해당 버튼을 선택하면 입력 안내 창을 띄워줘.

Supabase로 DB 연동하기

슈퍼베이스 연동 전 필수는 Github 원격 저장소에 커서로 작성한 코드를 안전하게 저장하는 것이다. 내 컴퓨터에 있는 코드를 Github에 옮겨서 사용하면, 러버블처럼 다른 바이브코딩 툴로 작업한 것도 커서에서 불러와 추가 작업을 할 수 있다. 슈퍼베이스는 프로젝트 두 개까지는 무료여서 MVP를 만드는 데는 충분했고, 커서에서 DB 스키마를 만든 후 슈퍼베이스의 SQL 에디터를 활용해 DB 테이블을 완성했다.

1) Github에 에러 없이 한 번에 연결한 후 슈퍼베이스 연동 설정

커서에서 배포하기 위해 준비하고 URL을 알려달라고 하면, 알아서 Github에 업데이트하고 Vercel에 배포해 준다. 물론 초기 세팅은 필요했지만, 기획자 입장에서는 매번 수정된 코드를 Github에 업데이트할 때마다 명령문을 굳이 기억하지도, 입력하지도 않아도 된다는 점이 편리했다.

먼저 Github가입 로그인 후 신규 레퍼지토리를 생성한 후에 SSH 주소를 복사한다. 그리고 커서 커맨드 라인에 아래 순서대로 입력하여 저장소를 초기화하고, 원격 저장소에 저장한다.

git init: 내 컴퓨터에 깃 저장소 만들기 위한 초기화 작업
git remote add origin <git hub에서 복사한 SSH 주소 붙여넣기>: SSH 깃허브 주소 등록 또는
git remote set-url origin <git hub에서 복사한 HTTPS 주소 붙여넣기>: HTTPS 깃허브 주소 등록
git add: 변경된 모든 파일을 스테이징 하기
git commit -m "Init: 처음 커밋(확정) 할 땐 사용자 이름과 이름 설정 필요
git push -u origin main: 깃허브로 쏘아 올려 저장하기

이때 열쇠가 없으면 깃허브 문이 열리지 않아서 오류가 생길 수 있다. 방법은 HTTPS 주소를 이용하거나 Github와 SSH keys 연결 방식을 이용하는 것이다. 보안에 신경이 쓰인다면 SSH 키값을 복사한 후 연결해서 사용하는 방법을 권장한다. ssh-keygen을 커맨드 라인에 입력한 후 승인 권한을 위한 공개키를 생성한다. 그다음 cat <퍼블릭 키를 복사 붙여넣기>를 해서 ssh 키값 복사한 후, Github에 저장하여 연결하면 된다.

Github 연결 방법은 복사한 ssh 키값을 git hub → 사용자 프로필 → Settings → SSG and GOG keys → New SSH key → 컴퓨터 이름 입력과 복사한 키를 붙여넣기 → Add SSH key 저장하면 깃허브와 연결하면 된다.

그리고 슈퍼베이스 연동 설정을 위해서는슈퍼베이스 가입과 로그인을 한 후 DB 연동을 위해 접근할 수 있도록 Supabase 만든 주소와 키값을 복사하여 커서에서 환경변수에 저장하여 연결한다.

Project Settings → Data API 있는 URL과 → API Keys에 PUBLIC_Key를 복사한다. 복사한 두 개의 키값은 커서의 .env 환경 변수 파일에 입력한다.
SUPABASE_DB_URL = 복사한 URL 값
SUPABASE_DB_PUBLIC_Key = 복사한 키값

2) 회원 가입 및 로그인 기능 구현

보통 로그인 기능을 직접 구현하려면 보안, DB 설계, 세션 관리 등 챙겨야 할 게 많다. 하지만 슈퍼베이스에서는 회원 가입과 로그인 기능을 제공해서 쉽게 구현할 수 있었다. 슈퍼베이스에서 설정 버튼 하나와 커서의 프롬프트 한 줄로 회원 가입과 로그인 기능을 붙일 수 있었다.

먼저 슈퍼 페이스 대시보드에서 Authentication → Sign In / Providers 이동하면 Auth Providers에서 카카오톡, 구글, 디스코드 등 생각했던 것보다 다양한 인증을 제공한다. 원하는 소셜 로그인을 토글스위치 하나로 구현할 수 있다는 점에서 편리했다.

다음으로는 커서에서 회원 가입과 로그인 기능에 대한 고객 경험을 최대한 디테일하게 반영해서 구현해 달라고 했다. 만약 에러가 발생한다면 어떤 오류인지 확인한 후 에러를 수정해 달라고 하면 된다. 구현 과정은 아래 영상에서 볼 수 있다.

슈퍼베이스 회원 가입/로그인 기능 구현 및 커서에서 에러 수정 <출처: 작가>

추가로 로컬 호스트에서는 분명 문제없이 작동했는데, 배포한 후에 회원가입과 로그인이 안 되어서 확인해 보니 배포된 URL로 슈퍼베이스에서 Redirect URLs와 Emails STEMP 설정을 해야 했다. 에이전트가 안내하는 대로 세팅하고, STEMP는Brevo를 추천해 줘서 사용했다.

3) SQL 연동으로 게시글 작성 기능 구현

커서에서 슈퍼베이스 SQL 작성과 마이그레이션을 해주면 해당 코드를 복사한 후 슈퍼베이스 SQL Editor에 붙여 넣고 Run CTRL 버튼을 눌러 실행하면 된다. 커서에서 코드를 복사해서 슈퍼베이스에 옮겨놓는게 귀찮다면 커서의 Tools & Integrations 안에 New MCP Sever로 연결하면 테이블 생성이나 데이터 마이그레이션까지 자동으로 알아서 해준다.

특히 기획자 입장에서 간편하게 생성된 DB를 Database → Schema Visualizer에서 한눈에 파악할 수 있어서 좋았다. 각각의 UI 구성 요소들이 데이터 테이블과 어떻게 연결되는지 구조를 이해할 수 있어, 백엔드를 모르는 나에게는 큰 도움이 되었다.

사용자가 공구 블라인드에서 리얼 톡 내용을 작성하면 Supabase 대시보드 → Table Editor → real_talk_posts의 테이블에 새 행이 생긴다. 이렇게 사용자가 작성한 데이터가 실제로 채워지는 것을 실시간으로 보게 되는 순간이 가장 뿌듯했다.

인플루언서 검색 앱 테스트 및 리뷰 <출처: 작가>

마치며: HOW가 쉬워지면 WHY가 보인다

비즈니스의 진정한 가치는 단순한 기능의 나열이 아닌, 전반적인 고객 경험과 데이터가 유기적으로 결합할 때 비로소 빛을 발한다. 그동안 보안, 서버, SQL과 같은 백엔드 기술은 기획자에게는 넘지 못할 장벽과도 같았다. 이러한 관점에서 슈퍼베이스를 써보면서 느낀 점은 이제 백엔드의 장벽도 허물 수 있다는 것이다. 그동안은 머릿속으로만 상상했던 서비스를 쉽게 손에 잡히는 실체로 만들 수 있다. 또 다양한 AI 툴을 이용해 복잡한 데이터 구조를 이해하고 제어할 수 있게 되면서, 단순한 화면 설계서와 정책 정의서를 작성하는 차원을 넘어섰다. 앞으로 기획자는 정적인 아이디어를 동적인 프로덕트로 변화시키는 메이커로서 점점 더 진화할 것이다.

끝으로 기술 구현이 간편해진 지금, 여러 바이브 코딩 툴을 직접 사용해 보니 서비스의 본질에 더 깊이 집중할 수 있는 계기가 됐다. 앞으로도 AI 툴은 기획자 스스로가 '이 서비스가 왜 존재해야 하는지'를 증명하는 데 강력한 무기가 될 것이라 생각한다.