소개
지난 토요일 AI 스터디 오프라인 모임에서 뉴스레터 제작과 자동화에 대해 배우면서, 기존에 '엄마표 수학'만 다루던 뉴스레터를 한 단계 발전시킬 수 있다는 영감을 얻었습니다. 급변하는 시대에 '아이를 어떻게 키워야 할지 모르겠다'는 고민을 가진 엄마들에게 더 폭넓은 정보를 제공하는 뉴스레터로 확장해보고 싶었습니다.
뉴스레터가 단순한 정보 전달이 아니라 브랜드를 알리고 팬덤을 키우는 효과적인 도구라는 것을 알게 되었고, 무엇보다 자동화된 시스템을 통해 효율적으로 제작할 수 있다면 지속가능한 콘텐츠 운영이 가능할 것이라고 생각했습니다.
특히 React Email은 구조적으로 재활용이 쉬워서, 한 번 템플릿을 만들어두면 내용만 바꿔서 계속 사용할 수 있다는 장점이 있어 실습해볼 가치가 충분해 보였습니다.
진행 방법
1단계: 뉴스레터 기획 및 콘텐츠 정리
첫 번째 세션에서 여행가님의 특강을 통해 내가 원하는 주제를 던져서 리서치를 시키고, 그 내용을 시각화해 체크하는 방법을 배웠습니다. 이를 바탕으로 1시간 정도 시간을 할애해 나에게 맞는 뉴스레터를 기획했습니다.
기존 '엄마표 수학'에서 확장하여 육아 전반에 대한 정보를 제공하는 뉴스레터로 방향을 잡았고, 이 내용을 마크다운(md) 파일로 정리했습니다.
2단계: Cursor에서 React Email 환경 설정
두 번째 세션에서는 개발자 f님의 뉴스레터 자동화 강의가 이어졌습니다. HTML, CSS, JavaScript, 그리고 React Email에 대한 눈높이에 맞는 설명을 들으며 실습을 진행할 수 있었습니다.
사용 도구: Cursor IDE
Cursor에서
indexing&docs기능을 활용해 React 공식 문서를 먼저 인덱싱했습니다.양식을 채운 다음, Cursor 채팅창에서
@기호를 누르고docs를 검색했습니다.검색 결과에서
react-email을 선택했습니다.앞서 정리한 md 파일을 채팅창에 업로드했습니다.
3단계: 프롬프트를 통한 템플릿 생성
사용한 프롬프트:
이 강의 이메일 템플릿 만들어줘. react-email로 만들어서 내가 확인할 수 있게 해줘. 이 템플릿에는 이름과 날짜가 변수로 들어갈 거야. 지금은 이름은 '홍길동', 날짜는 '2025-7-26'으로 넣어줘. 나중에 변수를 바꿔서 쓸게.이 프롬프트를 통해 Cursor가 React Email 기반의 뉴스레터 템플릿을 자동으로 생성해주었습니다.
4단계: 이미지 삽입 처리
이 과정에서 새롭게 알게 된 중요한 점이 있었습니다. Cursor에서는 이미지를 직접 삽입하는 방식이 아니라, 이미지를 URL로 변환한 후 삽입해야 한다는 것이었습니다.
사용 도구: https://imgbb.com/
imgbb.com 사이트에 접속
사용하고자 하는 헤더 이미지를 업로드
생성된 URL을 복사
Cursor에서 해당 URL을 이미지 소스로 활용
Tip: 실습 과정에서 HTML, CSS, JavaScript, React Email에 대한 기본 개념들을 차근차근 설명해주셔서 초보자도 충분히 따라할 수 있었습니다.
결과와 배운 점
뉴스레터의 전략적 가치: 단순한 정보 전달이 아닌 브랜드 구축과 팬덤 형성의 도구로 활용할 수 있다는 점
React Email의 장점: 구조적 재활용이 쉬워서 한 번 만들어두면 지속적으로 효율적으로 사용 가능
AI 도구 활용법: Cursor의
@docs기능을 통해 공식 문서를 참조하며 더 정확한 코드 생성 가능
도움 받은 글 (옵션)
스타트업 오프라인 스터디
