brunch

You can make anything
by writing

C.S.Lewis

by 뷰저블 Beusable Jan 02. 2019

온라인 광고의 특징과 UX 히트맵으로 최적화하는 법

UX 디자이너와 기획자라면 반드시 알아두어야 하는 온라인 광고(웹 광고)

안녕하세요 뷰저블입니다. 오늘은 광고형 웹사이트(Advertising Websites)의 특징을 알아보고 광고형 웹사이트를 최적화하려면 어떻게 해야 하는지 이야기 나누고자 합니다. 많은 실무자들이 광고는 '마케터만 알면 되는 것'이라 생각하지만, 광고에 가장 중요하게 작용하는 부문이 바로 UI입니다. 어떤 형태로 어떻게 광고를 노출시키는가에 따라 전환율이 천차만별로 달라질 수 있기 때문입니다. 그렇기 때문에 UX 디자이너나 서비스 기획자들도 웹 사이트 광고에 대해 숙지하고 있어야 합니다.  




광고형 웹사이트에 대해 들어보신 적 있으신가요? 광고형 웹사이트란 말 그대로 광고를 통해 수익을 창출하는 웹 사이트 종류를 의미합니다. 포털 등의 웹 사이트를 방문하면 기존에는 이미지, 문자 중심 광고가 주류였지만 최근에는 동영상 같은 특색 있는 광고 형태를 자주 목격할 수 있습니다. 스마트폰이 보급하면서 최근에는 한국, 미국, 일본을 포함한 많은 국가들에서는 일찍이 웹 광고가 TV 광고를 누르고 광고비 지출 비중 1위를 차지하였다고 합니다.



웹사이트 광고의 종류 및 특성


웹 사이트 광고는 온라인 광고(Online Advertising) 또는 웹 광고(Web Adversiting)이라고 부릅니다. 인터넷이라는 매개체를 통해 고객에게 광고 메시지를 전달하는 마케팅 형태입니다. 예전에는 피 링크로 이동시키는 단순 배너가 전부였지만 현재는 다양한 형태의 종류가 존재합니다.  


광고를 통해 수익을 창출하는 웹 사이트를 운영중인 디자이너라면 반드시 주목해야합니다.


디스플레이 광고(Display AD) 

여러분이 잘 아는 배너 광고가 예시 중 하나입니다. 디스플레이 광고는 이미지 배너, 애니메이션, 동영상, 플래시 등으로 표현되어 시각적 요소가 극대화됩니다. 대부분의 디스플레이 광고는 CPM, CPP, CPT 등으로 이뤄지며 다수 잠재고객에게 서비스와 브랜드를 노출시킬 수 있어 인지도 향상에 기여합니다.


CPM(Cost per Milienium) : 1,000회 노출 당 드는 비용을 의미하며 일반적으로 현재는 '월정액제 광고'라는 의미를 갖습니다. 각 포털사마다 CPM 방식이 적용된 상품을 보유하며 가격은 차이가 있습니다.

CPP(Cost per Period) : 특정 기간을 기준으로 광고 비용을 지불하는 것을 의미합니다.

CPT(Cost per Time) : 시간 단위로 광고 비용을 지불하는 것을 의미합니다. 


아래 이미지는 다음 포털 메인입니다. '이천 청솔 기숙학원'과 '더마 리페어 시카 크림' 디스플레이 광고가 걸린 것을 알 수 있습니다.


다음 웹 사이트에 걸린 디스플레이 광고



검색 광고 (Search AD, = 리스팅 광고)

다음으로는 검색 광고가 있습니다. 여러분이 평상시 사용하는 네이버, 구글, 다음과 같은 검색엔진에 특정 키워드를 검색하면 해당 광고와 관련된 링크를 노출시킬 수 있습니다. 아래 이미지는 제가 네이버에 '온라인 마케팅'이라고 검색한 결과 페이지입니다. 노란색 배경 영역이 검색 광고 영역으로 LG CNS가 가장 먼저 노출되었습니다. 노출 순서에 따라 지불하는 가격이 달라집니다.


