[Claude Code] AI 피드백 앱에 결제 붙이기: 로그인·DB·TossPayments까지 AI랑 3일

📝 한줄 요약

AI 피드백 기능을 무료로 풀 수 없어서 유료화가 필요했고, Claude Code와 3일 만에 로그인·DB·결제까지 갖춘 실제 배포 가능한 서비스를 완성했습니다.

바쁘시면 이것만 읽어도 돼요:

• Claude Code로 TossPayments 결제 + Supabase DB + Google 로그인까지 3일 만에 구현

• "코드 짜줘" 대신 "기획부터 해줘"라고 하면 AI가 내가 모르던 버그까지 먼저 잡아냄

• 환경변수에 보이지 않는 개행문자가 섞여서 결제 401, 500이 동시 터지는 황당한 버그도 AI가 base64까지 뜯어서 원인 찾아줌

• 기존에 다른 프로젝트에서 쓰던 DB를 재사용했지만, AI가 실제 상태를 확인하고 결제 이력 테이블 등 누락된 부분을 보강해줌

• 이제 카카오 로그인 + 모바일 최적화 예정

🎯 이런 분들께 도움돼요

• AI로 직접 서비스를 만들어보고 싶은 비개발자

• 결제·로그인·DB를 붙여야 하는데 어디서 시작할지 모르는 분

• Claude Code를 더 잘 쓰고 싶은데 "코드 짜줘" 말고 다른 방법이 있는지 궁금한 분

😫 문제 상황 (Before)

학생들이 배운 내용을 직접 설명하면서 메타인지를 키우는 앱을 만들었습니다. 핵심은 AI 피드백 — 학생이 개념을 설명하면 AI가 "잘 이해했어요 / 이해 중이에요 / 더 공부가 필요해요"로 평가해 주는 기능이었는데, 문제가 생겼습니다.

AI 피드백을 무료로 풀 수가 없었습니다. 요청할 때마다 API 비용이 발생하는 구조라, 아무나 무제한으로 쓰게 두면 비용이 감당이 안 되는 상황이었습니다. 유료화가 필요했지만 막막했습니다. 결제 시스템도, 제대로 된 DB도, 로그인도 없었거든요.

당시 앱 상태:

• 데이터가 브라우저 메모리에만 저장 → 폰으로 접속하면 기록이 날아감

• 로그인은 버튼 누르면 그냥 로그인된 척하는 가짜 구현

• 결제 기능 없음

이 상태로는 절대 실제 서비스를 출시할 수 없었습니다.

🛠️ 사용한 도구

• 도구: Claude Code

• 모델: Claude Sonnet 4.6

• 방식: GSD(Get Shit Done) 워크플로우 — AI가 직접 기획·검토·구현까지 단계별로 진행

🔧 작업 과정

결제부터 붙이기 — "기획해줘"라고 했더니 버그를 먼저 잡았다

가장 먼저 해결해야 할 건 결제였습니다. AI 피드백을 구독제로 만들어야 했으니까요. Claude Code에 TossPayments 공식 문서를 참고 자료로 건네고 상황을 설명했습니다.

이 문서를 참조해서 결제 기능을 추가하려고 합니다.

현재 프로젝트: 중고등학생들이 배운 개념을 기록하고 AI 피드백으로 메타인지를 키울 수 있는 웹서비스
결제할 상품: AI 피드백 무제한 월정액 구독, 월 6,900원
현재 기술 스택: Next.js, Vercel 배포

요구사항:
- 별도 서버 없이 API Route로 구현
- 결제 시 secret key가 노출되지 않아야 합니다

Claude Code는 바로 코드를 짜기 시작하지 않았습니다. GSD 워크플로우 덕분에 먼저 구현 계획을 세우고, 그 계획을 세 단계로 검증했습니다. 구현자 → 스펙 리뷰어 → 코드 품질 리뷰어.

이 과정에서 내가 전혀 몰랐던 버그들이 미리 발견됐습니다.

• Vercel의 자동 결제 스케줄러는 반드시 GET 방식이어야 한다 — 처음 코드를 POST로 짰는데, 검토 단계에서 잡아냄. 그대로 냅뒀으면 자동결제가 영원히 실행 안 됐을 것

• 월말에 결제일이 이상하게 밀리는 버그 — 1월 31일에 가입하면 다음 결제일이 3월 3일이 되는 JavaScript 특유의 날짜 버그. 검토 단계에서 발견해서 보정 로직을 미리 추가

• 이미 구독 중인데 또 결제되는 버그 — 중복 결제 방지 로직이 빠져 있었는데 역시 검토 단계에서 차단

결국 카드 등록 → 첫 결제 → 매월 자동 청구 → 구독 관리/해지까지 전체 결제 플로우가 구현됐습니다.

DB와 로그인 붙이기 — 기존 걸 가져왔더니 AI가 "이건 아직 부족해요"라고 했다

결제 다음은 DB와 로그인이었습니다. 다른 프로젝트에서 쓰던 Supabase DB가 있어서 그걸 가져왔는데, Claude Code가 먼저 실제 상태를 확인했습니다.

이제 Supabase에 DB를 어떻게 설계해야 하는지 계획을 작성해주세요.

Claude Code가 DB를 직접 들여다보고 보고한 내용:

• 사용자 정보, 과목, 학습 일지, 구독 테이블 — 이미 있음

• Google 로그인 설정 — 이미 되어 있음, 실제 로그인한 계정도 2개 있음

