웹사이트 개편 전후 비교 영상을 만드는 방법
개편 전후의 같은 작업이나 페이지를 비교한 뒤 변화가 방문자에게 왜 도움이 되는지 설명하세요. 더 예쁜 사이트를 스크롤하는 것보다 의미 있는 차이를 보여 줄 때 이해하기 쉽습니다.
적은 수의 변화를 선택하세요. 홈페이지, 제품 상세, 예약 과정이면 충분할 수 있습니다. 기능 비교가 없다면 측정된 사용성 향상을 암시하지 말고 시각적 공개 영상이라고 설명하세요.
비교 가능한 화면을 캡처하세요
전후 화면에 같은 뷰포트와 비교 가능한 콘텐츠를 사용하세요. 예전 페이지는 어색한 크기로, 새 페이지는 이상적 조건으로 보여 주지 마세요. 변화를 알아볼 충분한 맥락을 남기세요.
원본 녹화나 스크린샷을 프로젝트와 보관하세요. 개편을 돋보이게 하려고 옛 디자인을 조작하지 마세요. 이전 브랜드나 비공개 준비 자료를 공개하기 전에 고객의 승인을 받으세요.
유용한 변화를 중심으로 구성하세요
| 부분 | 보여 줄 것 | 설명할 것 |
|---|---|---|
| 맥락 | 브랜드와 사이트 | 새 사이트가 필요한 이유 |
| 첫 비교 | 맞춘 홈페이지 화면 | 명확해진 메시지나 위계 |
| 두 번째 비교 | 중요한 작업 하나 | 검증된 기능 개선 |
| 세부사항 | 신중히 고른 상호작용 | 새 경험의 특징 |
| 마무리 | 실제 주소 | 탐색할 곳 |
창작상의 판단은 판단이라고 표시하세요. 정돈된 여백이 높은 전환율을 입증하지는 않습니다. 고객에게 측정된 성과가 있다면 주장과 함께 측정 기간과 방법을 밝히세요.
정보를 드러내는 전환을 고르세요
닦아내는 효과나 직접 전환은 비교를 명확하게 합니다. 두 버전을 가리는 전환은 인상적이어도 차이를 숨길 수 있습니다. 프로젝트를 모르는 시청자가 페이지를 이해할 시간을 주세요.
모바일 경험이 이야기의 일부라면 모바일 화면을 보여 주세요. 데스크톱 전체 페이지를 휴대전화 틀에 넣고 반응형 시연이라 부르지 마세요.
결과물을 신중히 삽입하세요
사례 연구에 넣는다면 적절한 파일과 재생 경험을 사용하세요. web.dev는 “애니메이션 GIF는 매우 클 수 있습니다”라고 설명합니다(web.dev 원문 번역). 해당 안내는 움직이는 콘텐츠를 위한 영상 대안을 설명합니다. web.dev 성능 안내.
플랫폼에서 지원하는 삽입 방식을 확인하세요. Webflow는 타사 영상 요소와 배경 영상 등을 설명합니다. Webflow 영상 안내. 장식용 무음 반복과 소리가 있는 설명 영상은 요구가 다릅니다.
웹사이트 기반 영상 서비스의 역할
Teasr는 새 사이트를 알리는 간편한 선택입니다. 공개 URL로 브랜드 모션 홍보 영상을 만들 수 있어 편집기에서 디자인을 다시 구성할 필요가 없습니다. 사이트 역사를 자동 복원하거나 검증된 전후 비교를 제공하지는 않습니다. 비교가 핵심이면 원본 자료를 별도로 준비하세요.
요청과 승인은 에이전시 패키지에 출시 영상 포함하기와 브랜드에 맞는 제품 영상을 참고하세요.