Converter

HTML → Image

HTML 파일과 코드를 이미지로 변환합니다.

Input

입력

px
HTML 코드
Ctrl + Space

드래그하거나 클릭해서 선택

.html, .htm

변환 준비 중...

변환 결과

0
전체
0
성공

사용법

설치 없이 브라우저에서 바로 사용할 수 있습니다. 세 단계면 끝납니다.

1

HTML 입력

‘코드 입력’ 탭에 HTML 코드를 붙여넣거나, ‘파일 업로드’ 탭에서 .html / .htm 파일을 드래그해 올립니다. 여러 개를 한 번에 추가할 수 있습니다.

2

가로 폭 설정

원하는 가로 폭(px)을 입력합니다. 세로 길이는 콘텐츠 높이에 맞춰 자동으로 결정되며, 2배 해상도(2x)로 선명하게 렌더링됩니다.

3

변환 및 저장

‘변환 시작’을 누르면 PNG 이미지로 변환됩니다. 미리보기를 확인한 뒤 개별 저장하거나 ZIP으로 한 번에 내려받을 수 있습니다.

이런 분께 유용합니다

HTML/CSS로 만든 결과물을 그대로 이미지로 만들어야 할 때 활용하세요.

상품 상세 이미지

쇼핑몰 상세 페이지를 HTML로 작성한 뒤 업로드용 상세컷 이미지로 변환합니다. 마켓플레이스 업로드 규격에 맞춰 가로 폭만 바꾸면 됩니다.

블로그·SNS 썸네일

텍스트와 스타일을 자유롭게 꾸민 카드형 썸네일을 코드로 디자인하고, 이미지로 내보내 블로그나 SNS에 올립니다.

카드뉴스 제작

동일한 템플릿에 내용만 바꿔가며 여러 장을 한 번에 변환할 수 있어, 일관된 디자인의 카드뉴스를 빠르게 만들 수 있습니다.

웹 화면 아카이빙

이메일 템플릿, 인증서, 영수증처럼 HTML로 생성되는 화면을 고정된 이미지로 보관하거나 공유할 때 사용합니다.

)를 제거해 코드를 살린 뒤, 두 값을 교체하세요. data-ad-client = ca-pub-XXXXXXXXXXXXXXXX (게시자 ID) data-ad-slot = 0000000000 (애드센스 > 광고 > 광고 단위에서 발급) ============================================================ -->

자주 묻는 질문 (FAQ)

서비스 이용 전 자주 궁금해하시는 내용을 정리했습니다.

어떤 파일 형식을 지원하나요?

.html, .htm 파일을 지원합니다. 파일을 올리는 대신 HTML 코드를 직접 붙여넣어 변환할 수도 있습니다. 출력은 무손실 PNG 이미지로 제공됩니다.

이미지 화질은 어느 정도인가요?

화면 배율 2배(2x, deviceScaleFactor 2)로 렌더링하여 고해상도로 저장됩니다. 가로 폭을 크게 설정할수록 더 큰 이미지를 얻을 수 있습니다.

한글 폰트나 외부 이미지는 잘 나오나요?

폰트 안티앨리어싱이 자동 적용되어 한글도 선명하게 출력됩니다. 외부 URL로 연결된 이미지·CSS·웹폰트는 변환 시 자동으로 불러옵니다. 상대 경로 리소스를 쓰는 경우 해당 파일도 함께 업로드해야 합니다.

업로드한 파일은 얼마나 보관되나요?

업로드한 HTML과 변환된 이미지는 서버에 임시로만 저장되며, 일정 시간(약 1시간) 후 자동으로 삭제됩니다. 자세한 내용은 개인정보처리방침을 참고하세요.

회원가입이나 비용이 필요한가요?

회원가입 없이 무료로 이용할 수 있습니다. 브라우저에서 바로 변환하고 다운로드하면 됩니다.

변환한 이미지의 저작권은 누구에게 있나요?

입력한 HTML과 그 결과물에 대한 권리는 전적으로 이용자에게 있습니다. 본 서비스는 변환 과정만 제공하며 결과물에 대한 권리를 주장하지 않습니다.

가이드

결과물이 생각과 다르게 나온다면 대부분 아래 문서에서 원인을 찾을 수 있습니다.

해상도와 크기 이해하기

가로 폭을 얼마로 넣어야 원하는 크기가 나오는지, 2배 해상도가 실제로 무엇을 뜻하는지 설명합니다.

한글 폰트가 깨질 때

내 브라우저에서는 멀쩡한데 변환 결과에서만 폰트가 바뀌는 이유와 확실한 해결 방법을 다룹니다.

이미지·CSS가 안 나올 때

상대 경로로 연결한 리소스가 결과물에서 사라지는 이유와 반영시키는 세 가지 방법을 정리했습니다.

템플릿 작성 가이드

이미지 변환을 전제로 HTML을 작성할 때의 원칙과, 그대로 쓸 수 있는 완성형 템플릿을 제공합니다.

전체 가이드 보기 →