[Claude Code] 결제창이 떴다 — 오류가 나도 괜찮아, Claude와 함께한 결제 연동 도전기

📝 한줄 요약

부트캠프 3주차 미션으로 결제 연동에 도전했다. 오류가 연속으로 터졌지만, Claude가 매번 원인을 찾아서 설명해줬고, 결국 내 사이트에서 실제 결제창이 떴다.

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

• Claude Code로 토스페이먼츠 결제 + Supabase DB 자동 저장 연동 구축

• 오류가 나면 포기하지 말고 Claude에게 오류 메시지 그대로 보여주기

• 환경변수 위치, DB 설계와 코드 일치 — 이 두 가지가 결제 연동의 핵심 함정

• 배포가 막혀도 다른 방법이 반드시 있다 (GitHub 웹에서 직접 수정하면 해결됨)

• 결제창이 뜨는 순간의 감동은 설명하기 어렵다 — 직접 경험해야 안다

• 완전히 이해 못 해도 괜찮다. 오늘의 오류가 내일의 주의사항이 된다

🎯 이런 분들께 도움돼요

• AI로 뭔가 만들어봤는데 오류가 나면 바로 포기했던 분들

• 사이트는 만들었는데 실제 결제를 받고 싶은 1인 창업자, 소상공인

• 부트캠프 결제 연동 단계가 두렵게 느껴지는 분들

😫 문제 상황 (Before)

사이트는 만들었다. 소상공인 홈페이지를 기획하고, 직접 배포까지 했다. 그런데 한 가지가 빠져 있었다. 돈을 받는 기능.

결제하기 버튼을 누르면 카카오 채널로 연결됐다. 고객이 "결제하고 싶다"고 해도 직접 연락을 받아서, 계좌번호를 보내고, 입금을 확인하고, 수동으로 기록해야 했다. 사이트가 있어도 결제는 여전히 수작업이었다.

부트캠프 3주차 미션이 바로 이 문제를 해결하는 것이었다. 토스페이먼츠 결제창 연동, 결제 완료 시 Supabase DB 자동 저장까지. 진행 순서는 있었지만, 전반적으로 많이 힘들었다. 현장에서 실습을 함께 했다면 훨씬 좋았을 텐데 — 그 아쉬움이 오늘 내내 남았다.

🛠️ 사용한 도구

• Claude Code (claude.ai/code)

• 모델: Claude Sonnet 4.6

• 결제: 토스페이먼츠 SDK

• DB: Supabase

• 배포: Vercel + GitHub

🔧 작업 과정

DB 설계 — "무엇을 저장할지 먼저 그려보자"

결제가 완료되면 어떤 정보를 저장해야 할까? 막연했다. 그래서 Claude에게 먼저 물었다.

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

Claude는 4개의 테이블로 정리해줬다. 누가 결제했는지(고객), 무엇을 결제했는지(주문), 결제 상세 내역(결제), 그리고 홈페이지 제작이 어느 단계인지(프로젝트). 도표로 관계도까지 그려줬다.

그리고 바로 Supabase에서 실행할 수 있는 SQL 파일도 만들어줬다. Supabase 대시보드 → SQL Editor에 붙여넣고 실행하니 "Success. No rows returned" — 테이블 4개가 한 번에 생성됐다.

결제 버튼 연결 — "버튼 하나가 이렇게 복잡한 일을 한다고?"

기존 사이트의 결제하기 버튼은 카카오 채널 링크였다. 이걸 토스 결제창으로 바꿔야 했다.

B. 결제하기라고 항목 버튼이 만들어져 있어. AI-MARKET에 합쳐줘.

Claude가 처리한 작업이 꽤 많았다. 결제 SDK 설치, 결제 완료 후 이동할 페이지 2개 생성, 서버에서 결제를 검증하는 경로 설정, DB 저장 로직 연결, 기존 결제하기 버튼이 토스 결제창을 열도록 수정.

그리고 코드를 GitHub에 올렸다. Vercel이 자동으로 배포할 거라고 했다.

첫 번째 벽 — 배포가 계속 막혔다

Vercel에서 배포가 계속 차단(Blocked)됐다. 왜 막히는지 이유를 몰라서 답답했다.

알고 보니 원인이 여러 개였다. GitHub 저장소가 Vercel에 연결이 안 돼 있었고, AI Studio로 만든 사이트 설정 중 하나가 Vercel과 충돌했고, 심지어 Claude가 커밋할 때 이메일을 다르게 설정해서 Vercel이 "다른 사람이 배포하려 한다"고 차단하기도 했다.

결국 해결 방법은 의외로 간단했다. GitHub 웹사이트에서 직접 파일을 조금 수정하고 저장하면, 내 계정으로 커밋이 되어 Vercel이 정상적으로 배포해줬다.

