HTML → 이미지 변환
붙여 넣은 HTML·CSS 코드를 브라우저에서 그려 PNG나 JPG 이미지로 저장합니다. 너비와 배율을 정할 수 있고, 외부 웹 주소 캡처는 지원하지 않습니다.
내 기기 안에서만 처리돼요. 서버로 전송하지 않아요.
관련 도구
자주 묻는 질문
한글이 깨지지 않나요?
글꼴을 정하지 않으면 Pretendard로 그리고, 그 글꼴을 이미지 안에 함께 넣어요. 다른 글꼴을 지정했는데 기기에 없으면 한글은 Pretendard로 나와요.
자바스크립트가 들어간 HTML도 되나요?
넣을 수는 있지만 스크립트와 onclick 같은 이벤트 속성은 지우고 실행하지 않아요. HTML과 CSS로 된 모양만 그려요.
미리보기와 결과가 다를 수 있나요?
같은 방식으로 그리기 때문에 거의 같아요. 다만 미리보기는 1배로, 아주 긴 내용은 윗부분만 보여 줘요.
코드가 서버로 올라가나요?
아니요. 코드를 정리하고 그림으로 그리는 일 모두 브라우저 안에서 해요.
HTML → 이미지 변환, 어떤 도구인가요?
HTML과 CSS 코드를 붙여 넣으면 브라우저가 그 화면을 그려 PNG나 JPG 이미지로 저장합니다. 너비는 375·768·1200px 중에 고르거나 직접 정할 수 있고, 높이는 내용에 맞춰 정해집니다. 1~3배 배율로 선명하게 만들 수 있고, PNG는 투명 배경도 됩니다. 한글 글꼴(Pretendard)을 그림 안에 함께 넣기 때문에 기기에 한글 글꼴이 없어도 글자가 깨지지 않습니다. 스크립트는 실행하지 않고, 외부 주소로 된 이미지는 불러오지 않습니다.
이럴 때 쓰세요
카드·배너 이미지
HTML로 디자인한 안내 카드나 공지 배너를 SNS·메신저에 올릴 이미지로 바꿔요.
이메일·화면 시안 공유
작업 중인 메일 본문이나 화면 조각을 이미지로 떠서 리뷰 요청에 붙여요.
표·영수증 이미지
HTML 표로 만든 견적표나 주문 내역을 휴대폰 화면 너비 이미지로 저장해요.
사용 방법
HTML 넣기
입력 칸에 HTML 코드를 붙여 넣거나 'HTML 파일 열기'로 .html 파일을 엽니다.
- <style> 안의 CSS도 그대로 적용돼요. 처음이라면 “예시 넣기”로 모양을 먼저 확인해 보세요.
- 이미지는 data: 주소로 넣어야 그림에 들어가요.
크기·형식 고르기
너비, 배율(1x·2x·3x), 저장 형식(PNG·JPG), 배경(흰색·투명)을 고르고 미리보기를 확인합니다.
- 높이는 내용에 맞춰 자동으로 정해져요.
- 투명 배경은 PNG에서만 쓸 수 있고, HTML에 배경색을 지정했다면 그 색이 나와요.
저장하기
'PNG로 저장'(또는 'JPG로 저장')을 누르면 이미지가 저장됩니다.
- 결과 크기는 미리보기 아래에 픽셀로 표시돼요. 너무 크면 배율을 낮추세요.
자주 나는 문제와 해결
- 외부 이미지나 웹 글꼴이 빠져요
- https://로 시작하는 외부 주소의 이미지·글꼴·CSS는 불러오지 않아요. 브라우저 보안 정책(CORS) 때문에 대부분 그림 안에 넣을 수 없고, 입력한 코드 때문에 다른 서버로 요청이 나가지 않게 하려는 것이에요. 이미지는 data: 주소로 바꿔 넣어 주세요.
- 웹사이트 주소를 넣어 캡처하고 싶어요
- 웹 주소 캡처는 지원하지 않아요. 브라우저는 다른 사이트의 내용을 읽어 올 수 없고, 이 도구는 서버를 거쳐 대신 가져오지 않아요. 페이지의 HTML 코드를 복사해 붙여 넣어 주세요.
- 결과가 너무 크다고 나와요
- 긴 내용을 높은 배율로 그리면 브라우저가 만들 수 있는 이미지 크기를 넘어요. 배율을 1x로 낮추거나 너비를 줄이거나 내용을 나눠 저장하세요. 문서처럼 긴 내용은 'HTML → PDF 변환'이 더 알맞아요.
- 버튼이나 애니메이션이 움직이지 않아요
- 스크립트는 실행하지 않아요. 스크립트로 그리는 내용은 빠지고, 애니메이션은 첫 화면 모습으로 저장돼요.