Vercel과 Resend API 연결하기:
웹사이트에 이메일 문의 기능 만들기
AI로 웹사이트를 만들었다면 다음 단계는 방문자가 직접 나에게 연락할 수 있도록 기능을 추가하는 것입니다.
예를 들어 웹사이트에 이름과 문의 내용을 입력하고 보내기 버튼을 누르면 내 이메일로 편지가 도착하는 기능입니다.
이 기능을 만들 때 사용할 수 있는 서비스가 바로 Resend API입니다.
Resend는 웹사이트나 프로그램에서 이메일을 보낼 수 있도록 도와주는 서비스입니다.
이번 글에서는 안티그래비티로 만든 웹사이트에 Resend를 연결하고, Vercel에 배포한 사이트에서도 이메일을 받을 수 있도록 설정하는 방법을 알아보겠습니다.
이번 글에서 배울 내용
- API와 API 키의 개념
- Resend 회원가입 및 API 키 발급
- .env 파일에 비밀 정보 저장하기
- .gitignore로 API 키 보호하기
- 안티그래비티로 연락하기 기능 만들기
- 내 컴퓨터에서 이메일 전송 테스트
- Vercel 환경 변수 등록하기
- Redeploy로 공개 웹사이트에 적용하기
1. API란 무엇일까?
API라는 말을 처음 들으면 어렵게 느껴질 수 있습니다.
하지만 식당에서 주문하는 과정을 생각하면 쉽게 이해할 수 있습니다.
식당에 가서 음식을 주문하면 직원이 주방에 주문 내용을 전달합니다.
주방에서는 주문에 맞춰 음식을 만들고 다시 손님에게 전달합니다.
API도 비슷합니다.
내 웹사이트가 외부 서비스에 필요한 작업을 요청하면 해당 서비스가 결과를 돌려줍니다.
이메일 서비스로 이해하기
식당 주문과 API 비교
메뉴판 : Resend의 사용 설명서
주문서 : 내 웹사이트가 보내는 이메일 요청
주방 : Resend 이메일 서비스
음식 : 내 메일함에 도착한 이메일
멤버십 카드 : API 키
내 웹사이트에서 방문자가 문의 내용을 작성하면 Resend에 이메일 발송을 요청합니다.
Resend는 요청을 확인한 후 이메일을 전송합니다.
이처럼 서로 다른 프로그램이 정해진 방식으로 정보를 주고받는 통로가 API입니다.
2. API 키란 무엇일까?
Resend API를 사용하려면 API 키가 필요합니다.
API 키는 외부 서비스에 접근할 수 있도록 해주는 인증 정보입니다.
쉽게 말하면 내 웹사이트가 Resend 서비스를 사용할 수 있도록 허락하는 열쇠입니다.
이 열쇠를 다른 사람에게 알려 주면 다른 사람이 내 계정의 권한으로 이메일을 보낼 수도 있습니다.
API 키는 절대 공개하면 안 됩니다.
다음과 같은 곳에 API 키를 입력하지 마세요.
- 공개된 소스코드
- GitHub 저장소
- 안티그래비티 AI 채팅창
- 카카오톡이나 이메일
- 화면 캡처 및 녹화 영상
API 키는 내 컴퓨터의 .env 파일이나 Vercel의 환경 변수에 저장해야 합니다.
3. Resend 회원가입하고 API 키 발급받기
먼저 이메일을 보내는 서비스를 준비해야 합니다.
이번 실습에서는 Resend를 사용하겠습니다.
Resend 공식 홈페이지 바로가기
① Resend 가입하기
Resend 홈페이지에 접속합니다.
오른쪽 위의 Get started를 클릭합니다.
가입 화면에서 Google 계정으로 로그인할 수 있습니다.
이미 계정이 있다면 Log in을 선택합니다.
가입에 사용한 이메일 주소를 기억해 두세요.
이번 실습에서는 이 이메일 주소로 문의 내용을 받겠습니다.
② API Keys 메뉴 선택하기
로그인하면 Resend 대시보드가 나타납니다.
왼쪽 메뉴에서 API Keys를 선택합니다.
오른쪽 위의 + Create API Key 버튼을 클릭합니다.
③ API 키 만들기
API 키를 만드는 화면에서 다음과 같이 설정합니다.
이름 (Name)
my-first-site
권한 (Permission)
Sending access
Name에는 프로젝트 이름을 입력합니다.
Permission은 Sending access를 선택합니다.
이 권한은 이메일 발송에 필요한 권한만 부여하는 설정입니다.
모든 권한을 허용하는 Full access보다 필요한 권한만 사용하는 것이 안전합니다.
설정을 확인한 후 Add 버튼을 클릭합니다.
④ API 키 복사하기
API 키가 생성되면 화면에 인증 정보가 표시됩니다.
Resend는 생성된 키를 처음 한 번만 확인할 수 있도록 제공합니다.
따라서 이때 복사해서 안전한 장소에 저장해야 합니다.
API 키를 분실했다면 기존 키를 다시 확인하려고 하지 말고 새 키를 발급받으면 됩니다.
중요한 보안 주의사항
API 키를 복사한 뒤에는 채팅창이나 메모 앱에 붙여 넣지 마세요. 바로 다음 단계에서 .env 파일에 저장합니다. 다른 사람에게 노출되었다면 해당 키를 폐기하고 새로 발급받아야 합니다.
4. .env 파일과 .gitignore 이해하기
이제 발급받은 API 키를 안전하게 보관해야 합니다.
이때 사용하는 것이 .env 파일입니다.
.env는 비밀 정보를 보관하는 파일
.env는 프로그램이 실행될 때 필요한 비밀 정보를 저장하는 파일입니다.
예를 들어 다음과 같은 정보가 들어갈 수 있습니다.
- API 키
- 이메일 주소
- 데이터베이스 비밀번호
- 외부 서비스 인증 정보
이번 실습에서는 Resend API 키와 이메일 주소를 저장하겠습니다.
.gitignore는 Git에서 제외할 파일을 지정
.gitignore는 Git이 특정 파일을 관리하지 않도록 지정하는 파일입니다.
예를 들어 .env 파일이 GitHub에 올라가면 API 키가 다른 사람에게 공개될 수 있습니다.
따라서 .env 파일을 Git의 관리 대상에서 제외해야 합니다.
두 파일의 역할은 다음과 같습니다.
.env
비밀 정보를 저장하는 파일
.gitignore
GitHub에 비밀 파일이 올라가지 않도록 제외하는 설정
5. .gitignore를 먼저 설정하기
이 단계에서는 순서가 매우 중요합니다.
먼저 .env 파일을 만들지 말고 .gitignore부터 확인해야 합니다.
안티그래비티에서 기존 프로젝트 폴더를 엽니다.
왼쪽 파일 목록에서 .gitignore를 찾아 클릭합니다.
파일 안에 다음 내용이 있는지 확인합니다.
.env*
이 설정은 .env로 시작하는 파일을 Git에서 제외한다는 의미입니다.
만약 없다면 다음 프롬프트를 사용합니다.
📋 안티그래비티 복사용 프롬프트
현재 프로젝트의 .gitignore 파일을 확인해줘. .env* 항목이 있는지 확인하고, 없다면 추가해줘. 기존 설정은 삭제하지 마. 수정한 내용을 보여줘.
설정이 완료되면 다음 단계로 넘어갑니다.
주의
이미 Git이 추적하고 있는 .env 파일은 .gitignore에 추가하는 것만으로 추적이 중단되지 않습니다. 기존에 추적된 적이 있다면 Git 추적 상태도 별도로 확인해야 합니다.
6. .env 파일 만들고 API 키 저장하기
이제 비밀 정보를 저장할 파일을 만듭니다.
안티그래비티의 왼쪽 파일 목록에서 새 파일을 생성합니다.
파일 이름은 다음과 같이 입력합니다.
.env
파일을 열고 다음 두 줄을 작성합니다.
RESEND_API_KEY=실제_API_키
CONTACT_EMAIL=내_이메일_주소
위 내용에서 실제_API_키 부분에는 Resend에서 발급받은 키를 넣습니다.
내_이메일_주소에는 Resend에 가입한 이메일 주소를 입력합니다.
실제 입력할 때는 예시 문구를 그대로 사용하지 않습니다.
작성할 때 주의할 점
- 변수 이름은 대문자로 정확히 입력합니다.
- 등호 앞뒤에 불필요한 공백을 넣지 않습니다.
- 값을 임의로 따옴표로 감싸지 않습니다.
- 파일 이름이 반드시 .env인지 확인합니다.
- 저장한 후 파일을 닫습니다.
이제 Git이 .env 파일을 제외하는지 확인해야 합니다.
안티그래비티에 다음과 같이 요청합니다.
📋 복사용 프롬프트
git status를 실행해서 현재 Git 상태를 보여줘. .env 파일이 변경 목록에 나타나는지 확인하고, API 키나 이메일 주소 같은 비밀 값은 출력하지 마. .env가 목록에 보이면 작업을 중단하고 알려줘.
.env 파일이 변경 목록에 나타나지 않아야 정상입니다.
만약 .env가 표시된다면 GitHub에 올리지 말고 .gitignore와 Git 추적 상태를 다시 확인합니다.
7. 안티그래비티로 연락하기 기능 만들기
이제 웹사이트에 이메일 문의 기능을 추가하겠습니다.
방문자가 이름과 문의 내용을 입력하고 보내기 버튼을 누르면 Resend를 통해 내 이메일로 전달되는 기능입니다.
이번 실습은 Next.js 프로젝트를 기준으로 진행합니다.
① 연락하기 기능 요청하기
안티그래비티에서 새 대화를 열고 다음 프롬프트를 입력합니다.
📋 안티그래비티 복사용 프롬프트
현재 웹사이트 맨 아래에 연락하기 기능을 만들어줘.
입력 항목은 다음과 같아.
다음 조건을 지켜줘.
- 공식 Resend 패키지를 사용해줘.
- API 주소는 /api/send로 만들어줘.
- 발신 주소는 onboarding@resend.dev를 사용해줘.
- 받는 주소는 process.env.CONTACT_EMAIL에서 읽어줘.
- API 키는 process.env.RESEND_API_KEY에서 읽어줘.
- API 키와 이메일 주소를 코드에 직접 작성하지 마.
- 서버에서만 API 키를 사용하도록 만들어줘.
- Resend 객체는 요청 처리 함수 안에서 생성해줘.
- 필수 환경변수가 없으면 이해하기 쉬운 오류를 반환해줘.
- 성공하면 화면에 '보냈어요!'를 표시해줘.
- 실패하면 안전하게 처리된 오류 메시지를 보여줘.
- 입력값 검증과 기본적인 스팸 방지 처리를 고려해줘.
기존 웹사이트 디자인과 기능은 유지하고, 필요한 파일만 수정해줘.
여기서 중요한 것은 API 키를 프롬프트에 직접 입력하지 않는 것입니다.
AI에게는 환경변수 이름만 알려주면 됩니다.
② AI가 생성한 코드 확인하기
안티그래비티가 작업을 완료하면 변경된 파일을 확인합니다.
특히 Next.js 프로젝트라면 다음 파일이 생성되거나 수정될 수 있습니다.
app/api/send/route.ts
프로젝트 구조에 따라 API 경로는 다를 수 있습니다.
중요한 것은 다음 세 가지입니다.
- Resend 공식 패키지를 사용했는가?
- API 키를 process.env.RESEND_API_KEY에서 읽는가?
- 받는 주소를 process.env.CONTACT_EMAIL에서 읽는가?
또한 실제 API 키가 코드에 직접 들어가 있으면 안 됩니다.
확인 후 변경 사항을 승인합니다.
③ Resend 객체를 함수 안에서 생성하는 이유
Resend 객체를 서버 코드의 최상단에서 생성하면 환경변수가 없는 상태에서 모듈이 초기화될 때 문제가 발생할 수 있습니다.
따라서 요청 처리 함수 안에서 환경변수를 확인한 다음 객체를 생성하도록 구성하는 것이 좋습니다.
이렇게 하면 환경변수가 누락된 경우에도 사이트 전체가 아니라 이메일 전송 요청에서 오류를 처리할 수 있습니다.
8. 내 컴퓨터에서 이메일 전송 테스트하기
이제 실제로 이메일이 도착하는지 확인하겠습니다.
먼저 안티그래비티에서 개발 서버를 실행합니다.
📋 복사용 프롬프트
현재 프로젝트를 npm run dev 명령어로 실행해줘. 서버가 정상적으로 실행되면 접속할 수 있는 localhost 주소를 알려줘.
보통 다음 주소로 접속할 수 있습니다.
http://localhost:3000
3000번 포트를 다른 프로그램이 사용하고 있다면 3001번 등 다른 포트가 사용될 수 있습니다.
이메일 보내기 테스트
- 브라우저에서 localhost 주소를 엽니다.
- 페이지 아래쪽으로 이동합니다.
- 연락하기 영역을 찾습니다.
- 이름과 문의 내용을 입력합니다.
- 보내기 버튼을 클릭합니다.
- 보냈어요! 메시지가 나타나는지 확인합니다.
- Resend에 가입한 이메일 계정을 확인합니다.
Gmail을 사용한다면 기본 받은편지함뿐 아니라 업데이트 탭과 스팸함도 확인하세요.
Resend 대시보드의 Emails 메뉴에서도 발송 기록과 상태를 확인할 수 있습니다.
테스트 이메일의 수신 제한
Resend의 기본 테스트 발신 주소인 onboarding@resend.dev를 사용할 때는 수신 주소에 제한이 있습니다.
일반적으로 Resend에 가입한 본인 이메일 주소로 테스트해야 합니다.
다른 사람에게도 이메일을 보내려면 본인 도메인을 Resend에 등록하고 DNS 인증을 완료하는 과정이 필요합니다.
이 부분은 다음 단계에서 도메인을 연결할 때 함께 설정할 수 있습니다.
9. GitHub에 업로드하기 전에 .env 확인하기
내 컴퓨터에서 이메일이 정상적으로 도착했다면 이제 GitHub에 변경 사항을 올립니다.
하지만 여기서 반드시 확인해야 할 것이 있습니다.
.env 파일이 GitHub에 올라가면 안 됩니다.
안티그래비티에 다음과 같이 요청합니다.
📋 복사용 프롬프트
현재 변경된 파일 목록을 확인해줘. .env와 API 키, 비밀번호 등 비밀 정보가 포함된 파일이 커밋 대상에 들어가지 않았는지 확인해줘. 비밀 값 자체는 출력하지 마. 안전한 파일만 커밋하고 GitHub로 push해줘. 커밋 메시지는 '연락하기 이메일 기능 추가'로 해줘.
AI가 보여 주는 파일 목록을 직접 확인합니다.
특히 git add 명령으로 추가되는 파일 목록에 .env가 없는지 확인하세요.
GitHub에 업로드한 뒤에도 저장소의 파일 목록을 새로 고쳐 확인합니다.
.gitignore는 보이지만 .env는 보이지 않아야 정상입니다.
이미 .env가 GitHub에 올라갔다면?
단순히 파일을 삭제하는 것만으로는 충분하지 않습니다.
- Resend에서 노출된 API 키를 폐기합니다.
- 새 API 키를 발급받습니다.
- .env와 Vercel 환경 변수에 새 키를 등록합니다.
- GitHub에 남은 비밀 정보도 안전하게 정리합니다.
- 필요하면 Git 기록에서 해당 정보를 제거합니다.
10. Vercel 환경 변수에 API 키 등록하기
이제 가장 중요한 단계입니다.
내 컴퓨터에서는 이메일이 정상적으로 전송되었지만, 인터넷에 공개된 Vercel 주소에서는 오류가 발생할 수 있습니다.
이유는 간단합니다.
Vercel은 GitHub에 올라간 프로젝트 파일을 가져옵니다.
하지만 보안을 위해 GitHub에 올리지 않은 .env 파일까지 자동으로 가져오지는 않습니다.
따라서 Vercel에 비밀 정보를 별도로 등록해야 합니다.
① Vercel 프로젝트 열기
Vercel 홈페이지에 로그인합니다.
앞서 배포한 my-first-site 프로젝트를 선택합니다.
새로운 프로젝트를 만들 필요는 없습니다.
② Environment Variables 메뉴 선택
프로젝트 왼쪽 메뉴에서 Settings 또는 Environment Variables 항목을 찾습니다.
화면에 따라 Settings 안에서 Environment Variables를 선택해야 할 수도 있습니다.
오른쪽 위의 Add Environment Variable 버튼을 클릭합니다.
③ 첫 번째 환경 변수 등록
첫 번째 줄에는 Resend API 키를 등록합니다.
Key
RESEND_API_KEY
Value
Resend에서 발급받은 실제 API 키
Key에는 변수 이름을 입력합니다.
Value에는 실제 API 키를 입력합니다.
값을 입력할 때 앞뒤에 공백이나 따옴표가 들어가지 않도록 주의하세요.
④ 두 번째 환경 변수 등록
다음으로 + Add new variable을 눌러 두 번째 항목을 추가합니다.
Key
CONTACT_EMAIL
Value
Resend 가입에 사용한 이메일 주소
두 변수의 이름은 .env 파일에 작성한 이름과 정확히 일치해야 합니다.
대문자와 밑줄까지 확인하세요.
⑤ Production 환경 확인하기
환경 변수를 적용할 환경을 선택하는 항목이 있습니다.
이번 실습에서는 공개 웹사이트에 적용하기 위해 Production을 선택합니다.
설정을 확인한 다음 Save를 누릅니다.
11. Redeploy를 반드시 실행해야 하는 이유
환경 변수를 등록하고 저장했다고 해서 즉시 공개 웹사이트에 적용되는 것은 아닙니다.
이 부분에서 초보자들이 자주 실수합니다.
Vercel에 환경 변수를 새로 등록했다면 다시 배포해야 합니다.
이 과정을 Redeploy라고 합니다.
Redeploy 실행 순서
- 환경 변수 두 개가 정상적으로 저장되었는지 확인합니다.
- 환경 변수 저장 후 나타나는 Redeploy 안내를 확인합니다.
- Redeploy 버튼을 클릭합니다.
- 확인 창이 나타나면 다시 Redeploy를 선택합니다.
- Deployments 메뉴에서 배포 상태를 확인합니다.
저장 안내를 놓쳤다면 Deployments 메뉴에서 해당 배포의 오른쪽에 있는 점 세 개 메뉴를 눌러 Redeploy를 선택할 수도 있습니다.
반드시 기억하세요!
환경 변수 등록 → Save → Redeploy → Ready
이 과정을 완료해야 새 환경 변수가 공개 웹사이트에 반영됩니다.
12. 공개 웹사이트에서 이메일 보내기
이제 마지막 테스트입니다.
Vercel의 Deployments 메뉴에서 가장 최근 배포 상태를 확인합니다.
초록색 Ready가 표시되어야 합니다.
그다음 공개된 .vercel.app 주소로 접속합니다.
- 웹사이트를 새로 고침합니다.
- 연락하기 영역으로 이동합니다.
- 이름과 문의 내용을 입력합니다.
- 보내기 버튼을 누릅니다.
- 보냈어요! 메시지가 나타나는지 확인합니다.
- Resend의 Emails 메뉴에서 발송 결과를 확인합니다.
- 내 이메일 받은편지함을 확인합니다.
이메일이 정상적으로 도착했다면 모든 과정이 완료된 것입니다.
최종 성공 확인
① 내 컴퓨터에서 이메일 전송 성공
② GitHub에 코드 업로드 완료
③ Vercel 환경 변수 등록 완료
④ Redeploy 후 Ready 확인
⑤ 공개 주소에서 보낸 이메일이 실제 메일함에 도착
13. 자주 발생하는 오류와 해결 방법
① RESEND_API_KEY 또는 CONTACT_EMAIL이 없다는 오류
원인
Vercel에 환경 변수가 등록되지 않았거나 Redeploy를 진행하지 않은 경우입니다.
해결 방법
- Vercel Environment Variables를 확인합니다.
- RESEND_API_KEY가 있는지 확인합니다.
- CONTACT_EMAIL이 있는지 확인합니다.
- Redeploy를 실행합니다.
- Ready 상태가 된 후 다시 테스트합니다.
② 403 오류가 발생하는 경우
다음과 같은 메시지가 표시될 수 있습니다.
You can only send testing emails to your own email address
원인
Resend의 테스트 발신 주소를 사용하는 상태에서 가입한 이메일이 아닌 다른 주소로 보내려고 했기 때문입니다.
해결 방법
CONTACT_EMAIL을 Resend 가입에 사용한 이메일 주소와 일치시키세요.
다른 사람에게 보내려면 발신 도메인 인증이 필요합니다.
③ 401 API key is invalid
원인
- API 키를 잘못 입력함
- API 키 앞뒤에 공백이 있음
- API 키가 잘려서 저장됨
- 기존 API 키가 폐기됨
해결 방법
Resend에서 새 API 키를 발급받고 .env와 Vercel에 다시 등록합니다.
그다음 Redeploy를 실행합니다.
④ 보냈어요!가 나타나지만 이메일이 오지 않는 경우
원인
발송 요청은 성공했지만 이메일이 스팸함으로 이동했거나 실제 전달에 실패했을 수 있습니다.
해결 방법
- Gmail 업데이트 탭을 확인합니다.
- 스팸함을 확인합니다.
- Resend의 Emails 메뉴를 엽니다.
- 발송 상태가 Delivered인지 확인합니다.
Queued 상태라면 잠시 기다린 후 다시 확인합니다.
⑤ .env 파일이 GitHub에 올라간 경우
원인
.gitignore 설정이 잘못되었거나 이미 Git에서 추적하고 있던 파일일 수 있습니다.
해결 방법
먼저 노출된 API 키를 Resend에서 폐기합니다.
새 키를 발급받아 .env와 Vercel에 등록합니다.
그다음 Git 기록에서 비밀 정보를 제거하고 다시는 올라가지 않도록 설정합니다.
이미 공개된 키는 GitHub에서 파일을 삭제하는 것만으로 안전해지지 않습니다.
14. API 키를 안전하게 관리하는 방법
이번 실습에서 가장 중요한 부분은 API 키를 보호하는 것입니다.
API 키는 웹사이트의 기능을 실행하는 인증 정보입니다.
다음 원칙을 지키는 것이 좋습니다.
API 키를 보관해도 되는 곳
- 내 컴퓨터의 .env 파일
- Vercel Environment Variables
- API 키를 발급한 서비스의 보안 관리 화면
API 키를 공개하면 안 되는 곳
- GitHub 공개 저장소
- HTML과 JavaScript 공개 코드
- 안티그래비티 채팅창
- 카카오톡 및 이메일
- 화면 캡처와 녹화 영상
특히 브라우저에서 실행되는 코드에 API 키를 넣으면 방문자가 개발자 도구를 통해 확인할 수 있습니다.
따라서 API 키를 사용하는 작업은 서버에서 처리해야 합니다.
마무리: 이제 웹사이트에서 직접 이메일을 받을 수 있다
이번 실습에서는 단순히 웹사이트를 보여주는 수준에서 벗어나 방문자가 직접 문의할 수 있는 기능을 만들었습니다.
Resend API를 이용하면 별도의 메일 서버를 직접 구축하지 않고도 이메일 발송 기능을 추가할 수 있습니다.
또한 .env와 Vercel 환경 변수를 이용하면 API 키를 공개하지 않고 안전하게 관리할 수 있습니다.
오늘 꼭 기억할 핵심 내용
① Resend에서 API 키를 발급받습니다.
② .gitignore를 먼저 설정합니다.
③ .env에 API 키와 이메일 주소를 저장합니다.
④ GitHub에 .env를 올리지 않습니다.
⑤ Vercel에 환경 변수를 등록합니다.
⑥ Redeploy 후 공개 주소에서 이메일을 테스트합니다.
이제 여러분이 만든 웹사이트는 단순한 소개 페이지가 아닙니다.
방문자의 문의를 직접 받을 수 있는 웹사이트로 발전한 것입니다.
다음 단계에서는 개인 도메인을 연결하고 Resend에 도메인을 인증하여 다른 사람에게도 이메일을 보낼 수 있도록 확장해 볼 수 있습니다.
참고 자료: 스마택트 바이브코딩 6차시 - API와 비밀의 방
원본 학습 자료 보기
