웹페이지를 PDF로 저장하기 전, 인쇄 화면부터 점검한다

• 화면용 메뉴와 인쇄할 본문을 구분한다.
• 인쇄 전용 CSS로 여백과 그림 배치를 조정한다.
• 저장한 PDF를 열어 잘림과 빠진 내용을 확인한다.

웹페이지가 잘 보여도 인쇄 결과는 따로 확인해야 한다. 인쇄 전용 CSS는 종이와 PDF에 다른 스타일을 적용한다. 화면 디자인을 바꾸지 않고 출력 모양을 조정할 수 있다.

먼저 긴 글 한 편을 PDF로 저장한다. 메뉴가 본문을 가리는지 살핀다. 표와 그림이 종이 밖으로 잘리는지도 확인한다.

인쇄 전용 스타일

@media print 안에는 인쇄할 때 쓸 규칙을 적는다. 기존 CSS의 우선순위는 그대로 적용된다. 규칙을 넣은 뒤 실제 결과를 확인해야 한다.

다음은 출발점으로 쓸 짧은 예시다. 선택자는 자신의 HTML 구조에 맞게 바꾼다.

@media print {
  .site-menu,
  .share-buttons {
    display: none;
  }

  figure {
    break-inside: avoid;
  }
}

@page {
  margin: 18mm;
}

메뉴와 공유 버튼은 출력에서 숨긴다. 그림 묶음에는 중간에서 나뉘지 않도록 규칙을 준다. @page는 인쇄 페이지의 여백 등을 설정한다.

18mm는 예시 값이다. 문서와 용지에 맞춰 조정한다. 긴 그림까지 한 장에 들어간다는 보장은 없다.

MDN의 인쇄 스타일 안내와 페이지 나눔 속성 설명을 참고한다.

두 단계 출력 점검

1. 1. 인쇄용 CSS 확인메뉴 숨김 · 본문 배치
2. 2. 저장한 PDF 확인잘림 · 빠진 내용 · 페이지 나눔

CSS 적용 상태와 최종 PDF의 페이지 배치는 나누어 확인한다.

Chrome에서는 다음 순서로 인쇄 스타일을 살핀다.

1. 개발자 도구의 Rendering 탭을 연다.
2. Emulate CSS media type에서 print를 고른다.
3. 본문과 메뉴에 적용된 CSS를 확인한다.

이 기능은 인쇄용 CSS를 수정하며 확인할 때 쓴다. 이어서 브라우저의 인쇄 메뉴를 연다. PDF로 저장한 파일도 직접 열어 본다.

Chrome의 인쇄 매체 에뮬레이션 안내에 절차가 나와 있다.

PDF 확인 항목

출력 파일에서는 다음 항목을 점검한다.

항목	확인할 내용
본문	글이 빠지거나 겹치지 않는지 확인한다.
그림	그림과 설명의 위치를 확인한다.
표	오른쪽 열이 잘리지 않는지 확인한다.
쪽	제목만 한 장에 남지 않는지 확인한다.
출처	필요한 링크와 출처가 남았는지 확인한다.

이 목록은 출력물을 검토하기 위한 편집 기준이다. 모든 브라우저의 결과가 같다는 뜻은 아니다. 독자가 주로 쓰는 환경에서도 확인한다.

정리

• 인쇄 결과는 화면과 별도로 점검한다.
• 인쇄 전용 CSS에는 필요한 규칙만 넣는다.
• 페이지 여백은 문서에 맞춰 조정한다.
• CSS 확인 뒤 저장한 PDF까지 열어 본다.

참고 자료

• MDN: 인쇄용 CSS
• MDN: break-inside
• Chrome DevTools: CSS 매체 에뮬레이션