비포/애프터 비교 영상 만드는 법

말로 설명하기는 어렵지만 보여주기는 쉬운 개선이 있습니다. 8초 걸리던 페이지가 이제 1초 만에 열립니다. 복잡했던 대시보드가 읽기 편해졌습니다. 헷갈리던 결제 흐름에서 세 단계가 사라졌습니다. 이런 변화를 글로 쓰면 한 문단이 필요하지만, 영상으로는 6초면 충분합니다.

비포/애프터 비교 영상은 화면 녹화로 만들 수 있는 가장 설득력 있는 형식이면서, 동시에 가장 망치기 쉬운 형식이기도 합니다. 두 녹화본이 서로 맞지 않으면 시청자는 여러분이 보여주려던 차이가 아니라, 의도하지 않은 차이에 시선을 빼앗깁니다.

이 가이드에서는 개선 그 자체가 말하게 하는 비교 영상을 Recorded로 기획하고, 녹화하고, 편집하는 방법을 설명합니다.

비교 영상이 필요한 순간

• 성능 개선: 로딩 시간, 빌드 시간, 렌더링 속도, 동기화 시간
• 리디자인: 새 레이아웃, 내비게이션, 비주얼 스타일을 이전 버전과 나란히
• 워크플로 개선: 7번의 클릭이 2번으로
• 버그 수정: 문제가 있던 동작과 고쳐진 동작
• 내 작업의 전후 비교: 디자인 정리, 리팩터링, 마이그레이션, 문서 개선

화면상 결과가 완전히 동일한 백엔드 리팩터링처럼 변화가 눈에 보이지 않는다면 비교 영상은 도움이 되지 않습니다. 시청자가 실제로 볼 수 있는 차이가 있을 때 사용하세요.

핵심 원칙: 오직 한 가지만 바꾸기

비교의 설득력은 “개선한 부분을 제외한 모든 조건이 동일하다”는 사실에서 나옵니다. 따라서 두 녹화는 다음을 공유해야 합니다.

• 동일한 창 크기와 화면 해상도
• 동일한 캡처 모드와 프레임 레이트
• 동일한 시작 상태 (같은 페이지, 같은 데이터, 같은 계정)
• 동일한 동작을 같은 순서, 같은 속도로
• 동일한 테마 — 비포는 라이트 모드, 애프터는 다크 모드로 찍지 마세요

하나라도 어긋나면 시청자는 결과를 의심할 이유를 얻습니다. 첫 녹화 버튼을 누르기 전에 모두 고정하세요.

비교 영상 기획하기

1. 동작 스크립트를 정확히 작성합니다. 내레이션이 아니라 클릭 순서입니다. “대시보드 열기 → 리포트 클릭 → 최근 30일 선택 → 내보내기 클릭.”
2. 무엇을 측정할지 정합니다. 시간, 단계 수, 오류 횟수, 혹은 체감 명확성. 영상 안에서 명시하세요.
3. 동일한 테스트 데이터를 준비합니다. 두 환경에 같은 레코드가 담긴 데모 계정을 쓰면 “저쪽은 데이터가 적었잖아”라는 반론을 없앨 수 있습니다.
4. 창 크기를 고정합니다. 한 번 조정한 뒤 테이크 사이에 건드리지 마세요.
5. 각 버전을 한 번씩 리허설합니다. 한쪽에서만 버벅이면 결과가 은근히 과장됩니다.

두 버전 녹화하기

‘비포’와 ‘애프터’는 하나의 긴 테이크가 아니라 두 개의 별도 녹화로 찍으세요. 파일이 나뉘어 있어야 자르고 맞추고 다시 찍기 쉽습니다.

1. Recorded에서 캡처를 설정합니다 — 두 번 모두 같은 모니터, 창, 영역을 선택
2. 프레임 레이트를 하나로 정하고 두 테이크 모두 유지
3. 동작 스크립트를 그대로 따라 ‘비포’ 버전을 녹화
4. 환경을 전환합니다 — 새 빌드, 새 디자인, 스테이징 URL
5. 창 크기가 그대로인지 다시 확인
6. 동일한 동작 스크립트로 ‘애프터’ 버전을 녹화

팁: 로딩 시간을 비교한다면, 로딩을 유발하는 클릭보다 조금 먼저 녹화를 시작하고 완료 후 조금 뒤에 멈추세요. 이 여유 프레임 덕분에 공정한 시작점으로 자르기가 훨씬 쉬워집니다.

비교 영상 편집하기

같은 시작 지점으로 자르기

