전체 페이지 스크린샷

전체 페이지 스크린샷은 브라우저 창에 보이는 부분만이 아니라, 웹 페이지의 스크롤 가능한 전체 높이를 이미지 한 장으로 캡처합니다. 긴 랜딩 페이지는 높이가 수천 픽셀에 이를 수 있습니다.

일반적인 방법은 두 가지입니다. 브라우저가 전체 문서 높이를 한 번에 렌더링하는 방법은 DevTools와 자동화 라이브러리가 지원합니다. 또는 도구가 뷰포트 단위로 페이지를 스크롤하면서 조각을 이어 붙이는 방법입니다.

두 방법 모두 같은 페이지 동작에 영향을 받습니다. 고정 헤더, 화면에 들어올 때만 로드되는 이미지, 무한 스크롤, 프레임마다 바뀌는 애니메이션이 그 예입니다.

전체 페이지 스크린샷, 뷰포트 스크린샷, 스크롤 스크린샷 비교

유형	높이	생성 방식
뷰포트	화면 한 장 분량	현재 보이는 부분을 캡처
전체 페이지	문서 전체	전체 페이지를 렌더링하거나 이어 붙임
스크롤	스크롤된 전체 영역	창이나 패널을 스크롤하며 이어 붙임

전체 페이지 캡처는 웹 페이지에 특화되어 있습니다. 스크롤 캡처는 앱 패널, 채팅 스레드, 문서도 다룰 수 있습니다.

전체 페이지 스크린샷을 사용하는 경우

• 전체 레이아웃이 중요한 디자인 검토와 인수인계.
• 재디자인 전 또는 기록용으로 페이지를 보관함.
• 접힌 영역 아래의 레이아웃 깨짐을 확인하는 QA.
• 포트폴리오와 사례 연구 이미지.

전체 페이지 스크린샷 만드는 방법

Temposhot Website Capture에서 Area를 Full page로 설정합니다. Wait 조건(Load, DOM content loaded, Network idle 중 선택)을 고르고, 콘텐츠가 늦게 나타나면 0-60초의 지연 시간을 추가하십시오. 출력 형식은 JPEG, PNG, WebP 중 선택할 수 있습니다.

Chrome 116 이상에서 단일 페이지를 캡처하려면 Temposhot 전체 페이지 스크린샷 확장 프로그램을 사용하십시오. 이 확장 프로그램은 활성 페이지를 스크롤하고, 뷰포트 조각을 Retina 해상도로 로컬에서 이어 붙인 다음 PNG 한 장을 다운로드합니다.

전체 페이지 스크린샷에서 자주 하는 실수

• 지연 로드되는 이미지가 나타나기 전에 캡처해서 빈 영역이 남음.
• 이어 붙인 이미지에 고정 헤더나 채팅 버튼이 여러 번 나타남.
• 일부 뷰어와 업로드 양식이 거부하는 매우 높은 이미지를 만듦.
• 작은 글씨가 많은 긴 페이지에 JPEG를 사용함.

같은 스크린샷을 반복해서 찍나요?

웹사이트 스크린샷 자동화로 URL 목록 전체에 대해 전체 페이지를 캡처하십시오.

자주 묻는 질문

전체 페이지 스크린샷의 일부가 비어 있는 이유는 무엇인가요?

페이지가 스크롤할 때 이미지를 불러올 가능성이 높습니다. Network idle 또는 더 긴 지연 시간을 사용하십시오.

높은 캡처를 여러 페이지로 나눌 수 있나요?

네, 가능합니다. Split Image로 높은 이미지를 여러 부분으로 자를 수 있습니다.

출처

• Chrome DevTools documentation
• Screenshot (Wikipedia)

관련 자료

• Website Capture 옵션: 영역, 대기, 형식 설정.
• Stitch Screenshots: 분리된 캡처를 한 이미지로 결합.