개발도구 · 2026년 7월 8일 · 읽는 시간 3분
HTML 코드 결과 바로 보고 싶을 때 쓰는 미리보기
HTML 스니펫 하나 확인하려고 파일 만들고 브라우저에서 열기가 귀찮다.
HTML 미리보기가 필요한 상황
이런 경우들:
- 이메일 템플릿 HTML → 결과 확인용
- ChatGPT, Claude 등 AI가 생성한 HTML → 바로 렌더링 확인
- Stack Overflow 답변 HTML → 동작 확인
- HTML 스니펫 테스트 → 파일 만들기 전에 빠르게 확인
- CSS 스타일링 실험 → 인라인 스타일 빠른 테스트
- Markdown → HTML 변환 결과 확인
VSCode Live Preview 확장 쓰면 되는데, 그것도 프로젝트 열고 파일 만들어야 해서 간단한 스니펫 테스트엔 오버다.
기존 방법의 문제
- 파일 만들어서 브라우저에서 열기 → 파일 관리 귀찮음
- CodePen/JSFiddle → 회원가입, 무겁고, 인터넷 필요
- 브라우저 콘솔 → document.write 같은 방식으로 테스트, 불편함
- VS Code Preview → IDE 전체 켜야 함
그냥 붙여넣으면 바로 옆에 렌더링 결과 보여줬으면.
그래서 만들었음
주요 기능:
- HTML 붙여넣기 → 오른쪽에 실시간 렌더링
- 분할 화면 / 탭 전환 뷰
- iframe 안에서 안전하게 렌더링
- 전체화면 미리보기 모드
- 모바일/태블릿 크기 미리보기 (반응형 테스트)
추가 기능:
- HTML + CSS + JS 분리 입력 (CSS/JS 패널 선택)
- 실시간 업데이트 vs 버튼 클릭 업데이트 선택
- 다운로드 (현재 코드를 .html 파일로 저장)
이메일 HTML 테스트 예시
이메일 템플릿은 테이블 레이아웃 쓰는 경우가 많다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { font-family: Arial, sans-serif; }
.container { max-width: 600px; margin: 0 auto; }
.header { background: #3b82f6; color: white; padding: 20px; }
.content { padding: 20px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>안녕하세요!</h1>
</div>
<div class="content">
<p>이메일 본문 내용입니다.</p>
</div>
</div>
</body>
</html>이런 걸 이메일 전송 전에 미리보기로 확인하면 좋다. 실제 이메일 클라이언트 렌더링과는 차이가 있을 수 있지만, 기본적인 레이아웃 확인용으로 충분하다.
실제로 써보니
좋은 점:
- 실시간 렌더링 → 타이핑하면서 바로 결과 확인
- iframe 격리 → 렌더링이 현재 페이지에 영향 없음
- 반응형 크기 테스트 → 모바일에서 어떻게 보이는지 확인
- 파일 저장 버튼 → 완성되면 바로 .html 파일로
한계:
- 외부 CDN 리소스 (Bootstrap 등) 로드 안 될 수 있음 (CSP 설정에 따라)
- 서버 사이드 렌더링 결과 확인 불가 (클라이언트 HTML만)
- 실제 이메일 클라이언트(Gmail, Outlook) 렌더링 차이 존재
사용법
- HTML 코드 붙여넣기
- 오른쪽 또는 아래에 렌더링 결과 확인
- 수정하면서 실시간 확인
- 완성되면 파일로 저장
써보기
HTML 스니펫 빠르게 테스트해야 할 때 편하다.
#HTML미리보기 #HTML테스트 #이메일템플릿 #웹개발 #프론트엔드