영상 팝업과 배너가 흐르는 웹사이트 만들기

인간이라면 시각적 효과에 눈길을 빼앗길 수밖에 없는 법입니다. 임팩트 있는 장면은 더 오래 기억할 가능성도 높고요. 그래서 이제 팝업과 배너에도 영상을 활용할 수 있도록 새로운 기능을 만들었답니다.

 

 

만약 고양이 빗을 찾는 중이었다면, 이런 (귀여운) 고양이 빗질 장면의 팝업이 나타났을 때 안 볼 수 없었겠죠? 🐱

코드앤버터는 스마트 팝업&배너를 제공하는 만큼 클릭만으로 영상 업로드부터 사이즈 조정, 영상 반복 여부, 브랜드 컬러 적용, 사방 여백, 영상과 이미지의 배치, 애니메이션 효과, 배경 레이어 설정 등 복잡한 설정을 마칠 수 있어요. 노출 조건과 조합해 무궁무진하게 타겟팅할 수 있는 건 당연하고요!

 

웹사이트에 영상 팝업&배너가 필요한 이유

서두에 말씀드린 것처럼 인간인 우리는 텍스트보다 시각적 메시지에 더 빠르게 반응하고 더 오래 기억해요.

어쩔 수 없는 부탁을 하며 ‘🥹’ 이모지를 사용하는 것으로 ‘나는 지금 너에게 어려운 부탁을 하느라 미안한 감정이 있지만 부탁하지 않을 수는 없어서 웃기도 울기도 애매한 상황에 부닥쳐있어‘ 라는 긴 메시지를 한 번에 전할 수 있죠. 메시지를 받는 사람도 훨씬 빠르고 직관적으로 메시지를 이해하고요.

이때 이미지가 영상 형태의 움직이는 이미지라면 효과는 더 커집니다. 그럼 이를 우리 웹사이트에서 활용해야 하는 건 어떤 때일까요?

일반적으로 말하는 ‘고객 동선’에 활용할 수 있습니다. ‘고객 동선’이라고 하면 우선 우리 웹사이트에 들어와서 탐색하고 구매하는 동선이 있을 것이고 하나의 화면 안에서, 예를 들어 제품 상세 페이지에서 정보를 수집하는 동선이 있어요. 이 동선 곳곳에 고객이 ‘아하’할 수 있는 장치를 심어 효과적으로 전환을 만들어낼 수 있는데요. 가장 쉬운 것이 개인화된 팝업과 배너에요.

스마트 팝업은 개인화와 타겟팅 작업에 최적화되어 있습니다. 코드앤버터팀이 미리 만들어둔 20개 이상의 프리셋 클릭으로 고객의 긴 동선 중 바로 이때가 아하 포인트다! 싶은 상황에 적절한 메시지를 던질 수 있어요. 특정 채널을 통해 들어온 사용자에게는 브랜드 광고 영상을 메인 배너로 노출하기, 제품 상세 페이지의 1/3 이상 본 고객에게는 제품 사용 영상을 보여주기 등 스마트 노출 조건 설정과 조합해 고객 심리를 자극하는 영상 메시지를 심어보세요.

 

 

도전! 이렇게 사용해 보세요

제품 상세 페이지의 1/3 이상 본 고객에게 제품 사용 영상 보여주기

 

 

팝업(그룹 팝업 포함)&배너 캠페인을 만들 때 개별 팝업 및 배너 꾸미기 단계에서 진행해요.

 

① 이미지 영역의 업로드 버튼을 클릭하거나 파일을 드래그해 제품 영상을 추가해요.

  • 영상 업로드 시 아래 정책을 참고하세요.
    • 확장자 mp4, wmv, webm, mov 파일을 사용할 수 있어요.
    • 용량 30MB 미만의 파일만 업로드할 수 있어요.
    • 영상은 1분까지만 보여줄 수 있어요. 1분 이상의 영상을 업로드 하더라도 영상의 1분까지만 보여요.
  • 고급 모드를 사용해 보세요.
    • 고급 모드에서 원하는 디자인을 상세하게 설정할 수 있어요.
    • 영상 팝업 혹은 배너의 사이즈 조정, 영상 반복 여부, 브랜드 컬러 적용, 사방 여백, 영상과 이미지의 배치, 애니메이션 효과, 배경 레이어 설정 등 섬세하게 조정할 수 있습니다.

② 이제 제품 상세 페이지의 1/3 이상 본 시점에 영상 팝업이 나오게 설정하기 위해 노출 설정 단계로 넘어가요.

  • 설정 아래쪽으로 내려가 트리거를 선택하고 스크롤 입력바에 원하는 %를 입력하세요.
  • 저는 1/3 이상 본 시점이 필요하니 30을 입력했어요.

