소개
스터디 장님들의 주옥 같은 강의 내용들은 휘발성이 강하다.
왕초보가 실습을 끝낸 후 사례보고 하려다가 날라가버린 강의들이 많아 아쉬움이 컸다.
이 번에는 실습 미완성 된 채 우선 강의 내용부터 정리해 본다.
뉴스레터 및 이메일 자동화 실습 강의
(2025년 7월 26일, CEO & CTO 스터디)
1. 개요
강의명: 뉴스레터 작성 및 이메일 자동화 실습
주제 통합: 콘텐츠 기획부터 HTML 기반 이메일 템플릿 자동 생성까지
강의자: CEO 스터디장 여행가 J, CTO 스터디장 개발자 F.
대상자: CEO CTO 스터디 그룹 수강생
강의 시간:
(CEO) 뉴스레터 작성 강의 60분, 실습 60분
(CTO) 이메일 자동화 강의 60분, 실습 60분
주요 도구: Cursor, React Email, imgbb, Markdown, HTML/CSS, 이메일 테스트 툴
2. 강의 목적
콘텐츠 기획 및 뉴스레터 구조 학습
HTML/CSS 기반 이메일 템플릿 생성
AI 코딩툴 Cursor와 React Email로 자동화 구현
이미지 링크 삽입 및 변수 활용을 통한 맞춤화
최종 HTML 템플릿의 실제 발송 테스트까지 실습
단순한 이론 전달이 아니라 기획 → 코드 생성 → 시각 확인 → 발송 테스트까지 전 과정을 직접 수행하는 실습 중심 강의.
3. 뉴스레터 작성의 기본 원리
3.1 콘텐츠 기획과 목적
콘텐츠는 브랜드 방향성과 일치해야 하며, 사용자의 구독 이유와 정보 욕구를 동시에 만족시켜야 함.
예시로 사용된 "CEO 스터디 웰컴 뉴스레터"는 브랜드의 아이덴티티(학습, 연결, 실습 중심)를 충실히 반영.
3.2 뉴스레터 구성요소
구분
내용
헤드라인
강렬한 첫인상, 클릭 유도
썸네일 이미지
감성 및 시각 인식 보완
본문 콘텐츠
정보 전달 + 동기 유도
CTA (Call To Action)
오픈채팅방 링크, 구 독 링크 등
HTML로 만들 경우,
<h1>,<img>,<p>,<a href>등의 태그를 활용
4. 이메일 자동화 실습 과정
4.1 기초 이해: HTML/CSS/React 구조 설명
HTML: 문서의 구조를 나타냄 (제목, 본문, 이미지 등)
CSS: 디자인 적용 도구 (색상, 크기, 간격)
React: UI를 컴포넌트 단위로 구성하여 재사용 가능
React Email: React로 이메일을 작성한 후 HTML로 변환
“HTML은 뼈대, CSS는 화장, JS는 동작”이라고 이해하면 구조를 명확히 파악할 수 있음."
REACT는 JS (JAVA SCRIPT) 기반으로 작동함.
4.2 실습 흐름 요약
기획 문서 작성
기획된 텍스트 내용을
.txt,.md,.csv로 저장변수 예:
{{name}},{{date}}
이미지 업로드
imgbb.com 사용해 이미지 업로드
“HTML 원본 링크”로 주소 복사
Cursor에서 코드 생성
폴더 생성 후
.tsx파일 생성명령어 예시:
이 텍스트를 리액트 이메일 템플릿으로 만들어줘 헤더에는 이 이미지를 넣고, 이름과 날짜는 변수로 처리해줘
React Email로 변환
JSX 구조를 기반으로 자동 코드 생성
변수 영역, 이미지 삽입 위치 명확히 구분됨
HTML 결과 확인
이메일 테스트 사이트에 HTML 붙여넣기
실제 메일 클라이언트(Naver, Gmail 등)로 전송 테스트
5. 기술적 이해와 자동화 구조
5.1 구조화의 중요성
React 기반의 컴포넌트는 템플릿 재사용에 매우 유리
뉴스레터를 구성하는 헤더·본문·푸터 등을 모듈화하여 조합 가능
5.2 변수 자동화
변수명
예시 값
설명
{{name}}
홍길동
수신자 이름
{{date}}
2025-07-26
이메일 발송일
{{imageUrl}}
이미지 주소
상단 배너 등
이러한 변수는 Make, Zapier, Typebot 등과 연계하면 자동 치환 및 발송 가능
6. 실습 예시 및 결과 분석
예시 템플릿 코드 (간소화 버전)
<h1>안녕하세요 {{name}} 님!</h1>
<p>2025년 7월 26일 CTO 스터디에 참여하신 것을 환영합니다.</p>
<img src="https://i.ibb.co/xxx/cto-banner.jpg" alt="CTO Banner" />
<a href="https://open.kakao.com/...">스터디방 입장하기</a>
결과
이메일 테스트 사이트에서 렌더링 성공
모바일·웹 양쪽에서 이미지, 링크 정상 작동 확인
HTML 변환 후에도 변수 치환이 자연스럽게 이루어졌으며, 실제 메일에서도 정확하게 표현됨 (왕초보는 이메일 발송에 성공하였으나, 수신 이메일 확인 결과 HTML이 아니고, MD파일이었다. 추후 다시 시도할 예정)
7. 교육 후 느낀점 및 확장 가능성
7.1 실전 효과
수강생 전원이 기획 → 코드 → 결과 확인 → 발송 테스트의 전체 흐름을 직접 수행함
코딩 초보자도 AI 기반 도구의 도움으로 이메일 자동화를 구현 가능하다는 것을 간접적으로 체험함.
7.2 향후 응용
회원가입/이벤트 환영 메일, 자동 리마인드 알림, 월간 뉴스레터 발송 등으로 확장 가능
Google Sheets, Make 등의 자동화 도구와 연계하면 CRM과도 연결 가능
8. 결론
이번 통합 강의는 단순한 기술 강의가 아니라, 콘텐츠와 기술의 융합, 기획과 실행의 연결을 체화하는 경험이었다. 특히 자동화를 단순화하는 Cursor와 React Email은 창업자, 기획자, 콘텐츠 제작자 누구나 활용 가능한 유용한 도구임을 확인하였다.
📎 부록
사용 도구 목록: Cursor, React Email, imgbb, HTML 테스트 툴
이미지 주소:
https://ibb.co/...참고 문서 인덱싱 방법: Cursor > Settings > Docs > react.email/docs 입력
발표 예시: CTO 웰컴 뉴스레터 자동 템플릿 (변수 포함)
*****************************************************************************************
(이메일 자동화 성공 사례)
아래는 제가 멘토로 모시기로 한 17기 CTO 이국환 님의 도움으로 CURSOR에서 MD파일을 HTML FILE로 바꾸고, IMGBB에서 이미지를 업로드하고 HTML로 링크를 넣어, 이메일 성공적으로 받은 이메일이다.
당일 실습시간에 '이메일자동화강의.MD' 파일을 만들어, CURSOR에 옮겨 놓고, HTML 파일로 만들어 달라고 했더니 그대로 만들어졌다.
CURSOR에서 작업한 모든 LOG가 파일탐색기에 저장되어 있다
IMGBB 파일에서 이미지를 업로드 하여 링크를 복사, HTML에 삽입하였다.
CURSOR에서 내가 만들은 파일 'NEWSLETTER-TEMPLATE.HTML'을 마우스 우클릭하면 내용을 내가 직접 볼 수 있다.
CURSOR에서 내가 만들은 파일 'NEWSLETTER-TEMPLATE.HTML'을 마우스 우클릭하여 직접 본 내용.
CURSOR에서 본문 내용을 복사하여 이메일로 보낸다. 이메일 주소는 개발자F 님이 만들어 준 이메일 주소.
이 메일 최종 확인.
결과와 배운 점
강의 와 실습으로 전체 흐름을 알수 있었다.
CURSOR에 대한 사전 상식이 전무 하였다. CURSOR 다운부터 시작하느라 정신이 없었지만 옆자리 위딘_Ryon님의 도움이 거의 100%였다. 이 것이 GPTERS의 장점이다.
CURSOR에서 HTML 생성이 되지 않았다. (추후 다시 할 예정)
17기 CTO 이국환 님의 도움으로 성공의 맛을 보았다. 마치 정상을 오른 것처럼 쾌감을 느꼈다.
다음에 배울 MAKE, N8N으로 뉴스레터 발행이 기대 된다.
도움 받은 글 (옵션)
CEO & CTO 스터디장 강의
17기 CEO 위딘 님 (실습 중 옆자리에서 CURSOR를 다운로드부터 가르쳐 줌)
17기 CTO 이국환 님 (CURSOR에서 MD FILE을 HTML로 만들고, IMGBB에서 이미지 업로드 및 링크, 이메일 발송 도와 줌)
