Resend 통합
Supabase Edge Functions와 함께 Resend를 사용하여 트랜잭션 이메일, 확인 메시지, 뉴스레터를 발송하세요.
Resend란?
Resend는 개발자를 위해 구축된 이메일 API입니다. 트랜잭션 및 마케팅 이메일 발송을 위한 높은 전달률, 쉬운 통합, 깔끔한 개발자 경험에 중점을 둡니다.
단계별 튜토리얼
이 튜토리얼은 1시간 이내에 완전히 작동하는 CRM을 구축하는 과정을 안내합니다. 리드 수집, 이메일 확인, 뉴스레터 구독, 내부 관리자 대시보드가 포함됩니다. 사용할 도구:
- Lovable: frontend 및 backend 로직 생성용.
- Supabase: 안전한 데이터 저장 및 인증용.
- Resend: 트랜잭션 + 마케팅 이메일 자동화 및 추적용.
시작해 봅시다.
연락처 폼이 있는 랜딩 페이지 만들기
Lovable의 AI를 사용하여 제품이나 서비스를 위한 랜딩 페이지를 빠르게 생성합니다.
지침:
새 Lovable 프로젝트
새 Lovable 프로젝트를 만듭니다.
프롬프트:
Create a SaaS landing page with a contact form collecting name, email, and message.
생성된 코드 검사
생성된 코드를 검사하거나 선택 도구를 사용하여 요소를 조정합니다.
입력 유효성 검사 추가
더 나은 사용자 경험을 위해 입력 유효성 검사와 message 필드를 추가합니다.
폼 제출 데이터를 Supabase에 저장
Supabase는 안전한 backend 데이터베이스 역할을 합니다.
Supabase 계정
무료 Supabase 계정과 새 프로젝트를 만듭니다.
API Key
Lovable에서 API key를 사용하여 Supabase 프로젝트를 연결합니다.
`contacts` 테이블 생성:
id: UUID, primary keyname: textemail: textmessage: textcreated_at: timestamp
제출 로직
폼 제출 로직을 수정하여 데이터를 Supabase에 삽입합니다.
RLS
Supabase Row-Level Security (RLS)를 적용하여 인증된 사용자만 접근하도록 제한합니다.
Resend를 통한 확인 이메일 발송
리드가 폼을 제출할 때마다 자동 확인 이메일을 보내도록 Resend를 설정합니다.
Resend 가입
Resend에 가입하고 커스텀 도메인을 인증합니다.
- DNS 레코드(TXT, MX)를 업데이트하라는 요청을 받게 됩니다.
- 이메일 평판을 더 잘 관리하려면
updates.domain.com같은 서브도메인을 사용하세요.
API Key
환경 설정이나 backend 함수를 통해 Lovable에 API key를 통합합니다.
SDK
Resend의 SDK를 사용하여 폼 제출 시 확인 이메일을 발송합니다.
안전한 관리자 대시보드 구축
인증된 사용자만 리드를 보고 관리할 수 있도록 합니다.
Admin 라우트
Lovable에서 /admin 라우트를 만듭니다.
Supabase Authentication
이메일/비밀번호 로그인으로 Supabase authentication을 활성화합니다.
Contacts
다음 열을 포함한 contacts 테이블을 표시합니다:
- Name
- Message preview
- Submission date
연락처 상세 정보
행을 클릭하면 전체 연락처 정보를 보여주는 상세 패널(예: 슬라이딩 패널)을 추가합니다.
리다이렉트 로직
인증되지 않은 사용자가 /login으로 라우팅되도록 리다이렉트 로직을 추가합니다.
관리자 맞춤 이메일 답장 활성화
팀이 개인화된 후속 메시지를 보낼 수 있도록 합니다.
연락처 상세 패널
연락처 상세 패널에 텍스트 필드와 사전 정의된 템플릿(예: "Thanks for signing up!")을 추가합니다.
발송 버튼 추가
Resend에 연결된 발송 버튼을 추가합니다.
발송된 메시지 저장
발송된 각 메시지를 Supabase의 sent_emails 테이블에 저장합니다:
contact_idsubjectbodysent_at
이렇게 하면 모든 후속 메시지의 검색 가능한 로그를 갖게 됩니다.
뉴스레터 구독 폼 추가
Resend의 Audiences를 사용하여 구독자를 관리하고 브로드캐스트 이메일을 발송합니다.
새 폼 추가
랜딩 페이지에 뉴스레터 가입을 위한 새 폼을 추가합니다.
Resend 연락처
제출 시:
- API를 통해 Resend 연락처를 생성합니다
- (선택 사항) 연락처를 Supabase에도 로컬로 저장합니다
디자인
Resend의 브로드캐스트 이메일 UI를 사용하여 뉴스레터를 디자인하고 발송합니다.
- 내장 구독 취소 로직
- 성능 인사이트 (오픈율, 전달 상태)
규정 준수 확인!
규정 준수(예: GDPR)를 위해 double opt-in 플로우 구현을 고려하세요.
보너스: Resend를 Supabase Auth에 연결
Supabase의 기본 이메일 인증(시간당 4개 이메일로 제한됨)을 개선하고 싶으신가요?
Resend supabase
Resend의 Supabase 통합으로 이동합니다.
Authentication
Supabase 프로젝트로 인증합니다.
도메인 설정
도메인과 발신자 이름/이메일을 선택합니다.
SMTP
Resend가 자동으로 SMTP를 설정하고 Supabase의 기본 이메일 시스템을 대체합니다.
커스터마이제이션
이제 Supabase 대시보드에서 인증 이메일 템플릿을 커스터마이즈할 수 있습니다.
마무리 & 모범 사례
- 에러 처리: Lovable이 오탐지인 빌드 에러를 표시할 수 있습니다. 항상 기능을 라이브로 테스트하세요.
- Supabase로 되돌리기: Lovable에서 코드를 되돌릴 때, 관련된 Supabase 정책이나 마이그레이션을 수동으로 삭제해야 합니다—자동으로 롤백되지 않습니다.
- 전달률 팁:
- 서브도메인을 사용하여 평판을 분리하세요.
- 항상 이메일의 plain text 버전을 포함하세요.
- Resend의 인사이트 대시보드로 이메일 성능을 모니터링하세요.
완료! 🎉
1시간 이내에 다음을 갖춘 현대적인 CRM을 구축했습니다:
- 랜딩 페이지와 연락처 폼
- 데이터베이스 기반 리드 저장
- 자동 이메일 확인
- 리드 관리를 위한 관리자 대시보드
- 맞춤 이메일 답장
- 뉴스레터 브로드캐스트
- 인증 및 이메일 인증
더 나아가고 싶다면?
- Supabase cron jobs를 통한 예약된 이메일 지원 추가
- 리드 단계에 따라 이메일을 트리거하는 자동화 플로우 구축
- 더 나은 브랜드 신뢰도와 전환율을 위한 UI 스타일링