뷰포트 스크린샷은 일반 스크린샷과 같은가요?

대체로 그렇습니다. 현재 화면에 보이는 영역만 캡처합니다. 화면 밖의 콘텐츠까지 담는 전체 페이지 스크린샷과 구분할 때 뷰포트라는 용어를 씁니다.

뷰포트 크기는 무엇으로 결정되나요?

브라우저 창이나 기기 화면의 크기로 정해집니다. 데스크톱에서는 브라우저 창 크기에 따라 달라지고 모바일에서는 기기 화면과 브라우저 UI, 확대 설정의 영향을 받습니다.

첫 화면, 모달, 특정 스크롤 위치처럼 사용자가 한 순간에 실제로 보는 상태를 기록해야 할 때 알맞습니다.

네. 브라우저 개발자 도구와 자동 캡처 도구에서 원하는 가로와 세로 크기를 지정해 여러 화면을 시뮬레이션할 수 있습니다.

뷰포트 스크린샷은 특정 순간 브라우저나 앱 창에 보이는 영역만 담은 이미지입니다. 사용자가 그 화면에서 실제로 볼 수 있는 상태를 기록합니다.

뷰포트 스크린샷은 현재 보이는 영역만 찍고, 전체 페이지 스크린샷은 위에서 아래까지 스크롤 가능한 콘텐츠 전체를 담습니다. 무엇을 보여 줘야 하는지에 따라 고릅니다.

첫 화면, 모달, 툴팁, 특정 스크롤 위치처럼 보이는 상태가 중요하다면 뷰포트 캡처가 알맞습니다. 검토자가 페이지 전체 구성을 봐야 한다면 전체 페이지 캡처가 더 유용합니다.

키를 눌러 화면을 찍는 일반적인 스크린샷은 기본적으로 뷰포트 캡처에 가깝습니다. 전체 페이지 또는 스크롤 캡처와 구분할 때 이 이름이 필요합니다.

뷰포트 크기는 화면에 들어오는 콘텐츠를 결정합니다. 반응형 테스트에서 자주 쓰는 시작 너비는 다음과 같습니다.

이는 모든 실제 기기를 대표하는 표준값이 아니라 테스트 출발점입니다. 제품 분석 데이터와 지원 기기 범위에 맞춰 뷰포트를 고르세요. 브라우저 개발자 도구와 자동 캡처 도구에서는 같은 URL을 여러 너비로 찍어 레이아웃이 의도대로 바뀌는지 확인할 수 있습니다.

뷰포트 크기를 기록하지 않습니다. 창 크기 정보가 없으면 결과를 해석하고 재현하기 어렵습니다. 검토용 이미지에는 가로와 세로를 함께 남기세요.
뷰포트 이미지를 전체 페이지로 착각합니다. 첫 화면 아래의 중요한 콘텐츠가 빠질 수 있습니다. 페이지 전체가 필요하면 전체 페이지 캡처를 사용하세요.
임의의 창 크기로 캡처합니다. 실제 사용자 범위와 무관한 너비에서는 의미 없는 레이아웃 상태가 나타날 수 있습니다. 지원할 대표 크기를 정해 사용하세요.
기기 픽셀 비율을 잊습니다. 2x Retina 화면에서 1440px 뷰포트는 너비 2880픽셀 이미지가 될 수 있습니다. 파일 크기와 다른 화면에서의 표시 크기에 영향을 줍니다.