작고 귀엽지만 🎀 강력한 전환율 서포터 띠배너의 모든 것

띠배너, 배너, 온사이트마케팅

메인 배너 말고… 띠배너요?

사이트에서 가장 잘 보이는 상단 영역을 ‘히어로 섹션(Hero Section)‘이라고 합니다. 사용자가 사이트에 들어왔을 때 가장 먼저 보는 영역이에요. 따라서 시각적으로 강렬한 인상을 주기 위해 이 영역에 커다란 메인 배너를 설치해 두는 경우가 많습니다.

하지만 메인 배너만 잘 만들어두는 것은 쇼핑몰 입구만 아주 깔끔하고 멋지게 꾸며둔 상태와 같아요. 멋들어진 입구를 열고 들어와 보니 매장들은 허전하고 내가 필요한 것을 찾으려면 여러 곳을 돌아다니며 직접 뒤져보기도 해야 하죠. 둘러보다 지친 고객은 쇼핑몰에서 아무것도 얻지 못하고 지쳐 스르륵 퇴장합니다 🥵

사이트도 마찬가지입니다. 이런 문제를 해결하는 방법은 무엇일까요? 가장 쉬운 방법으로 띠배너를 사용해 볼 수 있습니다. 사용자 여정 곳곳에서 우리 사이트와 상호작용할 수 있도록, 혹은 우리가 사용자에게 알리고자 하는 내용을 효과적으로 알릴 수 있도록 띠배너를 설치하는 것인데요. 좋은 영역에 위치한 메인 배너나 ‘뿅’하고 나타나는 팝업만큼 클릭률이 높을 수는 없지만, 사용자에게 부정적인 느낌을 주지 않으면서 다양한 곳에 쏙쏙 배치할 수 있다는 큰 장점이 있습니다.

어쩌면 지금까지 홀대받아 온(?) 띠배너가 어떤 효과를 만들어내고 어떻게 사용하면 좋을지 레시피까지 한 번에 알려드릴게요.

메인 배너와 팝업 대비 띠배너가 가진 특장점

① 덜 방해되는 사용자 경험

띠배너는 콘텐츠를 많이 가리지 않는 얇은 사이즈로 어디에 배치되어도 경험을 해치지 않아요. 갑자기 나타나 사용자 시야를 차단하는 일도 없죠. 페이지를 이동하거나 스크롤 하더라도 최상단에 유지되는 방식으로 사용자를 방해하지 않으면서 우리가 전하고자 하는 정보의 인지율도 높일 수 있어요.

② 어디에서도 자연스럽게

띠배너는 추가할 웹페이지의 레이아웃과 자연스럽게 어우러지도록 설계하기 쉬워요. 메인 배너처럼 강렬하게 시선을 끌지는 않지만 자연스럽게 주목도를 만들어내는 것이죠. 페이지 상단이나 중간, 하단 혹은 버튼 가로 사이즈와 맞춰 버튼 아래 등 메시지가 자연스럽게 스며들 수 있는 위치를 세세하게 설정할 수 있어요.

③ 클릭하지 않아도 알 수 있는 정보

띠배너는 꼭 배너를 클릭해 상세 내용까지 접근하지 않아도 필요한 정보를 충분히 전달할 수 있을 때 더 효과적이에요. 결제 영역 근처에서 카드 혜택을 알려주거나 하는 식으로요. 고객에게 필요한 정보니 고객이 방해받는다고 느끼는 경우도 적어요.

비즈니스별 띠배너 아이디어와 레시피 10가지

이 내용만 보시면 여러분은 이제 어떤 비즈니스를 맡으셔도 띠배너 마스터가 될 수 있어요.

🛍️ 이커머스 쇼핑몰

① 앱 설치 유도하기 위치 : 사이트 전체 최상단 영역

웹/앱 모두 서비스 중이라면 앱 설치율이 주요 지표로 포함된 경우가 많을 거예요. 모바일 웹으로 들어온 사용자에게만 앱 설치 유도 띠배너를 노출해 보세요. 앱만의 혜택을 강조하는 문구와 버튼 모양을 추가하면 클릭률을 높일 수 있습니다.

② 새로운 소식이나 혜택 알리기 위치 : 사이트 전체 혹은 일부 페이지의 최상단 영역

꼭 알려야 하는 소식이나 혜택이 있다면 눈에 잘 띄는 최상단 띠배너를 사용해 보세요. 대부분 페이지를 이동하거나 스크롤하더라도 최상단에 유지되는, 즉 사이트 모든 곳에서 항상 노출되는 설정을 사용하지만, 집중도를 위해 특정 페이지에서만 노출해 볼 수도 있습니다.

③ 장바구니에서 추가 구매 유도하기 위치 : 빈 혹은 채워진 장바구니 페이지

이커머스 쇼핑몰은 장바구니 페이지를 잊으면 안 됩니다. (관련 레시피 보기: 장바구니에 담았다는 것은 언제든 결제할 준비가 되었다는 것) 사용자의 결제 과정을 방해하지 않으면서 추가 구매를 유도하거나 정보를 전달해 보세요.

④ 검색 페이지에서 정보 알려주기 위치 : 검색 페이지

