HTML 미리보기란
작성한 HTML 코드가 실제 브라우저에서 어떻게 보이는지 즉시 확인하는 도구입니다. 왼쪽에 코드를 입력하면 오른쪽 화면에 결과가 바로 그려집니다. 파일을 만들어 저장하고 브라우저로 여는 과정을 거치지 않아도 되므로, 태그 하나를 고쳐 보며 결과를 확인하는 작업에 적합합니다.
코드는 이용자의 브라우저 안에서만 처리됩니다. 서버로 전송하거나 저장하지 않으므로 회사 메일 템플릿이나 공개되지 않은 페이지 코드를 붙여넣어도 외부로 나갈 걱정이 없습니다.
사용 방법
- 왼쪽 편집기에 HTML 코드를 붙여넣거나 직접 입력합니다.
- 오른쪽 미리보기가 입력과 동시에 갱신됩니다.
- 결과가 갱신되지 않으면 새로고침 버튼을 누릅니다.
- 전체 화면으로 확인하려면 새 탭에서 열기를 사용합니다.
- 무엇부터 해야 할지 모르겠다면 예제 버튼으로 샘플 코드를 불러올 수 있습니다.
이럴 때 유용합니다
- 이메일 템플릿 확인 — 뉴스레터나 안내 메일의 HTML 이 깨지지 않는지 발송 전에 점검할 때
- 블로그·쇼핑몰 상세페이지 편집 — 에디터의 HTML 모드에서 복사한 코드를 수정하고 결과를 확인할 때
- HTML 학습 — 태그와 속성을 바꿔 가며 화면이 어떻게 달라지는지 익힐 때
- 코드 조각 검증 — 검색해서 찾은 스니펫이 실제로 동작하는지 빠르게 확인할 때
알아두면 좋은 점
미리보기는 iframe 안에 별도의 문서를 만들어 코드를 실행합니다. 그래서 이 페이지의 글꼴이나 색상은 미리보기 안에 적용되지 않으며, 반대로 입력한 코드의 스타일이 이 페이지를 망가뜨리지도 않습니다. 서로 완전히 분리되어 있다고 보면 됩니다.
외부 이미지나 폰트를 불러오는 코드는 해당 주소가 https 로 시작하고 외부 접근을 허용해야 표시됩니다. 일부 사이트는 다른 페이지에서 자기 리소스를 불러오는 것을 차단하므로, 그런 경우 이미지가 비어 보일 수 있습니다.
자주 묻는 질문
입력한 HTML 코드가 서버로 전송되나요?
전송되지 않습니다. 코드는 브라우저 안에서만 처리되며, 미리보기는 페이지 내부의 iframe 에 직접 그려집니다. 작성 중인 코드가 외부로 나가지 않으므로 업무용 템플릿을 붙여넣어도 안전합니다.
CSS 와 JavaScript 도 함께 미리볼 수 있나요?
가능합니다.