HTML 이미지 변환기
HTML 조각을 붙여 넣으세요. 스크립트, 양식, 프레임, 이벤트 처리기는 렌더링 전에 제거됩니다.
HTML과 생성된 이미지는 이 브라우저 안에만 남습니다. 원격 이미지, 글꼴, 스타일시트는 각 원본 URL에서 불러옵니다. 완전히 오프라인으로 렌더링하려면 데이터를 HTML에 포함하세요.
HTML과 CSS 조각을 고정 크기 PNG 또는 JPG로 변환하되 소스나 생성 이미지를 Hyperion에 업로드하지 않습니다. 한 변당 64~1,920 px, 배율 1x~3x를 정하고 브라우저 안에서 미리 보고 내려받으세요.
HTML을 이미지로 렌더링하는 방법
-
1
코드 붙여 넣기
HTML 조각이나 문서를 입력합니다. 인라인 CSS와 `<style>` 규칙을 지원하며 스크립트, 양식, 프레임, 이벤트 처리기는 제거됩니다.
-
2
캔버스 설정
PNG 또는 JPG를 고르고 너비와 높이, 1x~3x 배율을 지정합니다.
-
3
미리보기 렌더링
브라우저가 정리된 코드를 고정 크기의 격리된 프레임 안에 배치합니다.
-
4
로컬에 저장
PNG 또는 JPG를 바로 저장합니다. 생성 파일은 Hyperion에 업로드되지 않습니다.
브라우저 렌더러가 지원하는 항목
변환기는 브라우저의 레이아웃 엔진을 사용합니다. 일반 HTML, 인라인 CSS, <style> 규칙, Flexbox, Grid, 그라데이션, 그림자, 인라인 SVG, 설치된 글꼴을 결과에 반영할 수 있습니다. 출력은 정적인 래스터 이미지이며 조작 가능한 웹페이지 복사본은 아닙니다.
캔버스와 출력 규칙
| 설정 | 지원 범위 | 동작 |
|---|---|---|
| 너비 | 64~1,920 px | 캡처 프레임의 정확한 CSS 너비 |
| 높이 | 64~1,920 px | 정확한 CSS 높이, 넘치는 내용은 잘림 |
| 배율 | 1x~3x | 레이아웃 크기를 바꾸지 않고 해상도를 높임 |
| PNG | 고정 크기 래스터 | 투명 영역을 유지 |
| JPG | 고정 크기 래스터 | 품질 92%와 흰색 배경 사용 |
브라우저 메모리를 보호하기 위해 출력은 1,600만 픽셀로 제한됩니다. 크기와 배율이 한도를 넘으면 도구가 가장 높은 안전한 0.5x 단계로 배율을 낮춥니다. HTML 소스는 최대 100,000자입니다.
개인정보 보호와 원격 리소스
HTML과 생성된 데이터 이미지는 현재 브라우저에 남습니다. 단계별 모드에서는 다음 단계로 이동할 수 있도록 이 탭의 세션 저장소에 설정을 보관하며, 처음부터 다시 시작하면 삭제합니다. 코드나 이미지는 Hyperion으로 전송되지 않습니다.
외부 URL은 예외입니다. 원격 이미지, 웹 글꼴, 스타일시트는 원본 서버에서 가져오므로 해당 서버가 요청을 볼 수 있습니다. CORS나 접근 제한으로 로딩이 실패할 수도 있습니다. 완전히 오프라인으로 렌더링하려면 이미지와 글꼴을 데이터 URL로 포함하고 CSS도 인라인으로 작성하세요.
안전성과 재현성의 한계
캡처 전에 스크립트, 양식, 중첩 프레임, 임베디드 객체, 이벤트 속성을 제거합니다. 미리보기는 상호작용할 수 없게 되지만, 다른 곳에 게시할 HTML을 위한 범용 보안 정리 도구는 아닙니다. JavaScript 위젯은 실행되지 않고 동영상과 canvas 상태는 보장되지 않습니다. 애니메이션은 한 장의 정지 화면이 되며 브라우저 전용 CSS는 다른 엔진과 다를 수 있습니다.
자주 묻는 질문
가능합니다. 렌더러는 head의 지원되는 <style> 규칙과 스타일시트 링크를 가져오고 body 내용을 캡처합니다. 스크립트, 메타데이터, 양식, 프레임, 활성 처리기는 제거되므로 탐색 가능한 페이지처럼 작동하지 않습니다.
원본 서버가 교차 출처 사용을 막거나 로그인을 요구하거나 너무 늦게 응답할 수 있습니다. CORS를 허용하는 접근 가능한 URL을 쓰거나 리소스를 데이터 URL로 포함하세요.
PNG는 투명 픽셀을 유지합니다. JPG는 흰색 배경과 고정 품질 92%를 사용해 사진에서 더 작을 때가 많습니다. WebP 출력이나 별도 품질 조절은 지원하지 않습니다.
출력을 1,600만 픽셀로 제한하기 때문입니다. 큰 캔버스에서는 브라우저 메모리 부족을 막기 위해 가장 높은 안전한 0.5x 단계를 자동으로 선택합니다.
관련 도구
랜덤 영어 글자 생성기
A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.
랜덤 색상 팔레트 생성기
2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.
Base64 → Hex 변환기
Base64 문자열을 실제 바이트로 디코딩한 뒤 16진수로 표현합니다. 토큰, 키, 인증서, JWT를 살펴볼 때 유용합니다.
2진수를 10진수로 변환
2진수를 즉시 10진수로 변환합니다. 각 비트가 어떻게 기여하는지 볼 수 있도록 자릿값 전개를 보여줍니다.
불 대수 간소화 도구
Karnaugh map과 Quine-McCluskey 알고리즘으로 불 대수 식을 간소화합니다. 모든 최소화 단계와 최종 SOP/POS 형태를 보여줍니다.
2진수 8진수 변환기
비트를 세 개씩 묶어 2진수를 8진수로 변환합니다. Unix 권한, 레거시 시스템, 간결한 숫자 표시에 유용합니다.