본문으로 건너뛰기

© 2026 Molayo

Dev.to헤드라인2026. 06. 03. 12:02

Lovable, Supabase, Claude를 사용하여 혼자서 1,334개의 챌린지가 있는 코딩 플랫폼을 구축하며 배운 점

요약

Lovable, Supabase, Claude를 활용해 1,334개의 챌린지를 가진 코딩 플랫폼을 1인 개발로 구축한 사례를 공유합니다. AI 기반 '바이브 코딩'의 속도와 함께, 인프라 설정 오류 및 논리적 버그로 인한 리스크를 경고합니다.

핵심 포인트

  • Lovable과 Supabase 연결 시 단일 프로젝트 사용 권장
  • AI가 생성한 코드의 논리적 오류는 발견이 늦어질 수 있음
  • 자동화된 이메일 스캐너를 실제 사용자 클릭으로 오해할 위험
  • Vibe coding 워크플로우의 높은 생산성과 잠재적 리스크

CodecityApp은 10개 언어에 걸쳐 1,334개의 챌린지를 보유하고 있습니다. 저는 이를 혼자서 구축했습니다. 공동 창업자도, 엔지니어링 팀도 없었습니다. 실제 사용된 기술 스택과 제가 피했을 실수들을 공유합니다.

기술 스택 (The stack)

프론트엔드(Frontend)는 Lovable에서 구동되며, 내부적으로 React + Vite + Tailwind를 사용합니다. 백엔드(Backend)는 두 개의 Supabase 프로젝트에서 실행됩니다 (왜 이것이 함정인지 나중에 설명하겠습니다). 코드 평가(Code evaluation)는 Judge0를 통해 이루어지며, IP 속도 제한(IP rate limiting)과 5초 실행 제한(execution ceiling)이 적용된 Supabase 엣지 함수(edge function)로 래핑되어 있습니다. AI 멘토는 엣지 함수로 실행되는 Claude입니다. 이메일 및 아웃리치(outreach)는 또 다른 Claude 에이전트를 통해 실행됩니다. 이는 완전히 자율적이며, 정해진 일정에 따라 실행되고 답장을 처리합니다.

저는 코드의 약 20% 정도만 직접 작성했습니다. 나머지는 Lovable 프롬프트와 직접적인 API 호출을 통해 만들어졌습니다.

두 개의 Supabase 함정 (The two-Supabase trap)

Lovable은 자체적인 Supabase 프로젝트를 자동으로 생성합니다. 저는 Lovable을 연결하기 전에 모든 엣지 함수(edge functions), 크론(crons), 이메일 인프라를 구축해 둔 운영용(production) Supabase 프로젝트를 이미 가지고 있었습니다.

결과적으로 두 개의 프로젝트를 갖게 되었습니다. 하나는 실제 백엔드 로직이 있는 프로젝트였고, 다른 하나는 Lovable이 소유한 프로젝트였습니다.

몇 달 동안 운영 환경에서 무언가를 디버깅할 때마다 대시보드에 서로 다른 숫자가 표시되었습니다. 엣지 함수가 잘못된 프로젝트에 배포되었습니다. API 키가 잘못된 데이터베이스에 연결되었습니다. 크론 잡(Cron jobs)이 한 프로젝트에서 실행되었지만 다른 프로젝트의 데이터에는 아무런 영향을 주지 못했습니다.

만약 처음부터 시작한다면: 하나의 Supabase 프로젝트를 선택하고, 첫날부터 Lovable을 그 프로젝트에 연결하세요. Lovable이 자체 프로젝트를 생성하도록 내버려 두지 마세요.

당신을 망가뜨릴 버그는 코드 안에 있지 않다

저에게 몇 주를 허비하게 만든 두 가지가 있습니다:

첫째. 챌린지 진행 시스템(challenge progression system)이 몇 달 동안 하드코딩된 상태로 열려 있었습니다. 사용자가 실제로 무엇을 완료했는지와 상관없이 모든 월드(world)에 접근할 수 있었습니다. 저는 모든 것을 완료한 제 계정으로 테스트하고 있었기 때문에 이를 전혀 발견하지 못했습니다. 실제 사용자들에게는 구조화된 경로가 없었습니다. 리텐션(Retention)이 이상하다고 느껴졌지만, 실제 세션을 관찰하기 전까지는 그 원인을 진단할 수 없었습니다.

둘째. 나의 B2B 아웃리치(Outreach) 파이프라인에는 Codecademy와 MIT OpenCourseWare를 포함한 잠재 고객들로부터 5번의 클릭이 발생한 것으로 나타났습니다. 저는 진정한 관심이 있다고 생각했습니다. 하지만 모든 클릭은 이메일 발송 후 21~33초 사이에 Microsoft Defender와 Proofpoint가 자동 링크 스캐너를 실행한 것이었으며

Vibe coding (바이브 코딩) 워크플로우는 실재하며 매우 빠릅니다. 리스크는 AI가 잘못된 것을 만드는 것이 아닙니다. 리스크는 AI가 잘못 만든 것을 훨씬 나중에야 발견하게 된다는 점입니다.

만약 여러분이 유사한 스택으로 빌드하고 있거나, 두 개의 Supabase를 사용하는 문제(two-Supabase problem)에 직면했다면, 댓글을 통해 구체적인 내용을 나누고 싶습니다.

codecityapp.com — 도시 메커니즘을 확인하고 싶다면 계정 없이도 게스트 챌린지를 이용할 수 있습니다.

AI 자동 생성 콘텐츠

본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0