이미지 비교

두 이미지를 비교하는 방법

1. '변경 전'과 '변경 후'에서 각각 '이미지 선택'을 누르세요. 두 장을 한 번에 끌어다 놓거나 붙여 넣으면 양쪽이 모두 채워집니다. PNG, JPG, WebP, HEIC 파일을 쓸 수 있습니다.
2. 보기 방식을 '슬라이더', '나란히 보기', '겹쳐 보기', '차이 표시' 중에서 고르세요. 슬라이더에서는 선을 끌거나 화살표 키로 움직이면 됩니다.
3. 두 이미지의 크기가 다르면 '너비 맞추기'나 '원본 크기'를 고르세요. '겹쳐 보기'에서는 변경 후 이미지의 불투명도를, '차이 표시'에서는 허용 오차를 조절해 작은 색 차이를 무시할 수 있습니다.
4. 'PNG 다운로드'를 누르면 지금 보는 화면이 이미지 한 장으로 저장됩니다. '서로 바꾸기'는 양쪽을 맞바꾸고, '처음부터 다시'는 두 이미지를 모두 지웁니다.

어떤 보기 방식이 좋을까요?

슬라이더는 변경 전후 스크린샷을 보여 주는 가장 익숙한 방식입니다. 선 왼쪽에는 변경 전 이미지가, 오른쪽에는 변경 후 이미지가 보입니다. 선을 좌우로 움직이면 레이아웃이 밀린 곳, 잘린 부분, 색이 바뀐 곳이 바로 눈에 들어옵니다. '겹쳐 보기'는 변경 후 이미지를 변경 전 이미지 위에 겹치므로 위치가 바뀐 요소가 두 번 보입니다.

'차이 표시'는 달라진 곳을 대신 찾아 줍니다. 모든 픽셀을 비교해 바뀐 픽셀을 옅은 회색 이미지 위에 빨간색으로 표시하고, 바뀐 픽셀 수와 그 픽셀을 모두 담는 가장 작은 영역을 알려 줍니다. 픽셀 단위 스크린샷 비교는 살짝 움직인 아이콘이나 한 단어만 바뀐 문구처럼 눈으로는 놓치기 쉬운 차이도 잡아냅니다.

같은 화면을 담은 JPG 파일이라도 서로 완전히 같은 경우는 드뭅니다. 손실 압축은 저장할 때마다 색을 조금씩 바꾸기 때문입니다. 기본 허용 오차 10%는 이런 노이즈를 무시합니다. 0%로 두면 다른 픽셀을 모두 세고, 50%에 가깝게 올릴수록 뚜렷한 변화만 남습니다.

개발 팀은 같은 확인을 시각적 회귀 테스트로 자동화해 출시할 때마다 새 스크린샷을 승인된 스크린샷과 비교합니다. 한 번만 확인할 때는 스크린샷 두 장과 이 페이지면 충분합니다. 두 캡처가 잘 겹치지 않는다면 스크린샷 해상도 확인 도구에서 파일마다 픽셀 크기와 레티나 배율을 확인해 보세요.

자주 묻는 질문