HTML을 PDF로 변환하는 이유
웹페이지 콘텐츠를 인쇄, 보관, 오프라인 공유하려면 PDF로 변환하는 것이 가장 편리합니다. HTML to PDF는 동적 웹페이지를 고정 문서로 바꿉니다.
흔한 상황:
- 웹 기사 저장
- 온라인 청구서/영수증 생성
- 보고서 내보내기
- 전자책 제작
HTML to PDF의 방법
브라우저 인쇄
가장 간단한 방법: 브라우저에서 Ctrl+P, 대상을 "PDF로 저장"으로 선택. 브라우저 렌더링 엔진이 웹페이지를 직접 PDF로 변환합니다.
장점: 무료, CSS 지원 우수. 단점: 수동 조작, 일괄 처리에 부적합; 웹페이지의 대화형 요소가 방해될 수 있음.
온라인 도구
HTML to PDF 도구 사용:
- 웹페이지 URL 입력 또는 HTML 붙여넣기
- 도구가 렌더링하고 변환
- PDF 다운로드
브라우저에서 처리되며 콘텐츠는 업로드되지 않습니다.
프로그램 라이브러리
개발 환경에서 프로그램 라이브러리 사용:
- JavaScript: Puppeteer(헤드리스 Chrome), jsPDF
- Python: pdfkit, WeasyPrint
- 서버 측: wkhtmltopdf
CSS 스타일 처리
CSS 지원도
변환 엔진마다 CSS 지원이 다릅니다:
- 브라우저 엔진(Chrome): 가장 완벽하게 지원, flex, grid 모두 가능
- wkhtmltopdf: 구형 WebKit 기반, 신규 CSS 미지원
- WeasyPrint: CSS 2.1 대부분 지원, CSS 3 일부 지원
PDF로 변환 전에 엔진이 지원하는 CSS 기능을 확인하세요.
인쇄 전용 CSS
@media print로 인쇄 전용 스타일 작성:
@media print {
.no-print { display: none; } /* 인쇄하지 않을 요소 숨기기 */
body { font-size: 12pt; } /* 인쇄에는 px가 아닌 pt 사용 */
a { text-decoration: none; } /* 링크 밑줄 제거 */
}
대화형 요소 숨기기
웹페이지의 내비게이션, 버튼, 광고는 PDF로 변환해도 의미가 없습니다. @media print로 숨기세요:
@media print {
nav, footer, .ad, .sidebar { display: none; }
}
색상 처리
- 화면은 RGB, PDF 인쇄는 CMYK
- 배경색은 기본적으로 인쇄되지 않으며, 강제 인쇄하려면
-webkit-print-color-adjust: exact설정 - 어두운 배경은 PDF에서 잉크 소모가 많으므로 밝은 색으로 변경 고려
페이지 나누기 제어
페이지 나누기 기호
CSS로 페이지 나누기 제어:
h1 { page-break-before: always; } /* 제목 앞에서 페이지 나누기 */
table { page-break-inside: avoid; } /* 표가 잘리지 않도록 */
img { page-break-inside: avoid; } /* 이미지가 잘리지 않도록 */
페이지 나누기 속성
page-break-before: 요소 앞에서 페이지 나누기page-break-after: 요소 뒤에서 페이지 나누기page-break-inside: 요소 내부에서 페이지 나누지 않기
외톨이 줄/고아 줄 방지
p { orphans: 3; widows: 3; } /* 단락 끝/시작에 최소 3행 */
머리글/바닥글
브라우저 인쇄
브라우저 인쇄 대화상자에서 머리글/바닥글(페이지 번호, 제목, URL) 설정 가능. 하지만 스타일이 제한적입니다.
프로그램 라이브러리 생성
Puppeteer 등 라이브러리로 머리글/바닥글을 사용자 정의할 수 있습니다:
const pdf = await page.pdf({
displayHeaderFooter: true,
headerTemplate: '<div style="font-size:9pt;">보고서 제목</div>',
footerTemplate: '<div>페이지 <span class="pageNumber"></span></div>',
margin: { top: '60px', bottom: '60px' }
});
이미지 처리
이미지 경로
HTML에서 이미지는 절대 경로 또는 base64를 사용:
- 절대 경로:
<img src="https://example.com/img.png"> - base64:
<img src="data:image/png;base64,..."> - 상대 경로: PDF 변환 시 찾지 못할 수 있으므로 절대 경로 또는 base64 사용
base64 임베딩
작은 이미지는 base64로 임베딩하여 경로 문제를 피하세요:
<img src="data:image/png;base64,iVBORw0KGgo...">
큰 이미지를 base64로 변환하면 HTML이 커지므로 사용을 검토하세요.
이미지 선명도
- 고해상도 이미지 사용
- 원본 크기 이상으로 확대하지 않기
- 벡터 이미지(SVG)를 PDF로 변환하면 가장 선명함
글꼴 처리
글꼴 로딩
웹페이지에서 Web Font(Google Fonts 등)를 사용하는 경우, PDF 변환 시 글꼴 로딩이 완료되어야 합니다. 프로그램 라이브러리 변환 시 글꼴 로딩이 완료된 후 변환하세요.
글꼴 임베딩
PDF는 글꼴을 임베드해야 모든 기기에서 동일하게 표시됩니다. 변환 도구는 일반적으로 자동으로 임베드합니다.
범용 글꼴
범용 글꼴(Arial, Times New Roman, 맑은 고딕 등)을 사용하여 글꼴 문제를 피하세요.
DocsAll로 변환
- 웹페이지 URL 입력 또는 HTML 코드 붙여넣기
- 도구가 웹페이지 렌더링
- PDF로 변환
- 다운로드
브라우저에서 처리되며 콘텐츠는 서버에 업로드되지 않습니다.
자주 묻는 질문
스타일 손실
- CSS가 로드되지 않음(외부 CSS 경로 오류)
- 엔진이 지원하지 않는 CSS 기능 사용
- 해결: 인라인 CSS 사용, 지원되는 CSS 기능 사용
페이지 나누기로 콘텐츠 잘림
- 페이지 나누기 제어를 설정하지 않음
- 해결: page-break-inside: avoid 추가
이미지가 표시되지 않음
- 경로 오류
- 크로스 도메인 제한
- 해결: 절대 경로 또는 base64 사용
중국어 깨짐
- 글꼴이 중국어를 지원하지 않음
- 인코딩이 UTF-8이 아님
- 해결: 중국어 지원 글꼴 사용, HTML에 UTF-8 인코딩 선언
배경색이 인쇄되지 않음
- 브라우저가 기본적으로 배경을 인쇄하지 않음
- 해결: CSS에
-webkit-print-color-adjust: exact설정, 또는 인쇄 대화상자에서 "배경 그래픽" 체크
페이지가 너무 넓음
- 웹페이지 너비가 PDF 페이지를 초과
- 해결: CSS 너비 조정, 또는 가로 방향 용지로 변경
요약
HTML to PDF의 요점은 CSS 스타일 처리와 페이지 나누기 제어입니다. @media print로 인쇄 스타일을 작성하고 대화형 요소를 숨기세요. 페이지 나누기는 page-break 속성으로 제어합니다. 이미지는 절대 경로 또는 base64를 사용하세요. DocsAll HTML to PDF 도구는 브라우저에서 실행되며 콘텐츠가 외부로 전송되지 않습니다.