랜딩페이지에 결제 붙이기 — AI와 대화만으로 프론트+백엔드+DB를 하루 만에

[Claude Code] 랜딩페이지에 결제 붙이기 — AI와 대화만으로 프론트+백엔드+DB를 하루 만에

📝 한줄 요약

기존 랜딩페이지에 토스페이먼츠 결제 기능을 AI와의 대화만으로 하루 만에 연동했습니다. 프론트엔드, 백엔드, 데이터베이스까지 전부요.

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

• Claude Code로 토스페이먼츠 결제 연동을 하루 만에 완성 (프론트엔드 + 백엔드 + DB)

• 공식 문서를 AI에게 먼저 읽히면 SDK 버전별 차이까지 파악해서 정확도가 올라갑니다

• 결제 취소 시 화면이 안 돌아오는 버그를 AI가 즉시 진단 — 토스 SDK 내부 동작까지 알고 있었습니다

• "결제 모듈 연동이 필요한 영역입니다"라는 빈 자리가 실제 결제 흐름으로 바뀐 순간이 가장 인상적

• 한 번에 다 시키지 말고 기획→프론트→백엔드→DB 순서로 나누면 실수가 적습니다

• 막히면 에러 상황을 그대로 말하기만 해도 AI가 원인과 해결책을 같이 알려줍니다

🎯 이런 분들께 도움돼요

• AI 코딩 도구로 어디까지 가능한지 궁금한 비개발자

• 결제 기능을 붙여야 하는데 개발자가 없어서 고민 중인 스타트업 대표/PM

• "결제 연동은 너무 어렵지 않을까?" 하고 망설이고 있는 분

😫 문제 상황 (Before)

이전에 AI와 함께 기획부터 랜딩페이지 배포까지 2주 만에 완성한 경험이 있었습니다. 그런데 한 가지 빠진 게 있었습니다 — 결제 기능이요.

랜딩페이지에는 요금제 섹션이 있었고, "신용카드로 결제하기" 버튼도 있었지만, 클릭하면 "결제 모듈 연동이 필요한 영역입니다"라는 안내만 나왔습니다. 고객에게 서비스를 보여줄 순 있었지만, 실제로 돈을 받을 수는 없는 상태였습니다.

결제 연동은 기획이나 디자인과 차원이 다른 문제였습니다. 프론트엔드에서 결제창을 띄우고, 백엔드에서 결제를 승인하고, 데이터베이스에 기록까지 해야 합니다. 외주를 맡기면 최소 1~2주에 비용도 상당할 터였습니다.

하지만 이전에 AI로 기획~배포까지 해본 경험이 있었기에, 결제 같은 복잡한 기능도 가능한지 도전해보기로 했습니다.

🛠️ 사용한 도구

• 도구명: Claude Code (터미널 기반 AI 코딩 어시스턴트)

• 모델: Claude Opus 4.6

• 특이사항: 토스페이먼츠 공식 개발 문서를 참조 파일로 제공하여 정확도 향상

🔧 작업 과정

공식 문서부터 읽히기 — "AI에게 맥락을 주는 게 첫 번째"

결제 연동을 시작하기 전, 토스페이먼츠 공식 개발 문서를 AI에게 먼저 읽혔습니다.

@toss/tosspayments-dev-docs.md 이 문서를 참조해서 결제 기능을 만들려고 합니다.

AI가 문서를 분석하더니 결제 서비스 4종(일반결제, 정기결제, 브랜드페이, 에스크로)과 연동 방식 2종(결제창 방식, API 직접 호출)을 정리해서 옵션으로 제시해줬습니다. 각 방식의 장단점까지 설명해줘서 뭘 선택해야 할지 판단할 수 있었습니다.

1 일반결제 2. 결제창 3. 이미 있습니다. 4.

이렇게 짧게 번호만 답해도 AI가 알아듣고 다음 단계로 넘어갔습니다. 일반결제, 결제창 API 개별 연동, 별도 프로젝트로 진행하기로 결정.

키 설정부터 꼼꼼하게 — "AI가 키 형식까지 검증해줄 줄 몰랐다"

테스트용 API 키를 설정하는 과정에서 작은 실수가 있었습니다. 시크릿 키 자리에 클라이언트 키를 넣어버린 것입니다.