깔끔한 검색 페이지를 사용할 수도 있지만, 이 지면을 활용해 볼 수도 있죠! 진행 중인 프로모션을 홍보해 미처 생각하지 못한 상품도 탐색하게 만드세요.

⑤ 구매 촉진하기 위치 : 상품 상세 페이지의 구매 버튼 근처, 메인 이미지 아래쪽

구매 버튼 근처에서 ‘OO 카드 결제 시 추가 할인’ 같은 결제 혜택 관련 띠배너를 많이 보셨죠? 사용자가 상품 상세 페이지에서 가장 많이 보는 위치이기 때문이에요. 이 위치에서 사용자가 구매 결정을 내리는 데 유용한 정보를 띠배너로 제공하세요. 추가로 상세 페이지에서 가장 잘 보이는 위치인 상품 메인 이미지 근처에 띠배너를 배치해 보세요. 사용자는 이미지를 본 후 상품의 혜택이나 프로모션을 자연스럽게 확인할 수 있어요.

📒 블로그

① 뉴스레터 구독 유도하기

콘텐츠 중심 브랜드라면 블로그와 뉴스레터를 함께 운영하는 경우가 많을 텐데요. 블로그에 뉴스레터 구독 링크를 포함한 띠배너를 추가해 보세요. 사용자가 아티클을 읽는 과정을 방해하지 않으면서 효과적으로 뉴스레터 구독을 유도할 수 있어요.

② 특집 콘텐츠 소개하기

심혈을 기울여 준비한 특집 콘텐츠가 있나요? 사이트 모든 곳에서 항상 노출되는 띠배너로 홍보해 보세요. 많은 페이지에서 상시 노출되므로 얇지만 눈에 띄게 디자인하면 좋습니다.

🏢 기업

① 회사 자료 다운로드 유도하기 (소개서, 이북 등)

많은 기업 사이트가 서비스 소개서 다운로드 버튼을 띠배너로 구현해 둡니다. 페이지를 60~80% 스크롤한 위치에 자연스럽게 다운로드 버튼을 둘 수 있지만, 이러한 주요 CTA(Call To Action) 버튼은 같은 페이지에도 여러 번 노출되어 고객 접근성을 높이곤 하죠. 최상단 띠배너로 추가 버튼을 넣어두면 고객이 필요한 때에 바로 다운로드 버튼에 접근할 수 있습니다.

② 서비스 체험 유도하기

회사 자료 다운로드 유도와 동일합니다. 상담 연결, 데모 페이지, 무료 체험 신청폼 등 우리 서비스를 경험해 볼 수 있도록 접근성 좋은 띠배너를 사용해 보세요.

③ 새로운 소식 알리기

핵심 기능 출시나 서비스 점검 알림, 각종 고지 등과 같이 고객에게 알려야 하는 소식이 있다면 사이트 분위기를 해치지 않으면서 눈에 잘 띄는 최상단 띠배너를 사용해 보세요.

버터팁 두껍게 한 겹

다양한 위치를 활용하세요.

위 내용에서 본 것처럼 띠배너는 다양한 위치에 꼼꼼하게 세팅할 수 있다는 강점이 있어요. 잊지 마세요! – 세일즈 매니저 영경

① 최상단 사용자가 페이지에 진입하자마자 확인하는 위치로 공지나 프로모션 메시지를 전달하기에 적합해요. 많은 쇼핑몰이 시즌 할인 행사나 무료 배송 혜택을 최상단 띠배너로 안내해요.

② 중간 긴 페이지라면 중간 부분에 띠배너를 배치해 스크롤 도중 눈에 띄게 할 수 있어요. 현재 페이지와 관련된 상품, 같이 보면 좋은 상품 링크 등을 띠배너로 추가해 보세요.

③ 하단 페이지를 끝까지 스크롤한 사용자를 놓치지 않기 위한 중요한 위치예요. 결제 정보, 가입 혜택, 관련 콘텐츠 링크 등을 쿨하게 보여주면 전환율을 높이는 데 도움 돼요.

다양한 소재를 활용하세요.

사용자가 반응하는 띠배너를 만들기 위해 슬라이드 형식이나 영상 소재도 사용해 보세요. – 마케팅 매니저 지연

① 제작 팁 짧고 간결한 문구로 사용자가 직관적으로 이해하고 바로 행동할 수 있게 하세요. 디자인 시 배경과 대비되는 색상을 사용해 눈에 잘 띄게 하고 문구와 이미지가 겹치는 부분은 가독성이 좋은지 확인하는 것도 잊지 마세요. 꼭 클릭해야 하는 띠배너에는 CTA 버튼을 추가해 클릭을 유도해 보세요.

② 슬라이드 활용 여러 개의 배너가 자동으로 넘어가는 슬라이드를 활용해 좁은 영역에서도 많은 정보를 전할 수 있어요. 이때 슬라이드 속도가 너무 빠르면 내용을 읽기 어렵고, 너무 느리면 이탈해요. 보통 3~5초 정도의 슬라이드 전환 속도가 적당해요.

③ 영상 활용 간단한 애니메이션이나 짧은 영상으로 주목도를 높여보세요. 신상품이나 이벤트 관련 영상이 쓰인 띠배너를 사용하면 사용자의 시선을 1초라도 더 머물게 할 수 있어요.