네이버에 '온라인 마케팅' 키워드를 검색하면 노출되는 검색 광고 예시


애드 네트워크 광고 

애드 네트워크 광고는 웹 사이트나 블로그, 언드 미디어, SNS 같은 여러 채널을 모아 하나의 네트워크를 구성하고 해당 네트워크에 광고를 게재하는 서비스라고 이해할 수 있습니다. 기존 마케터가 직접 해당 채널별로 방문하여 하나씩 광고를 게재하였다면 현재는 애드 네트워크를 활용하여 다양한 채널에 '단번에 광고를 게재'할 수 있게 되었습니다.



DSP(Demad Side Platform) 광고 

위에서 말한 애드 네트워크를 포함하여 Ad Exchange(노출, 인벤토리를 사고파는 시장으로 다양한 광고 네트워크를 연동하거나 RTB API를 제공하며 거래 수수료를 받습니다.)에 횡단적으로 광고 게재를 관리할 수 있는 '도구'입니다. 광고보다 도구라고 볼 수 있으며 특정 알고리즘을 통해 자동으로 광고들을 분석하여 최적의 채널로 이동해주어 효과가 높습니다. 


애드 네트워크, DSP에 대해 자세히 알아보고 싶으시다면 아래 TOAST Meetup! 포스트를 참고하세요.


이 외에 SNS 광고, 동영상 광고, 게시물 광고, 제휴 광고 등이 있습니다.  




하지만 실무자의 입장과 달리, 사람들은 너무나 당연하게도 온라인 광고를 싫어합니다. 


온라인 광고가 사용자 경험 비용을 부가한다는 사실을 오랫동안 확인해올 수 있었습니다. 실제 사용자들이 웹 사이트 또는 앱에서 마주치는 가장 초조한 상황이 '너무 많은 광고'라고 합니다. 온라인 광고는 비즈니스에 있어 매우 중요하지만, '광고에 의해 목적으로 하는 태스크가 중단되는 경우 브랜드 경험과 사용자 경험 측면에서 신뢰도가 현저하게 하락한다.'라고 합니다. 


Clutch 2016에서 발표한 서베이에 따르면 너무 많은 광고를 사용자가 가장 초조해야한다고 합니다.


광고는 사용자 경험을 저하하게 하여 웹 사이트 사용률이 줄게 되고 나아가 고객 충성도를 떨어뜨립니다. 특히 특정 '짜증 나는 광고'에 노출되는 사용자는 서비스를 완전히 떠나기도 합니다. 덜 성가시며, 사용자의 충성도와 사용률 손실을 덜 유발하는 광고, 좀 더 사용성이 높은 광고를 기획하는 것이야말로 UX 디자이너의 연구과제이자 목표가 되어야 합니다. 




웹 사이트 성공을 위해 알아야 할 공식, 

B = V x C x L 


닐슨 노먼 그룹에서는 웹 사이트 성공을 위한 공식으로 B = V x C x L을 제안합니다. 사이트에서 수행하는 태


B=사이트에서 수행한 업무량

V=사이트를 방문하는 순 방문자 수

C=전환율(고객이 된 방문자의 비율. 이외에도 매출 등이 예가 될 수 있으며 태스크 수행률과 같은 넓은 의미에서 사용하기도 합니다.)

L=고객 충성도(고객이 반복적으로 특정 비즈니스 과업을 수행하기 위해 들어오는 정도)


위 매개 변수 중에서 종래에는 주로 V에만 집중하였으며 현재는 마케터의 영역으로 흔히 불립니다. 더 많은 트래픽을 얻기 위해 KPI를 세우고 전략을 실행합시다. C는 UX 디자이너가 주로 초점을 맞추는 영역입니다. 디자인 개선을 통해 방문자로부터 더 많은 가치를 창출할 수 있도록 해야 합니다. 


