개발자가 Next.js 16 + Supabase + Stripe를 조합하여 월 호스팅 비용 $0으로 실제 운영 중인 선납형 리드 마켓플레이스 구축

Context

청부업체를 위한 서비스 리드 마켓플레이스를 구축할 때 동시성 제어, 다언어 지원, 실시간 활동 표시 등 여러 아키텍처 문제를 해결해야 했다.

Technical Solution

• 최대 3개 계약업체의 동시 리드 구매를 허용하고 취소 시 슬롯 재개방: Supabase에서 기존 lead_purchases 레코드를 조회 후 3개 이상이면 409 상태 반환
• 조건부 로직이 있는 4단계 다단계 폼 구현: 선택된 서비스 유형에 따라 2단계의 질문 항목이 변경되며 Server Component로 SEO, Client Component로 FR/EN 이중언어 지원
• Supabase Realtime Presence 채널로 실시간 방문자 수 표시: presence.sync 이벤트로 presenceState()의 객체 키 길이를 방문자 수로 변환
• Stripe 웹훅 멱등성 처리: checkout.session.completed 이벤트에서 기존 lead_purchases 레코드 존재 여부 확인 후만 처리, 라이브/테스트 모드별 서명 비밀키 관리
• 초기 트래픽 없을 때 사회적 증거 표시: /api/recent-leads에서 실제 최근 리드를 가져오고 없으면 무작위 계약업체 지역별 알림으로 폴백
• In-Memory 기반 Rate Limiting 구현: Redis 없이 Map 자료구조로 리드 제출 5회/분, 계약업체 등록 3회/분 제한
• Next.js 16에서 동적 라우트 params를 Promise<{id: string}>로 변경: await params로 ID 값 추출 필요

Impact

총 호스팅 비용 $0/월 유지(모든 서비스 무료 티어 사용), 30개 이상의 가이드 아티클로 "coût installation borne de recharge Québec" 같은 롱테일 키워드 타겟팅

Key Takeaway

초기 단계의 마켓플레이스에서는 Redis나 별도 인프라 없이 In-Memory 구조로 기본 요구사항(Rate Limiting, Realtime 활동)을 충족할 수 있으며, 실제 사용자 활동이 없을 때는 수치를 조작하지 않으면서 관련 실제 데이터를 창의적으로 노출하는 것이 중요하다.