HTML/CSS to PDF: 'Page Break' 악몽을 해결한 방법

Source: Dev.to

문제

우리는 모두 한 번쯤 겪어봤습니다. HTML/CSS로 멋진 레이아웃을 만든 뒤 Ctrl + P를 눌렀을 때 갑자기 모든 것이 깨지는 경우죠. 이미지가 절반씩 잘리고, 여백이 사라지고, 배경색이 사라집니다.

저는 최근 몇 주 동안 이력서 빌더를 만들면서 캔버스 기반 솔루션을 사용하지 않기로 했습니다. PDF로 인쇄했을 때 완벽하게 출력되는 순수하고 의미론적인 HTML을 원했거든요.

도전 과제: CSS 인쇄 미디어

가장 큰 골칫거리는 페이지 나눔을 동적으로 처리하는 것이었습니다. break-inside: avoid와 @page 여백 같은 CSS 인쇄 규칙을 깊이 파고들어야 했습니다.

해결책

/* The magic snippet */
.resume-section {
  page-break-inside: avoid;
  break-inside: avoid;
}

@media print {
  @page {
    margin: 0;
    size: auto;
  }
}

결과

Puppeteer와 CSS를 많이 조정한 끝에 결국 안정적으로 동작하도록 만들었습니다.

웹에서 PDF를 생성하는 데 어려움을 겪고 있거나, 실제 프로덕션 앱에서 이러한 CSS 규칙이 어떻게 동작하는지 보고 싶다면, 저는 Resumemind라는 무료 도구를 만들어 이를 시연하고 있습니다.

PDF 생성은 여기서 테스트해볼 수 있습니다:

궁금한 점이 있으면 언제든지 인쇄 CSS에 대해 알려주세요!