• 하지만 결제 이력 테이블이 없었음 — "누가 언제 얼마를 결제했는지" 기록이 전혀 안 되는 구조

이 부분이 핵심이었습니다. 결제 시스템이 있어도 이력이 없으면 환불 요청이나 결제 오류가 생겼을 때 아무것도 추적할 수 없습니다. Claude Code의 설명:

"결제 성공 후 DB 저장이 실패하는 케이스가 실제로 발생합니다. 이걸 추적하려면 모든 결제 시도를 이력으로 남겨야 합니다. 최신 상태만 저장하면 과거 이력이 사라집니다."

결제 이력 테이블을 새로 추가했고, 기존 DB 구조에서 성능 문제가 될 수 있는 부분도 함께 최적화했습니다.

중간에 흥미로운 결정도 있었습니다.

과목은 중복이어도 실제 회고하고 싶은 주제는 다를 수 있어

원래 DB에는 "하루에 같은 과목으로 일지를 하나만 쓸 수 있다"는 제한이 걸려 있었습니다. 수학 수업에서 이차방정식과 함수의 그래프를 각각 회고하고 싶을 수 있는데, 이 제한이 막고 있었던 것이죠. 한 마디 했더니 바로 제거됐습니다.

Vercel 배포 — 환경변수에 숨어있던 개행문자

DB와 결제까지 완성됐으니 배포할 차례였습니다. 근데 배포하자마자 여러 기능이 동시에 터졌습니다. 카드 등록 안 됨, 결제 안 됨, 로그인 안 됨.

에러 메시지는 제각각이었는데 Claude Code가 Toss 서버 응답을 base64로 해독하기 시작했습니다.

500: INTERNAL_SERVER_ERROR
Code: MIDDLEWARE_INVOCATION_FAILED

해독 결과:

test_ck_KNbdOvk5rkyE2qm0gRAz3n07xlzm[개행문자]:

API 키 끝에 보이지 않는 개행문자(\r\n)가 붙어 있었습니다. Vercel에 환경변수를 등록할 때 쓴 방식이 문제였는데, echo 명령어가 값 뒤에 자동으로 줄바꿈을 추가하는 특성이 있었던 것입니다. 눈에는 안 보이지만 서버 입장에선 전혀 다른 키로 인식하는 것이죠.

이것만으로 카드 401, 결제 500, AI 피드백 차단이 동시에 설명됐습니다. 올바른 방식으로 재등록했더니 한 번에 해결됐습니다.

또 하나의 버그도 있었습니다. 구독을 해지하면 원래 기간이 끝날 때까지는 AI 피드백을 계속 쓸 수 있어야 하는데, 해지하자마자 바로 차단되는 문제였습니다. 코드의 조건 판단 로직에서 "해지됨"을 "사용 불가"와 같게 처리하고 있었는데, 이것도 수정됐습니다.

✅ 결과 (After)

Before vs After

결과물

3일 만에 실제 사용자에게 보여줄 수 있는 서비스가 됐습니다. 로그인하고, 학습 일지를 쓰고, 구독하면 AI 피드백을 받을 수 있는 전체 플로우가 작동합니다.

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. "코드 짜줘" 대신 "기획해줘"부터 시작하기 GSD 워크플로우처럼 AI에게 먼저 계획을 세우게 하고, 그 계획을 여러 단계에서 검토하게 했더니 내가 생각도 못 한 버그들이 구현 전에 걸러졌습니다. Vercel 자동결제 방식 문제, 월말 날짜 버그, 중복 결제 — 이 셋 모두 코드를 한 줄도 짜기 전에 잡혔습니다.

2. 현재 상태를 먼저 확인시키기 "이렇게 만들어줘" 전에 "지금 있는 거 먼저 봐줘"를 하면 예상치 못한 발견이 생깁니다. 기존 DB를 가져왔을 때 결제 이력 테이블이 없다는 걸 AI가 먼저 짚어준 게 대표적입니다.

이렇게 하면 안 돼요

1. 에러 메시지를 그냥 넘기지 말기 처음에 카드 등록 401이 떴을 때 "뭔가 잘못됐겠지"하고 다른 것부터 할 뻔했습니다. Claude Code가 base64까지 직접 파고들어 개행문자를 찾아낸 것처럼, 이상한 에러일수록 AI에게 원인부터 파고들게 시키는 게 낫습니다.

2. 기존에 있는 걸 무조건 믿지 말기 예전에 만들어둔 DB라도 현재 필요에 맞는지 다시 검증해야 합니다. 있다고 그냥 쓰다가는 결제 이력 같은 중요한 부분이 빠진 채로 운영하게 됩니다.

🌍 다른 업무에 적용한다면?

• 멤버십 서비스: AI 기능, 프리미엄 콘텐츠, 전문가 상담 등 유료화가 필요한 서비스라면 같은 방식으로 결제를 붙일 수 있습니다

• 기존 프로젝트 업그레이드: "이미 만든 게 있는데 결제나 로그인을 추가하고 싶다"면 기존 구조를 AI에게 먼저 분석시키는 것부터 시작하세요

• 데이터 관리가 필요한 앱: 노트, 일정, 포트폴리오 등 데이터를 브라우저에만 저장하고 있다면 Supabase 이관을 고려해볼 수 있습니다

🚀 앞으로의 계획

• 카카오 로그인 추가: Google 외에 카카오로도 로그인할 수 있게

• 모바일 최적화: 학생들이 주로 폰으로 접속할 테니 모바일 UX 개선