[바이브코딩] Bolt.new로 이메일API 써보기

기획자/디자이너도 AI코딩(Bolt.new)하기! : 이메일 API

Jun 24. 2025

들어가며

안녕하세요. 기획자 김로린입니다.

기획자나 디자이너로 일하다 보면 "간단한 이메일 발송 기능만 있으면 되는데..."라고 생각한 적이 있으실 거에요. 회사에서 일을 하다보면 기획자, 디자이너, 마케터들은 단순한 문의 폼으로 설문 응답을 받고, 피드백 수집하고 알림을 이메일로 보내주는 프로세스를 자주 만나게 됩니다.

이번 편에서는 바이브코딩을 시작하는 기획자/디자이너들에게 가장 간단하지만 유용한 개발을 시작할 수 있는 가이드를 드립니다. AI 코딩 도구인 Bolt.new 와 무료 API를 활용해서 누구나 쉽게 이메일 시스템을 만들어볼게요.

(Bolt.new 가입 링크! https://bolt.new/?rid=lp5dkv)

이번 글에서는 Bolt.new와 EmailJS 를 사용해서 실제 작동하는 이메일 발송 시스템을 만드는 방법을 단계별로 알려드리겠습니다.

핵심 요약

1. 외부 API의 이해와 사용방법

API가 무엇인지, 어떻게 작동하는지 실제 경험으로 이해

EmailJS 같은 서드파티 서비스와의 연동 방법

무료 API 활용 전략과 한계점 파악

실무에서 자주 사용되는 API 연동 패턴 습득

2. Bolt.new 로 이메일 입력폼 개발

Bolt.new에서 프롬프트로 이메일 입력폼을 디자인해보기

단, Bolt.new를 시작하는 방법은 포함되어 있지 않아요!

3. Bolt.new의 장점

AI 기반 웹 개발: 자연어로 설명하면 코드가 자동 생성

실시간 미리보기: 코드 변경사항을 즉시 확인

배포 원클릭: 완성된 웹사이트를 바로 배포

무료 사용: 기본 기능은 무료로 사용 가능

모바일 앱 지원: Expo와의 파트너십을 통해 네이티브 모바일 앱도 생성 가능

Bolt.new에 대한 개인적 인사이트

Bolt.new는 Bubble, Webflow 등 노코드 툴을 사용하던 기획자였던 제가 AI코딩(바이브코딩)을 알게되면서 최근 가장 많이 사용하고 있는 툴입니다. 회원가입 즉시 무료 크레딧을 쓸 수 있지만 이메일 시스템을 만드시다가 모자랄 수도 있습니다.

저는 기획자/디자이너들이 AI코딩(바이브코딩)을 배우면 개발과 서비스 기획을 훨씬 더 잘 이해할 수 있다고 생각합니다. 단순히 도구 사용법을 넘어서서, 개발자와의 소통이 원활해지고, 실현 가능한 기획을 할 수 있게 되기 때문입니다.

Bolt.new 프로버전 무료로 받는 방법
- 현재 Bolt.new에서 글로벌 해커톤에 참여/가입하면 무료로 프로버전을 제공받을 수 있습니다.
https://worldslargesthackathon.devpost.com/?utm_source=bolt&utm_medium=landingpage&utm_campaign=event

EmailJS의 장점

서버 없이 이메일 발송: 백엔드 개발 없이 프론트엔드만으로 이메일 전송

무료 플랜: 월 200통까지 무료

다양한 이메일 서비스 지원: Gmail(Gmail 계정 필요), Outlook, Yahoo 등

간단한 설정: 복잡한 서버 설정 불필요

무료 이메일 API 비교

결론: 기획자/디자이너가 이메일 기능을 개발하려면 가장 단순한 EmailJS 을 추천!

EmailJS API를 간단히 이해해보기

1.먼저 EmailJS의 사용법을 이해해 보겠습니다.

아래는 제가 제작한 학습용 웹사이트입니다.

링크를 눌러보시면 코드 없이 EmailJS API를 셋팅하는 과정을 테스트할 수 있어요.

어떤 정보와 ID값들을 EmailJS에서 찾아서 여러분들은 그 내용을 기반으로 API를 사용할 수 있게 되고, 그걸로 이메일을 발송하도록 요청하게 됩니다. 그 부분을 화면으로 보면서 실습할 수 있습니다.

아래 학습용 사이트 역시 Bolt.new, Supabase 조합으로 직접 개발한 결과물입니다 :)

https://vibecodezero-emailjs.netlify.app/
EmailJS API 테스트 사이트

2. EmailJS에서 이메일 서비스 연결

EmailJS가입/로그인 → 대시보드에서 "Email Services" 클릭

"Add New Service" → "Gmail" 선택할게요.

Gmail 계정으로 로그인하여 권한 승인

Service ID 복사 (예: service_abc123)

3. 발송할 이메일 템플릿 생성

"Email Templates" → "Create New Template"

템플릿 내용 작성: 아무 템플릿 하나 선택 후, 내용은 임시 내용으로 넣어두셔도 됩니다.

템플릿을 하나 만들어두고 이 템플릿의 ID를 나중에 사용할 거에요.

Template ID 복사 (예: template_xyz789)

4. EmailJS의 API를 쓰기 위해서 Public Key 확인

"Account" → "General" 탭

Public Key 복사 (예: user_abc123xyz)

Bolt.new 에 EmailJS API 직접 써보기

1. EmailJS에서 이메일 서비스 연결

대시보드에서 "Email Services" 클릭

"Add New Service" → "Gmail" 선택할게요.

Gmail 계정으로 로그인하여 권한 승인

Service ID 복사 (예: service_abc123)

2. 발송할 이메일 템플릿 생성

"Email Templates" → "Create New Template"

템플릿 내용 작성: 아무 템플릿 하나 선택 후, 내용은 임시 내용으로 넣어두셔도 됩니다.

템플릿을 하나 만들어두고 이 템플릿의 ID를 나중에 사용할 거에요.

Template ID 복사 (예: template_xyz789)

3. EmailJS의 API를 쓰기 위해서 Public Key 확인

"Account" → "General" 탭

Public Key 복사 (예: user_abc123xyz)

4. Bolt.new로 입력 문의가 들어오면 이메일 알림을 받는 기능 개발

볼트에 가입/로그인합니다.

첫번째 프롬프트 : 첫 화면에 프롬프트를 붙이면 간단한 입력 문의폼을 생성할 수 있습니다.

"이름, 이메일, 메시지를 입력받는 깔끔한 문의 폼을 만들어줘. 보라색 그라데이션 배경에 흰색 카드 형태로 디자인하고, EmailJS를 사용해서 이메일을 보낼 수 있도록 해줘."

두번째 프롬프트. 화면에 프롬프트를 입력하면 간단한 입력 문의폼을 생성할 수 있습니다.

참고로 아래의 내용은 EmailJS에서 직접 생성하신 키와 ID값으로 넣으셔야 합니다.

다음과 같이 코드를 수정해줘:

1. emailjs.init("YOUR_PUBLIC_KEY") 부분에서 YOUR_PUBLIC_KEY를 "실제_퍼블릭_키"로 바꿔줘
2. emailjs.send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", formData) 부분에서:
- YOUR_SERVICE_ID를 "실제_서비스_ID"로 바꿔줘
- YOUR_TEMPLATE_ID를 "실제_템플릿_ID"로 바꿔줘
3. to_email: 'your-email@gmail.com' 부분을 to_email: '실제받을이메일@gmail.com'으로 바꿔줘