Image Splitter
모드
출력 형식
너비
배율
투명
템플릿
이미지 URL을 추가할 수 있습니다. 예: <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80" />
미리보기

HTML을 이미지로

HTML과 CSS 레이아웃을 정지 이미지로 변환합니다. 캔버스 크기를 정하고 미리 보기를 확인한 뒤 PNG나 JPG로 저장하세요.

강력한 HTML 이미지 변환 기능

HTML 및 CSS 미리 보기

렌더링은 브라우저와 사용할 수 있는 글꼴·이미지에 따라 달라집니다. 외부 리소스는 출처 제한으로 불러오거나 내보내지 못할 수 있습니다. 결과는 정지 이미지입니다.

10개 이상의 기성 템플릿

소셜 카드, 인용문, 생일 축하, 통계 카드 등의 사전 디자인 템플릿 중에서 선택. 코드를 처음부터 작성하지 않고 HTML을 빠르게 이미지로 변환.

여러 출력 형식

PNG, JPEG 또는 SVG로 내보내기. 투명도가 있는 HTML→PNG, 작은 파일 크기의 HTML→JPEG, 확장성을 위한 HTML→SVG 생성.

투명 배경

투명 배경이 있는 HTML→PNG 이미지를 생성. 오버레이, 워터마크 및 모든 배경색과 혼합되어야 하는 그래픽에 적합.

사용자 정의 크기

HTML→이미지 변환을 위한 정확한 너비 및 픽셀 비율 설정. 모든 기기나 디스플레이에서 선명하고 깨끗한 결과를 위해 최대 3배 스케일의 고해상도 이미지 생성.

즉각적인 미리보기 및 다운로드

HTML 및 CSS 코드를 편집하면서 실시간 미리보기를 확인. HTML 스크린샷 도구는 변경 사항을 렌더링하여 HTML 이미지를 다운로드 가능.

HTML을 이미지로 변환하는 방법

1

모드 선택

사전 구축된 템플릿을 사용하여 빠른 디자인을 위해 템플릿 모드를 선택하거나, HTML→이미지 변환을 위한 사용자 정의 HTML 및 CSS 코드를 작성하기 위해 고급 모드로 전환.

2

HTML 및 CSS 코드 입력

고급 모드에서 HTML 코드를 붙여넣고 CSS 스타일링을 추가. 템플릿 모드에서는 제목, 텍스트, 색상과 같은 필드를 채워 HTML 이미지를 사용자 정의.

3

출력 설정 구성

출력 형식(PNG, JPEG 또는 SVG)을 선택하고, 이미지 너비를 설정하고, 해상도를 위한 픽셀 비율을 조정하고, HTML→PNG 변환에 필요한 경우 투명 배경을 활성화.

4

미리보기 및 다운로드

이미지로 렌더링된 HTML의 실시간 미리보기를 확인. 다운로드를 클릭하여 HTML→PNG, HTML→JPEG 또는 HTML→SVG 파일을 기기에 저장.

실제 처리 예시

HTML을 이미지로 · 예시 1

이 도구 또는 도구와 동일한 처리 코드로 만든 결과입니다. 입력 파일, 설정, 결과를 비교하고 파일을 내려받아 확인하세요.

예시 1
PNG1000 × 640 px

입력2

