[UIUX Study] 광고 배너와 캐러셀, 인디케이터 비교 분석

프로젝트를 진행하면서 UIUX 디자이너 분들과 소통할 일이 많아졌습니다. 

기본적인 화면 관련 디자인 용어들에 대한 부족함을 느꼈고, 배너 위주로 한번 비교 분석을 해보려고 합니다. 

배너 (Banner)

: 배너 광고는 광고주의 독점 사이트로 트래픽을 유도하기 위해

호스트 사이트에 크리에이티브 광고를 게재하는 경우

1. 기본형 배너

 세로 길이가 짧은 직사각형 형식

기본형 배너 예시 사진, 세로 길이가 짧은 직사각형 형식

2. 브랜딩형 배너

이미지를 강조하여 감성적인 광고를 하는 브랜딩형 배너 

이미지를 강조하여 감성적인 광고를 하는 브랜딩형 배너

3. 맥락형 배너

한가지 이미지만 보여지는 배너의 문제점을 해결하기 위한 맥락형 배너

앞뒤 맥락을 보여주기 위해 좌우로 걸쳐져 있다.

앞뒤 맥락을 보여주기 위해 좌우로 걸쳐져 있는 맥락형 배너

4. 버튼형 배너

배너 안에 버튼 액션이 추가된 배너 

배너 안에 버튼 액션이 추가된 버튼형 배너

이때, 모든 배너에는 전체보기, 모아보기를 넣어서

사용자가 정보를 한번에 볼 수 있도록 하는 것이 좋다고 한다. 

캐러셀 (Carousel)


: 자동으로 배너가 이동하는 형식을 말한다. 이를테면 회전목마처럼. 
이미지 로테이터, 슬라이더 등 다양한 이름으로 불리운다.
메인 페이지 상단에 위치하며, above the fold 영역의 상당 부분을 차지.
같은 공간에 하나 이상의 콘텐츠를 보여주며 하나 이상의 콘텐츠가 있음을 보여주는 표시가 있다. 

---

인디케이터 (Indicator)

1) 점
2) 선
3) 숫자

의 3가지 종류가 있다. 

바로 하단의 예시 사진에서는 점 인디케이터를 이용하였다. 

1) 점 인디케이터

캐치테이블의 캐러셀

장점으로는 가장 간단하다는 점이다. 

단점은 일일이 점을 세야 하고,

점의 개수가 많아지면 화면에서 깔끔한 느낌을 뺏어갈 수도 있다는 점이다. 

2. 선 인디케이터

선 인디케이터는 다음과 같다.

(실제 29cm 앱 화면이 아니며, 예시로 만든 가상의 화면입니다)

선 인디케이터 예시 화면

장점 : 개수를 모르게 하고싶을때나, 이미지에 집중시키고 싶을 때 사용

(주로 OTT에서 많이 사용)

단점 : 장점이 곧 단점, 배너 개수를 모른다. 

3. 숫자 인디케이터

[현위치/전체개수]

선 인디케이터 예시화면 [에이블리]

장점 : 영역 차지 비율 낮음!

정보를 명확하게 전달 가능함 

단점 : 텍스트가 많은 배너에서는 사용 X

오늘은 다음과 같이 배너, 캐러셀, 인디케이터의 정의와 종류를 간단히 정리해보았습니다. 

알고나니 여러 앱에서 왜 이걸 쓰는지, 어떤 브랜드 이미지를 강조하고 싶었던 것인지 알 수 있었던 유익한 정보라고 생각합니다.