🖼 HTML 붙여넣기 미리보기

HTML을 붙여넣으면 오른쪽 샌드박스 iframe에 즉시 렌더링. HTML 이메일 목업 / Outlook 호환성 / 디바이스 폭 테스트에 적합.

완전 무료 가입 불필요 브라우저 완결 5 개 언어 다크 모드

🔒 개인정보 및 보안

・로컬 샌드박스 iframe (sandbox=allow-same-origin)에서 실행
・script 태그는 실행되지 않습니다 (sandbox 무효화)
・HTML 텍스트는 서버로 전송되지 않습니다
・외부 라이브러리 불필요 · 순수 JS

📝 HTML 입력

📁 파일

0 문자

👁 미리보기

배경:

📖 자주 걸리는 지점

붙여 넣은 HTML 을 샌드박스 iframe 에 즉시 그리고 너비와 배경을 바꿔 가며 확인할 수 있습니다. <script> 는 실행되지 않으며 HTML 은 서버로 전송되지 않습니다. 여기 보이는 것은 모던 브라우저에서 표시했을 때의 겉모습뿐입니다 — HTML 메일 용도로 쓴다면 이 결과와 받은편지함에서의 모습은 별개라고 처음부터 생각하세요. 메일 클라이언트는 각각 독자적인 렌더링 처리를 갖고 있어 도착한 HTML 을 고쳐 쓴 뒤 표시하기 때문입니다.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
여기서는 안 깨지는데 Outlook 만 깨진다	Windows 데스크톱판 Outlook 은 브라우저가 아니라 Word 의 렌더링 엔진으로 HTML 을 그립니다. 그 결과 `float` · `position` · `max-width` · `background-image` · 둥근 모서리 · box-shadow 가 통째로 무시됩니다. `<div>` 를 늘어놓은 모던한 레이아웃은 거의 확실히 1 칼럼으로 뭉개지며 여기서의 미리보기로는 절대 재현할 수 없습니다. 세계의 메일 열람 중 상당수가 아직 이 경로를 지납니다.	메일용 HTML 은 중첩된 `<table>` 로 짜고 너비는 CSS 가 아니라 `width` 속성으로 지정하세요 — 2000 년대의 작성법처럼 보이지만 이것이 현재도 유일하게 확실한 방법입니다. 전체 너비는 600px 가 사실상의 표준입니다. 배경 이미지가 꼭 필요하다면 `<!--[if mso]>` 조건 분기로 VML 을 덧붙입니다. 최종 확인은 반드시 실기로 하세요 — 자기 앞으로 보내 Outlook · Gmail · iOS Mail 세 곳에서 열어 보는 것만으로도 치명적인 붕괴는 거의 잡을 수 있습니다.
CSS 클래스가 듣지 않는다 · style 태그째 사라진다	많은 메일 클라이언트는 받은 HTML 에서 `<head>` 째 `<style>` 을 제거합니다. 본문만 자기 페이지에 심어 표시하는 구조이므로 `<head>` 의 내용이 남지 않는 것입니다. Gmail 은 일부를 남기지만 클라이언트와 버전에 따라 동작이 달라 웹판에서는 들었는데 모바일 앱에서는 안 듣는 일이 흔히 일어납니다. 여기 미리보기는 `<style>` 을 그대로 해석하므로 이 차이는 절대 보이지 않습니다.	스타일은 전부 `style=` 속성으로 인라인화하세요. 손으로 쓰는 것은 비현실적이므로 Premailer 나 juice 같은 인라이너를 빌드 공정에 넣습니다 — `<style>` 에 쓴 CSS 를 각 요소의 속성으로 펼쳐 줍니다. 다만 미디어 쿼리와 의사 클래스는 인라인화할 수 없습니다. 따라서 반응형 대응은 미디어 쿼리로 나눠 만드는 것이 아니라 처음부터 1 칼럼 · 이미지는 `width:100%` · 폰트 크기는 14px 이상이라는 어느 너비에서도 깨지지 않는 만듦새로 흡수하는 편이 확실합니다.
이미지가 표시되지 않는다	미리보기에서 나오지 않는 경우는 상대 경로가 거의 원인입니다. `./img/logo.png` 라고 써도 iframe 에는 기준이 되는 페이지가 없으므로 해결할 대상이 없습니다. 그런데 실제 메일에서는 절대 URL 로 해도 처음에는 표시되지 않는 것이 보통입니다 — Gmail 도 Outlook 도 기본적으로 외부 이미지를 차단하고 수신자가 이미지 표시를 누를 때까지 읽어들이지 않습니다. 즉 많은 수신자에게 처음 눈에 들어오는 것은 이미지가 빠진 상태의 메일입니다.	미리보기에서는 절대 URL 이나 data URI 를 쓰세요. 실제 운영에서는 이미지가 차단된 상태에서도 뜻이 통하는지가 사실상의 설계 요건이 됩니다 — `alt` 를 반드시 쓰고 로고나 버튼 뒤에는 비슷한 색의 `bgcolor` 를 깔아 이미지가 안 나와도 글자가 읽히게 합니다. 본문을 한 장의 이미지로 만드는 것은 최악의 선택입니다(차단되면 본문이 완전히 사라지고 스팸 판정도 올라갑니다). data URI 로 심는 것도 Gmail 이 대응하지 않으므로 실무에서는 쓸 수 없습니다.

너비 프리셋은 뷰포트의 너비를 바꿀 뿐이며 실기의 재현이 아닙니다. iOS Mail 과 Gmail 의 다크 모드는 도착한 HTML 의 색을 자동으로 반전시킵니다 — 흰 배경에 진한 색 글자로 만든 메일이 받은편지함에서는 어두운 배경에 옅은 글자로 표시되고 로고 주위만 흰 사각형이 남는 것은 이 때문입니다(투명 PNG 를 쓰면 피할 수 있습니다). 보안 면에서는 sandbox 가 스크립트를 멈추기는 하지만 붙여 넣은 HTML 이 안전해지는 것은 아닙니다. CSS 만으로도 진짜 같은 로그인 화면은 만들 수 있고 <a href> 는 살아 있습니다. 출처를 알 수 없는 HTML 을 미리보기 했을 때는 안의 링크를 밟지 마세요 — 겉모습을 확인하는 것이 목적이라면 링크 대상을 볼 필요는 없을 것입니다.

📖 사용법

1

HTML 붙여넣기

왼쪽 텍스트 영역에 붙여넣거나 .html 파일을 불러옵니다.
2

디바이스 폭 선택

데스크톱 / 태블릿 / Email 600 / 모바일 375 선택.
3

배경 전환

흰색 / 어두움 / 체크 전환. 이메일은 흰색이 표준.

❓ 자주 묻는 질문

script 태그가 실행됩니까?

아니요. sandbox=allow-same-origin로 차단됩니다.

HTML 이메일 미리보기 가능?

예. Email 600 프리셋과 흰 배경으로 확인. 실제 클라이언트 테스트 권장.

HTML이 서버에 전송됩니까?

아니요. 브라우저 내 로컬 iframe에서 처리.

🔗 관련 도구

🐛 이 도구에서 문제가 발생했나요?

무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.