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