HTML PDF 변환
HTML 마크업이나 저장된 웹페이지를 브라우저에서 바로 PDF로 렌더링합니다.
How it works
HTML을 붙여넣습니다
마크업을 붙여넣거나 저장된 .html 파일을 놓습니다.
미리보기를 확인합니다
CSS가 브라우저 렌더링 결과 그대로 적용됩니다.
다운로드합니다
페이지가 렌더링되며 브라우저 외부로 전송되지 않습니다.
HTML을 PDF로에 대하여
HTML을 PDF로 변환하는 방법: 세 단계로 저장합니다
1단계에서는 마크업을 붙여넣거나 저장된 .html 파일을 가져옵니다. 마크업은 현재 페이지와 분리된 별도의 프레임에 배치되므로, 페이지의 스타일이 변환 대상 스타일과 혼합되지 않습니다. 파일을 드래그 앤 드롭으로 놓거나 클릭하여 디바이스에서 파일을 선택합니다. 붙여넣은 코드와 가져온 파일은 동일하게 처리됩니다.
2단계에서는 미리보기로 표시 상태를 확인합니다. 브라우저가 직접 렌더링한 뒤, 최종 PDF의 각 페이지를 해당 렌더링 결과의 PNG 이미지로 저장하는 방식으로 동작합니다. 렌더링은 최종 크기의 2배, 약 144 dpi로 처리됩니다. 화면 확인과 일반 사무실 프린터 출력에는 충분한 품질이며, 상업 인쇄 용도에서는 픽셀이 눈에 띄기 시작합니다.
3단계에서는 다운로드를 클릭하여 메모리에 생성된 PDF를 바로 저장합니다. 해당 도구는 무료로 안전하게 제공되며, 설치 불필요 및 가입 불필요 조건으로 동작합니다. 모든 변환은 업로드 없이 브라우저에서 직접 처리됩니다. 미리 알아두면 좋습니다. 출력된 텍스트는 선택할 수 없으며, Ctrl+F로 검색되지 않고, 화면 판독기에서도 내용을 읽지 못합니다.
이미지가 정답이 되는 경우
추적과 검색이 필요한 계약서에는 래스터 방식이 적합하지 않습니다. 화면 표시 자체가 목적인 경우에 효과적입니다.
내부 대시보드
로그인 후에만 표시되는 차트와 상태 패널을 보관하는 용도에 적합합니다. 요소 검사 도구에서 렌더링된 마크업을 복사하여 이곳에서 변환하면, 수치가 외부 업로드 양식으로 전송되지 않습니다. 표시된 숫자와 레이아웃을 그대로 증빙 파일로 남깁니다.
앱에서 생성한 청구서
대부분의 청구서 템플릿은 인쇄용 스타일시트가 포함된 HTML로 구성됩니다. 문서 출력을 위해 별도의 헤드리스 Chrome 서비스를 유지할 필요 없이, 완성된 마크업을 직접 PDF로 변환합니다. 서식과 금액 표기를 화면과 동일하게 보관합니다.
캠페인과 이메일 증빙
뉴스레터 마크업은 테이블 구조와 인라인 스타일로 작성되며, 이메일 클라이언트마다 다르게 렌더링됩니다. 래스터 증빙은 승인 과정의 모든 관계자가 동일하게 확인하는 단일 버전을 남기므로, 디자인 검토와 기록 보관에 안정적입니다.
버그 리포트와 디자인 스냅샷
깨진 레이아웃이나 완성된 컴포넌트를 렌더링된 모습 그대로 고정하여 티켓에 첨부합니다. 텍스트 선택 기능이 필요 없는 스크린샷과 동일한 맥락에서 사용되며, 재현 시점의 화면 상태를 정확하게 전달합니다.
마크업 붙여넣기와 파일 열기는 다릅니다
HTML 가져오기 기능은 해당 파일의 텍스트만 읽으며, 그 외의 자료는 함께 가져오지 않습니다. 옆 폴더에 있는 스타일시트, ./images 경로의 로고, ./fonts 경로의 웹 글꼴은 포함되지 않습니다. 브라우저는 디스크의 나머지 자료를 웹 페이지에 제공하지 않기 때문입니다.
상대 경로는 조용히 실패합니다. 마크업은 파일이 저장된 폴더가 아니라 이곳에서 렌더링되므로, src="logo.png"는 oxygenpdf.com을 기준으로 해석되어 아무것도 찾지 못합니다. https:// 형식의 절대 URL은 서버가 CORS 헤더를 반환하는 경우에만 로드됩니다. 헤더가 없으면 해당 이미지는 건너뜁니다.
스크립트는 절대 실행되지 않습니다. 이러한 방식으로 추가된 마크업은 스크립트 태그를 실행하지 않으므로, 브라우저에서 저장한 단일 페이지 앱은 거의 비어 있는 문서로 변환됩니다. 저장되는 결과물은 렌더링 결과가 아니라 빈 껍질에 가깝습니다. 요소 검사 도구에서 실제 DOM을 복사하여 붙여넣으면 해결됩니다. 안정적으로 유지되는 요소는 독립적인 자료뿐입니다. 파일 내부의 스타일 블록, 인라인 스타일 속성, 데이터 URI 형식으로 작성된 이미지가 해당됩니다.
비교
HTML을 PDF로 변환하는 세 가지 방식과 각각의 단점을 정리합니다.
| 기능 | OxygenPDF | 브라우저 PDF 인쇄 | 온라인 변환 서비스 |
|---|---|---|---|
| 붙여넣은 마크업을 변환합니다 | |||
| 출력 텍스트를 선택할 수 있습니다 | |||
| 인쇄 스타일시트가 아닌 화면 스타일을 렌더링합니다 | |||
| CSS 페이지 나눔 규칙을 준수합니다 | |||
| 어떤 자료도 디바이스를 떠나지 않습니다 | |||
| 계정이나 API 키가 필요 없습니다 | |||
| 원하는 페이지 크기와 여백을 설정합니다 | A4 전용 |
유지되는 요소와 페이지가 잘리는 위치
색상, 그라데이션, 테두리, 둥근 모서리, 박스 그림자, 투명도, CSS 변형, 텍스트 그림자, 테이블, 목록, 인라인 SVG는 그대로 유지됩니다. 렌더러는 운영체제의 스크린샷 기능에 의존하지 않고 각 박스를 직접 다시 그리므로, 직접 대응되는 개념이 없는 최신 효과는 경고 없이 제외됩니다. 제외 대상은 필터와 blur(), mix-blend-mode, backdrop-filter, clip-path, 마스크입니다.
마크업은 약 515픽셀 너비의 뷰포트에 배치되며, 이는 A4 콘텐츠 너비를 CSS 픽셀로 측정한 값입니다. 따라서 반응형 페이지는 좁은 중단점에서 렌더링되며, @media (min-width: 768px) 규칙은 실행되지 않습니다. 768픽셀 이상에서만 정상적으로 보이는 레이아웃은 이곳에서 정상적으로 표시되지 않습니다. 데스크톱 전용 구조는 폭을 조정하여 준비합니다.
길게 이어진 최종 이미지는 페이지 높이 단위로 고정된 간격에서 잘립니다. 절단은 기계적으로 수행되며 하단 콘텐츠를 고려하지 않으므로, 테이블 행이나 제목이 한 페이지와 다음 페이지에 걸쳐 반으로 나뉠 수 있습니다. page-break-inside 같은 CSS 규칙은 도움이 되지 않습니다. 어색하게 걸친 요소는 여분의 여백이나 빈 간격 요소로 경계 아래로 밀어냅니다. 각 페이지에는 약 762포인트 분량의 콘텐츠가 들어갑니다.
HTML이 탭을 떠나지 않습니다
서버 방식의 모든 변환 도구는 마크업을 자체 서버에 두어야 동작합니다. 양식에 붙여넣어 업로드하거나, URL을 전달하여 크롤러가 페이지를 가져오는 방식입니다. 로그인이 필요한 콘텐츠의 경우 두 번째 방식은 자격 증명까지 전달해야 합니다. 고객 이름이 가득한 화면이나 아직 공개되지 않은 스테이징 빌드에는 어느 쪽도 편한 교환 조건이 아닙니다.
전체 렌더링은 이미 열린 탭 안에서 완료됩니다. 렌더러가 마크업을 그리고, PDF 라이브러리가 페이지를 조립한 뒤, 다운로드 파일이 메모리에서 직접 생성됩니다. 모든 과정은 업로드 없이 브라우저에서 직접 처리됩니다. 네트워크를 통해 HTML이 외부로 전송되는 구간이 없습니다. 탭을 닫으면 모든 자료가 사라집니다.
HTML PDF 변환: 자주 묻는 질문
이 도구와 작동 방식에 대해 자주 묻는 질문입니다.
Pro
$29 1회 결제