온라인에서 완벽한 기사를 찾아 브라우저 인쇄 기능을 사용하여 PDF로 저장하세요. 결과 PDF는 귀하가 읽고 있던 웹페이지와 전혀 유사하지 않습니다. 이미지가 누락되었습니다. 텍스트가 겹칩니다. 화면에서는 깔끔하고 읽기 쉬운 레이아웃이 PDF 페이지에서는 뒤죽박죽되어 있습니다. 브라우저 웹에서 PDF로의 변환은 편리하지만 정확하지 않아 원본 웹페이지를 복제하는 것이 아니라 대략적인 출력을 생성합니다.
브라우저의 PDF로 인쇄 기능은 화면 CSS가 아닌 웹페이지의 인쇄 CSS 스타일시트를 사용합니다. 웹 개발자는 탐색, 사이드바 및 광고를 제거하는 인쇄용으로 특별히 단순화된 레이아웃을 만드는 경우가 많습니다. 이 인쇄 레이아웃은 화면에서 보는 것과 크게 다를 수 있습니다. 이러한 차이점은 더 깨끗한 인쇄 출력물을 생성하기 위해 의도적으로 설계된 것이지만 놀랄 수 있습니다.
브라우저 인쇄 출력이 화면 표시와 다른 이유
웹페이지는 두 개의 별도 CSS 스타일시트를 사용합니다. 하나는 화면 표시용이고 다른 하나는 인쇄용입니다. 화면 스타일시트는 브라우저에 표시되는 내용을 제어합니다. 인쇄 스타일시트는 PDF로 인쇄하거나 저장할 때 나타나는 내용을 제어합니다. 두 스타일시트는 완전히 다른 레이아웃, 글꼴, 색상은 물론 콘텐츠까지 지정할 수 있습니다.
PDF 형식 변환은 대화형 요소도 제거합니다. 콘텐츠를 표시하기 위해 클릭하거나 마우스를 올려야 하는 드롭다운 메뉴, 탭 콘텐츠, 캐러셀 및 아코디언 섹션에서는 불완전한 PDF 출력이 생성됩니다. PDF는 이러한 요소의 현재 표시되는 상태(접힌 상태 또는 숨겨진 상태일 수 있음)만 캡처합니다.
인쇄 스타일시트는 대부분의 놀라움을 설명합니다.
인쇄 스타일시트는 대부분의 레이아웃 놀라움의 주요 원인입니다.
초기 페이지 로드 후 JavaScript에 의해 로드된 동적 콘텐츠가 PDF에 표시되지 않을 수 있습니다. 무한 스크롤 페이지, 지연 로드된 이미지, 로드하기 위해 사용자 상호 작용이 필요한 콘텐츠는 특히 취약합니다. 브라우저는 현재 DOM에 로드된 내용을 인쇄합니다. 이는 전체 페이지 콘텐츠의 일부일 수 있습니다.
일반적인 인쇄 문제 및 해결 방법
PDF 출력에서 이미지가 누락되는 것은 일반적으로 인쇄 스타일시트가 잉크를 절약하기 위해 이미지를 숨기거나 인쇄가 시작될 때 로드되지 않은 지연 로드 이미지로 인해 발생합니다. 인쇄하기 전에 전체 페이지를 스크롤하여 지연 로딩을 트리거합니다. 인쇄에 화면 레이아웃을 사용하려면 브라우저 개발자 도구에서 인쇄 스타일시트를 비활성화하세요.
WukongPDF는 결과 PDF 보기 출력을 처리하여 페이지 크기를 조정하고 원하지 않는 요소를 제거할 수 있지만 인쇄 캡처 중에 브라우저가 생략한 콘텐츠를 복원할 수는 없습니다.
더욱 깔끔한 PDF 출력을 위해 리더 모드 사용
대부분의 브라우저에는 기본 콘텐츠를 추출하여 깔끔한 단일 열 형식으로 표시하는 리더 모드가 포함되어 있습니다. PDF로 인쇄하기 전에 리더 모드를 활성화하세요. 리더 모드 출력은 전체 웹페이지보다 간단하지만 텍스트 흐름이 일관되고 콘텐츠 누락이 없어 더욱 안정적입니다.
전용 웹페이지-PDF 도구와 브라우저 인쇄
전용 웹페이지 캡처 도구는 브라우저 인쇄 기능보다 더 안정적인 PDF 출력을 생성합니다. 이러한 도구는 페이지를 완전히 렌더링하고 모든 콘텐츠가 로드될 때까지 기다리며 인쇄 레이아웃이 아닌 화면 레이아웃을 캡처합니다. 출력은 화면에 표시되는 것과 더 밀접하게 일치합니다.
PDF로 정확하게 캡처해야 하는 웹페이지는 브라우저 인쇄 기능과 전용 캡처 도구를 모두 테스트합니다. 출력을 비교하십시오. 한 웹페이지에서 최상의 결과를 생성하는 도구가 다른 웹페이지에서는 최고가 아닐 수도 있습니다. 웹페이지 디자인의 다양성은 모든 페이지에 완벽하게 작동하는 단일 방법이 없음을 의미합니다.
다중 페이지 웹 콘텐츠 처리
PDF 출력에서 여러 인쇄 페이지에 걸쳐 있는 긴 기사에는 이미지가 잘리거나 문장 중간에 단락이 분할되는 어색한 페이지 나누기가 있는 경우가 많습니다. 브라우저 페이지 매김 알고리즘은 콘텐츠 경계를 이해하지 못합니다. 용지 크기에 따라 고정된 위치에서 페이지를 나눕니다.
브라우저 인쇄 미리보기를 사용하여 페이지 나누기가 발생할 위치를 확인하세요. 인쇄 배율, 여백 또는 용지 크기를 조정하여 페이지 나누기를 보다 자연스러운 위치로 이동합니다. 100%에서 95%로 크기를 약간만 줄이면 최악의 콘텐츠 분할을 방지할 수 있을 만큼 페이지 나누기를 이동할 수 있습니다.
여러 PDF 페이지에 걸쳐 분할된 기사의 경우 캡처 후 PDF 편집기를 사용하여 조각난 콘텐츠를 결합하는 것이 좋습니다. 개별 페이지 이미지를 자르고 이를 브라우저에서 페이지 나누기보다 더 자연스럽게 흐르는 연속 문서로 재조립합니다.
대화형 및 동적 콘텐츠 보존
비디오, 오디오 또는 대화형 차트가 포함된 웹페이지는 PDF 출력에서 이러한 요소를 잃습니다. PDF는 현재 상태의 정적 이미지를 캡처합니다. 대화형 요소가 필수적인 콘텐츠의 경우 독자가 전체 대화형 버전에 액세스할 수 있도록 PDF에 원본 웹페이지의 URL을 포함하세요.
캡처된 PDF의 링크는 클릭이 불가능할 수 있습니다. 브라우저 인쇄 기능은 때때로 텍스트를 하이퍼링크를 유지하지 않는 벡터 윤곽선이나 래스터 이미지로 변환합니다. 링크 기능을 확인하려면 알려진 링크를 클릭하여 PDF 출력을 테스트하십시오. 링크가 손실된 경우 PDF 편집기를 사용하여 수동으로 다시 추가하세요.
소셜 미디어 삽입, 댓글 섹션 및 동적으로 로드된 관련 콘텐츠는 PDF로 인쇄 프로세스에서 살아남는 경우가 거의 없습니다. 이러한 요소가 중요한 경우 스크린샷으로 별도로 캡처하고 주요 콘텐츠 캡처 후 PDF에 삽입하세요.
반응형 레이아웃으로 디자인된 웹페이지는 인쇄 엔진에 화면과 다른 레이아웃을 제공할 수 있습니다. 휴대폰에서는 깔끔하게 보이는 모바일 반응형 디자인이 공백이 너무 많은 좁은 열로 인쇄될 수 있습니다. 다양한 브라우저 창 너비에서 인쇄 출력을 테스트하면 최상의 PDF 출력을 생성하는 창 크기를 식별할 수 있습니다.
레이아웃에 CSS Grid 또는 Flexbox를 사용하는 웹페이지는 인쇄 시 예기치 않게 리플로우될 수 있습니다. 인쇄 스타일시트가 복잡한 화면 레이아웃을 단순화된 선형 레이아웃으로 대체하는 경우가 많기 때문입니다. 화면에 나란히 표시된 콘텐츠는 PDF에서 수직으로 쌓여 나타납니다.
Google Fonts 또는 Adobe Fonts와 같은 웹 서비스에서 로드된 사용자 정의 글꼴은 브라우저 인쇄 엔진에서 사용하지 못할 수 있습니다. 인쇄 출력은 시스템 글꼴을 대체하여 텍스트 모양, 줄 길이 및 페이지 나누기를 변경합니다.
CSS를 통해 적용된 배경 이미지와 그라디언트는 일반적으로 잉크를 절약하기 위해 기본적으로 인쇄되지 않습니다. 가독성을 위해 어두운 배경과 밝은 텍스트를 사용하는 섹션은 배경을 제거하고 밝은 텍스트를 유지하면 보이지 않게 될 수 있습니다.
고정된 헤더나 고정된 탐색 막대가 있는 웹페이지는 모든 페이지의 PDF 콘텐츠 중간에 나타날 수 있습니다. 이러한 요소는 페이지 콘텐츠가 아닌 뷰포트를 기준으로 배치되며 PDF 변환 시 고정 위치가 손실됩니다.
인쇄 시 브라우저의 확대/축소 수준은 PDF 출력에 영향을 미칩니다. 100% 확대/축소로 인쇄된 페이지는 75% 확대/축소로 인쇄된 동일한 페이지와 다른 결과를 생성합니다. 확대/축소 수준에 따라 텍스트 크기와 페이지 수가 변경됩니다.
모바일 브라우저에서 웹 페이지를 인쇄하면 데스크톱 브라우저에서 인쇄하는 것과 결과가 달라집니다. 모바일 브라우저는 인쇄 엔진에 페이지의 단순화된 버전을 제공하는 경우가 많기 때문입니다.
로그인 또는 페이월 뒤에 있는 웹페이지, 인쇄된 PDF에는 인증 후에만 표시되는 콘텐츠가 포함될 수 있습니다. PDF는 인증된 내용의 기록이 되므로 적절한 보안으로 처리되어야 합니다.
광고 차단기, 다크 모드 확장 프로그램, 사용자 정의 스타일시트 등 웹페이지 모양을 수정하는 브라우저 확장 프로그램은 인쇄 출력에 영향을 줍니다. 인쇄된 PDF에는 확장 프로그램이 제공하는 수정된 페이지가 반영됩니다.
웹페이지를 PDF로 저장하는 것은 기본적으로 동적 매체를 정적 형식으로 변환한 스냅샷입니다. 변환은 순간적으로 페이지를 캡처하여 몇 분 후에 변경될 수 있는 콘텐츠를 고정합니다.
보관 목적을 위해 웹페이지에서 저장된 PDF는 미래의 독자가 원본 소스를 찾을 수 있도록 문서 메타데이터 또는 첫 페이지에 URL과 액세스 날짜를 포함해야 합니다.
React, Angular 또는 Vue와 같은 무거운 JavaScript 프레임워크가 포함된 웹 페이지는 JavaScript가 DOM 구축을 완료하기 전에 인쇄 엔진이 페이지를 캡처하므로 PDF 출력에서 거의 아무것도 렌더링하지 않을 수 있습니다. 페이지가 로드된 후 인쇄하기 전에 몇 초간 기다리면 프레임워크가 렌더링을 완료할 시간을 제공합니다.
인쇄를 대상으로 하는 CSS 미디어 쿼리는 특정 요소를 숨기거나 표시할 수 있습니다. 잘 디자인된 인쇄 스타일시트에는 주요 콘텐츠가 포함되고 탐색, 광고 및 설명은 제외됩니다. 제대로 디자인되지 않았거나 인쇄 스타일시트가 없으면 화면 레이아웃으로 돌아가 PDF의 고정된 페이지 크기로 제대로 변환되지 않을 수 있습니다.
브라우저 캐시는 인증이 필요한 페이지를 인쇄할 때 PDF 출력에 영향을 줍니다. 브라우저에 캐시된 자격 증명이 있는 경우 인쇄 출력에는 인증된 콘텐츠가 포함됩니다. 세션이 만료된 경우 인쇄 출력에 의도한 콘텐츠 대신 로그인 페이지가 표시될 수 있습니다. 전체 페이지를 스크롤하여 인쇄하기 전에 페이지 내용을 확인하십시오.
다른 도메인의 삽입된 iframe이 포함된 웹 페이지를 인쇄하면 iframe 콘텐츠가 표시되어야 하는 빈 영역이 생성될 수 있습니다. 교차 출처 제한은 인쇄 엔진이 다른 도메인의 iframe 콘텐츠에 액세스하는 것을 방지합니다. PDF 출력에는 포함된 콘텐츠가 화면에 있던 빈 사각형이 표시됩니다.
중요한 웹페이지 캡처의 경우 PDF로 인쇄하기 전에 브라우저의 다른 이름으로 저장 기능을 사용하여 전체 웹페이지, HTML 및 자산을 저장하세요. 저장된 사본은 페이지의 모양에 대한 참조 역할을 하며 PDF 출력을 저장된 사본과 비교하여 인쇄 변환 중에 손실된 내용을 확인할 수 있습니다.