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을 가져오는 일은 결코 없습니다. 무엇이 렌더링될지 정확히 제어할 수 있어 이메일 템플릿, 스크래핑한 조각, 빠른 디버깅에 유용합니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

XSD 검증기

XML 문서를 XSD 스키마에 대해 검증하고, 요소와 타입 불일치를 정확한 줄 번호와 함께 보고합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

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