바이브 코딩으로 백엔드 구현, 어디까지 가능할까?
Supabase로 워렌버핏의 인사이트 긁어오는 서비스 백엔드 구현하기
우선 저는 개발이라곤 html, css 만 아는 문송이입니다.
대학생 때는 멋사(멋쟁이 사자처럼)도 했지만, 여전히 개발에 대해 무지한 무지렁이였는데요.
스타트업에서 사업개발을 하며, 클러드로 장표도 만들고 제품 목업도 만들다보니 '어라라 프론트는 확실히 잘만들겠다' 싶은 와중, 바이브 코딩에 대한 후기들이 쏟아져나오는 걸 보며 저도 호기롭게 도전!을 외쳤습니다.
그렇게 평소에 관심 가져왔던 '투자 대가에게 투자 점수 받아보기' 서비스를 개발해보기로 했습니다. 간단히 설명하자면, 투자 대가들(eg. 워렌버핏)이 평소 주주서한이나 인터뷰 등에서 중요하게 언급한 종목을 평가하는 기준들을 가지고, 대가별로 종목별 점수를 매겨주는 서비스입니다.
이건 제가 주식에 대해 판단하기 어려울 때 '아 몰랑 버핏아저씨한테 물어볼래'라고 하며 자주 써먹었던 방법인데요. 저는 판단하기 어려워도 제가 공감할 수 있는 투자 기준을 가진 아저씨가 판단해주는 걸 따라하는 건 쉬우니까요. 예를 들자면 이런식입니다. (instruction에 버핏점수 계산해달라고 하면 계산하는 법을 모두 넣어두었어요)
이걸 서비스로 구현하면, 나처럼 버핏 아저씨의 도움이 필요한 이들을 모두 부자로 만들어줄 수 있지 않을까? (라기엔 제가 부자가 아니라 모순이 있지만) 라는 생각으로 서비스 기획을 시작했습니다. 이게 위에 값들을 보시면 아시겠지만, 무조건 어디선가 값을 불러와야하는 것들이라 프론트만 구현할 수가 없는 서비스였는데요.
저는 다음의 과정으로 진행했습니다.
1. 개발, 디자인 관련 툴 테스트 및 결정
2. 기획 문서 작성
3. 디자인
4. 개발
- 총 일정: 주 3시간씩 투입, 약 1개월 소요
(1) 개발, 디자인 관련 툴 테스트 및 결정
Supabase(백엔드·Auth·DB) + Vercel(배포) + VS Code(편집기) + Gemini(코딩 보조)
여러 조합을 검색해봤을 때 비개발자라면 cursor.ai가 적합하지 않다는 이야기가 많아 대안을 찾아보던 중 supabase를 추천하는 글을 다수 목격했습니다.
검증을 위해 claude, perplexity와 씨름을 해봤을 때 백엔드를 구현할 때 툴이 없이 직접 모든 폴더구조를 짜고, 구현하는것은 개발 이해가 없는 입장에서 거의 불가능하다고 느껴서 supabase의 도움을 받기로 했습니다. 기본적인 코드 작성은 claude가 코딩을 잘한다고 하여 고민했지만, 자꾸 용량 제한에 부딪혀서 (모델이슈) gemini를 택했습니다.
(2) 기획 문서 작성
아니 어차피 혼자하는 프로젝트고, 머릿속에 구성이 있으면 되는데 뭔 기획문서야. 하실 수도 있는데
이건 대화의 길이가 길어져 gemini가 헛소리를 하더라도, 바로 새 채팅을 만들어 개발을 이어갈 수 있어야하기 때문에 꼭! 꼭! 꼭! 필요합니다.
다음과 같이 계획을 수립하고, 유사 서비스를 서치하고, 이를 기반으로 초기 기획 문서를 제작했는데요.
개요, 서비스비전, 프로젝트 구조, 디자인 컨셉, 메인화면 레이아웃 및 기능 명세, 백엔드 DB 구조 (어디서 데이터 받아올건지)를 포함해서 제작했습니다. (원하시면 댓글 남겨주시면 해당 템플릿 공유드릴 수 있습니다.)
이렇게 기획 문서를 작성하며, 여러 대가의 데이터의 수치를 받아오는게, 모든 주식 종목의 점수를 확인하는게 불가능하다는 것을 깨닫고(종목을 추천하는게 리스크가 있다는 것도) 종목을 10개로 한정하고, 대가도 1명- 워렌버핏으로 좁혀 기획하였습니다. 그래서 'ASK GURU'라는 페이지가 기획됐습니다.
*투자와 관련되어있다보니 얽혀있는 법적 이슈들도 많이 안내받을 수 있었고 프롬프터에 관련 내용을 입력해두니 기획문서에 해당 내용도 추가되었습니다.
기획은 크게 4가지 파트로 구성되어있었습니다.
- 원하는 종목의 워렌버핏 점수를 조회해보는 부분
- 시장에 대한 워렌버핏의 점수를 확인하는 부분
- 워렌버핏의 명언이 카드 형태로 넘어가는 부분
- 워렌버핏 굿즈로 넘어가는 부분
디자인을 고려해서 이를 재배치하고, 개발을 진행하며 기능을 계속 수정해나갔습니다.
(3) 디자인
우선 롱스토리 숏으로 말씀드리자면, 전 유니크한 디자인을 원했는데, 모든 디자인들이 너무... 천편일률적이었습니다. 기능이 제한된 마당에 디자인이라도 눈에 띄게 하고 싶었는데, claude, gemini, 심지어는 figma ai가 주는 디자인들이 모두.. 마음에 들지 않았습니다.
그래서 디자인도 못하는게, Figma를 열어 냅다 디자인했습니다. 이걸 코드로 바꿔주는건 Figma가 잘하더군요. Gemini나 다른애들은 자기가 원하는 스타일이 있는지 꼭 그 스타일로 바꿔놓았습니다. 몇 번 싸울뻔 했습니다.
전 사실 백엔드 구현까지 다 하고 위의 이미지처럼 디자인, 구성을 한 번 갈아 엎었더니 계속 오류가 생겨서 기존 기능에서 디자인을 수정하는 방향으로 했더니 우측 이미지까지는 됐습니다. 가능하면 저같은 비개발자분들은 (1) ~(4) 이 순서를 지키시는게 편할 것 같습니다. 이렇게 비교해보니 폰트 사이즈나 세부적인 것들은 많이 무너졌네요 ㅎㅎ
(4) 개발
원래라면 주가·ROE 같은 지표를 업데이트하는 서비스를 만들려면, DB(Postgres 등) 구축, 인증·로그인 구현, 권한관리, 외부 API 호출·키보호, 캐시·스케줄러(크론잡), 지표 계산 로직, 배포·모니터링까지 각각 다른 도구와 서버를 조립해야 합니다. 하지만 Supabase는 이 모든 것을 한곳에서 제공해요. 즉, 데이터 저장(Postgres), 로그인/권한(RLS), 외부 API 연결은 Edge Function, 주기적 업데이트는 Scheduler, 실시간 반영은 Realtime 기능으로 해결되므로, 별도 백엔드 지식 없이도 주가·재무지표를 안전하고 자동으로 수집·계산·제공할 수 있다는 점에서 적합합니다.
라고 chat-gpt가 이야기해서, supabase를 택했는데요. 저 같은 경우는 Alphavantage에서 주식 관련 값들을 받아와야하는게 있었는데 Edge Function에 필요한 코드를 쓰고 필요한 설정을 하는 모든 과정을 gemini가 정말 잘 알려주더라구요. 전체 과정을 설명하고 그 중 지금 어떤 과정인지, 그래서 당장 해야하는게 무엇인지를 정리해서 알려달라고 하면 비개발자가 이해할 수 있게 알려줍니다.
친절한 제미나이기타 팁
아마 AI로 코딩을 하겠다고 결심하신 분들은 모두 아시겠지만, 위의 각 단계마다 다르게 역할을 부여해야 제대로된 결과물이 나옵니다. 디자인할 땐 "~~~이런 서비스의 시니어 디자이너", 기획할 땐 "바이브 코딩으로 이번 프로젝트를 진행해야하는 신사업 PO"같이 구체적으로 디렉션을 주려고 노력했습니다.
결과물
음,, 결과물이라기엔 아직 수정의 과정을 거치고 있는데요.
수치가 의도한대로 나오지 않는 것 같고, UIUX도 아직 좀 아프지만 궁금하신 분들은 다음의 링크에서 확인하실 수 있습니다! 업데이트 되는대로 또 찾아오겠습니다.
https://ilovebuffet-web.vercel.app/
그럼 추가 개발기로 다시 찾아오겠습니다.
