HTML PNG 변환

Q: PNG 배경을 흰색 대신 투명하게 만들 수 있나요?

네. **투명 배경**을 켜십시오. 다만 페이지 자체가 배경색을 지정하지 않은 부분에서만 투명해지므로, body 색이 흰색인 사이트는 여전히 흰색으로 나옵니다. 별도 HTML 파일로 만든 컴포넌트나 배지 하나에 가장 잘 맞습니다.

Q: 긴 페이지의 윗부분만 이미지로 만들려면 어떻게 하나요?

**이미지**를 페이지마다 한 장으로 바꾸고 **페이지**를 첫 페이지로 설정하십시오. 전체 길이 대신 페이지 크기의 첫 구간만 받게 됩니다. 이후 정확한 프레임으로 다듬으려면 [사진 자르기](/crop-image) 도구를 사용하십시오.

저장한 웹 페이지, 대시보드 내보내기, 컴포넌트 시안을 브라우저가 그린 그대로 글자 하나, 가는 선 하나까지 유지되는 PNG로 바꾸십시오. 창 너비를 정하면 레이아웃이 그 너비에 맞춰집니다.

또는 DOC, DOCX, DOCM … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

변환할 형식

해상도

이미지

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

1
HTML 파일 추가
.html, .htm, .mhtml 파일을 한 번에 최대 20개, 파일당 95 MB까지 업로드하십시오. 단일 MHTML 파일로 저장한 페이지는 이미지와 스타일을 파일 안에 함께 담고 있습니다.
2
창 너비 설정
HTML 페이지 너비는 1280 px에서 시작합니다. 휴대폰 레이아웃은 390 px, 넓은 대시보드는 1920 px를 쓰십시오. 변환할 형식은 이미 PNG이고 이미지는 긴 이미지 한 장입니다.
3
PNG로 변환
PNG로 변환을 누르십시오. 페이지 자체에 배경색이 없고 이미지를 다른 디자인 위에 올릴 예정이라면 고급 설정에서 투명 배경을 켜십시오.

답변

HTML을 PNG로 변환하려면 어떻게 하나요?

.html 또는 .mhtml 파일을 업로드하고, HTML 페이지 너비를 흉내 낼 화면에 맞춘 뒤 PNG로 변환을 누르십시오. 렌더링된 페이지 전체가 무손실 이미지 한 장으로 돌아옵니다.

글자와 선이 선명해야 할 때 HTML을 PNG로 변환하기

PNG는 1996년부터 W3C 권고안이며 무손실 압축을 사용하므로, 14 px 본문 글자의 안티앨리어싱된 가장자리, 1픽셀 표 테두리, 구문 강조된 코드가 그대로 보존됩니다. 개발자가 버그 리포트에 PNG 캡처를 첨부하고 디자이너가 리뷰에서 PNG를 공유하는 이유가 여기에 있습니다. 흐릿한 가장자리가 CSS 문제인지 압축 흔적인지 아무도 고민할 필요가 없습니다.

대가는 용량입니다. 텍스트와 단색으로 된 페이지는 잘 압축되지만, 사진이 가득한 페이지는 그렇지 않습니다. 선명한 디테일보다 용량이 중요한 채팅이나 이메일로 보낼 캡처라면 JPG 파일이 더 작습니다. 문서, 릴리스 노트, 대시보드, 스타일 가이드에는 PNG가 더 안전한 기본값입니다.

레이아웃은 너비가 결정합니다. HTML에는 고정된 페이지가 없어서, 같은 파일이 1280 px에서는 3단 데스크톱 디자인으로, 390 px에서는 한 줄로 쌓인 단일 열로 표시됩니다. 변환기는 입력한 HTML 페이지 너비(320–3840 px)로 페이지를 배치한 다음 첫 줄부터 푸터까지 캡처합니다.

주요 화면별 HTML PNG 변환 너비

195:422

390 × 844 px

휴대폰

최근 iPhone 다수의 CSS 뷰포트이며 모바일 레이아웃이 표시됩니다

41:59

820 × 1180 px

태블릿

세로 방향 iPad Air이며 많은 사이트가 이 근처에서 브레이크포인트를 바꿉니다

8:5

1280 × 800 px

노트북

이 변환기의 기본 너비

16:9

1920 × 1080 px

풀HD 모니터

넓은 대시보드와 관리자 패널

HTML

하이퍼텍스트 마크업 언어(HTML)

HTML은 웹의 마크업 언어로, 1990년대 초 Tim Berners-Lee가 처음 기술했고 현재는 WHATWG가 리빙 스탠더드로 관리합니다. HTML 파일은 제목, 문단, 링크, 표, 이미지, 양식을 기술하며 스타일은 보통 CSS가 담당합니다. 모든 브라우저가 렌더링하며 이메일 템플릿과 저장된 웹 페이지에도 쓰입니다. HTML 파일 하나는 외부 이미지와 스타일시트에 의존하는 경우가 많아, 파일만 따로 옮기면 깨져 보일 수 있습니다.

