AI로 10분 만에 완벽한 HTML 뉴스레터 만드는 법 (ft. 실전 프롬프트

오즈메일러는 디자이너의 도움 없이도 멋진 메일을 간편하게 완성할 수 있는 다양한 ‘템플릿’을 제공하고 있습니다. 많은 고객님들께서 이미 유용하게 잘 활용해 주고 계시죠. 🙂

하지만 마케팅을 하다 보면 반드시 'HTML 모드'를 사용해야 하는 순간이 찾아옵니다. 복잡한 표(Table)가 들어간 레이아웃을 잡아야 할 때나, 외부에서 전달 받은 고유한 디자인을 이미지 맵으로 얹어야 할 때가 그렇습니다.

"HTML이 필요한 건 알겠는데, 저는 개발자가 아닌 걸요?” 걱정하지 마세요. 우리에겐 든든한 파트너, 'AI(ChatGPT, Gemini 등)'가 있으니까요. 유료 버전을 사용하지 않아도 괜찮습니다! 무료 AI로도 충분하니 부담 없이 일을 시켜보세요. 오늘은 개발자의 도움 없이, AI를 활용해 완벽한 이메일 HTML을 작성하는 실전 꿀팁 3가지를 공유합니다. 아래 순서대로 프롬프트를 작성해서 HTML 이메일에 살을 붙여보세요.

1. 이메일 맞춤형으로 짜줘"라는 마법의 주문 🚨

AI에게 코딩을 시키기 전에 먼저 숙지하면 좋을 '이메일만의 특수한 룰'이 있습니다.

아웃룩(Outlook), 지메일(Gmail), 네이버 메일 등 수많은 이메일 클라이언트들은 최신 웹 기술을 완벽하게 지원하지 않습니다. 일반 웹사이트를 만들 듯 최신 코드로 작성하면, 기껏 만든 메일이 아웃룩에서는 다 깨져 보이는 대참사가 발생할 수 있습니다.

따라서 AI에게 지시할 때는 다음 두 가지 제약 사항을 알려주는 것이 좋습니다. 이 두 문장은 프롬프트에 필수로 복사해서 넣어주세요.

• "뼈대는 무조건 '테이블(Table) 태그'로 짜줘." (화면이 틀어지지 않게 옛날 방식으로 튼튼하게 틀을 잡는 주문입니다.)
• "디자인은 따로 빼지 말고 '인라인(Inline) 스타일'로 작성해 줘." (수신자 메일함에서 디자인이 날아가지 않게 꽉 잡아주는 주문입니다.)

2. 내 이미지에 '온라인 주소(URL)' 달아주기 🖼️

HTML 코드를 작성할 때 초보자분들이 가장 많이 당황하는 부분이 바로 '이미지'입니다. HTML 코드 안에는 내 PC에 있는 이미지 파일을 통째로 집어넣을 수 없기 때문이죠. 대신, 이미지가 인터넷 상에 올라가 있는 '주소(URL)'를 넣어야 합니다. 어떻게 하냐고요? 아주 간단합니다. 오즈메일러의 [이미지 보관함] 메뉴를 활용해 보세요!

1. 오즈메일러 [이미지 보관함]에 메일에 넣고 싶은 이미지를 업로드합니다.
2. 업로드 된 이미지 위에서 마우스 우클릭을 하고 '이미지 주소 복사'를 누릅니다.
3. 복사한 주소를 메모장에 살짝 적어두고, 이따가 AI에게 프롬프트를 입력할 때 같이 전달해 주면 끝입니다.

이미지가 여러 개일 경우, AI가 헷갈리지 않게 순서와 배치할 위치를 상세하게 알려주는 것이 좋습니다.

3. 복사해서 바로 쓰는 '최종 실전 프롬프트' 💬

아무리 똑똑한 AI라도 구체적인 '역할'과 '조건'을 주어야 완벽한 코드를 뱉어냅니다.

폰트나 간격은 별도로 요청하지 않아도 AI가 알아서 최적화 해 주긴 합니다. 하지만 원하는 바가 뚜렷하다면 디테일하게 작성하는 것이 좋습니다. 앞서 준비한 '마법의 주문'과 '이미지 주소'를 하나로 합친 최종 예시 프롬프트를 확인해 보세요!

아래 내용을 전체 복사해서 괄호 안의 내용만 상황에 맞게 수정하시면 됩니다.

[프롬프트 복사하기]

너는 지금부터 10년 차 전문 이메일 퍼블리셔(코더)야.

다음 조건에 맞춰서 뉴스레터용 HTML 코드를 작성해 줘.

[기술적 조건]

• 모든 CSS 스타일은 무조건 '인라인(Inline) 스타일'로 작성한다.
• 레이아웃은 <table> 구조를 사용하여 안정적으로 만든다.
• 최대 너비는 600px, 배경색은 #FFFFFF로 설정한다.
• 아웃룩 다크모드 대응을 위해 텍스트 색상을 명확히 지정한다.

[뉴스레터 구성 데이터]

1. 상단 로고: [로고 이미지 URL] (120px, 우측정렬)
2. 메인 배너: [배너 이미지 URL] (100% 너비)
3. 본문 텍스트: [전체 원고 내용 붙여넣기]
4. 삽입 이미지: [이미지 URL] (상하 여백 20px)
5. 마무리 버튼: [링크 URL] (문구: [텍스트], 색상: #1D4ED8)

위 데이터를 바탕으로 깔끔하고 가독성 좋은 HTML 코드를 짜줘.

디테일하고 자세하게 요청하는 만큼 AI는 내가 원하던 코드를 내놓습니다. 딱히 크게 디자인 요소는 필요없고 일반적인 형태를 갖추기만 하면된다면, 작성해둔 텍스트와 이미지 링크만 잘 링크시키고 나머지는 알아서 보기 좋게 해달라 하는것도 시간을 단축하는 방법이 되기도 합니다.

4. AI가 코드를 짜줬다면? 이제 얹기만 하세요 🚀

AI가 스르륵 코드를 다 짜주었다면, 이제 이 코드를 복사하기만 하면 됩니다.

오즈메일러 발송 화면에서 [HTML/일반 편집 모드]를 선택하고, 하단의 [HTML 소스] 탭을 눌러 AI가 준 코드를 그대로 붙여 넣기 해보세요.

만약 확인해 보았을 때 간격이나 색상 등 이상한 부분이 있다면, 직접 코드를 고치려 하지 마시고 "버튼을 조금 더 둥글게 수정해 줘"처럼 AI에게 정확하게 짚어서 다시 수정 요청을 하는 것이 훨씬 빠릅니다.

💡 시간은 '콘텐츠'에 쓰여야 합니다.

"이 버튼 하나만 오른쪽으로 10px 옮겨주세요." 이제 이런 단순한 코딩 수정으로 시간과 에너지를 낭비할 필요가 없어졌습니다.

마케터의 진짜 무기는 화려한 코딩 실력이 아니라, '고객의 마음을 움직이는 메시지'를 기획하는 데 있습니다. 복잡한 코딩은 AI에게 맡기고, 오늘부터는 콘텐츠에 더 많은 시간을 투자해 보세요!

AI를 통해 직접 만든 나만의 HTML 템플릿, 지금 바로 오즈메일러에서 테스트 발송해보시는건 어떨까요?

뉴스레터 구독하기