liminfoHTML Live Preview
HTML/CSS/JS 실시간 렌더링 미리보기 도구
콘솔 출력이 여기에 표시됩니다.
HTML Live Preview 소개
HTML Live Preview는 HTML, CSS, JavaScript 코드를 작성하면 샌드박스 iframe에서 실시간으로 렌더링해주는 브라우저 기반 에디터입니다. 에디터 패널과 미리보기 패널이 반응형 2열 레이아웃으로 나란히 배치됩니다. 코드를 입력하면 300밀리초 디바운스 타이머가 잠시 멈출 때까지 기다렸다가 재렌더링하여, 매 키 입력마다 깜빡임 없이 부드러운 미리보기를 유지합니다. 코드 변경 없이 스크립트를 다시 실행하고 싶을 때를 위한 수동 새로고침 버튼도 제공됩니다.
프론트엔드 개발자, 디자이너, 교육자, 학생이 로컬 개발 환경 없이 코드 조각을 프로토타입하고, CSS 레이아웃을 테스트하고, JavaScript 인터랙션을 실험하고, HTML 개념을 시연할 때 이 도구를 사용합니다. 미리보기는 allow-scripts와 allow-modals 권한이 부여된 샌드박스 iframe에서 실행되므로 JavaScript가 정상 동작하지만 부모 페이지에 접근할 수 없어 안전합니다.
서버 없이 브라우저에서 모든 처리가 이루어집니다. 텍스트 영역에 인라인 스타일과 스크립트 태그를 포함한 유효한 HTML 문서를 입력할 수 있습니다. iframe은 document.open(), document.write(), document.close()를 통해 직접 코드가 기록되어 업데이트됩니다. 데이터 업로드 없이, 계정 없이 바로 사용할 수 있습니다.
주요 기능
- 분할 패널 레이아웃: 왼쪽 코드 에디터 / 오른쪽 라이브 iframe 미리보기 — 편안한 편집을 위한 600px 고정 높이
- 300ms 디바운스 자동 새로고침 — 타이핑을 멈춘 직후 미리보기 업데이트, 매 키 입력 깜빡임 방지
- allow-scripts + allow-modals 샌드박스 iframe — alert(), DOM 이벤트, 애니메이션 등 JavaScript 완전 동작
- 소스 코드 변경 없이 스크립트를 재실행하고 미리보기를 재로드하는 수동 새로고침 버튼
- 실시간으로 업데이트되는 글자 수 표시로 문서 크기 추적
- DOCTYPE, head, body, 인라인 CSS, 인라인 JavaScript를 포함한 완전한 HTML 문서 지원
- document.write() 렌더링으로 전체 페이지 제어 — 실제 브라우저가 렌더링할 내용과 동일한 미리보기
- 완전 클라이언트 사이드 — 서버 업로드 없음, 속도 제한 없음, 계정 불필요
자주 묻는 질문
HTML Live Preview 에디터에서 무엇을 작성할 수 있나요?
DOCTYPE 선언, 메타 태그, 인라인 <style> 블록, 인라인 <script> 블록, body 콘텐츠를 포함한 유효한 HTML을 모두 작성할 수 있습니다. iframe은 전체 문서를 렌더링하므로 CSS와 JavaScript 모두 실제 브라우저 탭처럼 실행됩니다.
JavaScript가 미리보기에서 실행되나요?
네. 미리보기 iframe은 allow-scripts와 allow-modals 권한으로 샌드박스 처리됩니다. alert(), confirm(), addEventListener(), fetch(), setTimeout(), DOM 조작 등 표준 JavaScript가 모두 작동합니다. 샌드박스는 보안을 위해 프레임이 부모 페이지에 접근하지 못하도록 합니다.
왜 즉시 업데이트되지 않고 짧은 지연이 있나요?
300밀리초 디바운스는 매 키 입력마다 iframe이 재렌더링되어 눈에 띄는 깜빡임과 성능 저하가 발생하는 것을 방지합니다. 연속된 키 입력을 하나의 렌더링으로 묶기에 충분히 길지만, 실시간처럼 느껴질 만큼 짧습니다.
새로고침 버튼의 기능은 무엇인가요?
새로고침 버튼은 소스 코드를 수정하지 않고 iframe을 수동으로 재렌더링합니다. JavaScript 애니메이션을 처음부터 다시 시작하거나, 스크립트를 재실행하거나, 미리보기에 누적된 런타임 상태를 초기화하고 싶을 때 유용합니다.
외부 CSS 프레임워크나 JavaScript 라이브러리를 사용할 수 있나요?
네. HTML에서 CDN 링크를 통해 외부 리소스를 참조할 수 있습니다. 예를 들어 <head>에 Bootstrap CDN 링크 태그를 추가하거나 코드 앞에 React CDN 스크립트 태그를 추가하면 됩니다. 네트워크 요청이 허용되는 한 iframe이 해당 외부 리소스를 로드합니다.
CodePen이나 JSFiddle 대신 사용할 수 있나요?
HTML Live Preview는 계정 없이 빠른 프로토타입을 위한 가볍고 프라이버시 중심의 대안입니다. CodePen과 JSFiddle은 협업, 저장, 공유 기능을 제공하지만 회원가입이 필요합니다. 이 도구는 별도 설정 없이 코드 동작만 빠르게 확인하고 싶은 일회성 실험에 최적입니다.
반응형 디자인 테스트에 사용할 수 있나요?
미리보기 iframe은 컨테이너의 전체 너비로 설정되므로 HTML 레이아웃이 미리보기 패널 너비로 렌더링됩니다. 좁은 뷰포트를 시뮬레이션하려면 브라우저 창을 좁혀 미리보기 열을 줄이면 됩니다. 정밀한 반응형 테스트는 기기 에뮬레이션이 있는 브라우저 개발자 도구를 사용하세요.
작성한 코드가 어딘가에 저장되나요?
아니요. 코드는 현재 브라우저 세션의 React 상태에만 존재합니다. 서버로 전송되지 않고, localStorage에 저장되지 않으며, 페이지를 새로고침하면 유지되지 않습니다. 브라우저 탭을 닫거나 새로고침하면 코드는 기본 예제로 돌아갑니다.