AI가 바로 잡아냈습니다. "시크릿 키가 test_ck_로 시작하고 있는데, test_sk_로 시작해야 합니다"라고 알려줬습니다. 키 값의 접두어 규칙까지 알고 있었던 건 공식 문서를 먼저 읽혔기 때문입니다.

이 경험으로 깨달은 것: 공식 문서를 AI에게 참조시키면, 단순히 코드를 짜는 것을 넘어 설정값의 유효성까지 검증해줍니다.

프론트엔드 결제 페이지 — "3개 페이지가 한 번에"

키 설정이 끝나자 AI가 바로 결제 흐름에 필요한 3개 페이지를 만들었습니다.

결제 요청 페이지에서 토스 결제창을 띄우고, 결제가 성공하면 성공 페이지에서 백엔드에 승인을 요청하고, 실패하면 실패 페이지에서 안내 메시지를 보여주는 구조입니다.

토스 SDK를 불러오고, 결제창을 호출하고, 결과에 따라 페이지를 이동시키는 전체 흐름이 한 번에 만들어졌습니다.

Go 백엔드 — "설치부터 서버 구축까지 AI가 다 했다"

결제 승인은 보안상 서버에서 처리해야 합니다. 백엔드가 필요했는데, 사용할 프로그래밍 언어인 Go가 컴퓨터에 설치조차 되어 있지 않았습니다.

AI가 Go 설치 명령어를 실행하고, 프로젝트를 초기화하고, 결제 승인 서버까지 만들었습니다. 토스에 결제 승인을 요청하는 로직, 보안 인증 처리, 에러 핸들링까지 포함된 백엔드가 완성됐습니다.

프로그래밍 언어 설치부터 동작하는 서버까지 — 이 과정이 대화 몇 번으로 끝났다는 게 아직도 신기합니다.

랜딩페이지와 연결 — "빈 자리가 진짜 결제가 됐다"

서버가 돌아가는 걸 확인하고, 기존 랜딩페이지와 연결하는 단계로 넘어갔습니다.

랜딩페이지에 연결되지 않았네요?

AI가 기존 랜딩페이지를 분석하더니, 결제 모달에 "결제 모듈 연동이 필요한 영역입니다"라는 placeholder를 발견했습니다. 두 가지 연결 방식을 제안해줬고, 리다이렉트 방식을 선택했습니다.

랜딩페이지의 "신용카드로 결제하기" 버튼을 클릭하면 결제 페이지로 이동하면서, 요금제 이름과 금액 정보가 자동으로 전달되는 구조입니다.

이전까지 빈 껍데기였던 결제 버튼이 실제로 동작하는 결제 흐름이 된 순간, "이게 정말 하루 만에 된 거야?"라는 생각이 들었습니다.

결제 취소 버그 — "AI가 없었으면 한참 헤맸을 문제"

결제 테스트 중 문제를 발견했습니다. 결제창에서 취소를 누르면, 원래 페이지로 돌아가지 않는 것입니다.

결제 취소시 화면 복귀 기능이 동작하는지 확인해주세요.

취소시 원래 페이지로 돌아가지 않습니다

AI가 즉시 원인을 진단했습니다. 토스 SDK 버전 2에서는 사용자가 결제를 취소하면 실패 페이지로 이동하는 게 아니라, 코드 내부에서 에러가 발생하는 방식으로 동작한다는 것이었습니다. 기존 코드는 이 에러를 화면에 표시만 하고 페이지 이동은 하지 않았던 거죠.

AI가 취소 시에는 랜딩페이지 요금제 섹션으로 돌아가고, 다른 에러 시에는 실패 페이지로 이동하도록 수정해줬습니다.

이 버그는 토스 SDK의 내부 동작 방식을 알아야 해결할 수 있는 문제였습니다. 문서를 직접 찾아보고 이해하려면 상당한 시간이 걸렸을 텐데, AI가 이미 문서 내용을 파악하고 있어서 바로 해결됐습니다.

Supabase 데이터베이스 — "결제 데이터를 안전하게 관리하는 구조까지"

