뷰포트 스크린샷

뷰포트 스크린샷은 브라우저 창에 보이는 웹 페이지 영역, 즉 뷰포트만 현재 크기와 스크롤 위치 그대로 캡처합니다. 보이는 영역 위아래의 콘텐츠는 포함되지 않습니다.

이미지 크기는 뷰포트 크기에 기기 배율(device scale factor)을 곱한 값과 같습니다. 예를 들어 1x 배율에서는 1920×1080, 2x 배율에서는 3840×2160 이미지가 생성됩니다.

웹 개발에서 뷰포트는 페이지가 렌더링되는 영역이며 CSS 픽셀 단위로 측정합니다. 탭 막대와 주소 표시줄 같은 브라우저 인터페이스는 뷰포트에 포함되지 않습니다. 따라서 뷰포트 스크린샷은 방문자가 처음 보는 화면을 브라우저 인터페이스 없이 보여줍니다.

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

뷰포트 스크린샷은 방문자가 페이지에 도착했을 때 보는 것과 같은 한 화면 분량의 콘텐츠를 보여줍니다. 전체 페이지 스크린샷은 문서 전체를 위에서 아래까지 하나의 이미지로 렌더링합니다.

뷰포트 캡처는 용량이 작고 빠르며 비교하기 쉽습니다. 전체 페이지 캡처는 모든 내용을 담지만 매우 길어질 수 있고, 뷰포트 높이에 맞춰 설계된 레이아웃이 어긋날 수 있습니다.

뷰포트 스크린샷을 사용하는 경우

• 랜딩 페이지의 첫 화면을 확인함.
• 썸네일과 링크 미리보기를 생성함.
• 헤더와 히어로 영역에 집중한 시각 회귀 테스트를 수행함.
• 고정된 기기 크기에서 반응형 레이아웃을 확인함.

뷰포트 크기와 반응형 캡처

뷰포트 너비에 따라 페이지가 표시하는 반응형 레이아웃이 결정됩니다. 390픽셀 너비의 뷰포트는 휴대폰 레이아웃을 표시하고, 1920 너비의 뷰포트는 데스크톱 레이아웃을 표시합니다.

Temposhot의 Website Capture는 Desktop 1920×1080, Tablet 768×1024, Mobile 390×844 기기 크기를 제공합니다. URL마다 Area를 Viewport 또는 Full page로 설정할 수 있습니다.

뷰포트 스크린샷에서 자주 하는 실수

• 페이지 로딩이나 애니메이션이 끝나기 전에 캡처함.
• 쿠키 배너가 뷰포트를 가린 상태로 캡처함.
• 폴드 아래 콘텐츠가 이미지에 나타날 것으로 기대함.
• 기기 배율이 다른 캡처끼리 비교함.

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

URL을 Website Capture에 추가하고 Area를 Viewport로, 기기를 원하는 크기로 설정합니다. 그다음 Concurrent browsers를 최대 10으로 지정해 한 번의 실행을 시작합니다. 자세한 내용은 캡처 옵션을 참고합니다.

자주 묻는 질문

"above the fold"는 무슨 뜻인가요?

스크롤하지 않아도 보이는 콘텐츠를 뜻합니다. 뷰포트 스크린샷이 캡처하는 영역이 이에 해당합니다.

뷰포트 스크린샷에 주소 표시줄이 포함되나요?

아닙니다. 렌더링된 페이지 콘텐츠만 포함합니다.

출처

• Viewport (MDN 용어집)
• Playwright 스크린샷 가이드

관련 자료

• Website Capture 빠른 시작: 첫 URL 목록 실행 방법을 설명함.
• Website Capture 옵션: 기기, 영역, 대기 설정을 설명함.
• 스크린샷 해상도 확인 도구: 이미지 크기를 확인함.