만들고자 한 서비스
한국에 다양한 가구 형태가 생기면서 룸메이트 등 가족이 아닌 사람과 함께 사는 경우가 늘었다. 나도 룸메이트와 살 때 작은 금액이나 다음 달 공과금 정산이 미묘하게 감정 쓰이고, 스트레스 받고, 관리도 안 됐다. 이런 문제를 해결할 솔루션이 필요하다고 느꼈다. 그래서 이전부터 생각해오던 다음과 같은 서비스를 이번 스터디를 계기로 구현해보기로 했다.
서비스 "N빵"
룸메이트 간 생활비 정산을 카톡+계산기+엑셀로 처리 시 소액 누락, 스트레스, 실수 및 갈등 발생.
이를 앱으로 자동화하고 정산 과정을 단순화하는 것이 목표.
개요
타깃: 한국에서 함께 사는 2~4인 룸메이트(가족 제외)
주요 기능(MVP):
이메일 매직링크 로그인(Supabase Auth)
그룹 생성 및 초대(최대 4명)
지출 즉시 균등분할, 주/월 정산 및 기록
후순위 기능: OCR 영수증 인식, CSV/PDF 내보내기 등
진행 방법
Chapter 1: 기획 재정비
PRD 리메이크 및 부스터 태스크 생성
지난주 Vooster로 만든 PRD가 마음에 안 들어서 몇 번을 반복했는데, 결국 지피티로 써서 대체했다.
간단하게 질문으로 만들 수 있는 점은 좋지만, 만들고자 하는 서비스의 형태가 정확히 머리에 있는 나로서는 부스터로 하면 조금.. 과해지고 없는 디테일이 생긴다.
그렇게 다시 만든 PRD를 베이스로 부스터에서 TRD와 태스크를 생성하려고 했는데... 태스크를 만들 때 마다 부스터가 멈춘다🔥
사용자가 늘어나서 그런지 태스크 만들기에서 계속 막혔다. 여차저차 커서에는 들어갔는데 웹에 있는 태스크 개수와 커서에 있는 개수가 다른 현상 발생 ㅎ 뭐 돌아는 가니까 일단 시작.
Chapter 2: Cursor 연동과 낯선 개념들
MCP 연동으로 Cursor 연결
Task 1은 딸깍이 안 됐다. 직접 해야 하는 부분이 많아서 진짜 많이 막혔다.
너무 낯선 개념들을 이해하려고 끙끙댔다
뭔가 막히거나 무슨 말인지 모르겠으면 → GPT한테 물어보기를 N번 반복하는 패턴이 시작됐다.
내가 AI한테 시키는건지, 얘가 나한테 시키는건지... 어쨌든 성실하게 시키는대로 찾아서 이것저것 깔고 터미널 커서 왔다갔다 했따.
세팅 과정
세팅과정을 요약하자면 다음과 같다
로컬 개발환경 세팅
npx create-next-app으로 Next.js + TS 프로젝트 생성.Tailwind, ESLint 기본 포함 템플릿 사용.
.env.local생성 필요성 파악 → Supabase URL/anon 키 등 환경 변수 개념 이해.
test-supabase.tsx페이지 만들어 Supabase 연결 확인 준비.Supabase 세팅
Supabase 프로젝트 생성, URL & anon 키 확보.
DB 연결 테스트 (/test-supabase).
테이블 만들기 중
relation "groups" already exists에러 → 기존 테이블 존재 확인.
select count(*)로 groups/expenses 테이블 상태 확인.(RLS/정책/다른 테이블) 생성 SQL 가이드 받음.
로컬 서버 & 디버깅
npm run dev실행 → 포트 충돌(3000 사용 중) → 3001로 자동 전환.404, ERR_FILE_NOT_FOUND, Module not found(@supabase/supabase-js) 등 에러 해결: 파일 위치/패키지 설치 확인.
“String contains non ISO-8859-1 code point” 등 헤더 관련 오류 경험.
Tailwind 적용 확인 위해
index.tsx에<div className="text-blue-500 font-bold">Hello Tailwind!</div>삽입.Git & GitHub
git init, 첫 커밋, 원격(origin) 추가.PAT 발급/인증 문제로 push 실패 → 토큰 유출 → 폐기 & 재발급 후 push 성공.
git push -u origin main성공, GitHub에 코드 업로드 완료.Vercel 배포 준비
Vercel에서 프로젝트 Import 시도.
환경 변수 Key 네이밍 오류(하이픈 등)로 “invalid characters” 에러 → 올바른 형식 안내 받음.
Env Vars 설정 과정 진행 중 (URL/anon key 넣기 & Redeploy 필요).
가입하라는 대로 이것저것 하다가 나중에서야 무슨 역할인지 알게 되었는데
내가 사용하게 된 것은 다음과 같다
ㅎㅎ Vercel은 진짜 뭐하는건지 몰랐음
Chapter 3: 딸깍
그 다음은 그냥 클릭만 했다.
무한 ㄱㄱ
태스크 하나당 딸깍 몇번에 다 되던데 이게 맞나.. 나중에 디버그 빡세겠다 생각했다.
결과와 배운 점
구현된거 어떻게 보나 하고 찾아보다 도메인 넣으라기에 넣고 연결되기를 기다리는 중!
디버그 할 생각 에 떨리고 무섭고 그래요 과연 어떻게 구현되었을지..!