결제가 동작하게 된 후, 결제 데이터를 체계적으로 저장하고 관리할 데이터베이스가 필요했습니다.

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

AI가 6개 테이블 설계를 제안했습니다. 요금제 정보, 고객 정보, 주문, 결제 기록, 취소 이력, 그리고 보안 감사 로그까지. 특히 인상적이었던 건 금액 위변조 방지 로직이었습니다. 결제 요청 시 서버에서 원래 금액과 대조해서, 누군가 금액을 조작했는지 자동으로 검증하는 구조였습니다.

데이터베이스 설계가 완료된 후 실제로 테이블을 생성하는 과정에서 한 가지 난관이 있었습니다. 자동 연결 도구가 작동하지 않아서, AI가 만들어준 전체 설계 명령어를 데이터베이스 관리 화면에서 직접 실행해야 했습니다. 하지만 명령어 자체는 AI가 완벽하게 만들어줬기에 복사-붙여넣기만 하면 됐습니다.

마지막으로 백엔드가 데이터베이스와 연동되도록 수정하면서, 주문 생성부터 결제 승인, 상태 관리까지 전체 흐름이 완성됐습니다.

✅ 결과 (After)

Before vs After

결과물

• 토스페이먼츠 결제창 연동 (카드 결제)

• 결제 성공/실패/취소 처리 완비

• 랜딩페이지 → 결제 → 완료 전체 사용자 경험

• 6개 테이블 데이터베이스 (주문, 결제, 취소 이력, 감사 로그 등)

• 금액 위변조 방지 + 웹훅 자동 상태 동기화

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

효과적이었던 것

1. 공식 문서를 먼저 읽혀라: 토스 개발 문서를 참조시키니 SDK 버전별 차이, 키 형식 규칙, 내부 동작 방식까지 파악하고 있었습니다. 문서 없이 물어보는 것과 정확도 차이가 큽니다

2. 단계별로 나눠서 진행하라: 기획 → 프론트엔드 → 백엔드 → DB 순서로 하니 각 단계에서 확인하고 넘어갈 수 있어서 실수가 적었습니다

3. 막히면 상황을 그대로 말하라: "취소시 원래 페이지로 돌아가지 않습니다"처럼 현상만 말해도 AI가 원인과 해결책을 같이 알려줍니다

4. 짧게 답해도 된다: "1", "네", "2"처럼 번호나 단답으로 답해도 AI가 맥락을 기억하고 진행합니다

이렇게 하면 안 돼요

1. 한 번에 전부 만들어달라고 하지 마세요: "결제 연동 전체를 한 번에 해줘"보다 기획-구현-테스트를 나눠서 각 단계를 확인하면서 가는 게 훨씬 안전합니다

2. 보안 관련 설정은 꼭 확인하세요: API 키, 시크릿 키 같은 보안 정보는 AI가 잡아주더라도 직접 한 번 더 확인하는 습관이 필요합니다

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

이번에 사용한 방법은 결제뿐 아니라 다양한 외부 서비스 연동에 적용할 수 있습니다:

• 다른 결제 수단 연동: 카카오페이, 네이버페이 등도 공식 문서를 AI에게 읽히고 같은 방식으로 진행 가능

• 이메일/알림 서비스: SendGrid, Slack 웹훅 등 외부 API 연동도 문서 참조 → 단계별 구현으로 동일하게 진행

• 관리자 대시보드: 이번에 만든 DB 구조를 기반으로 매출 현황, 고객 관리 화면 추가 가능

• SaaS 서비스 구축: 랜딩페이지 + 결제 + DB가 갖춰졌으니, 여기에 핵심 기능만 추가하면 SaaS로 확장 가능

🚀 앞으로의 계획

1. 구독/정기 결제 추가: 현재 일반(일회성) 결제만 연동된 상태에서, 월간/연간 구독 결제를 추가할 예정입니다. 토스페이먼츠의 정기결제(빌링키) 방식을 동일하게 AI와 진행할 계획입니다

2. 매출 대시보드 구축: 결제 데이터가 DB에 쌓이고 있으니, 이를 시각화하는 관리자 대시보드를 만들어 매출 현황, 결제 성공률, 취소율 등을 한눈에 볼 수 있게 할 예정입니다