“로그인도 되고 데이터도 잘 저장되네! 이제 완벽해! ...잠깐, 회원가입한 사람한테 이메일은 어떻게 보내지? 유료 서비스로 전환하고 싶은데 결제는 어떻게 받아?”

지난 2부에서는 Supabase를 활용해 데이터를 저장하고 로그인 기능을 붙여 웹서비스의 “백엔드” 기능을 만들어 보았습니다.

이번 3부에서는 더 다양한 외부 서비스와 연동해 웹사이트에 자주 사용되는 몇 가지 기능을 추가해봅시다.

사용자에게 자동으로 이메일을 보내고, 깔끔한 문의 폼으로 사용자의 의견을 듣고, 심지어 내 서비스로 수익을 창출하는 결제 기능까지. 혼자서 구현하려면 보안과 복잡한 설정 때문에 막막하지만, AI 코딩 툴과 외부 전문 서비스를 연결하면 코딩을 몰라도 누구나 쉽게 구현할 수 있습니다.

자, 그럼 내 웹서비스를 한 단계 더 완벽하게 업그레이드하러 출발해볼까요?

1. 자동으로 이메일 보내기

웹서비스를 운영하다 보면, 사용자에게 이메일을 자동으로 보내야 할 상황이 자주 생기죠?
이메일 기능을 직접 구현하려면 메일 서버 설정, 스팸함에 걸리지 않게 하는 설정, 발송 실패 처리 등 신경 쓸 것이 엄청나게 많습니다. 이메일 전송 서비스를 사용하면 이런 복잡한 문제를 한 번에 맡길 수 있습니다.

Resend — 하루 100건 무료로 사용

AI 코딩 툴과 Resend를 함께 사용하면 복잡한 설정 없이 간단하게 이메일을 보낼 수 있어요.
내 도메인(예시: mail.knowai.space)을 발신 주소로 설정하면 이메일이 스팸함에 빠지지 않고, 2부에서 만든 Supabase 회원 정보와 연동하면 신규 가입자에게 자동으로 이메일을 발송하는 것도 가능합니다.

1. 언제 필요할까?

• 회원가입 인증, 비밀번호 재설정 등 자동 이메일을 보내야 할 때

• Supabase 기본 메일 서버 대신 내 도메인 발신 주소를 사용하고 싶을 때

• 공지·알림 등 운영 메시지나, 뉴스레터 등 마케팅 정보를 메일로 보내고 싶을 때

• 이메일이 잘 전달되었는지 대시보드에서 실시간으로 확인하고 싶을 때

2. AI 코딩 툴과 Resend 연결하기

STEP 1 — Resend 계정 만들기

resend.com 접속 → Get Started → GitHub 또는 이메일로 가입

STEP 2 — 도메인 인증 ⚠️ 중요

내 도메인으로 이메일을 보내려면, 이 도메인이 내 것임을 Resend에 확인시켜주는 과정이 필요합니다. (돈으로 카드를 만들려면 본인인증이 필요하듯이, 내 도메인에서 보내는 이메일이라는 것을 증명하는 절차입니다.)

1. Resend 대시보드 → Domains → Add Domain

2. 사용할 도메인 입력 (예: mail.knowai.space)

3. Resend가 알려주는 확인 코드(SPF, DKIM)를 내 도메인 관리 사이트(Cloudflare 등)에 입력

4. 수시간~최대 48시간 후 Resend에서 Verified(확인됨) 표시

STEP 3 — API Key 발급

Resend 대시보드 → API Keys → Create API Key → 생성된 키를 복사해서 안전하게 보관

STEP 4 — AI 코딩 툴에 MCP 연결

Resend도 MCP를 지원합니다. AI 코딩 툴의 MCP 설정에 아래 URL을 추가하세요.

https://resend.com/mcp

STEP 5 — Supabase 회원인증 메일을 Resend로 보내기 (선택)

2부에서 만든 Supabase 회원가입·로그인 이메일도 Resend로 보내고 싶다면 아래와 같이 연결하세요.

• Supabase 대시보드 → Authentication → SMTP Settings → Custom SMTP 켜기

• Host: smtp.resend.com / Port: 587 / Username: resend / Password: Resend API Key

