이미지 합치기로 Before/After 비교 이미지를 빠르게 만들기

개발

디자인 리뷰나 QA 보고에서 전후 이미지를 따로 올리면 보는 사람이 계속 스크롤해야 합니다. 한 장으로 합치면 차이가 바로 보입니다.

이럴 때는 브라우저에서 바로 쓸 수 있는 Dante Tools를 열어 먼저 손으로 검증해보는 것이 좋습니다. 작은 확인 과정을 거치면 배포 후 되돌리는 시간을 줄일 수 있습니다.

이미지 합치기 사용 화면
이미지 합치기 사용 화면

언제 쓰면 좋은가

UI 개선 전후, 압축 전후, 버그 수정 전후 이미지를 한 장으로 이어붙여 리뷰와 보고를 쉽게 만드는 방법입니다.

합치기 좋은 이미지 세트

before.png
after.png
mobile-before.png
mobile-after.png

실무 루틴

  1. 비교할 이미지를 순서대로 업로드합니다.
  2. 좌우 비교는 가로, 단계 설명은 세로 방향을 선택합니다.
  3. 간격과 배경색을 조정해 경계가 분명하게 보이게 합니다.
  4. 합친 이미지를 리뷰 코멘트나 블로그 본문에 첨부합니다.

배포 전 체크

  • 비교 이미지의 크기와 비율이 크게 다르지 않은가
  • Before와 After 순서가 명확한가
  • 배경색 때문에 투명 이미지가 사라져 보이지 않는가

전후 비교는 설명보다 시각 자료가 빠릅니다. 이미지를 한 장으로 묶으면 리뷰 속도와 이해도가 같이 올라갑니다.

다른 글