최근 AI를 이용해 HTML 코드를 직접 작성해서 이메일을 발송하는 분들이 눈에 띄게 늘고 있습니다. 스티비에서도 HTML을 활용해 뉴스레터를 편집할 수 있는데요. 막상 코드를 붙여 넣으면 이미지가 깨지거나 의도치 않은 오류가 생기곤 합니다. 코드 자체에는 문제가 없어 보이는데 왜 그럴까요?
AI로 만든 HTML이 이메일에서 깨지는 이유
웹사이트 HTML과 이메일 HTML은 다릅니다
별도로 조건을 지정하지 않으면 AI는 웹사이트 기준에 가까운 HTML을 생성합니다. 웹사이트와 이메일 모두 동일한 HTML 문법을 사용하지만, 실제로는 동작 방식이 꽤 다릅니다. 웹사이트는 크롬, 사파리 같은 브라우저가 코드를 읽어 화면에 보여줍니다. 반면 이메일은 G메일, 네이버 메일 같은 메일 앱이 코드를 읽습니다. 이때 메일 앱은 보안과 안정성을 이유로 브라우저에 비해 훨씬 많은 기능을 제한합니다.
심지어 같은 G메일이라도 PC 웹과 모바일 앱에 따라 지원 기준이 다릅니다. 이 때문에 웹사이트 기준으로 작성된 HTML을 이메일에 그대로 사용하면, 일부 코드가 무시되거나 의도치 않게 디자인이 깨지는 현상이 발생합니다.
HTML 코드 오류로 깨진 이메일 레이아웃 예시
해결 방법: AI에게 처음부터 '이메일용 HTML'이라고 알려주세요
AI에게 단순히 "이런 느낌의 HTML 만들어줘"라고 요청하는 것만으로는 부족합니다. 이메일 환경에서는 화려한 최신 코드보다 여러 메일 앱에서 디자인이 무너지지 않고 안정적으로 보이는 코드가 더 중요합니다. 가장 좋은 방법은 AI에게 처음부터 이메일 환경의 제약에 맞는 조건을 함께 전달하는 것입니다. 아래 프롬프트를 요청문 앞에 붙여 사용해 보세요. 이미 만들어둔 HTML이 있다면 기존 코드와 함께 "이 조건에 맞게 수정해 줘"라고 요청해도 됩니다.
스티비에서 발송할 이메일용 HTML 코드를 작성해줘. 일반 웹페이지용 HTML이 아니라, 이메일 클라이언트에서 안정적으로 보이는 보수적인 HTML 이메일 코드로 작성해줘. G메일, 네이버 메일, Apple Mail, Windows용 Outlook classic에서도 깨지지 않도록, 화려한 인터랙션보다 호환성과 안정성을 우선해줘. 레이아웃은 table 기반으로 작성하고, CSS는 인라인 style로만 써줘.
수신거부, 메일머지 사용 시 주의점
디자인 레이아웃을 안정적으로 잡았다면, 이제 뉴스레터의 필수 기능들을 연동할 차례입니다. '수신거부'나 '웹에서 보기' 같은 기능은 AI가 스티비 전용 치환자를 모르기 때문에 잘못된 링크를 넣을 수 있습니다. 처음 요청할 때부터 아래 형태를 그대로 명시하고, 받은 코드에 치환자가 변형 없이 들어갔는지 실제 발송으로 확인해 보시면 좋습니다.
스티비에서 사용하는 치환자 형태
실전 응용: 쇼핑몰 프로모션 메일 만들기
위 프롬프트 뒤에 구체적인 기획안을 이어 작성하면 AI가 훨씬 실무적인 결과물을 만들어줍니다. 예를 들어 쇼핑몰 담당자라면 이렇게 쓸 수 있습니다.
프롬프트 뒤에 이어 붙이는 기획안 예시
AI는 이메일 제작 시간을 획기적으로 줄여주는 유용한 도구이지만, 이메일 HTML은 우리가 평소 접하는 웹사이트 HTML과 동작 방식이 다르다는 점을 기억해 두시면 좋습니다. 처음 몇 번만 이 흐름을 익혀두면 디자인 깨짐에 대한 불안감 없이 멋진 뉴스레터를 빠르게 만들 수 있습니다.
프롬프트를 적용해 완성한 이메일
스티비 블로그에 바로 복사해 쓸 수 있는 프롬프트 전체 조건과 실전 예시를 담아 두었습니다. 더 자세한 내용은 블로그에서 확인해 보세요.
