이런 분에게 필요합니다
- 결제·인증을 처음부터 직접 짜고 싶지 않은 1인 개발자
- 사이드 프로젝트를 빠르게 유료로 전환하고 싶은 사람
- 클라이언트 프로젝트마다 같은 결제 로직을 반복해서 짜는 에이전시
- Stripe 기준 보일러플레이트를 한국 결제로 바꾸는 데 이미 지친 사람
결제 흐름이 실제로 안전한 이유
구매자가 결제창에서 결제를 완료하면, 브라우저가 서버에 승인을 요청합니다. 서버는 그 요청을 그대로 믿지 않고 Firestore에서 해당 플랜의 진짜 가격을 다시 조회해 클라이언트가 보낸 금액과 대조합니다. 값이 다르면 그 자리에서 거부합니다. devtools나 프록시로 결제 금액을 조작해도 이 검증을 통과할 수 없습니다. Idempotency-Key로 중복 승인도 막습니다.
인증도 같은 원칙으로 설계했습니다
흔한 스타터킷은 "로그인한 사용자 = 관리자"로 단순하게 가정합니다. 이 킷도 처음엔 그랬는데, 고객용 회원가입 화면(/login)을 추가하면서 그 가정이 무너진다는 걸 발견했습니다 — 회원가입한 아무 고객이나 매출·결제 데이터 쓰기 권한을 갖게 되는 구조였습니다.
그래서 관리자 여부를 로그인 상태가 아니라 Firestore의 admins 컬렉션 화이트리스트로 판별하도록 바꿨습니다. 관리자 화면(/admin)과 고객 화면(/login)도 물리적으로 분리했습니다 — 카카오·네이버 로그인은 고객이 쓰는 수단이지, 운영자가 자기 대시보드에 들어갈 때 쓰는 수단이 아니기 때문입니다.
포함된 것
- Next.js 16(App Router) + TypeScript + Tailwind CSS 4
- Firebase Auth — 이메일/비밀번호, Google, 카카오, 네이버(전부 실제 동작하는 커스텀 토큰 브릿지)
- 토스페이먼츠 결제 흐름 — 카드·카카오페이·계좌이체 등 결제창에 뜨는 방식 그대로, 서버 승인까지
- Firestore 보안 규칙 — 가격 플랜 읽기/쓰기, 결제 기록 스키마 검증, admins 컬렉션 화이트리스트로 관리자 판별
- 관리자(/admin)·고객(/login) 로그인 화면 분리 — 회원가입한 고객이 관리자 권한을 갖지 못하도록 설계
- 가격 플랜이 뜨는 데모 랜딩 페이지
포함되지 않은 것
서비스마다 요구사항이 달라서 직접 채워야 하는 부분입니다.
- 결제 완료 후 실제로 무엇을 잠금 해제할지의 로직 (서비스마다 다름)
- 정기결제(구독) 자동 청구 — 이 킷은 1회성 결제까지만, 확장 방법은 README에 안내
- 실제 이용약관/개인정보처리방침 문구
- 구매 확인 이메일 발송
라이브 데모
kr-saas-kit.vercel.app에서 실제로 로그인·회원가입·결제창까지 눌러볼 수 있습니다. Firebase/토스 테스트 키가 붙어있어서 실제 데이터로 동작하며 (실결제는 안 일어남), /login에서 카카오·네이버·Google 로그인도 직접 확인하실 수 있습니다.