압축 방식: –
투명도: –
애니메이션: –
도입 연도: 1993 · Tim Berners-Lee; maintained by WHATWG

HTML 변환

PNG

PNG 이미지(Portable Network Graphics)

PNG는 1996년 PNG Development Group이 발표하고 이후 W3C와 ISO가 표준화한 무손실 래스터 형식입니다. 모든 픽셀을 그대로 보존하고, 완전한 알파 투명도를 지원하며, 글자, 날카로운 가장자리, 단색 영역을 아티팩트 없이 표현합니다. 이런 정확성 덕분에 스크린샷, 로고, 아이콘, 인터페이스 그래픽에 이상적입니다. 대신 용량이 문제여서, 사진을 PNG로 저장하면 같은 사진의 JPEG나 WebP보다 몇 배 커지는 경우가 많습니다. 모든 브라우저, 운영 체제, 편집기에서 PNG 파일을 열 수 있습니다.

압축 방식: 무손실
투명도: 예
애니메이션: 아니요
도입 연도: 1996 · PNG Development Group

PNG 변환

페이지가 주로 텍스트, 코드, 표, 인터페이스 요소로 이루어져 있을 때 PNG를 선택합니다. 무손실 픽셀 덕분에 문서, 버그 리포트, 디자인 리뷰에서 가는 선과 작은 글자가 선명하게 유지되며, JPG라면 압축 흔적이 드러났을 것입니다.

스타일과 글꼴을 잃지 않고 HTML을 PNG로 변환하기

일반 .html 파일은 다른 곳에 저장된 요소에 의존하는 경우가 많습니다. css 폴더의 스타일시트, 원래 서버에 있는 이미지, 글꼴 서비스의 폰트가 그렇습니다. 이것들이 없으면 페이지는 스타일 없이 기본 서체의 텍스트로 표시됩니다. Chrome이나 Edge에서 웹페이지, 단일 파일로 저장하면 스타일과 이미지를 함께 담은 .mhtml 파일이 만들어지며, 업로드하기에 가장 확실한 형태입니다.

웹 폰트도 같은 규칙을 따릅니다. @font-face로 선언한 글꼴은 파일에 접근할 수 있을 때만 로드되고, 내 컴퓨터에만 있는 글꼴은 비슷한 글꼴로 대체됩니다. 정확한 타이포그래피가 중요하다면 글꼴을 포함하거나, 결과를 전달하기 전에 확인하십시오.

너비를 고정하면 매주 캡처한 보고서도 나란히 비교할 수 있습니다. 인쇄를 위해 선택 가능한 텍스트로 남겨야 한다면 HTML PDF 변환을 대신 사용하십시오.

HTML PNG 변환 자주 묻는 질문

HTML PNG 변환이 내 브라우저 스크린샷보다 나은가요?

브라우저 스크린샷은 전체 페이지 캡처 도구를 쓰지 않는 한 화면에 보이는 부분만 담고, 너비도 그때그때 창 크기에 따라 달라집니다. 여기서는 너비를 숫자로 지정하므로 몇 주 간격으로 만든 캡처도 정확히 맞아떨어지고, 첫 줄부터 푸터까지 페이지 전체가 들어갑니다.

같은 페이지인데 PNG가 JPG보다 몇 배나 큰 이유는 무엇인가요?

PNG는 모든 픽셀을 손실 없이 저장합니다. 텍스트와 단색은 이 방식으로 잘 압축되지만 사진, 그라데이션, 동영상 포스터는 그렇지 않아서 사진이 많은 랜딩 페이지는 PNG 용량이 커질 수 있습니다. 그런 페이지에는 HTML JPG 변환이 더 가볍습니다. 코드 예시, 차트, UI라면 흐릿해지는 것을 감수할 만큼의 이득이 없는 경우가 많습니다.

PNG 배경을 흰색 대신 투명하게 만들 수 있나요?

네. 투명 배경을 켜십시오. 다만 페이지 자체가 배경색을 지정하지 않은 부분에서만 투명해지므로, body 색이 흰색인 사이트는 여전히 흰색으로 나옵니다. 별도 HTML 파일로 만든 컴포넌트나 배지 하나에 가장 잘 맞습니다.

변환기가 페이지의 JavaScript를 실행하나요?

페이지가 열릴 때 스크립트가 만드는 콘텐츠는 나타날 수 있지만, 클릭, 스크롤, 로그인을 기다리는 내용은 나타나지 않습니다. 차트나 표가 조작한 뒤에만 생긴다면 브라우저에서 페이지를 열어 로딩이 끝나기를 기다린 다음, 단일 파일로 저장해 업로드하십시오.

긴 페이지의 윗부분만 이미지로 만들려면 어떻게 하나요?

이미지를 페이지마다 한 장으로 바꾸고 페이지를 첫 페이지로 설정하십시오. 전체 길이 대신 페이지 크기의 첫 구간만 받게 됩니다. 이후 정확한 프레임으로 다듬으려면 사진 자르기 도구를 사용하십시오.