비교 전에 문제를 먼저 적습니다
수정 전 이미지를 보여주기 전에 어떤 문제가 있었는지 적어야 합니다. 정보가 흩어져 있었는지, 대비가 약했는지, 버튼 위치가 애매했는지 문제를 먼저 설명하면 비교가 선명해집니다.
문제가 구체적일수록 수정 후 결과도 설득력 있게 보입니다. ‘별로였다’가 아니라 ‘제목과 버튼의 우선순위가 충돌했다’처럼 적어야 합니다.
같은 조건에서 비교해야 합니다
전후 이미지는 같은 크기, 같은 비율, 비슷한 배경에서 보여주는 편이 좋습니다. 조건이 다르면 디자인 개선보다 이미지 연출 차이로 보일 수 있습니다.
특히 웹 화면 비교에서는 데스크톱과 모바일을 섞지 말고, 같은 뷰포트 기준으로 캡처하는 것이 좋습니다. 변화가 무엇인지 독자가 바로 확인할 수 있어야 합니다.
수정 항목은 3개 정도로 압축합니다
수정한 모든 내용을 나열하면 핵심이 흐려집니다. 제목 위계, 여백, 버튼 대비처럼 중요한 항목 2~3개만 뽑아 설명하는 편이 좋습니다.
각 항목은 문제, 수정, 결과 순서로 적으면 됩니다. 예를 들어 ‘본문과 버튼이 붙어 있어 행동이 흐려졌다. 버튼 주변 여백을 늘리고 색 대비를 높였다. 상담 행동이 더 빠르게 보인다’처럼 연결합니다.
결과는 수치보다 관찰로도 설명할 수 있습니다
개인 프로젝트나 학습 프로젝트에서는 정량 데이터가 없을 수 있습니다. 이때는 화면 읽기 순서, 문장 길이, 클릭 지점, 모바일 가독성처럼 관찰 가능한 기준으로 설명할 수 있습니다.
중요한 것은 과장하지 않는 것입니다. 데이터가 없다면 ‘전환율이 올랐다’고 쓰기보다 ‘행동 버튼이 첫 화면에서 더 명확하게 보이도록 정리했다’고 쓰는 편이 신뢰도가 높습니다.
전후 비교 예시: 배너 수정 이유 보여주기
전후 비교 이미지는 단순히 좋아졌다는 인상을 주기 위해 쓰는 자료가 아닙니다. 무엇을 기준으로 고쳤는지 함께 적어야 설득력이 생깁니다.
전후 이미지를 나란히 두는 것만으로는 부족합니다. 바뀐 요소와 그 이유를 짧은 캡션으로 붙여야 합니다.
전후 캡션 작성법
| Before | 혜택 문구와 신청 버튼이 같은 무게로 보여 행동 지점이 약했습니다. |
|---|---|
| After | 대표 혜택은 요약하고 버튼 대비를 높여 신청 경로를 분명하게 했습니다. |
| Before | 이미지 장식이 본문보다 강해 정보 스캔이 느렸습니다. |
| After | 이미지 밝기를 낮추고 제목 주변 여백을 늘려 첫 문장을 먼저 읽게 했습니다. |
비교 자료에 넣을 정보
날짜, 수정 목적, 바꾼 요소, 남은 과제를 함께 적으면 전후 비교가 단순 장식이 아니라 작업 기록이 됩니다.
- 전후 이미지의 조건과 크기가 동일한가?
- 바뀐 요소가 캡션에서 구체적으로 설명되는가?
- 좋아졌다는 표현보다 왜 나아졌는지가 보이는가?
- 남은 한계나 다음 수정 방향을 숨기지 않았는가?
작성자 검수 메모
전후 비교는 결과를 자랑하는 형식이 아니라 판단을 증명하는 형식입니다. 고친 이유가 보이면 작은 수정도 충분히 의미 있는 작업이 됩니다.
이 글은 전후 비교 이미지를 목적, 변화, 이유 중심으로 정리하는 방법을 설명했습니다.
현장 적용 노트
전후 비교는 같은 조건에서 촬영하거나 캡처해야 의미가 있습니다. 화면 크기, 콘텐츠 양, 배경 조건이 다르면 무엇 때문에 좋아졌는지 판단하기 어렵습니다.
비교 캡션은 짧아야 하지만 모호하면 안 됩니다. 밝아졌다, 좋아졌다보다 제목 대비를 높였다, 버튼 위치를 내렸다처럼 바뀐 조작을 적어야 독자가 차이를 확인할 수 있습니다.
포트폴리오 기록 포인트
포트폴리오에서는 전후 이미지를 크게 보여준 뒤 아래에 수정 이유를 붙이는 구성이 좋습니다. 이미지와 설명이 분리되면 독자는 변화 지점을 다시 찾아야 합니다.
전후 비교 캡션 작성법
전후 이미지는 나란히 놓는 것만으로 충분하지 않습니다. 보는 사람이 어느 부분을 비교해야 하는지 알 수 있도록 캡션이 필요합니다. 색이 바뀌었는지, 정보 순서가 바뀌었는지, 버튼 위치가 바뀌었는지 한 가지 초점을 정해주면 같은 이미지도 더 설득력 있게 읽힙니다.
- 전 이미지는 문제를 표시하고 후 이미지는 해결 기준을 표시합니다.
- 캡션은 한 장당 한 가지 변화만 설명합니다.
- 비교 순서는 위에서 아래, 왼쪽에서 오른쪽으로 일정하게 둡니다.
전후 비교의 순서 정하기
전후 비교는 항상 왼쪽이 전, 오른쪽이 후처럼 일정한 규칙을 유지하는 편이 좋습니다. 어떤 화면에서는 위아래, 어떤 화면에서는 좌우로 바뀌면 보는 사람이 비교 방향을 다시 학습해야 합니다. 비교 방향이 고정되면 캡션도 짧아지고 변화 지점에 더 빨리 집중할 수 있습니다.
작은 변화는 확대 캡처를 함께 두면 좋습니다. 전체 화면에서는 버튼 간격이나 라벨 위치 같은 변화가 잘 보이지 않을 수 있기 때문입니다.
비교 이미지에 표시선 넣기
전후 이미지에서 변화가 작을 때는 표시선이나 번호를 넣는 것이 좋습니다. 단, 표시가 너무 많으면 원래 화면을 가리므로 가장 중요한 변화 두세 곳만 선택합니다. 표시선은 설명을 대신하는 장식이 아니라 시선을 정확한 위치로 보내는 장치입니다.