웹에서 읽던 안내문을 PDF로 저장했더니 메뉴가 종이 위를 차지하고, 제목 하나만 페이지 맨 아래에 남는다. 화면에서는 클릭하면 열리던 링크도 출력물에서는 어디를 가리키는지 알기 어렵다. 브라우저의 인쇄 버튼이 작동하는 것과, 그 결과물을 읽을 수 있는 것은 다른 문제다.
개발자 브레넌 푸스(Brennen Puth)는 10월 24일 자신의 블로그를 인쇄해 본 경험을 공개했다. 내용은 나오지만 글자가 너무 크고 머리글이 어색했으며, 파란 링크는 흑백에서 흐릿해졌다. 작은 개인 사이트에서도 화면용 디자인을 그대로 종이로 옮기면 손볼 곳이 생겼다.
PDF 저장도 화면 캡처와는 다르다
일반적인 브라우저의 ‘인쇄 → PDF로 저장’은 화면을 사진처럼 복제하는 기능이 아니다. 웹페이지의 구조와 스타일을 인쇄용 매체에 맞춰 다시 배치한다. 길게 이어지던 화면이 일정한 크기의 페이지로 나뉘고, 인쇄용 스타일이 있으면 화면에서 보던 것과 다른 요소가 나타나거나 사라진다.
이 차이를 지정하는 도구가 @media print다. 웹페이지의 모양을 정하는 CSS 안에서 인쇄할 때 적용할 규칙을 따로 묶는다. 푸스는 머리글을 감추고, 인쇄물에만 필요한 저자 표기를 드러냈다. 본문을 12pt로 조정하고 제목 크기도 다시 정했다. 12pt는 그의 선택이지 모든 사이트에 그대로 넣어야 할 정답은 아니다.
같은 원리를 확인하기 위해 한국어 안내문을 브라우저에서 직접 출력했다. 화면에 남아 있던 메뉴는 인쇄 규칙을 적용한 PDF에서 빠졌다. 본문을 다시 작성하거나 별도 PDF 파일을 수작업으로 만들지 않아도, 같은 HTML에서 읽는 환경에 따라 다른 결과를 얻었다.
종이에서 사라져도 되는 것, 남아야 하는 것
메뉴, 검색창, 공유 버튼은 웹에서 다음 행동을 돕는다. 출력물에서는 눌러도 반응하지 않으므로 본문을 밀어내는 자리만 차지하기 쉽다. 반대로 문서 제목, 작성 시점, 출처 주소는 파일이 원래 사이트를 떠난 뒤 더 쓸모 있어진다. 무엇을 지울지 결정하려면 출력물을 받는 사람이 그 문서만 보고 내용을 이해할 수 있는지 살펴야 한다.
링크도 역할이 달라진다. PDF 안에는 클릭 가능한 링크가 남을 수 있지만, 종이에 찍힌 ‘관련 문서’라는 글자에는 목적지가 보이지 않는다. 필요한 외부 링크에 한해 a[href^="https://"]::after와 content: " (" attr(href) ")"를 인쇄 규칙에 넣으면 실제 주소를 글자 뒤에 표시할 수 있다. 테스트 문서에서도 화면에는 링크 이름만, PDF에는 그 뒤로 주소가 나왔다.
모든 링크에 주소를 붙이면 긴 추적 주소와 같은 페이지의 목차 링크까지 본문을 덮을 수 있다. 참조할 외부 자료를 골라 적용하고, 긴 주소는 줄바꿈도 확인해야 한다. 색상으로만 링크를 구분하던 페이지라면 흑백 출력에서 밑줄이나 다른 표식이 남는지도 함께 본다.
페이지가 나뉘는 자리는 따로 검토해야 한다
스크롤 화면에는 페이지 맨 아래라는 경계가 없다. 인쇄물에서는 제목 다음에 설명이 이어져야 하는데 제목만 앞 장에 남거나, 짧은 표가 두 장으로 갈릴 수 있다. 제목에 break-after: avoid를 주면 그 직후의 페이지 나눔을 피하도록 요청할 수 있고, 짧은 그림·표 묶음에는 break-inside: avoid로 내부 분할을 피하게 할 수 있다.
별도 실험에서는 첫 장 끝에 제목이 놓이도록 문서를 구성하고, 같은 조건에서 제목의 분할 규칙만 바꿔 PDF를 만들었다. 적용 전에는 제목과 설명이 다른 장에 있었고, 적용 후에는 둘이 다음 장에서 함께 시작했다. 이 규칙은 남은 공간과 요소 크기에 영향을 받는다. 한 장보다 긴 코드나 표 전체에 분할 금지를 걸면 빈 공간이 커지거나, 브라우저가 금지 요청을 지키지 못할 수 있다.
푸스도 코드 블록이 한 덩어리로 출력되려는 문제를 적었다. 그리고 10월 26일에는 독자들의 피드백을 받아 스타일시트를 크게 바꾸며 단순화하고 있다고 덧붙였다. 원문에 실린 코드를 완성된 범용 해법으로 복사하기보다는, 자기 문서에서 어떤 요소가 출력 중 깨지는지 찾는 출발점으로 보는 편이 맞다.
확인은 인쇄 미리보기에서 끝나지 않는다
개발 중에는 브라우저 개발자 도구에서 인쇄 매체를 흉내 내어 요소의 숨김과 글자 스타일을 빠르게 확인할 수 있다. 실제 페이지 나눔과 여백은 인쇄 미리보기에서 보고, PDF로 저장한 파일도 열어 보는 편이 낫다. 종이 크기, 배율, 배경 그래픽, 머리글·바닥글 설정이 바뀌면 결과도 달라진다. 여기의 실행 예시는 Chromium에서 A4, 배율 100%, 브라우저 머리글·바닥글 없이 만든 결과다.
안내문이나 기술문서를 관리한다면 먼저 한 편을 저장해 보면 된다. 본문이 빠지지 않는지, 표의 오른쪽이 잘리지 않는지, 제목과 설명이 떨어지는지를 확인한다. 예약·신청 조건처럼 색으로 구분한 정보는 흑백에서도 뜻이 남아야 한다. 출력 품질은 모든 웹서비스의 우선 과제는 아니지만, 사람들이 보관하고 전달하는 문서라면 화면 검수만으로 끝낼 수 없는 부분이다.
출처: Brennen Puth, Websites Should Be Printable · MDN, Printing · MDN, break-inside