📬 아이의 눈높이에서, 따뜻한 감성으로 전하는 영어교육 이야기 - 나만의 브랜드 뉴스레터 만들기 프로젝트 후기

소개

✅ 왜 뉴스레터인가요?

SNS가 “찾아오게 하는 마케팅”이라면, 뉴스레터는 “내가 먼저 다가가는 진심의 마케팅”입니다.
저는 교육 브랜드 ‘애들린 클래스’를 운영하면서, 일방적인 홍보보다는 꾸준한 신뢰와 감성 교감이 있는 채널이 필요하다고 느꼈습니다.
뉴스레터는 단순한 정보 전달이 아니라, 브랜드의 세계관과 철학을 차곡차곡 쌓아가는 관계형 마케팅이라고 생각합니다. 여름을 맞이하여 새로운 특강을 진행하게 되어 그동안 미루었던 뉴스레터를 CURSOR AI를 통해 만들어 보았습니다.

진행 방법

1. 뉴스레터 기획부터 시작

   

   ALT

   검은 색 화면에 한국어 텍스트 스크린 샷

   • 브랜드 톤앤매너 정리

   • 독자 페르소나 설정 (예: 초등 아이 교육에 관심 있는 30-40대 학부모)

   • 콘텐츠 구성안 기획

     1. 상단 로고/뉴스레터 명

        • 예: ADELINE MONTHLY │ 애들린 클래스 뉴스

     2. 헤드라인 배너

        • 티오 안내 / 특강 신청 링크 포함

     3. 핵심 콘텐츠 블럭

        • 🎯 수업 소식

        • 🎉 특강/이벤트

   학부모용 (월 1회)

   • 디자인: 파스텔 톤, 아기자기한 아이콘 및 친근한 레이아웃

   • 구성 안:

     1. 상단 배너 및 로고

     2. 수업 오픈 / 티오 소개

     3. 특강 또는 이벤트 안내

2. 콘텐츠 구성 & 시각화

   • 시원한 색감 + 직관적인 타이포 & 아이콘 활용

   • 참고 템플릿: Canva의 학급/가정용 뉴스레터 템플릿

3. Cursor 기반 리액트 이메일 템플릿 제작 가이드

목적: Header #1 + Body #4 재사용 구조의 리액트 이메일 템플릿을 Cursor에서 제작

✅ 준비 요약

• 템플릿 형식: React + JSX + inline CSS

• 사용 툴: Cursor, React Email, imgbb, putsmail

🧭 전체 작업 순서

🔹 1. React Email 공식 문서 확인

• 🔗 react.email/docs 에 접속

• 템플릿 구조, 컴포넌트 종류, CSS 사용 방식 확인

• 예제 코드 참고: <Section>, <Button>, <Text> 등

🔹 2. Cursor에서 새 폴더 만들기

• File > New Folder로 프로젝트 생성

• 예: /react-email-templates/adeline/

🔹 3. 필수 폴더 구조 만들기

📁 /adeline/ ├── components/ │ ├── Header1.jsx │ └── Body4.jsx ├── templates/ │ └── AdelineSummerNewsletter.jsx ├── assets/ │ └── summer-banner.png ├── styles/ │ └── email.css (선택사항)

🔹 4. Header #1 코드 작성

// components/Header1.jsx export default function Header1() { return ( <div style={{ backgroundColor: '#f2f2f2', padding: '20px', textAlign: 'center', fontSize: '20px', fontWeight: 'bold' }}> 📬 ADELINE ENGLISH CLASS </div> ); }

🔹 5. Body #4 코드 작성

// components/Body4.jsx export default function Body4({ title, content, cta }) { return ( <div style={{ padding: '20px', fontSize: '16px' }}> <h2>{title}</h2> <p>{content}</p> <a href={cta.url} style={{ display: 'inline-block', backgroundColor: '#00a86b', padding: '10px 20px', color: '#fff', textDecoration: 'none', borderRadius: '4px', marginTop: '10px' }}> {cta.label} </a> </div> ); }

🔹 6. 템플릿 결합 (AdelineSummerNewsletter)

// templates/AdelineSummerNewsletter.jsx import Header1 from '../components/Header1'; import Body4 from '../components/Body4'; export default function AdelineSummerNewsletter() { return ( <div style={{ fontFamily: 'Arial, sans-serif' }}> <Header1 /> <Body4 title="🎤 여름 특강 OPEN!" content="KPOP 발음 클래스와 영어 말하기 대회를 준비하세요. 여름방학을 영어 자신감으로 가득 채워보세요!" cta={{ url: 'https://adelineclass.kr/summer', label: '지금 신청하기' }} /> </div> ); }

🔹 7. 이미지 링크 넣기 (imgbb 사용)

• https://imgbb.com 에서 이미지 업로드

• 생성된 URL을 템플릿 내 <img src="..." /> 로 삽입

<img src="https://i.ibb.co/XXXX/banner.png" alt="Summer Banner" width="100%" />

🔹 8. 이메일 테스트 (putsmail 사용)

• https://putsmail.com 접속

• HTML로 내보낸 이메일 내용 붙여넣기

• 이메일 주소 입력 후 “Send” 클릭

🔹 9. 템플릿 재활용 전략

• Header1, Body4를 다른 템플릿에도 import하여 자유롭게 조합

• JSX 기반이므로 텍스트/버튼/배경 등 쉽게 교체 가능

• 반복 템플릿 제작에 용이함

📎 요약 이미지 기반 핵심 포인트

✅ 다음 요청 가능:

• 위 내용 Markdown 파일로 저장

• Cursor용 .jsx 파일 압축 제공

• 다크모드 or 모바일 대응 템플릿 추가 디자인

ALT

Adline 영어 수업

VS CANVA로 제작

ALT

클래스 뉴스 여름 판

결과와 배운 점

🎯 결과 & 배운 점

• 단순한 정보보다 ‘감성 + 진심 + 구체성’이 전달력을 높임

• CURSOR 를 통해 머릿속의 기획이 아웃풋으로 나오는 경험

• 뉴스레터는 브랜드의 목소리를 온전히 담을 수 있는, 콘텐츠 퍼널의 시작점이라는 점을 체감

✨ 나만의 꿀팁 3가지

1. 헤드라인은 감정에서 시작하세요.

   • 궁금증 + 공감 요소를 넣으면 클릭률이 올라갑니다.

2. 나열식 말고 적절한 이미지를 넣어 가독성을 올리세요. 여름이라 여름과 관련된 이미지를 넣었습니다.

3. 뉴스레터 톤은 바꾸지 말고, 포맷만 새롭게

   • 브랜드 결을 지키면서 섹션만 바꾸는 게 더 효과적입니다.

😅 시행착오도 있었어요 뉴스레터의 헤드 이미지가 계속 보이지 않아 고생하다 결국 다른 업로드 사이트 이용하여 이미지를 올리게 되었습니다. 또한 아직은 CANVA로 제작하는 것 만큼의 이미지로 전달하는 뉴스레터 제작은 좀 더 공부를 해야 할듯

📌 앞으로의 계획

• 시즌별 콘텐츠 시리즈 기획 (예: 여름방학 영어 꿀팁, 새학기 영어 준비 등)

• 독자 피드백을 반영한 코너 신설

• AI 요약/추천 콘텐츠 기능도 도입할 예정

도움 받은 글 (옵션)

17기 스타트업 실험실 CEO*CTO 7월 26일 오프라인 강의