그럼 어떻게 효과적으로 C 영역, 즉 디자인 개선을 통해 전환율을 높일 수 있을까요? 최근 결혼을 검색하면 어떤 웹 사이트, 페이지를 방문하더라도 관련 결혼 상담 관련 디스플레이 광고가 계속해서 따라오는 것을 알 수 있습니다. 하지만 사용자는 '끈질기다'라고 느껴 지루해하죠. 이러한 단순한 기법은 레드오션 싸움밖에 되지 않습니다. 나아가 이러한 형태의 광고는 밀레니엄 세대나 Z 세대에게 맞지 않는 광고입니다. 밀레니엄 세대의 64%는 "관심 있는 콘텐츠를 제공하는 브랜드에 대해 호감을 가지며 이중 31%가 구입한 계기가 되었다. (조사 결과, 일문)"고 합니다. 

 

사용자가 흥미와 재미를 느낄만한 요소로써 디자인을 개선하고, 광고 참여를 더 쉽고 즐겁게 유도하는 방안, 공감을 불러일으키는 방안 등으로 고민해볼 수 있습니다. UX 컨설팅 기업 라이트브레인에서 디지털 광고를 위한 UX 전략이라는 글로 다양한 아이디어를 공유해주셨습니다. 해당 글을 참고할 수도 있습니다 :)



하지만 이러한 디자인을 최적화하기 위해서는 끊임없는 실험과 검증이 필요합니다. 바로 데이터 분석이 필요합니다.



UX 히트맵과 A/B Testing을 통해

디자인을 끊임없이 최적화하기


다양한 행동경제학 / 심리학적 기법을 활용하여 사용자와 상호작용하고 참여를 이끄는 디자인을 고민하세요. 하지만 이 디자인이 정말로 효과가 있는지에 대해서는 '검증'이 필요하고 이 검증을 반복하여 최적화하는 작업을 거쳐야 합니다. 

가설 수립을 통한 콘셉트 디자인과 검증 과정이 매우 중요합니다.


디자인 프로세스에서 가설 수립을 통한 '콘셉트 디자인'과 '검증'을 반복하여 실제 시장에서 리스크를 최소화하여 내놓는 것이 중요합니다. 이 검증은 어떻게 실시할 수 있을까요? A/B Testing을 진행하면 됩니다. 뷰저블에서는 개발자원을 최소화하여 단 몇 번의 클릭만으로 A/B Testing을 실시할 수 있도록 지원합니다. A/B Testing 결과를 지표로 확인할 수 있을 뿐만 아니라 UX 히트맵으로 정성적인 행태를 검증할 수 있는 것 또한 특징 중 하나입니다. 


뷰저블의 A/B Testing 기능을 활용하면 사용자의 정성적인 행태를 비교/추적할 수 있습니다.


광고 개선을 위한 4단계 프로세스

1단계. 광고 선정하기

2단계. 행동경제학 / 심리학 등의 기법, 벤치마크를 활용하여 디자인 아이데이션 하기 

3단계. 광고 디자인하기

4단계. 디자인 검증하기 (A/B Testing)


*효과 검증을 위해서는 자사 웹사이트에 등록된 광고 또는 랜딩 페이지 등을 분석할 수 있습니다. 


히트맵을 통해 사용자 행태 검증하기

뷰저블에서 제공하는 6가지 히트맵과 관련 기능으로 사용자 행태를 다음과 같이 살펴볼 수 있습니다.

 

1. 클릭 히트맵 : 사용자의 최종 목적지가 디자인한 광고로 얼마나 집중되었나요? 

클릭 히트맵과 함께 아래 이미지처럼, Click Rate, Click PV Rate, Hover to Click Time, Hover to Click Rate을 함께 살펴보는 것도 중요합니다.


뷰저블과 뷰저블리에서는 클릭 히트맵으로 사용자의 최종 목적을 확인할 수 있습니다.


Click Rate : 전체 클릭 규모 중 얼마나 해당 요소에 클릭이 집중되었는지를 알 수 있는 지표입니다.

Click PV Rate : 전체 Click PV 중 요소를 클릭한 사용자의 규모가 얼마나 되는지를 알 수 있습니다.

Hover to Click Time : 사용자가 요소에 마우스 호버 하여 클릭하기까지 걸린 시간을 의미하며 오래 지체할수록 '망설인다'라고 해석할 수 있습니다.

