소개
이 사례는 제가 이전에 작성한 「콘텐츠 생성부터 단체 발송까지, 구글시트 CRM 자동화 실전 사례」를 확장한 실험에서 출발했습니다.
기존에는 Google Sheets를 CRM 데이터베이스로 활용하고 Apps Script를 중심으로 자동화 로직을 구성했다면, 이번에는 Apps Script 영역을 Lovable 기반 자체 앱으로 구현할 수 있을지를 검증해 보고자 했습니다.
특히 구글 시트는 고객 세그먼트 및 기본 CRM 데이터 저장소 역할만 담당하고,
이메일 콘텐츠 생성, HTML 미리보기, 발송 엔진은 완전히 독립된 앱 기능으로 분리하는 구조를 목표로 삼았습니다.
진행 방법
"Smart CRM 메일러" 기획 및 Lovable 프롬프트 생성(Gemini)
Service Account 생성(Google Sheet API 연동)
Lovable 앱 개발
앱 결과 화면
1. "Smart CRM 메일러" 기획 및 Lovable 프롬프트 생성(Gemini)
Gemini에서 실행
당신은 PRD 작성 전문가입니다. 첨부된 파일을 분석해서 PRD 작성해 주세요.첨부파일 :
"콘텐츠 생성부터 단체 발송까지, 구글시트 CRM 자동화 실전 사례" PDF파일
구글시트 캡처본 1 :
구글시트 갭쳐본 2:
메일 대량 발송만 구글시트와 연동하면 좋을것 같아. 다른 기능들은 자체 구현 앱 기능으로 구현할거야. 다시 PRD 작성해줘.구글 시트에는 고객 세그먼트 데이터 저장만 할거야. Apps Script를 이용한 발송 엔진은 자체 앱 기능으로 포함해줘.Google Sheets API를 연동할 때 OAuth 2.0 인증이 아니라 Service Account로 연동할 거야. 다시 수정해줘.이메일 자동 작성 기능은 자체 앱에 포함되어 있어서 스마트 칩은 인식할 필요가 없어. 다시 수정해줘.당신은 Lovable 프롬프트 작성 전문가입니다. Lovable 프롬프트 작성해 주세요.팁 : 기획을 꼭!!! 정밀하기 한 후 Lovable 프롬프트를 만들어 내야 Lovable에서 한번에 구현을 잘합니다.
2. Service Account 생성(Google Sheet API 연동)
GCP 접속 : https://cloud.google.com/free?hl=ko
콘솔 접속
프로젝트 생성
프로젝트 선택
Service Account 생성
서비스 계정
파일로 다운로드 됩니다.
서비스 계정 복사
Google Sheet 공유
Google Sheet API 허용
3. Lovable 앱 개발
Lovable 프롬프트 실행
Lovable에서 즉시 사용 가능한 수준으로 최적화된 **"AI 이메일 CRM & 발송 엔진"** 프롬프트입니다. 이 프롬프트는 자체 앱 내에서 콘텐츠 생성(Gemini), 시각적 확인(HTML 미리보기), 그리고 외부 DB 연동(Service Account)을 한 번에 처리하도록 설계되었습니다. --- ## 🚀 Lovable 시스템 구축 프롬프트 ### 1. 역할 및 목표 (Core Identity) "너는 자체 AI 엔진을 갖춘 **'Smart CRM 메일러'**를 구축하는 전문가야. 사용자가 대충 쓴 내용을 **Gemini 2.5 Flash API**를 통해 전문적인 메일로 바꾸고, 이를 **HTML/CSS 미리보기**로 시각화한 뒤, **Service Account**로 연동된 구글 시트 고객 명단에 개인화하여 대량 발송하는 것이 목표야." ### 2. 핵심 기능별 상세 지침 (Technical Requirements) #### **A. AI 콘텐츠 생성 (Gemini API Integration)** * **모델 설정**: `gemini-2.5-flash` 모델을 사용하여 응답 속도를 극대화해줘. * **작성 로직**: * 사용자가 '원안'을 입력하면 Gemini가 이를 분석해 '메일 제목'과 '다듬어진 본문'을 각각 생성해야 해. * 생성 시 "네, 알겠습니다" 같은 불필요한 서론은 제외하고 완성된 텍스트만 출력하도록 프롬프트를 구성해줘. #### **B. HTML/CSS 실시간 미리보기 (Live Preview)** * **렌더링**: 사용자가 작성하거나 AI가 생성한 메일 본문을 오른쪽 패널에서 실시간 HTML 미리보기로 보여줘. * **개인화 시뮬레이션**: 본문 내에 `{{이름}}` 또는 `{{닉네임}}` 문구가 포함되면, 이를 샘플 데이터로 치환하여 실제 수신자가 볼 화면을 렌더링해줘. * **디자인**: Tailwind CSS를 활용해 깔끔한 메일 템플릿(뉴스레터형/일반형)을 기본 적용해줘. #### **C. 구글 시트 연동 (Service Account DB)** * **인증 방식**: OAuth 로그인 대신 **Service Account JSON Key**를 사용하는 서버 간 통신을 전제로 해줘. * **데이터 파싱**: 특정 `Spreadsheet ID`와 `Sheet Name`을 입력받아 '이메일'과 '닉네임' 컬럼 데이터를 JSON 배열로 가져와야 해. * **동적 매핑**: 시트의 헤더를 읽어와 사용자가 어떤 컬럼을 '수신 이메일'로 쓸지 직접 매핑할 수 있는 UI를 제공해줘. #### **D. 자체 발송 엔진 (Sending Engine)** * **로직**: 시트의 각 행을 순회하며 `{{이름}}`을 실제 고객의 닉네임으로 치환하고 발송하는 백엔드 로직을 시뮬레이션해줘. * **피드백**: 발송 중 실시간 프로그레스 바와 함께 최종 성공/실패 건수를 팝업으로 알려줘. ### 3. UI/UX 디자인 가이드 * **레이아웃**: 좌측(콘텐츠 작성 및 AI 도구), 중앙(시트 데이터 로드 및 설정), 우측(실시간 HTML 미리보기)의 3단 구성을 선호해. * **컴포넌트**: * `Gemini Generate` 버튼에는 AI 아이콘을 적용해줘. * 발송 버튼은 명확한 강조 색상을 사용하고, 실수 방지를 위해 '최종 확인' 모달을 띄워줘. * **테마**: 신뢰감을 주는 비즈니스 블루 및 다크 모드 지원. --- **이 프롬프트를 Lovable에 입력하여 앱 생성을 시작해 볼까요?** * "서비스 계정 연동을 위한 백엔드 설정 로직도 같이 짜 드릴까요?" * "미리보기에 사용할 세련된 이메일 템플릿 코드를 추가해 드릴까요?"구글 시트 허용에 대한 Service Account 정보입니다. 해당 파일을 업로드 하고 해당 파일을 사용해서 구글 쉬트에 접근할 수 있도록 구현해 주세요.첨부파일 : crmdb-486312-d440d515167f.json
이메일 컬럼과 이름 컬럼을 연동된 구글 쉬트 컬럼으로 불러와야되. 현재 구글 시트와 연동이 되지 않는것 같아. 다시 확인하고 수정해줘.지금 메일이 발송이 안되고 있어. 분석해줘.Resend 사용하겠다고 Lovable이 제안하면 해당 방식을 선택하고 Key를 발급받아 입력하고 구현 진행하면 됩니다.
Google Gmail이 연동되지 않아 Resent Key를 발급받아 Key 입력해서 진행해야 합니다.
아래는 왜 Resend를 사용해야 되는지에 대한 설명입니다. 참고하세요.
공식 주소 : https://resend.com/emails
구글 워크스페이스(Gmail, Sheets 등)를 외부 서비스와 연동할 때 서비스 계정(Service Account)을 사용하는 과정에서 겪으시는 혼란을 정리해 드립니다. 1. 왜 구글 쉬트는 되고 Gmail은 안 될까? 구글 서비스마다 보안 정책과 접근 방식이 다르기 때문입니다. 구글 쉬트: 특정 문서의 '공유' 설정에 서비스 계정 이메일(예: [email protected])만 추가하면 비교적 쉽게 접근이 가능합니다. Gmail: 서비스 계정만으로는 본인의 개인 Gmail 사서함에 접근할 수 없습니다. Gmail은 보안이 훨씬 강력하여, 서비스 계정을 사용하려면 구글 워크스페이스 관리자 콘솔에서 '도메인 전체 권한 위임(Domain-Wide Delegation)' 설정을 해야 합니다. 이 과정이 복잡하고 보안상 위험 요소가 있어 Lovable 같은 서비스에서는 다른 대안을 제시하는 경우가 많습니다. 2. Resend로 전환하려는 이유가 뭐야? Lovable이나 다른 자동화 툴에서 Gmail 연동 대신 Resend를 제안하는 이유는 '이메일 발송 안정성' 때문입니다. Resend란? 개발자들을 위한 이메일 발송 전용 API 서비스입니다. (AWS SES나 SendGrid와 유사한 서비스입니다.) 이유 1 (설정의 간소화): Gmail API는 설정이 매우 까다롭고 인증(OAuth2) 만료 문제가 잦습니다. 반면 Resend는 API 키 하나만 넣으면 바로 이메일을 보낼 수 있어 연동이 훨씬 쉽습니다. 이유 2 (스팸 방지): 개인 Gmail 계정으로 대량의 자동화 메일을 보내면 구글에서 스팸으로 간주하여 계정을 차단할 수 있습니다. Resend는 비즈니스 이메일 발송에 최적화되어 있어 스팸 함에 빠질 확률이 적습니다. 이유 3 (비용 및 성능): 특정 규모까지는 무료로 제공되며, API 응답 속도가 Gmail보다 빨라 앱의 퍼포먼스를 높이는 데 유리합니다. 3. 어떻게 하면 좋을까? 단순 이메일 알림/발송이 목적이라면: Lovable의 가이드대로 Resend를 사용하는 것을 추천합니다. 도메인을 소유하고 있다면(예: [email protected]) 훨씬 전문적인 이메일을 보낼 수 있습니다. 꼭 내 Gmail 계정(@gmail.com)으로 보내야 한다면: Lovable 설정에서 'Service Account' 방식 대신 'OAuth 2.0' 또는 'App Password(앱 비밀번호)' 방식을 지원하는지 확인해 보세요. 서비스 계정 방식은 개인이 설정하기에 난이도가 매우 높습니다. 요약하자면, Gmail 연동이 어려운 이유는 구글의 강력한 보안 정책 때문이며, Resend는 이 복잡한 과정 없이 안정적으로 이메일을 보내기 위한 대체 수단이라고 이해하시면 됩니다.
4. 앱 결과 화면
메일 내용 자동 작성
원안을 대출 입력 해서 "AI로 다듬기" 버튼을 클릭하면 "메일 제목"과 "메일 본문"을 추천해 줍니다.
Google Sheet(CRMDB) 주소를 입력
Google Sheet URL을 입력하고 연동해서 "데이터 불러오기" 버튼을 클릭하면 Google Sheet에 저장된 데이터를 불러옵니다.
실시간 미리 보기 기능으로 전송될 메일을 확인할 수 있습니다. "발송하기" 버튼을 클릭하면 메일이 발송됩니다.
결과와 배운 점
이번 실습을 통해 기획의 정밀도가 곧 구현 성공률을 좌우한다는 점을 다시 한번 명확히 체감했습니다.
PRD를 충분히 구체화한 뒤 Lovable 프롬프트를 작성하자, 한 번의 실행만으로도 실제 서비스 수준에 가까운 앱이 구현되었습니다.
Google Sheets 연동에서는 OAuth 2.0이 아닌 Service Account 방식이 서버형 앱 구조에 훨씬 적합하다는 점을 실무적으로 이해하게 되었습니다.
특히 시트를 “CRM 데이터베이스”로 바라보고, 앱과의 관계를 명확히 분리하니 구조가 훨씬 단순해졌습니다.
이메일 발송 부분에서는 Gmail 연동의 한계를 직접 경험하면서,
Resend와 같은 이메일 전용 API 서비스가 왜 필요한지를 기술적·운영적 관점에서 명확히 이해할 수 있었습니다.
대량 발송, 스팸 리스크, 인증 복잡도를 고려하면 Gmail보다 Resend가 훨씬 현실적인 선택임을 확인했습니다.
또한 AI 콘텐츠 생성 → HTML 실시간 미리보기 → 개인화 발송이라는 흐름을 하나의 앱 안에서 완결하면서,
CRM 자동화는 단순 발송이 아니라 사용자 경험 설계의 문제라는 인식도 함께 얻을 수 있었습니다.