두 녹화를 에디터에서 열고, 정확히 같은 트리거 순간 — 보통 클릭하는 프레임 — 에서 시작하도록 자르세요. 한쪽이 0.5초 일찍 시작하면 실제로 느리지 않아도 느려 보입니다.

양쪽에 명확히 라벨 붙이기

텍스트 오버레이로 화면에 Before와 After를 표시하세요. 이때:

• 두 클립에서 같은 위치에 배치
• 첫 1초만이 아니라 구간 내내 표시
• 압축과 작은 모바일 화면에서도 살아남도록 높은 대비 사용

두 번째 오버레이로 경과 시간이나 단계 수를 함께 보여주면 개선이 느낌이 아니라 수치가 됩니다.

줌으로 시선 유도하기

차이가 화면 한구석 — 스피너, 카운터, 메뉴 — 에서 일어난다면 두 클립의 같은 순간에 줌 효과를 넣으세요. 한쪽에만 줌을 넣으면 대칭이 깨지므로, 줌 구간을 양쪽에 똑같이 적용해야 합니다.

속도 변경은 신중하게

속도 조절은 튜토리얼에는 훌륭하지만 비교 영상에는 위험합니다. 어느 한쪽이라도 속도를 바꾸면 시청자는 타이밍을 더 이상 신뢰할 수 없습니다. 긴 대기 시간을 줄여야 한다면 두 클립에 완전히 동일한 속도를 적용하고, 그 사실을 화면에 밝히세요.

레이아웃 선택하기

• 순차형: ‘비포’를 먼저 재생하고 ‘애프터’를 이어서. 단순하고 정직하며 어떤 화면 비율에서도 작동하는 가장 안전한 기본값입니다.
• 좌우 배치: 두 클립을 나란히. 길이가 비슷하고 화면이 절반 너비에서도 읽힐 만큼 단순할 때 좋습니다.
• 결정적 순간에 컷: 핵심 순간까지 양쪽을 보여준 뒤 번갈아 컷. 성능 차이가 극적일 때 효과적입니다.

세로형이나 소셜 포맷에서는 좌우 대신 위아래로 쌓아야 각 화면이 읽을 수 있는 크기를 유지합니다.

정직하게 만들기

비교 영상은 마케팅이면서 동시에 증거입니다. 반박당했을 때 버티지 못하는 결과는 영상이 얻은 신뢰보다 더 큰 신뢰를 잃게 합니다.

• 한쪽만 캐시를 비우지 마세요
• ‘비포’를 일부러 느린 네트워크에서 돌리지 마세요
• ‘애프터’에서 몰래 단계를 건너뛰지 마세요
• 조건을 밝히세요: 어떤 기기, 어떤 네트워크, 데이터는 얼마나
• 가장 운 좋았던 한 번이 아니라 일반적인 경우를 보여주세요

내보내기와 공유

• MP4: 영상을 임베드하거나 업로드하는 모든 곳
• GIF: README, 체인지로그, 채팅 메시지에 넣는 짧은 비교 — 몇 초 이내로 유지
• 세로 크롭: 소셜 플랫폼용, 위에서 설명한 상하 배치와 함께

다운로드된 뒤에도 알아볼 수 있는 파일명을 쓰세요. comparison-final-v3.mp4보다 checkout-flow-before-after-2026-09.mp4가 낫습니다.

간단 체크리스트

[ ] 두 테이크의 창 크기, 해상도, 프레임 레이트, 테마 동일
[ ] 동일한 시작 상태와 동일한 테스트 데이터
[ ] 동일한 동작 스크립트, 양쪽 모두 리허설 완료
[ ] 두 클립을 같은 트리거 프레임에서 자름
[ ] Before/After 텍스트 오버레이를 같은 위치에 배치
[ ] 줌 효과를 양쪽 클립에 동일하게 적용
[ ] 한쪽에만 속도 변경을 적용하지 않음
[ ] 측정 조건을 화면이나 설명에 명시

마치며

좋은 비교 영상은 “더 나아졌다”고 주장하지 않습니다. 시청자가 직접 보고 스스로 판단하게 합니다. 두 녹화를 최대한 똑같이 맞추고, 보여주려는 그 한 가지만 바꾸고, 결과에 명확히 라벨을 붙이세요. 다음에 리디자인이나 속도 개선, 더 간결해진 흐름을 배포한다면 예전 버전이 사라지기 전에 양쪽을 모두 녹화해 두세요. 그건 나중에 다시 찍을 수 없는 장면입니다.