• Sender(발신자): 인증 완료한 도메인 주소 (예: no-reply@mail.knowai.space)

3. AI에게 이렇게 요청하세요

1. 인증·알림 메일 자동 발송

   • ​“회원가입하면 환영 이메일 자동으로 보내줘. Resend API 사용해서”
   • ​“비밀번호 재설정 요청이 들어오면 재설정 링크 이메일 발송해줘”

2. 이메일 템플릿 디자인

   • ​“React Email로 영수증 이메일 템플릿 만들어줘. 회사 로고, 결제 금액, 날짜 포함해서”
   • ​“HTML 이메일 템플릿 만들어줘. 헤더에 로고, 본문에 인사말, 하단에 수신 거부 링크”

3. 결제 후 영수증 자동 발송

   • ​“Stripe 결제 성공 Webhook을 받으면 Resend로 영수증 이메일 자동 발송해줘”

4. 발송 상태 모니터링

   • ​“이메일 발송 실패 시 로그 남기고, 관리자에게 알림 보내는 기능 추가해줘”

4. 무료 플랜 한도

항목	무료 한도
월 발송량	3,000건
일 발송량	100건
커스텀 도메인	1개

---

2. 문의 폼 설치하기

웹사이트에 문의 폼을 넣으면 사용자의 질문, 피드백, 상담 요청 등을 직접 받을 수 있습니다.
하지만 간단해 보이는 문의 폼도 막상 직접 구현하려면 의외로 고려해야 할 부분이 많습니다.

• 입력된 내용을 어디에 저장할 것인지?

• 악의적인 매크로가 보내는 스팸을 어떻게 방지할 것인지?

• 사용자가 보낸 내용에 자동으로 접수 확인 답장을 보낼 수 있는지?

• 슬랙(Slack)이나 구글 시트(Google Sheets)처럼 내가 자주 쓰는 업무 툴로 알림을 받을 수 있는지?

폼 서비스를 사용하면 간단하게 이런 기능들을 구현할 수 있습니다.

Formspree — 월 50건 무료로 사용

Formspree는 복잡한 코딩 없이 주소(URL) 하나만 복사해서 붙여넣으면, 사용자가 작성한 문의를 내 이메일로 바로 배달해 주는 서비스입니다. 서버나 데이터베이스를 직접 만들 필요가 없어서, 기능이 단순한 웹사이트나 포트폴리오, 랜딩 페이지에 문의란을 달 때 아주 유용하죠.

1. 언제 필요할까?

• 서버 없이 문의·상담 폼을 추가하고 싶을 때

• 사용자가 보낸 내용을 이메일로 바로 받고 싶을 때

• Google Sheets, Slack 등으로 폼 데이터를 자동 연동하고 싶을 때

• 스팸 방지​(reCAPTCHA)를 간단하게 설정하고 싶을 때

2. AI 코딩 툴과 Formspree 연결하기

STEP 1 — Formspree 계정 만들기

formspree.io 접속 → Get started → 이메일 또는 Google 계정으로 가입

STEP 2 — 폼 생성 & 폼 주소 복사

1. 대시보드에서 New Form 클릭 → 폼 이름 입력 (예: “Contact Form”)