③ 모든 설정을 마쳤다면 등록 버튼을 클릭하고 리스트로 돌아가 캠페인을 공개 상태로 변경해요.

  • 저장한 뒤 캠페인을 공개하면, 짜잔! 제품 장점을 생동감 있게 보여주는 영상 팝업이 적당한 시점에 나타났어요.

 

고객이 제품에 대한 정보를 어느 정도 습득한 후에 공감대를 형성할 수 있는 실제 사용 장면을 보여줌으로써 이 제품을 구매하면 나도 이렇게 할 수 있을 것 같다 는 우리 제품과 함께하는 모습을 상상할 수 있게 했어요.

 

 

👀 버터팁 한 겹

  • 다크 패턴 사용하지 않기
    • 팝업이나 배너의 닫기 버튼을 잘 보이게 설정하세요. 대표적인 팝업 다크 패턴은 닫기 버튼을 숨기거나 안 보이는 색으로 설정하는 경우예요. 우리 브랜드의 외침을 모두가 봐주길 원하는 마음은 알지만, 이를 위해 어딘가 찝찝한 방법을 사용한다면 장기적으로는 브랜드에 손해일 수밖에 없어요. 주의해야 할 다크 패턴에 관한 내용은 여기에서 더 알아보세요.
  • 아 맞다 음소거/자동 재생
    • 디테일이 퀄리티를 만들어요. 퀄리티를 높일 기능을 꼼꼼하게 준비해 두었으니 놓치지 말고 꼭 사용하세요. 모두 <에디터 → 고급 모드 → 디자인>에서 설정할 수 있어요.
      • 음소거 : 갑자기 흘러나오는 소리에 사용자가 당황할 수 있으니 영상 음소거 여부를 선택하세요. 자동 재생을 설정할 경우엔 음소거 상태가 기본으로 설정돼요.
      • 자동 재생 : 효과적인 노출 방법은 영상이 바로 시작되는 것일 수도, 사용자가 직접 재생을 선택하는 것일 수도 있어요. 영상 노출 시 자동으로 재생되게 할 것인지 선택하세요.
  • 사용자 시선에서 적절한 사이즈로 배치하기
    • 팝업을 노출할 디바이스(Mobile/PC)는 무엇인지, 상세 페이지 구성에 따른 적당한 배너 위치는 어디인지 등 제공자가 아닌 사용자의 시선에서 팝업과 배너의 배치를 고민하세요.
  • 딱 맞는 CTA(Call To Action) 버튼 추가하기
    • 영상을 통해 사용자에게 불러일으키고자 한 구매 유도, 페이지 방문, 회원 가입 등의 액션을 사용자가 바로 실행할 수 있도록 딱 맞는 버튼 추가를 잊지 마세요. 브랜드 컬러나 영상과 어울리는 컬러를 사용하면 좋아요.

 

 

이번 영상 추가 기능은 HLS(HTTP Live Streaming) 방식을 사용해 웹사이트 속도에 영향을 주지 않는 스마트함도 겸비했으니 마음껏 사용해 보시길 바라요. 재미있거나 효과적인 영상 팝업&배너 아이디어가 있다면 언제든지 저희 팀에 알려주시고요 🧈

 

 

 

바쁘다 바빠 콘텐츠 3줄 요약

  1. 영상 팝업과 배너는 웹사이트의 시각적 효과를 높이고 고객 동선에 맞춰 등장하며 메시지를 효과적으로 전달해 사용자 참여를 유도해요.
  2. 스마트 팝업&배너는 복잡한 노출 조건 설정이나 디자인을 프리셋 등의 기능으로 구현해 두어 타겟팅이 가능한 아름다운 팝업과 배너를 쉽고 빠르게 만들 수 있어요.
  3. 이번 코드앤버터의 영상 추가 기능은 HLS 방식을 사용해 웹사이트 속도에 영향을 주지 않아요.

 

 

  • 함께 보면 좋은 글 : 영상 팝업그룹 팝업 | 배너 만들기 가이드
  • 베타 기능 BETA* 안내 : 현재 영상 팝업&배너는 베타 서비스로, 별도 알림 없이 상황에 따라 기능 사용에 제한이 생길 수 있어요.
이 글이 도움 되셨나요?
+1
0
+1
0
+1
0
[고객 성공 사례] 스테이폴리오가 스마트 배너로 매출 246% 올린 방법
[고객 성공 사례] 코오롱몰 50% 성장에 코드앤버터가 녹아든 방법