AI에게 원하는 디자인을 말하기만 하면 코딩을 몰라도 빠르게 이메일 HTML을 만들어주는 시대입니다. 메일 제작이 한결 편리해지면서, 최근 뉴스레터 디자인의 자유도를 높이거나 브랜드 가이드에 세밀하게 핏을 맞추기 위해 코드를 직접 작성해 발송하는 분들이 눈에 띄게 늘고 있습니다.
스티비에서도 HTML을 활용하여 뉴스레터를 편집할 수 있습니다. 하지만 막상 붙여 넣으면 이미지가 깨지거나 오류가 생기는 경우가 있습니다. 코드에는 문제가 없어 보이는데 왜 그럴까요?
HTML 코드 오류로 깨진 이메일 레이아웃 예시
AI로 만든 HTML이 이메일에서 깨지는 이유
별도로 조건을 지정하지 않으면 AI는 웹사이트 기준에 가까운 HTML을 생성합니다. 웹사이트와 이메일 모두 동일한 HTML 문법을 사용하지만, 실제로는 동작 방식이 꽤 다릅니다.
웹사이트는 크롬, 사파리 같은 브라우저가 코드를 읽어 화면에 보여줍니다. 반면 이메일은 G메일, 네이버 메일 같은 메일 앱이 코드를 읽습니다. 이때 메일 앱은 보안과 안정성을 이유로 브라우저에 비해 훨씬 많은 기능을 제한합니다.
심지어 같은 G메일이라도 PC 웹과 모바일 앱에 따라 지원 기준이 다릅니다. 이 때문에 웹사이트 기준으로 작성된 HTML을 이메일에 그대로 사용하면, 일부 코드가 무시되거나 의도치 않게 디자인이 깨지는 현상이 발생합니다.
해결 방법: AI에게 처음부터 '이메일용 HTML'이라고 알려주세요
AI에게 단순히 "이런 느낌의 HTML 만들어줘"라고 요청하는 것만으로는 부족합니다. 이메일 환경에서는 화려한 최신 코드보다 여러 메일 앱에서 디자인이 무너지지 않고 안정적으로 보이는 코드가 더 중요합니다. 가장 좋은 방법은 AI에게 처음부터 이메일 환경의 제약에 맞는 조건을 함께 전달하는 것입니다.
아래 프롬프트 내용을 복사해서 AI에게 보낼 요청문 앞에 붙여보세요. 이미지 URL과 브랜드 색상 코드는 실제 사용할 값으로 바꾸시면 됩니다. 이미 AI로 만들어둔 HTML이 있다면, 기존 코드와 함께 "이 조건에 맞게 수정해 줘"라고 요청해도 좋습니다.
스티비에서 발송할 이메일용 HTML 코드를 작성해줘. 일반 웹페이지용 HTML이 아니라, 이메일 클라이언트에서 안정적으로 보이는 보수적인 HTML 이메일 코드로 작성해줘.
목표:
- 스티비 HTML 에디터에 붙여넣을 수 있는 완성 HTML 코드
- 이메일 본문뿐 아니라 받은 편지함에 표시될 미리보기 텍스트까지 포함된 코드
- G메일, 네이버 메일, Apple Mail, Windows용 Outlook classic 데스크톱에서도 최대한 깨지지 않는 구조
- 화려한 인터랙션보다 호환성, 가독성, 안정성을 우선한 이메일
출력 규칙:
- 설명 없이 최종 HTML 코드만 출력해줘
- 생성 후 스스로 위 조건을 검토하되, 검토 과정은 출력하지 마
- 위반 사항이 없도록 수정한 최종본만 보여줘
필수 작성 규칙:
- 최종 HTML의 첫 번째 요소는 반드시 미리보기 텍스트용 숨김 table이어야 해
- 미리보기 텍스트용 table은 아래 형식을 사용해줘
- 미리보기 텍스트용 table의 td 안에는 사용자가 입력한 미리보기 텍스트만 넣어줘
- 미리보기 텍스트는 줄바꿈 없이 한 줄로 넣어줘
- 미리보기 텍스트 안에는 <br> 태그나 불필요한 공백을 넣지 마
- <table id="$stb-htmlv3$" border="0" cellpadding="0" cellspacing="0" style="height:0px; max-height:0px; border-width:0px; border-color:initial; border-image:initial; visibility:hidden; line-height:0px; font-size:0px; overflow:hidden; display:none;"><tr><td>여기에 미리보기 텍스트를 입력하세요.</td></tr></table>
- 레이아웃은 table 기반으로 작성해줘
- 모든 table 태그에는 border="0" cellpadding="0" cellspacing="0"을 넣어줘
- CSS는 각 태그의 style 속성에 인라인으로 작성해줘
- <script>, <head>, <body>, <html>, <style>, <form>, <input>, <button>, <noscript>, <meta>, <iframe> 태그는 사용하지 마
- onclick, onload, onerror 등 이벤트 관련 속성은 사용하지 마
- div, flex, grid, position, float 기반 레이아웃은 피하고 table 중첩으로 구현해줘
- Outlook classic Windows 데스크톱 호환성을 위해 background-image, 복잡한 CSS 선택자, 최신 CSS 레이아웃에 의존하지 마
- 이미지는 https://로 시작하는 외부 URL만 사용하고, jpg/png/gif 형식만 사용해줘
- svg, base64 이미지는 사용하지 마
- 이미지 URL이 제공되지 않은 경우 임의의 이미지 URL을 만들지 말고 이미지 영역을 생략해줘
- img 태그에는 width 속성과 alt 속성을 넣어줘
- 이미지에는 가능하면 display:block; border:0; outline:none; text-decoration:none; 스타일을 넣어줘
- 여백은 margin 대신 padding을 사용해줘
스티비에서 발송할 이메일용 HTML 코드를 작성해줘. 일반 웹페이지용 HTML이 아니라, 이메일 클라이언트에서 안정적으로 보이는 보수적인 HTML 이메일 코드로 작성해줘.
목표:
- 스티비 HTML 에디터에 붙여넣을 수 있는 완성 HTML 코드
- 이메일 본문뿐 아니라 받은 편지함에 표시될 미리보기 텍스트까지 포함된 코드
- Gmail, 네이버메일, Apple Mail, Windows용 Outlook classic 데스크톱에서도 최대한 깨지지 않는 구조
- 화려한 인터랙션보다 호환성, 가독성, 안정성을 우선한 이메일
출력 규칙:
- 설명 없이 최종 HTML 코드만 출력해줘
- 생성 후 스스로 위 조건을 검토하되, 검토 과정은 출력하지 마
- 위반 사항이 없도록 수정한 최종본만 보여줘
필수 작성 규칙:
- 최종 HTML의 첫 번째 요소는 반드시 미리보기 텍스트용 숨김 table이어야 해
- 미리보기 텍스트용 table은 아래 형식을 사용해줘
- 미리보기 텍스트용 table의 td 안에는 사용자가 입력한 미리보기 텍스트만 넣어줘
- 미리보기 텍스트는 줄바꿈 없이 한 줄로 넣어줘
- 미리보기 텍스트 안에는 태그나 불필요한 공백을 넣지 마
- 레이아웃은 table 기반으로 작성해줘
- 모든 table 태그에는 border="0" cellpadding="0" cellspacing="0"을 넣어줘
- CSS는 각 태그의 style 속성에 인라인으로 작성해줘
- script, head, body, html, style, form, input, button, noscript, meta, iframe 태그는 사용하지 마
- onclick, onload, onerror 등 이벤트 관련 속성은 사용하지 마
- div, flex, grid, position, float 기반 레이아웃은 피하고 table 중첩으로 구현해줘
- Outlook classic Windows 데스크톱 호환성을 위해 background-image, 복잡한 CSS 선택자, 최신 CSS 레이아웃에 의존하지 마
- 이미지는 https://로 시작하는 외부 URL만 사용하고, jpg/png/gif 형식만 사용해줘
- svg, base64 이미지는 사용하지 마
- 이미지 URL이 제공되지 않은 경우 임의의 이미지 URL을 만들지 말고 이미지 영역을 생략해줘
- img 태그에는 width 속성과 alt 속성을 넣어줘
- 이미지에는 가능하면 display:block; border:0; outline:none; text-decoration:none; 스타일을 넣어줘
- 여백은 margin 대신 padding을 사용해줘
미리보기 텍스트란? 받은 편지함에서 제목 옆이나 아래에 표시되는 짧은 소개 문구입니다. HTML 템플릿에서는 별도로 요청하지 않으면 자동으로 포함되지 않으므로, 아래 실전 응용 예시처럼 기획안을 작성할 때 문구를 함께 지정해 주는 것이 안전합니다. (참고: HTML 코드로 편집하기)
스티비 전용 기능(수신거부, 메일머지) 사용 시 주의점
디자인 레이아웃을 안정적으로 잡았다면, 이제 뉴스레터의 필수 기능들을 연동할 차례입니다. 스티비에서 코드 안에 특정 치환자를 넣기만 하면 수신거부, 웹에서 보기, 구독자 이름 불러오기(개인화) 같은 핵심 기능이 연동됩니다.
하지만 AI에게 단순히 "하단에 수신거부 링크를 만들어줘" 혹은 "웹에서 보기 버튼을 만들어줘"라고 요청하면, AI는 스티비 전용 치환자를 모르기 때문에 잘못된 링크를 넣을 확률이 매우 높습니다. 웹에서 보기나 수신거부와 같이 메일머지 치환자를 사용하는 경우라면, AI가 완성한 최종 코드에 아래 치환자들이 형태 그대로 정확하게 들어가 있는지 꼭 살펴봐야 합니다.
가장 안전한 방법은 AI에게 처음 요구할 때부터 "수신거부 링크는 $%unsubscribe%$를 그대로 사용해 줘"라고 명시하는 것입니다. 코드를 받은 후에도 해당 치환자가 변형 없이 반영되었는지 검수하는 과정이 필요합니다.
실전 응용: 쇼핑몰 프로모션 메일 만들기
앞서 소개한 기본 조건 아래에 구체적인 기획안을 함께 요청하면, AI가 훨씬 실무적인 결과물을 만들어줍니다. 예를 들어 쇼핑몰 담당자라면 아래와 같은 방식으로 구체화하여 요청할 수 있습니다.
(위의 프롬프트 조건을 그대로 붙여넣은 뒤, 아래 내용을 이어서 작성합니다)
이번 주 신상품 출시 프로모션 이메일을 만들 거야. 전체 배경은 흰색, 포인트 컬러는 #FF5A5A로 해줘.
상단에는 브랜드 로고랑 '웹에서 보기' 링크($%permalink%$)를 넣어줘. 본문은 "안녕하세요, $%name%$ 구독자님!" 인사말로 시작하고, 신상품 출시를 알리는 타이틀을 크게 넣어줘.
그 아래에는 신상품 3개를 보여줄 건데, 각각 이미지, 상품명, 가격, 구매 버튼 순서로 구성해줘. 하단에는 수신거부 링크($%unsubscribe%$)를 넣어줘.
미리보기 텍스트는 "이번 주 신상품을 가장 먼저 만나보세요"로 해줘.
발송 전 꼭 거쳐야 할 두 단계
AI가 완성한 HTML 코드를 메일에 붙여 넣었다면, 실제 발송하기 전 화면을 최종적으로 점검하는 단계가 필요합니다.
1단계: 테스트 발송으로 디자인 교정
스티비 편집 화면 오른쪽 위의 [테스트 발송하기]를 눌러 내 이메일 주소로 먼저 메일을 발송해 봅니다. 다음 항목들을 중점적으로 살펴보세요.
삽입한 이미지가 올바르게 보이는지
레이아웃이 의도한 대로 정렬되어 나오는지
모바일 기기에서도 가독성이 유지되며 깨지지 않는지
2단계: 실제 발송으로 기능 검증
수신거부 링크, 웹에서 보기, 메일머지처럼 주소록 정보와 연동되는 기능들은 '테스트 발송'만으로는 결과를 정확히 파악하기 어렵습니다. 해당 기능들이 실제 구독자에게 어떻게 표시되는지 안전하게 살펴보려면, 본인 개인 이메일 주소만 넣은 '테스트용 임시 주소록'을 따로 생성하여 실제 발송해 보는 것이 가장 확실합니다.
프롬프트 적용 후 완성된 이메일
AI는 이메일 제작 시간 및 코딩 시간을 줄여주는 유용한 도구입니다. 다만 이메일 HTML은 우리가 평소 접하는 웹사이트 HTML과 동작 방식이 다르다는 점을 기억해 두시면 좋습니다.
코드가 완성된 후에는 꼭 테스트 발송과 실제 발송 단계를 거쳐보세요. 처음 몇 번만 이 흐름을 익혀두면, 이후에는 디자인 깨짐에 대한 불안감 없이 AI를 활용해 훨씬 빠르고 효율적인 뉴스레터를 발행할 수 있습니다.
