I Built an App in Lovable That Actually Emails Real Customers

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Lovable로 만든 앱에 Brevo를 연결하면 가입 정보를 저장하는 데서 나아가 실제 고객에게 환영 메일을 보내고, 운영자 알림·연락처 관리·자동 후속 메일까지 이어갈 수 있다.

📌 핵심 요점

1. 가입 폼과 데이터 저장만으로 고객 경험이 완성되지는 않는다. 영상의 Shelf 앱은 이름과 이메일을 수집하지만, 별도 연동 전에는 가입자와 운영자 모두 이메일을 받지 못한다.
2. 이메일 연동의 출발점은 발신자 확인과 도메인 인증이다. 시연자는 Brevo가 제공하는 DNS 레코드를 등록하고 인증한 뒤 자체 도메인에서 발송한다.
3. API 키로 커넥터를 연결한 다음에는 해당 연결을 Lovable 프로젝트에 지정해야 한다. 영상에서도 프로젝트 연결을 빠뜨린 첫 테스트는 발송에 실패했다.
4. 환영 메일은 Brevo의 활성화된 템플릿으로 관리하고, 앱은 템플릿 ID와 이름 변수를 전달한다. 이메일 문구와 디자인을 앱 코드에서 분리하는 방식이다.
5. 가입자에게 환영 메일을 보내는 것과 연락처를 관리하는 것은 별개다. 가입자를 목록에 추가하고, 목록 추가를 트리거로 이틀 뒤 후속 메일을 보내도록 자동화를 구성한다.

🧩 배경과 문제 정의

시연자는 Lovable로 빠르게 만든 앱이 이메일 주소를 수집해 표에 저장하는 단계에서 멈춘다는 문제를 제기한다. Lovable에 계정 가입·로그인 같은 기본 이메일 기능은 있지만, 영상의 대기 명단 폼에는 고객용 환영 메일이나 운영자 알림, 후속 연락이 연결돼 있지 않다.

사례 앱 Shelf는 읽고 싶은 책을 관리하는 서비스의 대기 명단 페이지다. 영상의 목표는 이 페이지에 Brevo를 연결해 자체 도메인의 개인화 환영 메일, 운영자 알림, 연락처 목록, 자동 후속 발송을 구현하는 것이다. 이메일 서비스는 협찬사이며, 자막에서 이름이 일부 ‘Bravo’로 표기되지만 서비스 소개와 설정 설명에서는 ‘Brevo’로 명시된다.

🕒 시간순 섹션별 상세정리

1. 가입 저장에서 멈추는 앱과 완성 목표

• 빠르게 만든 앱이 이메일을 수집해 저장해도 가입자 확인 메일, 운영자 알림, 후속 연락은 자동으로 생기지 않는다고 문제를 제기한다. [00:36]
• 자체 브랜드 환영 메일, 운영자 알림, 연락처 목록, 후속 자동화를 구현하겠다고 설명하고 이메일 도구의 협찬 사실을 공개한다. [01:04]
• 완성 상태를 먼저 보여준다. Emma의 가입 뒤 환영 메일과 운영자 알림이 도착하고, 연락처가 목록과 자동화에 들어가 이틀 뒤 후속 발송을 기다린다. [01:35]

2. Shelf 대기 명단 페이지 생성과 저장 테스트

• Lovable에 책 관리 앱 Shelf의 랜딩 페이지를 요청한다. 제목·설명과 함께 이름·이메일을 수집하고 제출 내용을 저장하도록 지시한다. [02:10]
• 첫 결과를 초안으로 보고 기능 설명 세 항목과 조기 접근 안내를 추가한다. 한 번의 큰 프롬프트보다 구체적인 수정 요청을 반복하는 방식을 권한다. [03:09]
• 폼 제출 뒤 데이터베이스에 행이 생기는 것을 확인한다. 그러나 이메일은 오지 않으며, 가입 이후 이메일이 제품의 첫인상을 만든다고 보여준다. [03:48]

3. 이메일 서비스의 역할과 무료 한도 소개

• 필요한 이메일 기능을 브랜드 템플릿, 활용 가능한 연락처 관리, 이벤트 알림, 자동 시퀀스로 정리하고 인증과 전달 가능성도 함께 언급한다. [04:11]
• Brevo 무료 플랜을 하루 300통, 카드 없이 시작할 수 있는 조건으로 보여준다. 월 약 9,000통이라는 설명은 하루 한도를 바탕으로 한 환산이다. [04:43]

4. 발신자 확인과 도메인 인증

• 발신자 이름과 이메일을 등록하고 이메일로 받은 코드로 확인한다. 이어 발신자 확인만으로는 충분하지 않으며 도메인 인증이 필요하다고 보여준다. [05:25]
• Brevo가 제공한 네 개의 DNS 레코드를 도메인 관리처인 Netlify에 수동으로 추가한다. 기존 이메일이 운영 중이어서 추가 내용을 직접 확인하려는 선택이다. [06:32]
• 레코드를 검증하고 도메인 인증을 완료한다. 화면에서는 인증됐지만 제공자 측에 완전히 반영되기까지 몇 시간이 걸릴 수 있다고 덧붙인다. [06:58]

5. API 키 생성과 Lovable 커넥터 연결

• API 키에 트랜잭션 이메일과 연락처 권한을 설정하고 계정 읽기 권한도 확인한다. 키를 촬영 화면이나 공개된 장소에 노출하지 말라고 강조한다. [07:37]
• Lovable 설정의 커넥터 목록에서 Brevo를 찾아 생성한 API 키를 입력하고 연결한다. [07:58]
• 다른 개발 환경에서도 REST API, SMTP, 여러 언어의 SDK를 사용할 수 있으며 실제 전달 없이 발송을 시험하는 샌드박스 모드도 있다고 보여준다. [08:20]

6. 첫 발송 실패의 원인과 실제 수신 확인

• 폼 제출 시 환영 메일을 보내도록 요청했지만 첫 테스트에서는 아무것도 발송되지 않는다. 커넥터를 만드는 것과 프로젝트에 연결하는 것이 별도 단계였기 때문이다. [08:44]
• 사용할 연결을 선택하고 프로젝트에 연결한 뒤, 자체 도메인에서 보낸 메일이 약 10초 만에 실제 받은편지함에 도착하는 것을 확인한다. [09:15]

7. 개인화 템플릿으로 이메일 내용 분리

• 이메일을 앱에 직접 작성하는 대신 Brevo 템플릿으로 관리한다. 발신자 이름·제목·미리보기 문구를 설정하고 드래그 앤드 드롭 편집기로 내용을 구성한다. [10:16]
• 이름을 동적 변수로 넣고 모바일 화면과 테스트 발송 기능을 살펴본다. 템플릿은 저장뿐 아니라 활성화해야 하며 템플릿 번호도 기록한다. [10:51]
• Lovable이 템플릿 ID와 이름 변수를 전달하도록 수정한다. 사용자 행동으로 발생하는 트랜잭션 이메일과 운영자가 목록에 보내는 마케팅 이메일을 구분한다. [11:31]

8. 운영자 알림과 연락처 목록까지 연결

• 가입자의 이름·이메일·시간을 운영자에게 알리도록 요청하고, Brevo에 대기 명단 목록을 만든다. 메일을 보내는 것과 연락처를 보관하는 것은 별개라고 보여준다. [12:09]
• 새 주소로 가입해 이름이 들어간 환영 메일과 운영자 알림이 실제로 도착하는 것을 확인한다. 자체 도메인 서명도 화면에서 살펴본다. [12:42]
• 트랜잭션 발송 로그에서 발송 내역을 확인하고, 가입자가 Brevo의 연락처 목록에 들어온 것을 확인한다. [12:58]

9. 이틀 뒤 후속 자동화와 성과 확인

• 대기 명단에 연락처가 추가되는 것을 트리거로 설정하고, 이틀의 시간 지연 뒤 추가 이메일을 보내는 워크플로를 구성한다. [13:46]
• 후속 메일에도 이름을 사용하고 발신자 이름을 Shelf로 맞춘다. 수신을 요청한 사람만 대상으로 삼아야 하며 외부에서 구한 목록을 가져오지 말라고 강조한 뒤 자동화를 활성화한다. [14:22]
• 전달, 추정·추적 가능한 열람, 고유 클릭, 반송 통계를 확인할 수 있다고 보여준다. 반응이 없으면 제목을 바꾸는 식으로 개선하라고 제안한다. [14:36]

10. 구현 결과와 비용·확장에 대한 마무리

• 단순 가입 저장에서 자체 도메인의 브랜드 메일, 운영자 알림, 연락처 목록, 자동 후속 연락으로 확장했다고 정리한다. 이메일 작업에는 약 30분이 걸렸다고 드러낸다. [15:02]
• 도메인 인증을 다시 강조하고, 과금이 주로 연락처 수보다 발송량에 기반한다고 보여준다. 무료 플랜은 하루 300통이며 카드가 필요 없다고 재차 안내한다. [15:22]
• 전체 가입 흐름을 요약한 뒤 신규 유료 고객의 Starter·Standard 플랜 첫 3개월 50% 할인 조건을 안내한다. 무료로 시작하고 확장이 필요할 때 유료 전환을 고려하라는 권유로 마친다. [16:02]

🧾 결론

• 영상은 Lovable 랜딩 페이지에 실제 이메일 발송과 고객 관리 흐름을 붙이는 과정을 보여준다. 개인화 환영 메일과 운영자 알림은 실제 수신 화면으로 확인한다.
• 도메인 인증, 프로젝트 연결, 템플릿 활성화처럼 화면 밖의 설정이 전체 흐름의 작동 여부를 좌우한다.
• 이메일 내용은 템플릿에서, 연락처는 목록에서, 후속 발송은 자동화에서 관리하면 각 부분을 따로 수정할 수 있다.
• 이틀 뒤 후속 메일은 자동화 설정과 대기 상태까지 제시된다. 실제로 이틀이 지난 뒤 수신되는 장면은 포함되지 않는다.

📈 투자·시사 포인트

• AI로 페이지를 빠르게 만드는 능력에 더해, 가입 이후의 확인·알림·연락처 관리까지 연결하는 역량이 제품 운영에 필요하다는 사례다.
• 초기 제품은 제작 속도뿐 아니라 가입자가 다음에 무엇을 받는지까지 설계해야 한다. 영상은 환영 메일을 가입 이후 제품의 첫인상으로 설명한다.
• 시연자는 Brevo가 발송·목록·자동화를 함께 제공해 성장 과정에서 도구를 바꾸는 부담을 줄일 수 있다고 평가한다. 다만 다른 서비스와의 비교 검증은 없다.
• 영상에서 소개한 무료 한도는 하루 300통이며, 과금은 주로 연락처 수보다 발송량에 기반한다고 설명한다. 가입자 메일·운영자 알림·후속 메일을 함께 고려해 필요한 발송량을 따져볼 수 있다.

⚠️ 불확실하거나 확인이 필요한 부분

• 영상은 Brevo 협찬 콘텐츠다. 무료 한도, 할인, 서비스 우수성에 관한 설명은 영상 속 주장으로 받아들여야 하며 현재 조건은 별도 확인이 필요하다.
• 자체 도메인에서 보낸 테스트 메일이 기본 받은편지함에 도착한 사례는 확인된다. 그러나 도메인 인증만으로 모든 수신처에서 받은편지함 도착이 보장된다는 검증은 아니다.
• 이틀 뒤 후속 발송은 워크플로 활성화와 대기 상태를 보여준다. 지연 시간이 지난 뒤 실제 발송·수신되는 결과는 영상에서 확인하지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 가입 후 필요한 동작을 환영 메일, 운영자 알림, 연락처 목록 저장, 후속 발송으로 나누어 정의한다.
• 발신자를 확인하고 Brevo가 제공하는 DNS 레코드를 등록한 뒤 도메인 인증 상태를 확인한다.
• API 키를 공개하지 않고 커넥터에 등록한 다음, 올바른 연결이 해당 Lovable 프로젝트에 지정됐는지 확인한다.
• 환영 메일 템플릿을 저장·활성화하고, 템플릿 ID와 이름 변수가 정확히 전달되는지 모바일 미리보기와 테스트 메일로 점검한다.

❓ 열린 질문

• 가입 저장은 성공했지만 이메일 발송이나 연락처 목록 추가가 실패하면 어떻게 감지하고 복구할 것인가?
• 동일한 사람이 다시 가입할 때 환영 메일과 후속 자동화가 중복 실행되는가?
• 이틀 뒤 후속 메일은 실제로 전달되며, 가입자의 열람이나 클릭으로 이어지는가?