디자인을 비교할 때는 숫자의 기준부터 같아야 합니다. 원본 이미지의 100px, 화면에 표시된 100px, 웹페이지의 CSS 100px은 항상 같은 길이가 아닙니다. PolishTools의 측정과 색상 선택은 원본 이미지 좌표를 기준으로 합니다.
크기 측정은 두 좌표의 차이
X=20에서 X=120까지는 100px입니다. 시작 픽셀과 끝 픽셀을 모두 세는 개수와는 다릅니다. 가로·세로 차이가 모두 있으면 직선 거리는 대각선 길이입니다. 30px와 40px의 차이는 50px 거리가 됩니다.
색상과 알파 함께 보기
색상 추출기의 #RRGGBBAA에서 AA는 투명도입니다. 같은 빨강이라도 알파가 낮으면 배경 위에서 다르게 보입니다. 투명 배경의 체크무늬는 출력 픽셀이 아니므로 색상 추출값에 섞이지 않습니다.
차이 강조를 해석하기
이미지 비교는 두 파일을 왼쪽 위에 맞춘 뒤 바뀐 픽셀을 셉니다. 같은 디자인을 JPEG로 다시 저장해도 압축 때문에 차이가 생길 수 있습니다. 위치가 어긋났거나 글꼴이 달라진 경우에는 임계값을 높여 숨기기 전에 원본과 겹쳐 보기를 먼저 확인하세요.
예: 버튼 위치와 색 확인
변경 전후 화면에서 버튼이 이동했는지, 색도 달라졌는지 확인합니다.
순서
- 두 스크린샷의 원본 픽셀 크기가 같은지 확인합니다.
- 픽셀 자로 버튼의 시작·끝 좌표를 재고 색상 추출기로 가운데 픽셀을 읽습니다.
- 이미지 비교에서 두 파일을 겹쳐 보고 차이 지도를 만듭니다.
결과
위치는 원본 좌표, 색은 RGBA, 변경 영역은 차이 PNG로 나눠 기록할 수 있습니다. 같은 수치라도 색상 프로파일과 브라우저 디코딩이 다르면 다른 프로그램에서 다르게 보일 수 있습니다.
자주 묻는 질문
100% 화면 배율이 필수인가요?
계산은 원본 좌표로 하므로 필수는 아닙니다. 작은 부분은 포인터 대신 좌표를 직접 입력하면 됩니다.