블로그

전후 비교 이미지 만드는 방법

게시 2026년 10월 25일 · 전후 비교, 비교 이미지, 이어 붙이기, 작업 흐름

첨부 두 개보다 이미지 한 장이 낫습니다. 같은 크기로 두 상태를 캡처해 나란히 이어 붙이고 레이블을 달아 한눈에 읽히는 비교 이미지를 만드는 방법입니다.

전후 스크린샷은 변화를 보여 주는 가장 빠른 방법이지만, 느슨한 첨부 두 개는 읽는 사람이 왔다 갔다 하며 무엇을 봤는지 기억해야 합니다. 나란히 놓인 이미지 한 장은 그 수고를 없애 줍니다.

두 상태를 같은 방식으로 캡처하세요

두 이미지가 비교 가능해야 비교가 공정합니다:

• 같은 뷰포트와 확대 비율. 100%의 이전과 80%의 이후를 놓으면 간격과 글자 크기가 거짓을 말하게 됩니다.
• 같은 크롭. 바뀐 부분만 더 좁게 자르지 말고 같은 영역을 캡처하세요.
• 같은 창 크기와 테마. 라이트 모드 이전 옆에 다크 모드 이후를 놓으면 두 가지 변화를 한꺼번에 비교하게 됩니다.
• 같은 상태. 페이지에 호버나 포커스 효과가 있다면 두 캡처 모두에서 포인터를 빼 두세요.

반응형 레이아웃이라면 너비를 섞지 말고 브레이크포인트마다 한 쌍씩 만드세요.

같은 화면 비율로 자르세요

첫 캡처를 InSnap 이미지 편집기에서 열고 비교할 영역으로 자릅니다. 두 번째 이미지에도 같은 크롭을 적용하면서 크기 레이블로 픽셀을 맞추세요. 레이아웃 높이가 다르다면 빈 공간으로 채우지 말고 더 짧은 쪽에 맞춰 자르세요.

나란히 이어 붙이기

이미지 편집기의 이어 붙이기 패널은 여러 이미지를 한 캔버스에 배치합니다(Pro):

1. 왼쪽 레일에서 이어 붙이기 를 고릅니다.
2. 이전 이미지를 가져온 다음 이후 이미지를 가져옵니다.
3. 순서대로 끌어 배치하고 위쪽을 맞춥니다.
4. 둘 사이에 일정한 간격을 둡니다. 몇 픽셀의 여백이면 의도된 한 쌍으로 읽힙니다.
5. 배치가 맞으면 병합한 뒤 레이블을 추가합니다.

두 이미지 크기가 다르다면 큰 쪽을 작은 쪽에 맞춰 줄이거나, 이어 붙이기 전에 둘 다 같은 비율로 자르세요. 크기 불일치는 비교가 "어긋나" 보이는 가장 흔한 이유입니다.

세부가 아니라 양쪽을 레이블하세요

텍스트 로 각 면의 같은 모서리에 "이전"과 "이후" — 또는 "현재"와 "제안" — 를 넣습니다. 레이블은 짧게, 스타일은 서로 똑같이 유지하세요.

그다음에는 중요한 차이만 표시합니다:

• 변화가 여러 개라면 번호 를 씁니다. 1은 간격, 2는 새 버튼처럼.
• 바뀐 영역을 도형 으로 표시합니다.
• 화살표 는 방향이 뻔하지 않을 때만 씁니다.
• 이름, 이메일, 내부 URL은 두 이미지 모두에서 모자이크나 흐림 효과로 가립니다.

양쪽에 같은 세부를 표시하지 마세요. 바뀐 쪽에 한 번만 표시합니다.

대상에 맞춰 내보내기

• 채팅이나 이메일: PNG 한 장이 가장 읽기 쉽고 대부분의 클라이언트에서 잘 열립니다.
• 슬라이드: 덱의 화면 비율에 맞추고, 이미지가 어둡다면 배경을 씁니다.
• 문서: 묶음 안의 모든 비교 이미지에 같은 너비를 씁니다.

파일이 크다면 저장할 때 Retina 캡처를 1x로 축소하세요. 비교에는 보통 최대 픽셀 밀도가 필요하지 않습니다.

비교 체크리스트

자주 묻는 질문

두 스크린샷을 이어 붙이려면 Pro가 필요한가요?

네, 이어 붙이기는 Pro 기능입니다. 무료 대안은 두 스크린샷을 화면에 나란히 고정해 직접 비교하는 것이지만, 내보낼 수 있는 한 장 이미지는 편집기의 이어 붙이기 패널이 필요합니다.

두 스크린샷 크기가 다르면 어떻게 하나요?

둘 다 같은 비율로 자르거나, 이어 붙이기 전에 큰 이미지를 작은 쪽에 맞춰 줄이세요. 모든 픽셀을 보존하는 것보다 배율을 똑같이 유지하는 것이 더 중요합니다.

세 가지 버전을 비교할 수 있나요?

네. 같은 간격과 레이블 스타일로 순서대로 — 예를 들어 이전, 현재, 제안 — 이어 붙이세요. 차이가 미묘하다면 하나의 넓은 띠보다 변화마다 두 장씩 짝지어 비교하는 편이 읽기 쉽습니다.

블로그의 다른 글