Hover to Click Rate : 요소에 관심을 가진 사용자가 실제로 얼마나 전환(클릭)하였는지를 알 수 있습니다. 



2. 무브 히트맵 : 사용자가 해당 광고를 응시(인지)하고 있나요?

뷰저블과 뷰저블리에서는 사용자 호버를 추적하여 시각화하는 무브 히트맵을 제공합니다.

광고 내 Hover 수를 정량적으로 분석하여 사용자 응시(인지), 관심도가 얼마나 높아졌는지를 추적할 수 있습니다. 또한 위에서 언급한 것처럼 Click 수와 함께 비교함으로써 해당 응시와 관심이 실제 전환으로 이어지는지를 살펴보는 것이 중요합니다. 



3. 스크롤 히트맵 : 사용자가 해당 광고를 확인하였나요? 광고가 사용자에게 도달되었나요?

4. 어텐션 그래프 : 해당 영역에서 사용자가 광고를 얼마나 소비(체류)하였나요? SKIP 하지는 않나요?


뷰저블에서 스크롤 히트맵과 어텐션 그래프를 함께 중첩하여 확인할 수 있습니다.

스크롤 히트맵으로 사용자가 얼마나 해당 광고 영역에 집중하였는지를 살펴볼 수 있으며, 어텐션 그래프를 통해서는 SKIP하지 않았는지, 광고 외에 다른 어떤 영역에 사용자가 오래 체류하는지 등을 파악할 수 있습니다. 사용자가 오래 체류한 영역이 있다면 해당 영역에 광고를 배치할 수 있으며 오래 체류하지만 실제 클릭 수가 낮은지 등을 검토하여 성과를 추적할 수 있습니다.



5. 노출 히트맵 : 사용자에게 광고가 노출되었나요? (뷰저블에서 Live Heatmap으로 접속하거나 뷰저블리로 접속) 


열심히 만든 광고가 사용자에게 노출되지 않는다면 소용없습니다. 얼마나 노출되었는지 정량적인 수치로 확인하여 노출도를 높일 수 있습니다. 노출된 수치에 비해 클릭 수 또는 호버수가 적은 지, 많은지를 추적하여 성과를 파악하세요. 

뷰저블 내 라이브 히트맵과 뷰저블리에서 노출 히트맵을 확인할 수 있습니다.



6. 관심 히트맵 : 노출된 광고를 사용자가 관심 있어 하나요? (뷰저블에서 Live Heatmap으로 접속하거나 뷰저블리로 접속)


마지막으로 관심 히트맵입니다. 노출된 콘텐츠를 얼마나 관심 있게 살펴보는지를 파악할 수 있는 히트맵입니다. 마찬가지로 정량적인 수치로 확인할 수 있어 KPI 수립 및 성과 향상에 도움됩니다.

뷰저블 내 라이브 히트맵과 뷰저블리에서 관심 히트맵을 확인할 수 있습니다.


A/B Testing 기능에서는 노출 히트맵과 관심 히트맵은 지원하지 않아 최종 산출물의 성과 추적 용도로 활용할 수 있습니다. 



광고는 마케터만의 영역이 아닙니다. 광고를 통해 랜딩 페이지와 웹 사이트로 사용자가 유입되고 더 많은 유입은 더 많은 전환율을 의미하기 때문입니다. UX 디자이너로서 마케터와 함께 머리를 맞대어 어떻게 하면 더 많은 성과 향상에 기여할 수 있을지를 고민해야 합니다. 





참고 사이트 : 

 




하마터면 뷰저블을 모르고 일할 뻔했다고요?


뷰저블을 통해 서비스 내 사용자 경험(UX)에 영향 끼치는 문제점을 발견하세요.

뷰저블이라면 그 많은 문제점들을 '새로운 비즈니스 기회'로 바꿔드릴 수 있습니다.

경쟁사는 이미 시작했습니다!


UX 데이터 분석을 위한 All in one 툴 : 뷰저블 홈페이지

https://www.beusable.net/


실제 웹 사이트 위에 UX 데이터를 시각화합니다 : 뷰저블리 홈페이지

https://www.beusably.net/  


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari