전후 비교 스크린샷

전후 비교 스크린샷은 같은 대상을 변경 전과 변경 후에 찍은 이미지 한 쌍입니다. 두 이미지는 나란히, 위아래로 쌓아서, 또는 슬라이더가 있는 오버레이로 보여주어 차이를 한눈에 알 수 있게 합니다.

공정한 비교는 변경 사항만 빼고 모든 조건을 같게 유지합니다. 두 이미지는 같은 캡처 영역, 뷰포트 크기, 픽셀 밀도, 스크롤 위치, 앱 상태를 가져야 합니다. 앱 상태에는 같은 로그인 계정과 같은 테스트 데이터가 포함됩니다. 두 번째 이미지가 몇 픽셀만 밀려도 픽셀 비교에서는 변경되지 않은 내용도 다르게 보입니다.

전후 비교가 중요한 이유

스크린샷 한 장은 상태를 보여줍니다. 한 쌍은 변화를 보여주며, 검토자, 고객, 관리자는 보통 이 변화를 기준으로 판단합니다. 또한 변경 전 화면을 기록하는데, 이는 나중에 다시 재현하기 어렵습니다.

전후 비교 스크린샷을 사용하는 경우

• 재디자인된 화면을 보여주는 릴리스 노트와 변경 기록.
• 버그 보고와 수정 확인.
• 명암비 수정처럼 디자인 또는 접근성 검토.
• 사이트 업데이트에 대한 고객 보고서.

효과적인 전후 비교 쌍을 캡처하는 방법

1. 변경 사항을 배포하기 전에 "before" 이미지를 먼저 캡처합니다.
2. 창 크기, 영역, 확대 수준, 테마, 테스트 데이터 등 설정을 기록합니다.
3. 같은 설정으로 "after" 이미지를 캡처합니다.
4. 두 이미지를 같은 형식으로 내보내고, 라벨을 맞춰 제시합니다.

웹 페이지는 같은 URL, Device, Area 설정으로 Temposhot Website Capture를 두 번 실행하십시오. 데스크톱 앱은 Auto Capture에서 Custom Area 소스를 사용하십시오. 선택기는 저장된 영역으로 다시 열리므로, 두 번째 캡처는 같은 사각형을 사용합니다.

자주 하는 실수

• Retina 캡처와 1배율 캡처를 비교함. 픽셀 크기가 서로 달라집니다.
• 캡처 사이에 브라우저 확대 수준, 테마, 창 크기를 바꿈.
• 변경 사항이 공개된 뒤에야 "before" 이미지를 찍으려고 함.
• 두 이미지를 서로 다르게 자름.

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

저장한 URL 목록을 웹사이트 스크린샷 자동화에 보관하고, 릴리스 전후마다 다시 실행하십시오.

자주 묻는 질문

비교 쌍에는 JPG와 PNG 중 무엇을 써야 하나요?

PNG를 쓰십시오. 손실 압축은 작은 차이를 만들어서 픽셀 비교에 그대로 드러납니다.

작은 차이는 어떻게 찾나요?

두 파일을 Compare Images에 불러오면 변경된 픽셀이 강조 표시됩니다.

출처

• Screenshot (Wikipedia)

관련 자료

• Website Capture 옵션: 기기, 영역, 대기 설정.
• 캡처 소스: 저장된 Custom Area 재사용.
• Stitch Screenshots: 이미지 두 장을 한 파일로 결합.