<section><small>01 / 03</small><h1>2026</h1><p>09 / 22</p></section>
*{box-sizing:border-box} body{margin:0} section{padding:56px;background:#153d36;color:#f7e3b6;min-height:320px;font-family:system-ui;border-radius:20px} small{letter-spacing:4px;font-size:16px} h1{font-size:72px;line-height:1.1;margin:30px 0} p{font-size:22px}
원본 파일 (2)

결과PNG

HTML을 이미지로 — 예시 1 — 결과
결과 받기 1PNG

더 나은 HTML 이미지 변환을 위한 팁

이미지 너비 최적화

HTML→이미지 출력에 적합한 너비를 선택. 소셜 미디어에는 1200px, 이메일 배너에는 800px 또는 최상의 결과를 위해 특정 요구 사항에 따른 사용자 정의 크기 사용.

높은 픽셀 비율 사용

고DPI 디스플레이를 위해 픽셀 비율을 2배 또는 3배로 설정. 이렇게 하면 HTML→PNG 또는 JPEG 이미지가 레티나 스크린 및 고해상도 기기에서 선명하게 보입니다.

웹 안전 글꼴

일반적인 웹 글꼴(Arial, Helvetica 등)을 사용하거나 CSS @font-face를 통해 사용자 정의 글꼴을 로드. 일관된 렌더링을 위해 HTML→이미지 변환 시 글꼴이 사용 가능한지 확인.

오버레이용 투명 PNG

로고, 워터마크 또는 다른 이미지나 컬러 배경 위에 오버레이해야 하는 그래픽을 위해 HTML→PNG로 변환할 때 투명 배경을 활성화.

HTML 및 CSS 검증

유효하고 잘 형식화된 HTML 및 CSS 코드를 사용. 적절한 구조는 HTML 코드를 이미지로 변환할 때 정확한 렌더링을 보장. 출력을 확인하기 위해 다운로드 전에 미리보기.

속도를 위해 템플릿 사용

일반적인 디자인을 위해 기본 제공 템플릿으로 시작. 템플릿은 이미지로 변환하기 위한 최적화된 HTML 구조를 제공하여 전문적인 품질을 유지하면서 시간을 절약.

실제 처리 예시

HTML을 이미지로 · 더 많은 예시

이 도구 또는 도구와 동일한 처리 코드로 만든 결과입니다. 입력 파일, 설정, 결과를 비교하고 파일을 내려받아 확인하세요.

예시 2
PNG1000 × 640 px

입력2

<section><small>02 / 03</small><h1>12:30</h1><p>09 / 22 · 2026</p></section>
*{box-sizing:border-box} body{margin:0} section{padding:56px;background:#f5e6d8;color:#673f2f;min-height:320px;font-family:system-ui;border-radius:20px} small{letter-spacing:4px;font-size:16px} h1{font-size:72px;line-height:1.1;margin:30px 0} p{font-size:22px}
원본 파일 (2)

결과PNG

HTML을 이미지로 — 예시 2 — 결과
결과 받기 1PNG
예시 3
PNG1000 × 640 px

입력2

<section><small>03 / 03</small><h1>01 → 02</h1><p>12 + 24 = 36</p></section>
*{box-sizing:border-box} body{margin:0} section{padding:56px;background:#e4eef4;color:#214762;min-height:320px;font-family:system-ui;border-radius:20px} small{letter-spacing:4px;font-size:16px} h1{font-size:72px;line-height:1.1;margin:30px 0} p{font-size:22px}
원본 파일 (2)

결과PNG

HTML을 이미지로 — 예시 3 — 결과
결과 받기 1PNG

HTML 이미지 변환 FAQ

HTML→이미지 변환기는 HTML 및 CSS 코드를 다운로드 가능한 이미지(PNG, JPEG, SVG)로 렌더링하는 도구입니다. HTML 디자인을 캡처하여 정적 이미지 파일로 변환하며, 소셜 미디어 그래픽, 이메일 이미지 및 웹 미리보기에 유용합니다.
투명도로 HTML→PNG로 변환하려면: 1) HTML/CSS 코드 입력, 2) 출력 형식으로 PNG 선택, 3) 투명 배경 옵션 활성화, 4) 다운로드 클릭. 생성된 HTML→PNG 이미지는 오버레이에 투명 배경을 갖습니다.
네! @font-face CSS 규칙을 포함하거나 HTML에서 웹 글꼴(Google Fonts 등)에 링크하여 사용자 정의 글꼴을 사용할 수 있습니다. HTML→이미지 변환기는 생성된 이미지에서 사용자 정의 글꼴을 올바르게 렌더링합니다.
템플릿 모드는 필드(제목, 텍스트, 색상)를 채우는 사전 디자인된 HTML 레이아웃을 제공합니다. 고급 모드를 사용하면 처음부터 사용자 정의 HTML 및 CSS를 작성할 수 있습니다. 빠른 결과를 위해 템플릿을, 완전한 창의적 제어를 위해 고급 모드를 사용하세요.
PNG(투명도 지원), JPEG(작은 파일 크기, 투명도 없음) 또는 SVG(벡터 형식, 확장 가능)로 HTML을 내보낼 수 있습니다. 웹 그래픽에는 PNG, 사진에는 JPEG, 로고 및 아이콘에는 SVG를 선택하세요.
최대 3000px의 사용자 정의 너비와 최대 3배의 픽셀 비율을 설정할 수 있습니다. HTML→이미지 변환기는 인쇄, 대형 디스플레이 및 레티나 스크린에 적합한 품질 손실 없이 고해상도 이미지를 생성할 수 있습니다.
네! URL 또는 base64 데이터가 있는 <img> 태그를 사용하여 이미지를 포함할 수 있습니다. 외부 이미지 URL은 액세스 가능해야 합니다. HTML→이미지 변환기는 HTML 및 CSS 코드와 함께 모든 이미지를 렌더링합니다.
빠른 생성을 위해 소셜 카드 템플릿을 사용하거나 권장 크기(Facebook의 경우 1200x630px, Twitter의 경우 1200x675px)로 사용자 정의 HTML을 작성하세요. 제목, 설명 및 브랜딩을 추가한 다음 공유를 위해 HTML→PNG로 변환.
먼저 인터넷에 연결한 상태에서 페이지를 여세요. 열린 탭에서 처리가 이어질 수 있지만 새로고침, 외부 자료와 미리 저장되지 않은 엔진·모델 로딩에는 연결이 필요합니다.
이 온라인 도구는 수동, 대화형 사용을 위해 설계되었습니다. 자동화된 HTML→이미지 생성(API, 일괄 처리)의 경우 Puppeteer, html2canvas 또는 전용 API 서비스와 같은 라이브러리를 사용해야 할 수 있습니다.

관련 이미지 도구

더 많은 무료 온라인 이미지 도구 탐색

이미지를 PDF로

JPG, PNG, WebP, GIF, BMP 이미지를 PDF로 합치세요. 페이지 순서를 바꾸고 A4, Letter 또는 원본 이미지 크기를 선택할 수 있습니다.

지금 시도

이미지 압축

브라우저에서 JPG, PNG, WebP 이미지를 압축하세요. 파일 크기와 세부 표현을 비교한 뒤 개별 파일이나 ZIP으로 다운로드할 수 있습니다.

지금 시도

이미지 크기 조정

무료 온라인 이미지 크기 조정 도구. 픽셀, 퍼센트, 프리셋으로 일괄 리사이즈하고 비율을 잠글 수 있습니다.

지금 시도

PNG로 변환

지원하는 이미지를 PNG로 변환하고 기존 투명 영역을 유지합니다. JPG를 PNG로 바꾸는 것만으로 배경이 제거되지는 않습니다.

지금 시도

JPG로 변환

PNG, WebP, HEIC 등의 이미지를 JPG로 변환합니다. 출력 품질을 조절하고 여러 파일의 용량과 세부 표현을 비교한 뒤 저장하세요.

지금 시도

워터마크 추가

한 장 또는 여러 이미지에 텍스트나 로고 워터마크를 추가합니다. 위치, 투명도, 회전과 반복 패턴을 조절한 뒤 저장하세요.

지금 시도