PDF에 이미지가 안 나와요! 레이지 로딩(Lazy Loading) 및 무한 스크롤 해결법
완벽한 레시피나 상세한 튜토리얼을 찾아서 URL을 넣고 "변환"을 눌렀습니다.
그런데 PDF를 열어보니 텍스트는 있는데 이미지가 사라졌습니다. 사진이 있어야 할 자리에 빈 흰색 상자나 "로딩 중" 아이콘만 덩그러니 남아있죠. 심지어 페이지 중간에서 잘려버리기도 합니다.
변환기 오류일까요? 아닙니다. 웹사이트가 조금 더 영리했을 뿐입니다.
왜 이런 현상이 발생하는지, 그리고 간단한 설정 하나로 어떻게 해결할 수 있는지 알려드립니다.
범인: "레이지 로딩 (Lazy Loading)"
웹사이트 속도를 최적화하기 위해 개발자들은 **레이지 로딩(Lazy Loading)**이라는 기술을 사용합니다.
페이지를 열자마자 모든 이미지를 로드하면 데이터도 많이 들고 느려지기 때문에, 웹사이트는 화면에 보이는 이미지만 우선 로드합니다. 스크롤을 내려야만 비로소 다음 이미지를 불러오죠.
문제점: PDF 변환기가 페이지를 방문할 때, 웹사이트가 아래쪽 이미지를 로드해야 한다는 걸 인식하기도 전에 변환기가 찰나의 순간을 캡처해 버립니다. 그래서 빈 공간만 찍히는 것입니다.
해결책: "대기 시간 (Wait Time)" 추가하기
변환기에게 "조금만 천천히 하라"고 알려주면 됩니다.
저희 도구에는 Wait Time (s)(대기 시간)이라는 설정이 있습니다.
대기 시간을 3초나 5초 정도로 설정하면 가상 브라우저에게 이렇게 지시하는 셈입니다. "페이지를 열고 스크롤을 내린 뒤, 사진을 찍기 전에 X초 동안 기다리세요."
이 짧은 기다림 덕분에 웹사이트의 "레이지 로딩" 스크립트가 작동하여 누락된 이미지를 모두 불러올 시간을 벌게 됩니다.
설정 방법
- URL을 붙여넣습니다.
- "Show Options"(옵션 표시)를 클릭합니다.
- "Conversion Settings"(변환 설정) 섹션에서 **Wait Time (s)**를 찾습니다.
- 3 또는 5를 입력합니다 (초 단위).
- Convert Now(지금 변환)를 클릭합니다.
"무한 스크롤 (Infinite Scroll)"인 경우는?
트위터(X), 핀터레스트, 뉴스 피드 같은 사이트는 끝이 없습니다. 스크롤할 때마다 콘텐츠가 계속해서 로드되죠.
이런 사이트를 그냥 변환하면 상위 게시물 몇 개만 저장될 수 있습니다.
이 경우에도 Wait Time을 늘리는 것이 답입니다. 도구가 "더 불러오기"를 수행할 시간을 더 많이 주기 때문입니다. 단, 무한한 페이지 전체를 정적인 PDF 하나에 담을 수는 없습니다. 이런 사이트에서 충분한 양의 콘텐츠를 캡처하려면 대기 시간을 5~10초 정도로 넉넉히 설정하는 것이 좋습니다.
요약
PDF가 뭔가 "덜 로드된" 것처럼 보인다면, 변환기에게 시간을 조금 더 주세요.
- 이미지가 누락되었나요? 3초를 시도하세요.
- 콘텐츠가 중간에 잘렸나요? 5초를 시도하세요.
- 복잡한 웹 앱인가요? 10초를 시도하세요.
모든 설정을 마스터하고 싶으신가요? 이 팁은 시작에 불과합니다. 레이아웃 조정, 광고 제거 등 더 많은 팁을 보려면 완벽한 웹페이지 PDF 생성을 위한 궁극의 가이드를 확인해 보세요.
