HTML 이미지 변환

HTML 내용을 미리 보고 PNG·JPG 이미지로 저장하세요.

HTML 이미지 변환 방법

HTML 파일을 열거나 내용을 붙여 넣으세요.
폭을 조절하고 미리보기에서 결과를 확인하세요.
이미지 만들기를 누르고 이미지 파일을 저장하세요.

HTML 이미지 변환·HTML to PNG 모두 프로그램 설치나 회원가입 없이 무료로 할 수 있어요. PC는 물론 아이폰·갤럭시 브라우저에서도 그대로 작동합니다.

웹 주소 캡처가 아니라 직접 넣은 HTML을 처리합니다. 실행 코드·외부 이미지·외부 글꼴은 차단합니다. 결과는 PNG 또는 JPG 이미지로 저장됩니다.

어떤 도구인가요?

HTML을 이미지로는 직접 작성하거나 파일로 가진 HTML 코드를 미리보기로 확인하고, 그 화면을 PNG나 JPG 이미지로 저장하는 도구예요. 웹 주소를 입력해 남의 사이트를 캡처하는 것이 아니라, 내가 넣은 HTML과 CSS를 정해진 폭으로 그려 이미지로 바꿔요. 이메일 템플릿 시안, 표나 카드 디자인, 코드 결과 화면을 이미지로 공유해야 하는 개발자·마케터·교사에게 유용해요. 안전을 위해 스크립트와 외부 리소스는 차단한 상태로 처리해요.

이럴 때 쓰세요

직접 만든 이메일 뉴스레터 HTML을 이미지로 저장해 검토자에게 메신저로 시안을 보낼 때 쓸 수 있어요.
블로그 편집기에서 HTML 표가 깨질 때 표를 이미지로 만들어 그대로 보이도록 넣을 때 유용해요.
HTML·CSS 수업 자료에 코드와 함께 렌더링 결과 이미지를 실어 학생들이 비교하게 할 때 도움이 돼요.
간단한 공지 배너나 이벤트 카드를 CSS로 디자인한 뒤 SNS용 이미지 파일로 저장할 때 활용할 수 있어요.
문서나 발표 자료에 넣을 UI 시안을 일정한 폭으로 캡처해 여러 장의 크기를 맞출 때 편리해요.

사용 예시

이벤트 안내 카드를 HTML로 만들어 이미지로 저장하는 경우를 예로 들어 볼게요. 먼저 '예시 넣기'로 구조를 확인하거나, 준비한 파일을 'HTML 파일 열기'로 불러오고 왼쪽 입력칸에서 내용을 고치세요. 입력이 멈추면 오른쪽 미리보기가 자동으로 갱신되니, '페이지 폭 (픽셀)'을 800 정도로 바꿔 가며 줄바꿈이 자연스러운지 확인하세요. '저장 형식'에서 PNG를 고르고 '이미지 만들기'를 누르면 내용 전체 높이에 맞춘 이미지가 만들어져요. 완성되면 html.png 파일 이름과 용량이 표시되고, '결과 파일 저장'을 눌러 내 기기에 저장할 수 있어요.

더 잘 쓰는 팁

글꼴·색·배치는 <style> 태그 안에 직접 적으세요. 외부 CSS 파일 링크와 @import는 제거돼요.
그림을 넣어야 한다면 이미지 주소 대신 data:image 형식(base64)으로 HTML 안에 넣으세요. PNG·JPG·WebP·GIF 데이터만 표시돼요.
글자와 선이 많은 화면은 PNG가 또렷하고, 사진이 많은 화면은 JPG가 용량이 작아요.
결과 이미지는 페이지 폭과 같은 가로 크기로 만들어지므로, 사용할 곳의 너비에 맞춰 폭을 정하면 따로 줄일 필요가 없어요.
이미지를 만드는 중에 HTML을 고치면 다시 만들어 달라는 안내가 나와요. 내용을 확정한 뒤 만들기를 누르세요.

알아두세요

웹 주소를 입력해 실제 웹페이지를 캡처하는 기능이 아니에요. 직접 넣은 HTML만 처리해요.
스크립트, iframe, 폼, 동영상·오디오, 외부 이미지와 외부 글꼴은 차단돼요. 글꼴은 사용 중인 기기에 설치된 글꼴로 표시돼요.
HTML은 1MB 이하, 페이지 폭은 320~2000픽셀, 결과 높이는 최대 10,000픽셀이에요. 더 긴 내용은 나누어 만들어야 해요.
이미지를 그리는 변환 프로그램(html2canvas)을 공개 CDN에서 불러오며, 복잡한 CSS 효과는 미리보기와 조금 다르게 그려질 수 있어요. 내가 넣은 HTML은 외부로 보내지 않아요.

자주 묻는 질문

웹사이트 주소를 넣으면 캡처되나요?

아니요. 이 도구는 주소로 페이지를 불러오지 않고, 입력칸에 넣은 HTML만 그려요. 다른 사이트의 화면이 필요하다면 브라우저의 스크린샷 기능을 이용하세요.

이미지가 깨지거나 빈칸으로 나와요.

외부 주소의 이미지는 보안을 위해 차단돼요. 이미지를 data:image 형식의 base64 문자열로 바꿔 HTML에 직접 넣으면 표시돼요.

자바스크립트로 만든 내용도 나오나요?

아니요. 스크립트와 onclick 같은 실행 속성은 모두 제거한 뒤 그리기 때문에, 스크립트가 만들어 내는 내용은 나타나지 않아요. 결과로 보일 내용을 HTML과 CSS로 직접 작성하세요.

이미지 크기는 어떻게 정해지나요?

가로는 '페이지 폭 (픽셀)'에 넣은 값이고, 세로는 내용 전체 높이에 맞춰 자동으로 정해져요. 배경은 흰색으로 채워지며 높이가 10,000픽셀을 넘으면 내용을 나누라는 안내가 나와요.

PDF로도 저장할 수 있나요?

이 도구는 PNG와 JPG만 저장해요. PDF가 필요하면 같은 사이트의 HTML을 PDF로 만드는 도구를 이용하세요.

함께 쓰면 좋은 도구

이미지 크기·형식 바꾸기 — 사진을 보면서 크기를 조절하고 JPG·PNG·WebP로 저장하세요.
이미지 용량 줄이기 — 원본과 압축 결과를 나란히 보면서 화질과 용량을 조절하세요.
사진에 글자 넣기 — 사진 위에 문구를 쓰고, 원하는 곳으로 끌어서 옮기세요.
사진 자르기 — 드래그해서 필요한 부분만 자르고 비율을 맞추세요.
사진 회전·뒤집기 — 사진을 보면서 회전하거나 좌우·상하로 뒤집으세요.

파일은 브라우저에서 처리되며 이 사이트 서버에 업로드하지 않습니다.