Softonic

렌더링된 HTML 뷰어

단계 1 / 2
다음

이메일 템플릿, 스크래핑한 페이지 조각, 문서의 예제 등 어떤 HTML이든 붙여넣고 렌더링을 클릭하면 격리된 iframe 안에 그려진 모습을 볼 수 있습니다. 이 프레임은 브라우저에서 가장 엄격한 샌드박스로 실행되어 스크립트가 실행되지 않고, 폼이 아무것도 전송하지 못하며, 마크업이 페이지를 이동하거나 주변 페이지를 건드리지도 못합니다. 스테이징 서버를 세우지 않고도 “이 마크업이 실제로 어떻게 보이는가”에 답하는 가장 빠른 방법입니다.

HTML 미리보기 방법

  1. 1

    HTML 붙여넣기

    완전한 문서든 느슨한 조각이든 소스 상자에 넣으세요. 붙여넣은 그대로, 쓰인 대로 렌더링됩니다.

  2. 2

    렌더링 클릭

    뷰어가 여러분의 HTML을 격리된 iframe에 기록하고 그 결과를 페이지에 바로 표시합니다.

  3. 3

    미리보기 확인

    프레임은 브라우저처럼 마크업을 그립니다. 제목, 표, 목록, 인라인 스타일, SVG가 모두 나타납니다.

  4. 4

    수정 후 다시 렌더링

    소스를 손본 뒤 원하는 만큼 다시 렌더링하여 각 버전이 어떻게 보이는지 비교하세요.

프레임이 격리되는 이유

붙여넣은 HTML에는 무엇이든 들어 있을 수 있습니다. <script> 태그, <img onerror="..."> 같은 수법, 데이터를 어딘가로 보내는 폼, 다른 사이트를 불러오는 <iframe> 등입니다. 그중 어느 것도 페이지를 건드리지 못하도록, 미리보기는 sandbox 속성을 비운 <iframe sandbox>에 기록됩니다. 이는 존재하는 설정 중 가장 제한적인 것입니다. 이 모드에서 브라우저는 스크립트 실행, 폼 전송, 팝업, 최상위 내비게이션, 동일 출처 접근을 한꺼번에 차단합니다. 마크업에 어떤 권한도 주지 않으면서 시각적 결과만 확인할 수 있습니다.

스크립트가 결코 실행되지 않으므로, JavaScript에 의존하는 것(로드 시 하이드레이션되는 웹 컴포넌트, 스스로 그리는 차트, 빈 <div>에 마운트되는 프레임워크)은 스크립트로 만들어진 결과가 아니라 정적 마크업만 표시합니다. 이는 의도된 절충입니다. 대화형 미리보기 대신 안전하고 예측 가능한 미리보기를 택한 것입니다.

뷰어가 잘 렌더링하는 것

콘텐츠 유형 참고
이메일 HTML 표 기반 레이아웃과 인라인 스타일이 대부분의 클라이언트가 그리는 대로 표시됩니다
블로그 본문 제목, 목록, 인용구, 이미지가 스크립트 없이 모두 표시됩니다
스크래핑한 조각 가져온 마크업이 단독으로 성립할 만큼 완전한지 보여 줍니다
인라인 SVG 어떤 크기로도 그려져 아이콘 확인에 편리합니다
정적 컴포넌트 마크업 마크업은 렌더링되지만, JavaScript 동작은 렌더링되지 않습니다

이 도구의 좋은 활용법

  • 이메일 템플릿 QA. 이메일 편집기에서 내보낸 결과를 붙여넣으면 자신에게 테스트 메일을 보내지 않고도 레이아웃을 확인할 수 있습니다.
  • 스크래핑 데이터 빠른 점검. 페이지에서 innerHTML을 조금 가져왔습니다. 그것이 의미 있는 모습으로 다시 렌더링되나요? 그렇지 않다면 그 조각은 아마 불완전합니다.
  • Markdown → HTML 검토. 텍스트를 변환기에 통과시키고(HTML → Markdown 도구가 왕복 변환합니다) 그 결과 HTML을 여기서 미리 보세요.
  • 학습과 교육. 문서의 예제를 붙여넣고 브라우저가 그것을 정확히 어떻게 배치하는지 관찰하세요.

유의할 점

  • 상대 URL. /assets/logo.png 같은 상대 경로로 참조된 이미지와 스타일시트는 기준이 될 서버가 없어 로드되지 않습니다. 이미지를 표시하려면 절대 https:// URL이나 data: URI를 사용하세요.
  • 외부 리소스. 다른 사이트에서 불러오는 글꼴, 스타일시트, 이미지는 해당 사이트의 허용 여부에 달려 있습니다. 일부는 프레임 안에서의 로드를 막는 헤더를 보냅니다.
  • 스크립트 없음. 마크업이 JavaScript로만 살아난다면, 미리보기는 스크립트 실행 전의 상태를 보여 줍니다. 이는 예상된 동작이며 결함이 아닙니다.

자주 묻는 질문

네. 미리보기는 아무 권한도 없는 완전히 격리된 iframe에서 실행되므로 스크립트가 실행될 수 없고 마크업이 주변 페이지에 닿을 수 없습니다. 악의적인 HTML조차 프레임 안에서 자기 자신만 그릴 수 있습니다.

아니요. 샌드박스가 스크립트 실행을 완전히 차단하므로 <script> 태그와 인라인 이벤트 핸들러는 무시됩니다. 여러분이 보는 것은 정적 마크업이며, 바로 그것이 미리보기를 안전하게 만듭니다.

상대 경로는 기준이 될 대상이 없고, 일부 호스트는 자신들의 이미지가 프레임 안에서 로드되는 것을 막는 헤더를 보냅니다. 절대 https:// URL을 사용하거나 이미지를 data: URI로 삽입하세요.

네. 문서 전체(doctype, <head>, <body> 등 모두)를 붙여넣으면 쓰인 그대로 렌더링됩니다. 느슨한 조각도 동작하며, 나머지는 브라우저가 채웁니다.

이 도구는 여러분이 붙여넣은 HTML을 텍스트로 렌더링하며, URL을 가져오는 일은 결코 없습니다. 무엇이 렌더링될지 정확히 제어할 수 있어 이메일 템플릿, 스크래핑한 조각, 빠른 디버깅에 유용합니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

이 도구는 다른 언어로도 제공됩니다