만들고자 한 서비스
한국에 다양한 가구 형태가 생기면서 룸메이트 등 가족이 아닌 사람과 함께 사는 경우가 늘었다. 나도 룸메이트와 살 때 작은 금액이나 다음 달 공과금 정산이 미묘하게 감정 쓰이고, 스트레스 받고, 관리도 안 됐다. 이런 문제를 해결할 솔루션이 필요하다고 느꼈다. 그래서 이전부터 생각해오던 다음과 같은 서비스를 이번 스터디를 계기로 구현해보기로 했다.
서비스 "N빵"
룸메이트 간 생활비 정산을 카톡+계산기+엑셀로 처리 시 소액 누락, 스트레스, 실수 및 갈등 발생.
이를 앱으로 자동화하고 정산 과정을 단순화하는 것이 목표.
개요
타깃: 한국에서 함께 사는 2~4인 룸메이트(가족 제외)
주요 기능(MVP):
이메일 매직링크 로그인(Supabase Auth)
그룹 생성 및 초대(최대 4명)
지출 즉시 균등분할, 주/월 정산 및 기록
후순위 기능: OCR 영수증 인 식, 화폐단위 변경, 다국어 대응 등
진행 방법
Chapter 1: 기획 재정비
PRD 리메이크 및 부스터 태스크 생성
지난주 Vooster로 만든 PRD가 마음에 안 들어서 몇 번을 반복했는데, 결국 지피티로 써서 대체했다.
간단하게 질문으로 만들 수 있는 점은 좋지만, 만들고자 하는 서비스의 형태가 정확히 머리에 있는 나로서는 부스터로 하면 조금.. 스콥이 커지고 과해지고 없는 디테일이 생긴다.
그렇게 다시 만든 PRD를 베이스로 부스터에서 TRD와 태스크를 생성하려고 했는데... 태스크를 만들 때 마다 부스터가 멈춘다🔥
Splitn Dashboard 프로젝트 진행 상황을 한눈에 확인하십시오
Adobe Acrobat에서 작업의 스크린 샷
사용자가 늘어나서 그런지 태스크 만들기에서 계속 막혔다. 여차저차 커서에는 들어갔는데 웹에 있는 태스크 개수와 커서에 있는 개수가 다른 현상 발생 ㅎ 뭐 돌아는 가니까 일단 시작.
어쨌든 부스터에도 반영은 됨
어쨌든 부스터에도 반영은 된다.
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: 딸깍
그 다음은 그냥 클릭만 했다.
무한 ㄱㄱ
태스크 하나당 딸깍 몇번에 다 되던데 이게 맞나.. 나중에 디버그 빡세겠다 생각했다.
검은 색 화면에서 한국어 설정의 스크린 샷
결과와 배운 점
구현된거 어떻게 보나 하고 찾아보다 도메인 넣으라기에 예전에 다른 용도로 사뒀던 것 임시로 넣고 연결되기를 기다리는 중!
디버그 할 생각에 떨리고 무섭고 그래요 과연 어떻게 구현되었을지..!
DNS 레코드는 도메인의 DNS 레코드를 업데이트합니다
사용자 정의 DNS- DNS 서버를 구성하는 방법
