웹페이지 전체 긴 스크린샷에는 함정이 셋 있다: 지연 로딩, 고정 내비게이션, 끝없는 스크롤
웹페이지 전체를 잡는 긴 스크린샷이 일반 캡처와 다른 점은, 전자가 페이지를 찍고 후자는 화면을 겨냥한다는 데 있습니다. 화면 캡처는 뷰포트에 묶여 있어 이미지 높이가 창 높이에서 멈춥니다. 긴 스크린샷은 페이지를 따라 아래로 내려가며 스크롤 아래쪽 내용까지 한 장에 담습니다. 그런데 막상 찍어 보면 긴 스크린샷이 불완전하게 나오는 경우가 많습니다. 빈 구간, 세네 번 반복되는 내비게이션 바, 끝이 보이지 않는 페이지가 그렇습니다. 신비한 게 아니라 페이지 구조와 캡처 방식이 부딪히는 일입니다. 원인을 먼저 파악하고 찍으세요.
긴 스크린샷은 페이지 전체를, 일반 캡처는 한 화면을 담는다
긴 스크린샷의 완전도를 결정하는 건 뷰포트입니다. 브라우저가 페이지를 보여주는 창이고, 전체 페이지 캡처는 이 창을 넘어 세로 방향 전체를 가져와야 합니다. Print Screen이나 시스템 캡처를 누르면 뷰포트에 보이는 만큼만 나옵니다. 상품 페이지는 일곱 여덟 화면씩 내려가기 일쑤인데, 한 화면씩 찍어 손으로 이어 붙이면 시간도 들고 어긋나기도 쉽습니다. 한 번에 다 담으려면 끝까지 스크롤해서 이어 붙이는 일을 도구에게 맡기세요. Chrome DevTools에는 Capture full size screenshot이라는 공식 명령이 있고, 문서는 뷰포트에 보이지 않는 콘텐츠까지 찍는다고 명시합니다. VidBrowser의 웹페이지 긴 스크린샷 도구는 같은 발상으로 명령줄 조작을 URL 입력 한 칸으로 바꾼 것입니다.
긴 스크린샷이 무너지는 세 곳: 빈 블록, 반복되는 내비게이션, 끝없는 페이지
불완전한 긴 스크린샷의 원인은 거의 이 세 가지로 귀결됩니다. 셋 모두 페이지 자체의 구조가 작동하는 결과라, 알고 있으면 도구 고장으로 잘못 판단하지 않습니다:
- 빈 블록: 지연 로딩을 쓰는 페이지가 많아, 이미지는 스크롤이 가까워져야 요청됩니다. 도구는 위에서 아래로 한 바퀴만 훑으므로 발동되지 않은 부분은 빈 채로 남습니다.
- 반복되는 내비게이션: 고정 내비게이션 바와 떠 있는 채팅 버튼은 뷰포트에 못 박혀 있어, 이어 붙이는 구간마다 사본이 따라붙고 한 장의 긴 이미지에 같은 바가 세네 번 등장합니다.
- 끝없는 페이지: 무한 스크롤 피드는 바닥이 없어 도구가 어디서 멈춰야 할지 모릅니다. 아주 긴 페이지는 이미지 높이, 메모리, 출력 형식의 한계에도 부딪힙니다.
기기 뷰포트가 긴 스크린샷의 생김새를 정한다: 데스크톱·태블릿·모바일
같은 URL도 기기 뷰포트를 바꾸면 다른 이미지가 됩니다. 페이지는 뷰포트 폭에 따라 반응형 레이아웃을 바꿉니다. 데스크톱은 넓은 다단 레이아웃, 모바일은 좁은 단일 단입니다. PC 사용자가 보는 그대로 남기고 싶으면 데스크톱, 모바일 방문자가 보는 모습이 궁금하면 모바일을 고르세요. 이는 화질 선택이 아니라 레이아웃 선택입니다. 찍기 전에 어느 쪽이 필요한지 정해 두세요.
웹페이지 전체를 긴 이미지 한 장으로 저장하는 4단계
입구는 VidBrowser 도구 상자 안에 있고, 전체 네 단계입니다:
1단계: VidBrowser 내려받아 설치
설치 입구는 VidBrowser 동영상 다운로드 페이지에 있습니다. Windows와 Mac용 데스크톱 동영상 브라우저로, 영상을 보고 클립을 잘라 로컬에 저장하며 다운로드와 녹화 기능을 내장했습니다.
2단계: 웹페이지 긴 스크린샷 도구 열기
왼쪽 내비게이션에서 도구 페이지로 들어가 긴 스크린샷 항목을 찾거나, 긴 스크린샷 도구 페이지로 바로 이동하세요.
3단계: URL을 넣고 캡처 설정 고르기
캡처가 허용된 공개 페이지 주소를 붙여넣고, 기기 뷰포트(데스크톱·태블릿·모바일), 범위(전체 페이지 또는 보이는 영역), 출력 형식(PNG·JPG·WebP)을 고릅니다.
4단계: 생성하고 내려받기
결과를 확인하고 기기에 저장합니다. 도구는 공개 페이지를 대상으로 합니다. 브라우저의 로그인 쿠키를 읽지 않고 로그인, 페이월, 접근 제한을 우회하지도 않습니다.
긴 이미지로 남길 가치가 있는 세 가지: 대화 기록, 상품 페이지, 프로필 스냅
긴 스크린샷의 진짜 가치는 변하거나 사라지는 페이지를 변하지 않는 한 장에 못 박는 데 있습니다. 가장 흔한 세 가지 상황입니다:
- 고객 지원 대화와 주문 확인: 채팅 화면에는 다운로드 버튼이 없는 경우가 보통입니다. 긴 한 장이 전체 대화를 시간 순서로 남겨, 흩어진 단면 캡처보다 증거로 훨씬 읽힙니다.
- 비교와 기록용 상품 페이지: 가격, 스펙, 재고는 끊임없이 움직입니다. 긴 한 장은 숫자와 함께 레이아웃도 남겨, 나중 비교에 근거가 남습니다.
- 프로필과 홈페이지 스냅: SNS 프로필은 갱신되고 삭제되기도 합니다. 주기적으로 한 장씩 찍으면 변화가 한눈에 보입니다. 전체 페이지 캡처는 웹 디자인 참고 자료로도 그대로 쓸 수 있습니다.
긴 이미지의 저장과 정리: 형식, 용량, 그리고 다른 길
긴 이미지는 본질적으로 길고 무겁습니다. 저장 후 두 가지만 손보면 나중이 편합니다. 형식에서, PNG는 무손실이라 글자와 UI 디테일에 어울리고, JPG는 가벼워 사진 많은 페이지에 맞고, WebP는 더 가볍지만 오래된 프로그램은 못 열 수도 있습니다. 못 열면 WebP를 JPG로 변환하는 글에서 한 번 변환하세요. 용량에서, 아주 긴 페이지의 캡처는 몇 MB부터 시작하기 일쑤라 첨부가 거부되면 먼저 압축하세요. 이미지 압축 글에 화질과 크기의 절충이 정리돼 있습니다. 그리고 페이지에서 진짜 원하는 것이 레이아웃이 아니라 한 묶음의 이미지라면, 거대한 긴 한 장 대신 이미지 일괄 다운로드로 원본을 직접 가져오는 편이 낫습니다. 긴 한 장은 전경을, 일괄 다운로드는 원본을, 각자 맡은 일을 합니다.
정리
긴 스크린샷의 완전도는 찍기 전에 정해집니다. 먼저 기기 뷰포트를 고르고, 다음으로 페이지에 지연 로딩·고정 내비게이션·무한 스크롤이라는 세 가지 걸림돌이 있는지 확인하세요. 공개 페이지는 네 단계로 진행하고, 찍은 뒤 용도에 맞춰 형식을 고르고 무거운 파일은 압축합니다. 고객 지원 대화, 상품 페이지, 프로필 스냅이라는 세 가지에는 긴 이미지 한 장이 가장 손쉬운 보관본이 됩니다.
자주 묻는 질문
긴 이미지의 빈 블록은 나중에 메울 수 있나요?
가능하지만 순서를 바꿔야 합니다. 빈 블록은 이미지 요청 자체가 없었다는 뜻입니다. 페이지를 위에서 아래로 한 번 손으로 스크롤해 모든 이미지를 로드한 뒤 다시 찍으세요. 캡처 도구는 페이지 로딩을 대신 발동하지 않습니다. 빈 채로 남은 부분은 되돌릴 수 없습니다.
로그인해야 보이는 페이지도 캡처할 수 있나요?
아니요. 도구는 공개 페이지를 대상으로 합니다. 브라우저의 로그인 쿠키를 읽지 않고 로그인, 페이월, 접근 제한을 넘지 않습니다. 로그인 후에만 보이는 콘텐츠는 범위 밖입니다. 이는 도구의 경계이지 설정 문제가 아닙니다.
긴 이미지에 내비게이션 바가 여러 번 나타나는 이유는?
고정 바와 떠 있는 버튼은 뷰포트에 못 박혀 있어, 이어 붙인 구간마다 따라옵니다. 찍기 전에 페이지에 그런 요소가 있는지 확인하세요. 있다면 긴 이미지에 반복이 나타나는 것은 정상입니다. 일부 페이지는 고정 스타일을 끄고 다시 찍으면 결과가 더 깔끔해집니다.
