2026멤버십 커머스 — 구독 플랫폼
JENGIO
설명
멤버십 커머스 — 구독 플랫폼
기간
Apr 2026 - Jun 2026
역할
- 구독 커머스 플랫폼 전체 기획 및 UI/UX 디자인.
- Stripe 4단계 구독 결제·비례정산·웹훅·고객 포털 등 결제 시스템 풀스택 연동 구현.
- Prisma·Supabase 데이터 모델링, 디렉토리·스토어프론트·관리자 결제 패널 개발 및 Vercel 배포 운영.
기술
Frontend
Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS
Backend
Prisma ORM · Supabase (PostgreSQL · Storage · Auth) · Zod
Payments
Stripe (Checkout · Webhook · Customer Portal)
Ops
Resend · Vercel
프로젝트 목적
JENGIO(젠지오)는 흑인 소유 비즈니스를 위한 'Digital Black Wall Street' 멤버십 커머스 플랫폼입니다. 비즈니스가 구독에 가입·결제하고 관리자 승인을 거쳐 디렉토리에 노출되는 D2C 모델로, 노출 자체가 상품입니다. 결제 가입부터 노출·구독 관리·해지 방어까지 커머스 라이프사이클 전체를 자동화해, 운영에 스프레드시트가 필요 없게 만드는 것이 목표였습니다.
범위
- · 구독 커머스 플랫폼 UI/UX 기획 및 디자인
- · Next.js 풀스택 개발
- · Stripe 4단계 구독 결제·비례정산·웹훅·고객 포털 연동
- · 스토어프론트·디렉토리 및 관리자 결제/구독 관리 패널
주요 기술 특징
4단계 구독 커머스
- · Founding($9)·Standard($29)·Premium($99)·Partner($199) 멤버십을 Stripe Checkout으로 구현했습니다.
- · 플랜 변경 시 create_prorations 기반 비례정산과 예약 변경(pendingTier)을 클릭 시점이 아니라 invoice.paid 시점에 자동 반영합니다.
결제 라이프사이클 자동화
- · checkout.session.completed · subscription.updated/created/deleted · invoice.paid 웹훅을 처리해 구독 상태와 결제 주기를 DB와 동기화합니다.
- · Stripe Customer Portal로 사용자가 직접 결제수단·구독을 관리하게 해, CS 큐 하나를 통째로 없앴습니다.
스토어프론트·검색형 디렉토리
- · 결제·승인된 비즈니스가 로고·갤러리 스토어프론트로 노출됩니다.
- · 이름·도시·우편번호·카테고리 필터로 탐색되며, 이미지는 Supabase Storage로 업로드·관리됩니다.
관리자 커머스 콘솔
- · Leads · Listings · Subscriptions · Cancellations · Verification · Members · Dashboard.
- · 구독 동기화·결제 점검 등 커머스 운영을 세션 또는 x-admin-key API로 처리합니다.
디자인 포인트
전환 중심 요금제 UX
4단계 요금제는 상대적 가치가 한눈에 보일 때만 전환됩니다. 비교와 가입→결제 동선을 두 화면이 아니라 하나의 연속된 움직임으로 설계했습니다.
신뢰와 리텐션
'Real MyCOY' 검증 배지와 해지 방어(Cancellation Retention) 플로우로, 구독 비즈니스가 실제로 돌아가는 두 축인 가입 시 신뢰와 이탈 시 마찰을 강화했습니다.
프로젝트 보기웹사이트 방문 →