2. 생성되면 폼 전송 주소(Endpoint URL) 표시 → 복사 (예: https://formspree.io/f/xpznqkdl)

3. AI에게 이 주소를 알려주고 폼 코드에 넣어달라고 요청하면 바로 작동합니다.

STEP 3 — 스팸 방지 설정

Formspree 대시보드 → 폼 Settings → Spam protection 에서 설정합니다.

• 기본 reCAPTCHA(spambot 자동 차단): 별도 설정 없이도 Formspree가 자동으로 스팸을 걸러줍니다.

• 커스텀 reCAPTCHA v2/v3: 구글에서 제공하는 더 강력한 스팸 차단을 연결할 수 있습니다.

• reCAPTCHA v3는 화면에 아무것도 표시하지 않고 뒤에서 조용히 검사해주기 때문에, 스팸 방지 기능을 켜도 사용자 입장에서는 전혀 불편함이 없습니다.

STEP 4 — 외부 서비스 연동 (선택)

Formspree로 들어온 문의를 내가 자주 쓰는 다른 서비스로 자동 전달할 수 있습니다.

• Google Sheets: 문의 내용이 자동으로 구글 스프레드시트에 표 형태로 기록됩니다.

• Slack: 문의가 들어올 때마다 슬랙 채널에 알림을 보내줍니다.

• Salesforce / Asana: 고객 관리(CRM)나 프로젝트 관리 도구로 자동 연동됩니다.

• Webhook(웹훅): 내가 만든 다른 서버나 서비스로 데이터를 직접 보낼 수 있습니다.

STEP 5 — AI에게 폼 코드 만들어달라고 하기

STEP 2에서 복사한 폼 주소를 넣어서 AI에게 이렇게 요청하세요.

• *​“Formspree로 문의 폼 만들어줘. 폼 주소(엔드포인트 URL)는 **https://formspree.io/f/xpznqkdl*이야. 이름, 이메일, 메시지 입력칸 포함해서”

• ​“폼을 제출했을 때 성공하면 ‘감사합니다’ 메시지를 보여주고, 실패하면 무엇이 잘못되었는지 안내해줘”

3. AI에게 이렇게 요청하세요

1. 기본 문의 폼

   • ​“이름, 이메일, 메시지를 입력하는 문의 폼 만들어줘. 폼 주소(Formspree 엔드포인트)를 연결하고, 전송하면 성공·실패 메시지도 화면에 보여줘”

2. 화면 깜빡임 없는 폼 (AJAX 방식)

   • ​“문의 폼을 AJAX로 구현해줘. 제출 버튼을 눌러도 페이지 새로고침 없이 전송되고, 성공하면 ‘감사합니다’ 메시지 표시해줘”

3. 자동 응답 이메일 설정

   • ​“문의를 보낸 사람에게 자동으로 접수 확인 이메일도 보내줘”

4. 디자인 커스텀

   • ​“Tailwind CSS(디자인 도구)로 깔끔하게 디자인한 문의 폼 만들어줘. 다크 모드도 지원하게”

4. 무료 플랜 한도

항목	무료 한도
월 수신량	50건
이메일 연결	최대 2개
데이터 보관	30일
폼 갯수	무제한

---

3. 결제 기능 추가하기

유료 서비스를 운영하려면 결제 기능이 필수죠? 하지만 신용카드 등 민감한 결제 정보는 유저들이 직접 입력하기를 꺼려합니다. 만약 입력을 받았다고 하더라도, 그 정보를 안전하게 보관하고 실제로 결제에 사용하는 시스템을 개인이 직접 개발하는 것은 보안상 아주 어렵고 위험한 일입니다.

• 카드 정보 보안 — 글로벌 카드 결제 보안 표준(PCI DSS) 규정 준수 (카드 정보를 내 데이터베이스에 직접 저장하면 안 됨)

• 환불·취소 처리 — 부분 환불, 구독 해지 등 다양한 상황 대응

• 세금·인보이스 — 국가별 세금 계산, 영수증 자동 발급

• 구독 관리 — 다음 달 결제일 계산, 요금제 변경, 결제 실패 시 자동 재시도

결제 전문 서비스를 사용하면, 이 모든 복잡한 과정을 AI 코딩 툴의 도움을 받아 쉽게 해결할 수 있습니다.

Stripe

Stripe는 전 세계에서 가장 널리 쓰이는 결제 전문 서비스입니다. 개별 결제부터 정기 구독, 쿠폰, 영수증 발급까지 시작하는 서비스에 필요한 결제 기능을 거의 다 제공합니다. AI 코딩 툴과 MCP로 연결하면 복잡한 결제 설정도 빠르게 구현할 수 있습니다.

1. 언제 필요할까?

• 유료 요금제·구독 결제를 받고 싶을 때 (월간·연간 구독)

• 상품 판매, 디지털 콘텐츠 등 단건 결제가 필요할 때

• 결제 성공 여부에 따라 앱의 특정 기능을 자동으로 켜고 끄고 싶을 때 (예: 결제 완료 시 Pro 기능 활성화)

• 쿠폰·할인 코드, 무료 체험 기간(Trial) 기능이 필요할 때

• 영수증을 자동으로 발급해서 보내야 할 때

2. AI 코딩 툴과 Stripe 연결하기

STEP 1 — Stripe 계정 만들기

stripe.com 접속 → Start now → 이메일로 가입

• 가입 직후에는 테스트 모드로 시작됩니다. (실제로 돈이 나가지 않는 가짜 카드로 개발 및 테스트를 해볼 수 있습니다.)

• 실제 고객에게 진짜 결제를 받으려면, 사업자 정보나 신분증을 제출하고 라이브 모드(Live mode)를 켜야 합니다.

STEP 2 — 상품 & 가격 생성

Stripe 대시보드 → Products(상품) → Add product(상품 추가)

• 상품 이름, 설명, 이미지 등 입력

• 가격(Price) 설정: 단건 결제(One-off) 또는 정기 구독 결제(Recurring) 선택

• 구독 결제인 경우 월간 결제·연간 결제 가격을 각각 설정할 수 있습니다.

STEP 3 — API Key(비밀 키) 발급

Stripe 대시보드 → Developers(개발자) → API Keys

• Publishable key(공개 키): 웹사이트 화면(프론트엔드)에서 안전하게 사용할 수 있는 키

• Secret key(비밀 키): 서버(백엔드)에서만 몰래 사용해야 하는 절대 키 (⚠️ 외부 유출 금지)

STEP 4 — AI 코딩 툴에 MCP 연결

Stripe도 MCP를 지원합니다. AI 코딩 툴의 MCP 설정에 아래 주소를 추가하세요.

https://mcp.stripe.com

연결이 완료되면, 내가 직접 복잡한 설정 화면을 누르지 않아도 AI가 코드로 알아서 결제 화면을 만들고 처리해 줍니다.

STEP 5 — Webhook(결제 알림) 설정

고객이 카드를 긁어서 결제가 성공하거나 실패했을 때, 그 소식을 내 웹사이트가 바로 알아차려야겠죠? 이때 사용하는 것이 Webhook(웹훅)입니다. Stripe가 내 웹사이트로 “결제 성공했어!”라고 톡을 쏴주는 기능이라고 생각하면 쉽습니다.

• Stripe 대시보드 → Developers → Webhooks → Add endpoint

• 내 웹사이트의 알림 수신 주소 입력 (예: https://knowai.space/api/webhooks/stripe)

• 수신할 알림 종류 선택: checkout.session.completed(결제 성공), customer.subscription.deleted(구독 취소) 등

3. AI에게 이렇게 요청하세요

1. 결제 화면(Checkout) 만들기

   • ​“Stripe Checkout 기능을 써서 구독 결제 페이지를 만들어줘. 월간 $10 요금제랑 연간 $100 요금제 두 가지를 선택할 수 있게 해줘”
   • ​“결제에 성공하면 /success(성공) 페이지로 보내고, 결제창에서 뒤로가기를 누르면 /pricing(요금 안내) 페이지로 돌아오게 해줘”

2. 구독(요금제) 관리

   • ​“로그인한 사용자가 현재 결제 중인지 상태를 확인해서, 유료 결제자한테만 Pro 기능 버튼을 보여줘”
   • ​“마이페이지에서 사용자가 직접 구독을 해지할 수 있는 버튼을 추가해줘. Stripe에서 제공하는 고객 전용 포털(Customer Portal)로 연결해 줘”

3. 쿠폰·무료 체험 적용

   • ​“7일 동안 무료로 체험(Trial)해보고, 8일 차부터 자동으로 결제되는 구독 플랜을 만들어줘”
   • ​“결제 화면에서 ‘WELCOME20’이라는 쿠폰 코드를 입력하면 첫 달 결제 금액을 20% 할인해 줘”

4. 결제 자동화 처리 (Webhook)

   • ​“결제 성공 알림(Webhook)을 받으면, 내 DB의 유저 구독 상태를 업데이트하고, Resend를 사용해서 결제 영수증 이메일을 자동으로 보내줘”
   • ​“구독 취소 알림(Webhook)을 받으면, 해당 유저의 Pro 기능을 끄고 아쉬움을 담은 안내 이메일을 보내줘”