Web3Forms vs Resend
프론트엔드 중심의 개발 환경에서 '이메일 처리'는 여전히 까다로운 영역이다. SMTP 서버 구축이나 복잡한 백엔드 로직 없이 이메일 기능을 구현하기 위해 다양한 서비스가 등장했다.
그중에서도 성격이 확연히 다른 두 서비스, Web3Forms와 Resend를 비교한다. 두 서비스 모두 '이메일'을 다루지만, 해결하려는 문제와 기술적 접근 방식은 완전히 다르다.
1. Web3Forms: "Backend-less Form"
Web3Forms의 핵심은 ‘폼(Form) 백엔드 서비스’다. 이메일을 발송하는 API라기보다, HTML Form 데이터를 수신하여 지정된 이메일 주소로 전달해 주는 게이트웨이 역할에 가깝다.
기술적 특징
- No Server-side Code: 서버 사이드 코드가 전혀 필요 없다.
- HTML & AJAX: 순수 HTML
<form>태그의action속성만으로 동작하며, React/Vue 등에서는 fetch API를 통해 비동기로 처리 가능하다. - Spam Protection: 자체적인 hCaptcha 통합 및 허니팟(Honeypot) 필드를 제공한다.
구현 예시 (HTML)
가장 원시적인 형태의 구현은 다음과 같다. Access Key 하나만 있으면 된다.
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>
주요 사용처
- 정적 웹사이트 (Static Sites)
- 랜딩 페이지의 'Contact Us' 섹션
- 백엔드 구축이 불필요한 포트폴리오 사이트
2. Resend: "Developer-first Email API"
Resend는 AWS SES나 SendGrid를 대체하는 ‘이메일 전송 API’다. 개발자 경험(DX)에 극도로 집중하고 있으며, 모던 웹 프레임워크(특히 Next.js)와의 통합성이 뛰어나다.
기술적 특징
- SDK & API: Node.js, Python, PHP 등 다양한 SDK를 제공하며 REST API로 동작한다.
- React Email 통합: 이메일 템플릿을 HTML 테이블 코딩이 아닌, React 컴포넌트로 작성할 수 있는 생태계를 제공한다.
- Domain Authentication: DNS 레코드(DKIM, SPF) 설정을 통해 높은 도달률을 보장한다.
구현 예시 (Next.js / Node.js)
서버 사이드 로직(API Route 혹은 Server Actions)이 필요하다.
import { Resend } from 'resend';
const resend = new Resend('re_123456789');
await resend.emails.send({
from: 'onboarding@resend.dev',
to: 'user@gmail.com',
subject: 'Hello World',
html: '<p>Congrats on sending your **first email**!</p>'
});
주요 사용처
- SaaS 애플리케이션 (회원가입 환영, 비밀번호 재설정 등)
- 동적 데이터가 포함된 트랜잭셔널 이메일
- 디자인 커스터마이징이 중요한 뉴스레터
3. 핵심 비교 요약
두 서비스는 경쟁 관계라기보다 상호 보완적이거나, 목적에 따라 명확히 갈린다.
| 비교 항목 | Web3Forms | Resend |
|---|---|---|
| 핵심 정의 | 폼 데이터 수신 및 전달기 | 이메일 발송 인프라 (API) |
| 백엔드 필요 여부 | 불필요 (클라이언트 사이드 전용) | 필요 (API Key 보호 위해 서버 필요) |
| 주요 목적 | 관리자가 유저의 문의를 받을 때 | 시스템이 유저에게 메일을 보낼 때 |
| 커스터마이징 | 제한적 (성공/실패 리다이렉트 등) | 매우 높음 (React Email 활용) |
| 트랜잭셔널 이메일 | 불가 (단순 알림 용도) | 최적화됨 |
4. 결론: 무엇을 선택해야 하는가?
Web3Forms는 '수신'에 최적화되어 있다.
서버를 띄우기 부담스러운 정적 페이지나 블로그, 포트폴리오 사이트에서 방문자의 문의를 내 이메일함으로 받고 싶다면 Web3Forms가 가장 효율적인 선택이다. 복잡한 설정 없이 HTML 복사-붙여넣기만으로 기능이 완성된다.
Resend는 '발송'에 최적화되어 있다.
실제 운영 중인 서비스에서 유저에게 인증 메일을 보내거나, 결제 영수증을 발송하는 등 시스템 주도의 이메일 통신이 필요하다면 Resend를 선택해야 한다. 특히 React 기반의 스택을 사용 중이라면 React Email과의 조합은 대체 불가능한 수준의 개발 편의성을 제공한다.
프로젝트의 규모와 이메일의 방향(Inbound vs Outbound)을 고려하여 적절한 도구를 선택하길 바란다.
