메일 HTML 검사하기
메일 프로그램은 작고 오래된 HTML의 일부만 렌더링하며, 그것도 프로그램마다 다릅니다. 이 도구는 동료가 알려주기 전에, 무엇이 전달 과정에서 깨질지 미리 보여줍니다.
- 브라우저 안에서 전부 처리됩니다
- 오프라인에서도 작동합니다
- 업로드 없음
- 가입 없음
- 워터마크 없음
도구를 불러오는 중…
작동 방식
- 메시지의 HTML을 붙여넣으세요. 뉴스레터 도구의 소스 보기 화면에서 가져오거나, 발송할 파일에서 가져오면 됩니다.
- 진단 내용을 먼저 확인한 뒤, 링크와 이미지 표를 보세요.
- 미리 보기로 좁은 화면 너비와 다크 모드, 그리고 무엇보다 이미지가 차단됐을 때 어떻게 보이는지 확인하세요.
왜 아무것도 업로드되지 않는가
이 페이지가 하는 모든 작업은 브라우저 탭 안에서 도는 코드가 처리합니다. 웹 페이지를 그리는 그 엔진을 그대로 씁니다. 파일은 디스크에서 탭의 메모리로 읽어 들여 거기서 변환한 뒤 다시 다운로드 파일로 내보냅니다. 어디로도 전송되지 않습니다. 우리에게도, 제3자에게도.
직접 확인해 보세요
- 브라우저 개발자 도구(F12)를 열고 네트워크(Network) 탭을 선택합니다.
- 파일을 올리고 도구를 실행합니다.
- 보이는 요청은 도구 자체의 코드를 받아 오는 것뿐입니다. 무거운 몇몇 도구는 공개 CDN에서 오픈소스 엔진을 함께 받아 옵니다. 여기에 loreatec.jp로 가는 작은 방문 집계 신호 하나(페이지 주소와 제목, 그 이상은 없습니다)가 더해집니다. 어느 것도 당신의 파일을 실어 나르지 않습니다.
자주 묻는 질문
<style> 블록이 왜 문제가 되나요?
Gmail은 대부분 유지하고, Windows용 Outlook은 일부만 유지하며, 여러 웹메일은 아예 제거합니다. 그리고 어떤 메일 프로그램도 외부 스타일시트는 불러오지 않습니다. 반드시 적용돼야 하는 스타일은 인라인 style 속성으로 넣어야 하며, <style> 블록은 애초에 인라인으로 옮길 수 없는 미디어 쿼리를 위한 자리입니다. 이 사이트의 CSS 인라이너가 그 기계적인 작업을 대신해 줍니다.
102KB 한도란 무엇인가요?
Gmail은 약 102KB에서 메시지 렌더링을 멈추고 “전체 메시지 보기” 링크를 보여줍니다. 그 지점 이후는 전부 가려지는데, 보통 구독 해지 링크와 우편 주소가 들어 있는 꼬리말 부분입니다. 그래서 디자인 문제일 뿐 아니라 법규 준수 문제이기도 합니다. 내용이 아니라 HTML 자체를 줄이세요. 무게 대부분은 반복되는 인라인 스타일과 표 뼈대에서 나옵니다.
왜 링크가 실제로 작동하는지는 확인해 주지 않나요?
브라우저는 다른 도메인의 응답을 읽을 수 없기 때문입니다. 동일 출처 정책이 이를 막고 있으며, 서버가 요청을 대신 중계하지 않는 한 아무리 궁리해도 우회할 수 없습니다. 대신 링크 목록을 보여주니 직접 확인하세요. 링크를 “검증해 준다”는 도구는 서버를 두고 있거나, 그냥 추측하고 있는 것입니다.
이미지 차단 화면은 무엇을 보여주나요?
대다수 수신자가 처음 보게 되는 화면입니다. Gmail, Outlook, Apple Mail 모두 적어도 일부 상황에서는 기본적으로 원격 이미지를 차단하며, 큰 이미지 하나로만 만든 디자인은 텅 빈 사각형이 되어 버립니다. 이 화면에서 읽을 수 없는 메시지라면 수신자 목록의 상당수에게도 읽히지 않는다는 뜻입니다.