스크롤 스크린샷

스크롤 스크린샷은 보이는 화면 밖까지 이어지는 콘텐츠를 내리며 여러 프레임으로 찍고, 이를 한 장의 긴 이미지로 합친 캡처입니다.

Related workflow terms: 뷰포트 스크린샷.

스크롤 스크린샷과 전체 페이지 스크린샷의 차이

두 용어는 가깝지만 서로 다른 대상을 가리킵니다. 스크롤 스크린샷은 도구가 콘텐츠를 내리며 보이는 화면을 차례로 찍고 합치는 방식입니다. 전체 페이지 스크린샷은 위에서 아래까지 페이지 전체가 한 이미지에 담긴 결과입니다.

전체 페이지 이미지는 스크롤하고 이어 붙여 만들 수도 있고, 브라우저 엔진이 스크롤 없이 전체 레이아웃을 렌더링해 만들 수도 있습니다. 스크롤 스크린샷은 스크롤하고 합치는 과정을 거칩니다.

스크롤 스크린샷을 쓰는 곳

콘텐츠가 한 화면보다 길 때 사용합니다.

• 긴 웹페이지 — 한 번에 보이지 않는 랜딩 페이지, 기사, 대시보드 전체를 담습니다.
• 모바일 앱 — 휴대전화와 태블릿의 피드, 설정 화면, 채팅 대화를 기록합니다.
• 데스크톱 앱 — 보이는 창 밖까지 이어지는 스프레드시트, 문서, 인터페이스를 캡처합니다.
• 버그 보고서 — 두 화면 이상에 걸친 문제의 전체 맥락을 남깁니다.
• 디자인 검토 — 스크롤되는 인터페이스의 전체 구성을 한 자료에서 확인합니다.

스크롤 스크린샷의 작동 방식

기본 과정은 콘텐츠를 조금 내리고 보이는 영역을 찍은 뒤 다시 내리고 찍는 일을 반복해 프레임을 한 이미지로 합치는 것입니다. 대부분의 도구는 사용자가 시작하면 스크롤과 조합을 자동으로 처리합니다.

문제는 정확성입니다. 붙박이 헤더, 떠 있는 요소, 애니메이션, 지연 로딩 콘텐츠는 이어 붙이기를 방해할 수 있습니다. 이를 자동으로 감지해 처리하는 도구도 있습니다. 헤드리스 브라우저에서 페이지 전체를 렌더링하는 자동 캡처 도구는 이어 붙이지 않고 깨끗한 전체 페이지 이미지를 만들 수 있습니다.

흔한 실수

• 붙박이 헤더와 푸터를 무시합니다. 도구가 프레임마다 반복되는 요소를 제거하지 못하면 결과에 여러 번 나타납니다.
• 콘텐츠가 로드되기 전에 캡처합니다. 너무 빨리 스크롤하면 지연 로딩 이미지와 동적 영역이 빈칸으로 남을 수 있습니다.
• 전체 페이지 렌더링이 되는데도 스크롤 캡처를 씁니다. 브라우저 개발자 도구와 헤드리스 브라우저가 전체 페이지를 바로 렌더링할 수 있다면 이어 붙이기 흔적을 피할 수 있습니다.
• 항상 픽셀 단위로 정확하다고 생각합니다. 타이밍과 렌더링에 의존하므로 애니메이션, 마우스 오버 상태, 캡처 사이에 바뀌는 콘텐츠가 불일치를 만들 수 있습니다.