HTML 뷰어
HTML 코드를 샌드박스에서 즉시 렌더링해서 미리보기
데이터는 서버로 전송되지 않습니다 — 모든 처리는 브라우저 안에서만 서버 전송 0건
HTML746자
PREVIEW스크립트 차단됨
HTML 미리보기 사용법
HTML 코드를 왼쪽에 붙여넣으면 오른쪽 샌드박스에서 즉시 렌더링됩니다. 완전한 HTML 문서는 물론, 조각(snippet)도 지원합니다. CSS 스타일, 레이아웃, 폰트 등이 시각적으로 확인됩니다.
JavaScript 실행은 보안을 위해 차단됩니다. 이메일 템플릿, 랜딩 페이지 HTML, UI 컴포넌트 스타일 확인에 적합합니다. 서버로 어떤 데이터도 전송되지 않습니다.
파일로 저장하지 않고 HTML을 바로 보는 이유
HTML을 확인하려면 보통 .html 파일로 저장한 뒤 브라우저로 여는 과정을 거칩니다.
메일 템플릿이나 남이 보낸 코드 조각처럼 한 번 보고 버릴 코드에는 이 과정이
번거롭고, 임시 파일이 바탕화면에 쌓이기도 합니다. 붙여넣기만으로 결과를 확인하면 그 단계가
사라집니다.
출처가 불분명한 HTML일수록 더 그렇습니다. 내려받아 브라우저로 직접 열면 그 안의 스크립트가 실제로 실행되지만, 이 도구는 스크립트가 차단된 샌드박스에서 열기 때문에 레이아웃만 안전하게 확인할 수 있습니다.
이럴 때 씁니다
- 메일 템플릿 검수 — 테이블 기반 레이아웃이 의도대로 잡히는지 확인
- AI가 생성한 HTML 확인 — 코드를 저장하지 않고 결과부터 확인
- 스크래핑한 마크업 확인 — 가져온 조각이 어떤 화면이었는지 역으로 파악
- CSS 디버깅 — 스타일을 고쳐 붙여넣으며 변화를 즉시 비교
자주 묻는 질문
- 자바스크립트(JavaScript)가 실행되나요?
- 아니요. 보안을 위해 sandbox 속성이 적용된 iframe에서 렌더링되어 JavaScript 실행이 차단됩니다. CSS와 HTML 레이아웃만 렌더링됩니다. JS 동작 확인이 필요하다면 CodePen이나 JSFiddle 같은 전용 플레이그라운드를 사용하세요.
- HTML 전체 페이지와 조각(snippet) 모두 지원하나요?
- 네, 모두 지원합니다. <!DOCTYPE html>부터 시작하는 완전한 HTML 문서뿐 아니라, <h1>제목</h1> 같은 HTML 조각도 렌더링됩니다. 조각의 경우 브라우저 기본 스타일이 적용됩니다.
- 외부 이미지나 폰트가 로드되나요?
- 외부 리소스(이미지, 폰트, CSS 파일)는 sandbox의 allow-same-origin 설정에 따라 보안 정책이 적용됩니다. 일반적으로 HTTPS로 제공되는 외부 이미지와 CSS는 로드되지만, 일부 사이트의 CORS 정책에 따라 차단될 수 있습니다.