코드 몰라도 AI로 이메일 템플릿 자동화하기
누가 AI가 일을 줄여준다고 했냐
나는 HTML이 뭔지, 브라우저가 어떻게 렌더링하는지 정도는 안다. 애초에 Html이나 CSS의 개념이 어려운 것도 아니고, 학생때부터 홈페이지 만드는 실습같은 걸 몇번 해봤기때문에 그렇다. 하지만 그렇다고 손으로 코드를 쭉 써서 예쁜 이메일을 만들 수 있냐고 하면 절대 아니였다. 그런데 최근에 세그먼트 실험으로 고민하던 중 넛지채널을 메일로 결정해야할 일이 있었다. 그래서 6개정도의 같은 템플릿에 내용이 다른 메일을 작성해야했는데, 이게 진짜 여간 귀찮은 일이 아니였다. 샌드그리드는 블록 형태로 커스텀이 가능하지만 이미지랑 링크를 일일이 넣는다? 지금 다시 하라고 해도 하기 싫을 것 같다. 근데 잘보면 샌드그리드도 각 에셋이 html 코드이다. 이미지라면 이미지링크라던가. 그래서 이걸 html 코드로 만들어보기도 했다.
아무튼 이미지를 수급하고 템플릿에 넣는 반복작업을 하면 한 2-3시간 걸릴 일을 그래도 1시간정도로 그럴듯하게 자동화를 한 과정을 풀어보겠다.
AI에게 막연하게 "예쁜 메일 만들어줘"라고 하면 결과도 막연하다. AI는 인간의 알잘딱깔센같은 게 없으니까.... 근데 대충 ~~한 메일 보낼거니까 템플릿 만들어줘 하면 어느정도 레이아웃은 짜오긴 하더라.
아무튼 나는 규격으로 말했다.
"목표는 폭 480px 이메일 템플릿. -> 이건 샌드그리드에서 테스트해보니 미리보기에서 깨지지 않는 크기였는데, 알아서 메일 클라이언트가 사이즈 조정 해주는 것 같더라. 딱히 고려 안해도 될 듯
섹션마다 브랜드 히어로 이미지 → 브랜드명(크고 볼드) → 브랜드 설명 → 제품 2개 카드. -> 이 이미지 링크는 CSV파일로 제공했음. AI는 CSV를 제일 잘 알아먹습니다.
제약 사항으로는 SendGrid/Outlook 등 호환을 위해 테이블 레이아웃 + 인라인 스타일. 다크모드 최소 대응 -> 이건 그냥 메일 클라이언트를 정의하는 용. 다 조금씩 구조가 다른 것 같더라.
데이터는 CSV로 전달할거고, 각 열의 상세내용은 2행을 참고. -> 2행에 각 열의 설명이 있었다.
브랜드명, 이미지링크, 연결링크, 제품이름/브랜드설명, 정가, 할인가. 가격은 엔화 + 천단위 콤마(예: ¥12,345). 정가가 있으면 취소선, 할인가 강조. 없으면 단일가. -> 같은 건 그냥 디테일"
정도로 하고 보내면 자간이나 행간이 좀 깨진 상태로 오더라. 그래서 이 내용을 추가했다. "브랜드명 20px 볼드, 설명은 행간 1.9, 카드 테두리 #e5e7eb."
아무튼 하다보니 느껴지는 건 핵심은 콘텐츠(데이터)와 템플릿(구조)을 분리해 설명하는 것이었다. AI가 "한 번 만든 틀에 여러 콘텐츠를 붓는" 방식으로 이해하기 시작했다.
AI가 만들어 준 템플릿은 사실 작은 컴포넌트들의 모음이다. BrandSection은 히어로 이미지(브랜드 링크) → 브랜드명 → 브랜드 설명. ProductCard는 이미지 → 제품명 → 가격 행(정가/할인가 규칙)을 두 개씩. 이걸 CSV에서 브랜드 행이 나오면 섹션 시작, 그 아래 추천제품 2개를 붙여 한 묶음으로 렌더링한다. 다음 브랜드를 만나면 또 하나의 섹션이 된다. 중간에 데이터가 비어 있어도 떨어지지 않게, 가격이 없으면 가격 행을 숨기는 등 안전장치도 요청했다.
AI가 코드를 대신 쓰면서 바뀐 건 단순했다. 제작 속도부터 말하면, 예전엔 섹션 하나(브랜드 설명 + 제품 2개)만 해도 20-30분이었다. 이제는 CSV만 채워서 요청하면 테마 6개 메일을 한 번에 뽑는다. 템플릿 세팅 이후엔 테마 하나당 5-10분이다. 품질 일관성도 좋아졌다. 폭, 폰트, 행간, 가격 표기, 링크 형식이 항상 동일하다. 리뷰는 구조가 아니라 콘텐츠 자체로 좁혀졌다. 반복 수정 비용도 절감됐다. "브랜드명 하단 여백 +8px", "가격 컬러 톤다운" 같은 피드백을 한 번 반영하면 모든 파일에 일괄 적용된다.
실전에서 배운 것들도 있다. "좀 더" 대신 "상단 패딩 8→4px", "폰트 18→20px"처럼 숫자로 브리핑하니 AI가 픽셀 단위 지시를 가장 잘 따랐다. 아무래도 당연하다. 적당히~ 정도로 표현하면 이상하게 행간이 여기저기 산발적으로 다르다. 이미지와 링크는 항상 실주소로 했다. 이메일은 외부 리소스 의존도가 높아서 CDN, WebP, 사이즈 체크는 필수다. 레이아웃은 보수적으로 접근했다. 미디어쿼리를 무시하는 클라이언트가 있어서, 고정 2열을 쓰려면 아예 그 가정으로 디자인했다. 가격 포맷은 함수화했다. ¥ + 콤마 포맷은 매번 실수 지점이라 템플릿에 내장해 뒀다. 트래킹도 표준화했다. 브랜드와 제품 링크의 UTM을 분리(utm_content=brand vs product1)하니 클릭 분포 분석이 쉬워졌다.
실패도 있었다. 이미지 종횡비가 들쑥날쑥하면 카드가 흔들린다. 열 너비의 2배(레티나) 사이즈를 권장한다. 링크 누락은 바로 클릭 분석의 구멍이 된다. 브랜드/제품 링크를 물리적으로 분리해 뒀다. 클라이언트 편차는 존재한다. Gmail/Outlook/iOS/Android 실기기로 꼭 미리 보기를 했다. 한번쯤은 꼭.. 전체 영역을 다 눌러볼 필요도 있다. 기묘하게 같은 코드에서 내용만 수정하라고 하는데도 자꾸 깨먹음.
내가 실제로 사용한 프롬프트는 이렇다. "폭 480px 이메일 템플릿을 만들어줘. 각 섹션은 히어로 이미지(브랜드 링크) → 브랜드명(20px, 볼드) → 브랜드 설명(행간 1.9) → 제품 카드 2개(이미지/제품명/가격/링크). 레이아웃은 테이블, 스타일은 인라인. 가격은 ¥12,345 포맷, 정가가 있으면 취소선 + 할인가 강조. 데이터는 CSV 열 구조 상세|브랜드명|이미지링크|연결링크|제품이름/브랜드설명|정가|할인가. CSV를 읽어 섹션을 자동으로 만들고, 결과 html을 파일로 내보내줘." 이 한 장으로 템플릿이 생기고, 그다음부터는 데이터만 바꿔 넣는 흐름이다.
핵심은 AI에게 정보를 '규격'으로 주는 것이었다. 템플릿과 데이터를 분리해서 설명하니, AI는 반복 가능한 제작기가 되었다. 이제는 콘텐츠를 확장할 수 있다. 이미지와 링크가 가득한 메일, 손으로 일일이 붙이던 시간을 아껴 무엇을 보여줄지에 집중하게 됐다. 근데 이 모든 실무적인 얘기를 떠나서 나는 AI를 통해 내가 하지 않던, 하지 못하던 일을 쉽게 구현할 수 있게 되었다는 데서 즐거움을 느낀다. 내가 언제 html로 메일 코드를 짜겠냐고.. 그런데 AI가 일을 줄여주진 않은 것 같다. 오히려 할 수 있는 것들이 늘어서 일도 같이 늘어나는 중. 해보고 싶은 건 꼭 해봐야하니까!