두 번째 벽 — 결제는 됐는데 저장이 안 된다

드디어 결제창이 떴다. 내가 만든 사이트에서 토스 결제창이 열리는 순간 — 솔직히 신기했다. 테스트 카드 번호를 입력하고 결제를 완료했다. 그런데 결과 화면에 이런 메시지가 떴다.

"DB 저장 중 오류가 발생했습니다."

결제는 됐는데 저장이 안 된다니 당황스러웠다. Claude에게 상황을 설명했다.

결제까지 완료를 했을 때, DB 저장 오류라고 오류 메시지가 떴어.
문제가 왜 발생했는지에 대해서 설명을 해 달라는 거였어.

원인은 이거였다. DB 테이블을 만들 때 고객 이름 칸을 "반드시 값이 있어야 한다"고 설정해놨는데, 저장하는 코드에서 이름을 빠뜨린 것. 설계와 코드가 서로 맞지 않았다. Claude가 원인을 찾아서 설명해주고, 수정 코드까지 바로 만들어줬다.

세 번째 벽 — 환경변수, 위치가 중요했다

작업 중 같은 오류가 반복되는 구간이 있었다. 키(환경변수)를 입력했는데도 "키를 찾을 수 없다"는 오류가 계속 나왔다. 알고 보니 키 파일을 앱 폴더 바깥에 저장했던 것. 앱은 자기 폴더 안에서만 키를 찾기 때문에, 위치 하나 차이로 계속 실패했다.

✅ 결과 (After)

Before vs After

결과물

• 결제 사이트: ai-market-virid.vercel.app

• 결제하기 버튼 클릭 → 토스 결제창 오픈 ✅

• DB 저장 오류 수정 코드 완료 → 최종 배포 내일 예정 ⏳

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

효과적이었던 것

1. 오류 메시지를 그대로 보여주기 — 내가 이해 못 해도 괜찮다. Claude가 읽고 원인을 찾아준다

2. 막히면 "왜 이런 문제가 발생했는지 설명해줘"라고 물어보기 — 해결만 받으면 다음에 또 막힌다. 이유를 알아야 반복을 막는다

3. 진행 순서를 따라가되, 이해가 안 되는 단계는 바로 질문하기 — 모르고 넘어가면 나중에 오류가 터졌을 때 어디서 문제가 생겼는지 알 수 없다

이렇게 하면 안 돼요

1. 오류가 나면 바로 포기하기 — 오류는 끝이 아니라 원인을 알려주는 신호다

2. 키(환경변수)를 아무 데나 저장하기 — 위치가 틀리면 아무리 입력해도 인식을 못 한다

3. 설계하고 코드를 따로 확인하지 않기 — DB에서 "반드시 입력"으로 만든 칸은 코드에서도 반드시 값을 넣어야 한다

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

오늘 배운 "AI에게 오류를 설명하고 해결을 맡기는 방식"은 결제 연동에만 쓰이지 않는다. 어떤 오류가 나든 — 사이트가 안 열리거나, 버튼이 작동 안 하거나, 데이터가 안 불러와지거나 — 오류 메시지를 Claude에게 그대로 가져가면 된다. 이 방식을 익히면 개발 전반에서 쓸 수 있다.

🚀 앞으로의 계획

1. DB 저장 오류 수정 배포 완료 — 내일 GitHub에서 직접 커밋해서 마무리

2. 전체 흐름 복기 — 오늘 진행한 내용을 처음부터 다시 따라가보며 각 단계의 의미 이해

3. 실제 고객 결제 연동 — 테스트 키에서 실제 키로 전환해서 진짜 결제 받기

📋 재사용 가능한 프롬프트

프롬프트 1: DB 설계 요청

[서비스 이름]에서 결제가 완료된 이후 필요한 정보를 DB에 저장하려고 해요. 누가 결제했는지, 무엇을 결제했는지, 결제 상세 내역을 저장하는 테이블 설계 plan을 작성해주세요. Supabase를 사용할 예정이고, SQL Editor에서 바로 실행할 수 있는 SQL 파일도 함께 만들어주세요.

프롬프트 2: 오류 원인 파악 요청

결제 완료 후 이런 오류 메시지가 떴어요: [오류 메시지 붙여넣기] 해결보다 먼저 — 왜 이런 문제가 발생했는지 이유를 쉽게 설명해주세요. 이해한 다음에 수정할게요.

프롬프트 3: 배포 오류 대응

Vercel 배포가 [오류 상태]로 막혀있어요. 화면에 보이는 메시지는 이거예요: [오류 내용] 어떤 원인일 수 있고, 어떻게 해결할 수 있는지 단계별로 알려주세요.