HTML 뷰어란?

서버를 띄우지 않고 HTML이 어떻게 보이는지 확인하고 싶으신가요? 이 도구가 바로 그 역할을 합니다. HTML 뷰어는 HTML (HyperText Markup Language)을 받아 코드 옆의 미리보기 패널에서 실시간으로 렌더링합니다.

랜딩 페이지 프로토타이핑, 이메일 템플릿 디버깅, 마크업 확인 등 이 도구는 즉각적인 시각적 피드백을 제공합니다. 파일 저장이나 로컬 서버 실행이 필요 없습니다.

모든 것이 브라우저에서 실행됩니다. HTML은 서버로 전송되지 않습니다. 빠르고, 무료이며, 프라이버시가 보장됩니다.

HTML 뷰어 사용 방법

다음 단계에 따라 HTML을 미리보기하고 작업하세요.

HTML 붙여넣기 또는 샘플 불러오기

왼쪽 편집기에 HTML을 붙여넣으세요. <html>, <head>, <body> 태그가 있는 전체 페이지이거나 스니펫만이어도 됩니다. 샘플 버튼을 클릭하면 예시 HTML을 불러옵니다.

<div style="font-family: Arial, sans-serif; padding: 20px;">
  <h1 style="color: #333;">안녕하세요</h1>
  <p>이것은 <strong>샘플 HTML</strong> 페이지입니다.</p>
  <ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
  </ul>
</div>

입력하는 동안 미리보기가 자동으로 업데이트됩니다.

실시간 미리보기 확인

오른쪽 패널이 HTML을 즉시 렌더링합니다. 브라우저가 마크업을 해석하는 방식을 그대로 볼 수 있습니다 — 스타일, 레이아웃, 이미지 모두 포함.

조정 및 반복

왼쪽 패널에서 HTML을 편집하고 미리보기가 실시간으로 업데이트되는 것을 확인하세요. 스플리터를 드래그하여 패널 크기를 조정할 수 있습니다.

작업 공유

공유를 클릭하여 HTML의 공유 가능한 링크를 생성합니다.

이런 경우에 사용하세요

UI 스니펫 프로토타이핑

버튼 스타일, 카드 레이아웃, 내비게이션 바를 빠르게 테스트하고 싶으신가요? 여기에 HTML을 붙여넣으면 즉시 렌더링 결과를 볼 수 있습니다.

이메일 템플릿 디버깅

이메일 HTML은 까다롭기로 유명합니다 — 인라인 스타일, 테이블 레이아웃, 변덕스러운 렌더링. 보내기 전에 여기서 템플릿 모양을 확인하세요.

HTML 학습

HTML을 배우고 있다면 이 도구는 실험에 완벽합니다. 태그를 작성하고 무엇을 하는지 확인하세요. 다양한 속성을 시도하고 결과를 즉시 확인할 수 있습니다.

코드 스니펫 검토

Slack이나 PR 코멘트로 HTML 스니펫을 받으셨나요? 여기에 붙여넣으면 실제로 어떻게 보이는지 바로 확인할 수 있습니다.

자주 묻는 질문

HTML 데이터가 어딘가에 저장되나요?

아니요. 모든 것이 브라우저의 JavaScript로 완전히 실행됩니다. "공유"를 클릭하지 않는 한 HTML이 컴퓨터를 떠나지 않습니다.

CSS와 JavaScript를 지원하나요?

네. 인라인 스타일과 <style> 태그가 올바르게 렌더링됩니다. <script> 태그의 JavaScript는 샌드박스화된 미리보기 iframe 내에서 실행됩니다.

미리보기는 안전한가요?

미리보기는 샌드박스화된 iframe 내에서 렌더링되어 메인 페이지와 격리됩니다.

전체 HTML 문서를 사용할 수 있나요?

물론입니다. <!DOCTYPE html>, <html>, <head>, <body> 태그가 포함된 전체 HTML 문서나 <div> 같은 프래그먼트 모두 사용할 수 있습니다.

실시간 미리보기는 어떻게 동작하나요?

편집기에서 입력할 때마다 300ms의 짧은 지연 후 미리보기 iframe이 HTML 콘텐츠로 업데이트됩니다.

패널 크기를 조정할 수 있나요?

네. 두 패널 사이의 스플리터 바를 드래그하여 크기를 조정할 수 있습니다. 모바일에서는 패널이 세로로 쌓입니다.

기타 HTML 및 마크업 도구

이 뷰어는 HTML 미리보기에 좋지만, 때로는 다른 도구가 필요합니다: