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

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

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

 

 

---

배너 (Banner)

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

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

 

 

 

1. 기본형 배너

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

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

 

 

 

 

2. 브랜딩형 배너

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

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

 

 

 

 

3. 맥락형 배너

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

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

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

 

4. 버튼형 배너

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

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

 

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

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

 

 

---

캐러셀 (Carousel)


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

---

---

인디케이터 (Indicator)

1) 점
2) 선
3) 숫자

가 있다. 

바로 하단의 예시 사진에서는 점을 이용하였다. 

1) 점 인디케이터

캐치테이블의 캐러셀

 

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

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

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

---

 

 

2. 선 인디케이터

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

(실제 29cm 아니고 내가 만든 예시임 ㅋㅋ)

선 인디케이터 예시 화면

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

(주로 OTT에서 많이 사용)

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

 

 

 

 

---

3. 숫자 인디케이터

[현위치/전체개수]

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

 

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

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

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

---

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

디자이너와 개발자와 원활한 소통을 위해서 부족한 전문 용어는 틈틈히 공부해야겠다. 

 

 

이 글과 논외로! 

 

나는 요즘 그런 말이 정말 맘에 와닿는다. 

 

아는 만큼 보인다.

아는 것이 힘이다.

 

내가 알고 있는 것들이 항상 정답은 아닐 것이다.

그렇기에 계속해서 알아가고, 물어가며, 내 것으로 체화하다 보면

사람들의 니즈를 해결해주는 좋은 PM으로 성장하지 않을까 싶다. 

 

(또! 제일 중요한 것, 내가 항상 옳다는 자만감 버리기. 항상 틀릴 수 있음을 되새기기 )

 

 

그럼 행복하고 유익한 토요일의 스터디를 마친다.