배너 광고 UI의 모든 것 (ft.캐러셀, 인디케이터)
앱 화면 속 광고. 유저는 보기 싫은데 우리는 보여주고 싶어서
2022-12-30 작성된 글
예시 - 배달의 민족들어가며
배너에 대해서 얘기해보려고 합니다. 여기서 배너는 주로 이벤트나 상품 홍보를 위해 노출되는 가로 이미지 UI로 한정합니다. (원래는 더 광범위한 의미로 사용)
배너는 일반적인 앱/웹 서비스에서 널리 사용되고 있는 컴포넌트입니다. 현재 만들고 있는 제품에서 광고 배너 영역이 필요해서 리서치를 해보았는데요. 다양하고 재밌는 스타일의 배너가 있어 공유하게 되었습니다.
배너 (Banner)
유저는 보기 싫은데, 우리는 보여주고 싶어
제가 생각하는 광고 배너의 본질입니다. 유저는 보기 싫은데 우리는 보여줘야 하는 것들을 한 데 모아 놓은게 배너 구좌입니다. 대표적인 예로 상품이나 이벤트가 있지요. 어딜가나 유저는 광고가 싫지만, 그럼에도 불구하고 공급자 측에서 팔거나 홍보해야하는 무언가는 필연적으로 존재합니다. (샤라웃 유튜브 프리미엄)
어떤 모양으로, 어떤 방식으로 보여주는 게 사용자 경험에 좋을까요?
배너의 다양한 형태
1. 기본형
배달의 민족가장 흔히 볼 수 있는 형태입니다. 가로로 화면 왼쪽 끝에서부터 오른쪽 끝까지 길쭉하며 세로는 얇습니다.
앱의 메인 기능을 방해하지 않는 선에서 소극적으로 홍보하는 특징이 있습니다. 단순 크기적인 존재감은 작지만, 화면에 별다른 애니메이션이 없다면 혼자 열심히 움직이기 때문에 충분히 눈을 사로잡습니다.
2. 브랜딩형: 널찍하게 보여주기
왼쪽부터 [무신사 - 29CM - KREAM]좀 더 감성적인 브랜딩이 필요한 쇼핑몰 앱에서 자주 사용하는 스타일입니다. 메인 화면에 진입하자마자 사용자의 눈을 사로 잡도록 널찍한 가로-세로 크기로 배치됩니다. 배너를 정사각형 또는 직사각형의 히어로 이미지로 제작하며 웹 환경에서도 자주 채택되는 형태입니다. 화면을 크게 차지하지만 아래로 스크롤하면 금새 사라지니 앱의 메인 기능에 크게 방해되지 않습니다.
3. 맥락형: 양 끝에 살짝 걸쳐서 더 보여주기
(좌)요기요 - (우)크몽배너 UX의 단점은 '앞뒤 맥락을 알 수 없다는 점' 입니다. 1개씩만 보여주니 답답하고, 다음에 배너가 있는지 알 수 없습니다. 랜덤으로 보여주는건지 순서대로 하나씩 보여주는지도 알 수 없죠.
이를 보완하기 위한 맥락형 배너입니다. 기본형보다 가로 길이가 조금 짧아지는 대신에 화면 양쪽 끝에 이전 배너, 다음 배너를 살짝 걸쳐서 보여줌으로써 배너끼리 로테이션되는 맥락을 시각적으로 가늠할 수 있도록 합니다.
제페토위의 제페토 화면을 보면, 첫 번째 배너를 보여줄 때 왼쪽 끝은 비워두고, 오른쪽 끝에는 배너(노란색)가 있어 유저로 하여금 '지금 보고 있는 게 첫 번째고, 다음으로 넘어가면 또 다른 걸 볼 수 있구나' 자연스럽게 유추하도록 합니다.
반대로 마지막 순서의 배너를 보여줄 땐 오른쪽 끝이 비워져 있어 '다 봤네. 다시 처음으로 돌아가겠구나' 추측할 수 있죠. 이게 맥락형입니다.
모아보기 기능은 꼭 넣자
양 옆이 보이는 걸로도 부족하다면 모든 배너를 싹 다 모아볼 수 있는 기능이 추가되면 좋을 겁니다. 이를 위해 많은 서비스에서 모아보기 기능을 제공합니다. 모아보기, 모두보기, View All 등의 이름이 붙은 버튼으로 배너 안에 작게 표현됩니다.
관심 없는 유저는 한 번도 사용하지 않을 기능이지만, 우리 이벤트와 쿠폰에 관심이 많은 적극 유저에게는 아주 고마운 기능이죠.
요기요의 모두보기4. 버튼형: 배너 안에 액션 버튼 넣기
(좌)맥도날드 US - (우)Zap Surveys일반적으로 배너 이미지를 터치하면 해당 이벤트 페이지로 넘어갑니다. 작은 배너 안에 모든 내용을 담기는 어렵습니다. 그래서 좀 더 상세한 설명을 풀어낼 수 있는 별도 화면 뎁스를 추가하죠. 가령, 추첨 이벤트를 한다고 하면 추첨/응모 방식을 설명하는 페이지로 넘어간 뒤에 직접 응모할 수 있는 버튼이 제공됩니다. 배너만 보고는 구체적으로 어떤 이벤트인지 알 수 없으니 1단계를 더 두는거죠.
작은 배너 안에 모든 내용을 담을 수 있는 경우엔 어떨까요? 담아야 할 정보가 심플하다면 별도의 상세 화면 없이 유저에게 즉시 원하는 행동을 시킬 수 있습니다. 전환율 측면에서도 유리하구요. 이 경우 배너 안에 버튼 이미지를 배치하는 것도 효과적입니다. 배너 이미지를 누르든, 배너 속의 버튼을 누르든 실상 동일한 기능이 호출되지만, 버튼이 있으면 유저는 좀 더 즉각적인 액션을 기대합니다.
(예를 들어, 맥도날드 신메뉴 이미지 배너를 누르면 신메뉴 설명 페이지로 넘어갈 것 같지만, 주문하기 버튼이 같이 포함되면 누르는 즉시 주문 기능으로 넘어갈 것을 기대하게 됩니다.)
캐러셀 UI (Carousel)
자동 로테이션해줄게, 하나만 걸려라...
앱에 광고 배너를 넣으려고 하면 반 필연적으로 옆으로 자동 스크롤되면서 하나씩 넘겨 보여주는 UX를 채택하게 되는데, 이를 캐러셀(Carousel)이라고 합니다. 캐러셀은 '회전목마' 또는 '수하물 컨베이어 벨트' 를 뜻합니다. 자동으로 돌아가면서 로테이션되는 특징에서 따온 이름이네요.
캐러셀의 본뜻 (Carousel)유저는 일일이 광고를 넘겨가면서 보지 않습니다. 우리가 보여줘야 할 광고가 1개 뿐이면 좋겠지만, 대부분 적게는 4~5개, 많게는 20개까지도 광고해야 합니다. 따라서 캐러셀 UI를 사용하고, 배너가 자동으로 슥슥 돌아가도록 만듭니다. 유저는 자연스럽게 여러 광고를 볼 수 있습니다.
로테이션하는 텀(주기)은 유저가 정보를 충분히 인지할 수 있도록 4초 정도 여유를 두는 게 일반적입니다.
자동 로테이션출처: https://github.com/Haruma-K/FancyCarouselView
물리적으로 움직이는 것보다 좀 더 세련되게(?) 유저의 시선을 덜 빼앗으면서 로테이션하기 위해 Fade in- Fade out 되는 형태도 존재합니다. 아래 영상처럼
옆으로 조금 움직이다가 Fade In - Fade Out유저가 수동 스크롤할 때
로테이션 시간을 참지 못하고, 빠르게 넘겨보고 싶은 유저도 있겠죠?
(출처) https://css-tricks.com/creating-responsive-touch-friendly-carousels-with-flickity/옆에 있는 다른 배너를 보고 싶은 유저를 위해 수동 로테이션(스크롤) 기능도 함께 개발합니다. 좌우 터치 슬라이드 모션으로 넘겨서 볼 수 있습니다. 이러한 유저는 우리 상품과 이벤트에 관심 높은 유저일 것이므로 개발할 때 사용성에 신경 써줍시다.
Touch하고 있을 땐, 유저가 원하는만큼 탐색할 수 있도록 자동 로테이션 기능을 꺼주도록 합니다. 내가 알아서 넘겨보고 있는데 자동으로 휙휙 넘어가면 짜증납니다.
Touch Start - Touch End 사이에 시간 텀이 짧으면 샥샥 빠르게 넘겨보는 경우입니다. 배너 화면을 많이 넘기지 않았더라도 전환으로 판단해서 원하는 방향으로 넘겨줍니다.
Touch Start - Touch End 사이에 시간 텀이 길면 유저가 배너를 잡아놓고 신중하게 천천히 넘겨보는 중입니다. Touch End 시점에 지면의 50%를 초과해서 보고 있는 쪽으로 넘겨줍니다.
인디케이터 (Indicator)
캐러셀에 늘 딸려오는 보조 기능입니다. 광고는 총 몇 개가 있고 지금 보는게 몇번째일까요?
인디케이터는 순서를 표현합니다. 현재 보는 배너가 몇 번째인지 알려주는 것이지요. 캐러셀의 단점인 맥락 부족을 보완해주는 요소라고 볼 수 있습니다.
크게 3가지로 나눕니다.
점 (Dot)
선 (Line)
숫자 (Number)
1. 점 인디케이터 (Dot)
(좌) 티빙 - (우) 마이리얼트립무난하게 사용하기 좋은 점(Dot) 형태입니다. 점의 총 개수와 색상을 바탕으로 배너가 총 몇 개이고, 지금 어디쯤인지 직관적으로 보여주는 장점이 있습니다. 다만, 배너 개수가 많아져 10개가 넘어가는 경우 다소 지저분하게 보일 수 있고, 일일이 세어보지 않으면 총 개수 파악이 어려워지는 단점이 있습니다.
아이폰 날씨앱깔끔하고 똑똑한 방식을 하나 소개할게요. 위 이미지는 아이폰 날씨 앱에서 사용하는 점 인디케이터입니다. 양 쪽에 점이 서서히 작아지면서 생략 표현된 것이 보이나요?
예시를 위해 세팅해보았는데요. 화면상으로 점 10개가 표현됐지만 실제로는 10개가 넘는 페이지가 있습니다. 생략 표현된 끝 쪽 순서로 넘어가면 생략이 해제되는 방식입니다. 개발 시 별도의 UI 규칙이 필요하지만, 페이지가 많아도 이를 효과적으로 표현할 수 있는 장점이 큽니다.
쿠팡 - 점 인디케이터점 인디케이터는 일반적으로 배너 아래 위치합니다. 하지만 조그만 인디케이터에 굳이 화면을 할당하기 싫다면 위 쿠팡처럼 배너 속에 위치시켜 구멍이 숭숭 뚫린 형태로 표현될 수도 있습니다.
2. 선 인디케이터 (Line)
(좌) OTT앱 Seezn - (우) Kream비교적 자주 사용되지 않지만, 도메인에 따라 좋은 선택지가 될 수 있습니다. 특히 OTT 또는 쇼핑몰처럼 널찍한 브랜딩형 배너를 사용하는 서비스에서 자주 선택됩니다. 선 전체를 트랙(Track)이라고 부르고, 선을 배너 개수만큼 N분의 1하여 색칠한 부분을 인디케이터(Indicator)라고 부릅니다. 인디케이터가 트랙 위를 움직이면서 현 위치를 표현합니다.
점(Dot)에 비해 전체 개수를 명확히 알 수 없는 단점이 있지만, 한편으로는 그게 장점이 됩니다. 굳이 유저가 배너의 개수를 신경 쓰지 않게 하고 싶거나, 인디케이터보다 이미지에 시선이 더 집중되길 원할 때 사용합니다. 배너와 함께 좌우로 모션하기 때문에 시각적으로 통일감 있고 부드러운 인상을 줍니다.
3. 숫자 인디케이터 (Number)
널리 사용되는 숫자 형태입니다. {현 위치/총 개수} 형식으로 표현됩니다. 영역을 적게 차지하고, 숫자만 적어주면 되므로 개발이 용이합니다. 배너의 개수가 10개가 넘어가고, 20개가 넘어가도 정보를 아주 명확하게 전달할 수 있습니다. 한편, 텍스트 정보가 추가되는 것이므로 유저가 읽어야 할 정보가 많은 화면에서는 채택하지 않는 것이 좋습니다.
마치며
여러 앱을 리서치해보면 본문에 소개된 것 외에도 정말 다양한 형태의 배너가 존재합니다. 캐러셀 기능과 인디케이터도 참 다양하게 구현되어 있습니다. 그만큼 수많은 기획자, 개발자, 디자이너들이 유저는 보기 싫지만 우리는 보여줘야 하는 난제를 풀고 있는 것 같습니다. 언제나 그렇듯 정답은 없고, 앱의 특징과 목표에 맞는 형태를 골라쓰는 게 바람직합니다.
