교육 안내 eDM이나 뉴스레터를 발송할 때는 디자인을 완성하는 것만큼 발송 전 테스트가 중요했어요. 작업 화면에서는 정상적으로 보였지만 테스트 메일에서는 이미지가 늘어나거나, 교체한 줄 알았던 이전 이미지가 그대로 표시되는 일이 있었기 때문입니다.
저는 일러스트레이터로 이미지를 제작하고 드림위버에서 HTML을 수정한 다음, 실제 발송 전에 Outlook으로 테스트 메일을 보냈어요. 본인 계정뿐 아니라 팀장님과 같은 팀원에게도 전달해 이미지, 링크, 모바일 화면을 함께 확인했습니다.
이번 글에서는 실무에서 사용했던 HTML 이메일 발송 전 확인 순서와 실제로 겪었던 오류를 정리해 보겠습니다.
작업 화면이 아닌 실제 받은 메일을 확인했어요
HTML 파일과 브라우저 미리보기에서 문제가 없더라도 실제 받은 메일의 화면은 다르게 보일 수 있어요. 그래서 코딩을 마친 뒤에는 반드시 Outlook으로 테스트 메일을 발송했습니다.
확인 과정은 다음과 같았습니다.
- 수정한 이미지와 HTML 파일을 최종 저장합니다.
- 본인 계정으로 테스트 메일을 발송합니다.
- 이미지와 텍스트가 의도한 위치에 표시되는지 확인합니다.
- 삽입한 버튼과 링크를 하나씩 눌러봅니다.
- 모바일에서도 글자와 버튼을 확인합니다.
- 수정 사항이 있으면 고친 뒤 테스트 메일을 다시 발송합니다.
- 팀장님과 팀원에게 전달해 최종 검수를 받습니다.
한 번 확인하고 바로 발송하지는 않았어요. 오류를 수정했다면 수정된 파일로 테스트 메일을 다시 보내 실제 반영 여부까지 확인했습니다.
이미지가 이전 상태로 보인 적이 있었어요
기존 eDM을 복사해 다음 교육 안내 메일을 만들다 보면 이미지를 교체했다고 생각했는데 이전 이미지가 그대로 보이는 경우가 있었습니다.
당시에는 기존 파일이 실제로 교체되지 않았거나, 저장된 이미지가 다시 표시된 문제일 가능성을 생각했어요. 다만 정확한 원인까지 확인하지는 못했기 때문에 단순히 쿠키 문제였다고 단정하기는 어렵습니다.
이후에는 화면만 보고 판단하지 않고 다음 항목을 다시 확인했습니다.
- 새로운 이미지가 올바른 위치에 저장됐는지
- HTML의 이미지 경로가 새 파일을 가리키는지
- 테스트 메일에도 교체한 이미지가 표시되는지
- 이전 메일을 연 것이 아니라 새 테스트 메일을 확인했는지
같은 파일명을 계속 사용하면 어떤 파일이 최종본인지 혼동하기 쉬웠어요. 그래서 가능하면 이미지 파일명을 구분하고, 수정 후 새 테스트 메일에서 결과를 확인하는 편이 안전했습니다.
Outlook은 사용자의 보안 설정에 따라 외부 이미지를 자동으로 내려받지 않을 수도 있습니다. 따라서 이미지가 보이지 않는다고 곧바로 코딩 오류로 판단하기보다 이미지 다운로드 설정과 파일 경로를 함께 확인할 필요가 있어요.
이미지 비율과 코딩 크기가 맞는지도 확인했어요
또 다른 문제는 이미지가 가로 또는 세로로 늘어져 보이는 현상이었습니다. 코딩할 때 지정한 이미지 크기와 실제 제작한 이미지의 비율이 맞지 않을 때 이런 문제가 생겼어요.
예를 들어 원본 이미지의 가로·세로 비율과 HTML에서 설정한 가로·세로 크기가 다르면 이미지가 눌리거나 길게 늘어나 보일 수 있습니다.
그래서 이미지를 교체할 때는 단순히 파일만 바꾸지 않고 다음 항목을 같이 확인했습니다.
- 새 이미지와 기존 이미지의 가로·세로 비율
- HTML에 입력된 이미지 크기
- Outlook에서 표시되는 실제 크기
- 모바일 화면에서 좌우가 잘리지 않는지
- 이미지 안의 글자가 너무 작아지지 않는지
특히 글자가 포함된 eDM 이미지는 PC에서 괜찮아 보여도 모바일에서는 내용을 읽기 어려울 수 있어요. 모바일에서는 전체 디자인보다 글자 크기와 신청 버튼이 명확하게 보이는지를 중점적으로 확인했습니다.
링크는 눈으로 보지 않고 직접 눌러봤어요
링크 주소가 입력돼 있다는 것만으로는 정상 작동을 확인하기 어렵습니다. 교육 신청 버튼, 홈페이지, 카카오톡 채널, 문의 페이지처럼 메일에 삽입된 링크를 실제로 하나씩 눌러봤어요.
링크를 확인할 때는 다음 내용을 살폈습니다.
- 버튼이 올바른 페이지로 이동하는지
- 이전 교육 신청 페이지가 남아 있지 않은지
- 이미지에 설정한 링크도 작동하는지
- 텍스트 링크와 버튼 링크가 서로 다른 곳으로 연결되지 않는지
- 모바일에서도 링크를 누를 수 있는지
정기적으로 발송하는 메일은 이전 달의 HTML을 복사해 사용하는 경우가 많았습니다. 작업 시간을 줄일 수 있다는 장점이 있지만, 이전 날짜나 교육명, 이미지, 링크가 남을 가능성도 높았어요.
그래서 반복 제작물일수록 변경할 부분을 먼저 표시하고, 발송 전에는 모든 링크를 직접 눌러보는 과정을 생략하지 않았습니다.
제목과 발신 정보도 함께 확인했어요
본문만 정상이라고 발송 준비가 끝나는 것은 아니었습니다. 최종 테스트에서는 다음 항목도 함께 확인했어요.
- 메일 제목
- 발신자 정보
- 교육명과 날짜
- 신청 버튼 문구
- 본문 오탈자
- 첨부하거나 연결한 이미지
- 수신 메일 리스트
특히 수신 메일 리스트는 이미지나 링크와 별도로 마지막에 다시 확인했습니다. 메일 내용이 정확해도 잘못된 대상에게 발송되거나 필요한 대상이 누락되면 수정하기 어렵기 때문입니다.
최종본은 팀장님에게 전달해 한 번 더 확인받은 뒤 발송했습니다. 여러 사람이 확인하더라도 담당자가 먼저 이미지와 링크를 모두 점검한 상태에서 검수를 요청하는 방식으로 진행했어요.
제가 사용한 최종 발송 순서
실무에서 사용했던 과정을 간단히 정리하면 다음과 같습니다.
이미지와 HTML 수정 → 본인 테스트 메일 → 이미지·링크 확인 → 모바일 확인 → 오류 수정 → 테스트 메일 재발송 → 팀장 검수 → 수신자 목록 확인 → 최종 발송
이 중에서 마지막까지 반드시 확인했던 항목은 세 가지였습니다.
- 이미지가 최종본으로 표시되는가
- 삽입된 모든 링크가 정확하게 연결되는가
- 수신 메일 리스트가 올바르게 설정됐는가
HTML 이메일은 작업 파일만 확인해서는 실제 수신 화면을 완전히 알기 어렵습니다. 특히 이전 메일을 복사해 사용하는 경우에는 이미지와 링크가 제대로 교체됐는지 더 꼼꼼하게 봐야 했어요.
발송 후 발견한 오류는 회수하기 어렵기 때문에, 저는 최종 발송 버튼을 누르기 전에 테스트 메일을 다시 열어 이미지, 링크, 수신자 목록을 한 번 더 확인했습니다.
교육 안내 메일을 처음부터 제작하고 발송했던 과정은 아래 글에서 확인할 수 있습니다.
