광고로 오인받지 않는 UI 설계하기
중요한 정보가 광고로 보이지 않게 만드는 법
앱 서비스를 사용하면서 화면 상단의 광고·마케팅 배너 영역을 유심히 살펴본 적이 있나요? 평소 관심 있던 내용이 아니라면 대부분 무의식적으로 회피하거나 순식간에 지나칠 거예요. 이는 오랜 시간 학습된 '배너 블라인드니스(Banner Blindness)'* 현상 때문인데요.
*배너 블라인드니스(Banner Blindness) : 웹페이지에서 광고를 포함한 배너와 같은 요소를 웹사이트 사용자가 무의식적으로 무시하는 현상
서비스마다 차이는 있지만, 프로모션 영역은 주로 화면의 최상단에 위치하는 경향이 있어요. 사용자의 시선을 가장 먼저 끌기 위한 배치죠. 하지만 이 영역은 단순히 광고만을 위한 공간이 아니에요. 서비스의 핵심 기능을 소개하거나, 사용자에게 중요한 정보를 전달하는 용도로 활용되기도 하죠.
문제는 여기서 발생합니다. 많은 사용자들이 최상단 영역에 표시되는 모든 콘텐츠를 광고로 간주하는 선입견을 갖고 있기 때문이에요. 서비스의 핵심 기능이나 유용한 정보가 표시되어 있어도, 광고와 유사한 비주얼 패턴이 조금이라도 감지되면 즉시 '광고'로 분류하고 무시해 버리는 경우가 많아요.
결과적으로 서비스의 중요한 콘텐츠를 효과적으로 노출시키기 위해 최상단에 배치했음에도 불구하고, 사용자가 이를 광고로 오인해 무시한다면 설계 의도와는 정반대의 결과를 초래하게 되겠죠.
그렇다면 어떻게 중요한 콘텐츠를 광고처럼 보이지 않게 하면서도 효과적으로 전달할 수 있을까요? 다양한 프로젝트를 통해 도출한 인사이트를 공유해 드릴게요.
색상, 레이아웃 등 디자인 요소의 일관성 유지하기
사용자의 주목을 끌기 위해 강조 콘텐츠의 UI를 디자인할 때, 컬러나 이미지, 아이콘 등을 과도하게 활용하는 경우가 많아요. 시각적으로 돋보이게 만들어 사용자의 관심을 끌기 위해서죠. 그러나 이러한 접근 방식은 의도치 않게 광고와 유사한 느낌을 줄 수 있어요. 광고 역시 차별화를 위해 독특하거나 눈에 띄는 디자인 요소를 적극 활용하기 때문이에요.
앞서 언급했듯이, 사용자들은 UI가 광고 패턴과 조금만 유사해 보여도 즉시 광고로 인식하고 스킵하는 경향이 있어요. 따라서 콘텐츠를 강조할 때는 과도하게 눈에 띄는 요소를 사용하기보다는 서비스의 전반적인 스타일과 일관성을 유지하는 것이 더욱 효과적입니다.
이러한 접근은 사용자에게 안정감을 주고, 동시에 해당 콘텐츠가 서비스의 일부라는 인식을 강화시켜요. 결과적으로 사용자는 광고가 아닌 중요한 정보나 기능으로 인식하게 되고, 관심을 갖고 살펴볼 확률이 높아지죠.
어떤가요? AS-IS는 광고처럼 보이는 반면, TO-BE는 일반적인 정보 안내 알림처럼 느껴지지 않나요?
위 예시는 VIP 회원을 위한 혜택 안내 알림인데요. 기존에는 회원들이 매월 직접 혜택을 신청해야 했지만, 이제는 서비스에서 자동으로 처리해 준다는 점을 안내하고 있어요.
두 화면을 비교해 보면, 전달하고자 하는 핵심 메시지와 정보는 동일하지만 표현 방식에서 확연한 차이가 있는데요. AS-IS에서는 어텐션을 끌기 위해 화려한 색상과 다양한 그래픽 요소를 활용했지만, TO-BE에서는 이를 지양하고 정보 전달에만 집중했어요.
이렇게 디자인적 요소를 절제한 것만으로도 사용자들은 단순한 광고나 프로모션이 아닌, 신뢰성 있고 중요한 서비스 정보로 받아들일 수 있어요.
개인화된 정보를 강조해 신뢰성 확보하기
위 예시는 보험 관련 서비스에서 자주 볼 수 있는 알림인데요. 마이데이터 연동을 통해 병원에서 카드 결제가 발생하면 보험금 신청을 안내하는 기능이죠.
보험사 프로젝트를 진행할 때, 사용자 리서치를 통해 많은 사용자들이 병원 방문 후 보험금 신청을 자주 잊는다는 페인 포인트를 발견했어요. 이를 해결하기 위해 알림 기능을 도입하면 사용자에게 큰 도움이 될 것이라고 판단했죠. 하지만 실제 사용성 테스트에서는 예상과 다른 결과가 나타났어요. 대부분의 참가자들이 알림을 무시하고 지나쳤던 거예요.
원인을 파악하기 위해 참가자에게 물어보았더니, 대다수가 "광고처럼 보여서 무시했다"라고 답변했어요. 사용자에게 도움을 주려던 기능이 오히려 광고로 오인된 거예요.
TO-BE 화면을 보여주고 다시 의견을 물어보니 반응이 완전히 달랐어요. 대부분의 참가자들이 "이건 광고처럼 느껴지지 않는다"라고 답변했죠.
두 화면의 핵심적인 차이점은 TO-BE에서 사용자의 결제 정보가 명확하게 강조되었다는 점이에요. 개인화된 결제 정보를 부각해 이 알림이 사용자와 직접적으로 연관되어 있음을 즉시 인식할 수 있도록 한 것이죠. 참가자들도 "내 결제 정보가 잘 보여서 광고가 아닌 보험금 청구 안내로 느껴진다"는 의견을 주었습니다.
이처럼 안내 콘텐츠에 사용자의 개인화된 정보를 적절히 활용하면 광고 오인을 효과적으로 방지할 수 있어요.
표준 광고 사이즈와 차별화하기
위에서 보여드린 예시를 다시 살펴볼까요? 사용자 정보 강조 외에도 두 화면 사이에는 또 다른 중요한 차이점이 있어요. 바로 컴포넌트의 크기인데요. 언뜻 봐도 TO-BE 화면의 컴포넌트가 훨씬 크다는 것을 알 수 있죠.
이 차이를 좀 더 명확하게 설명하기 위해, 쿠팡이나 배달의 민족 등 주요 앱 서비스 20개의 광고 영역 크기를 분석해 봤는데요. 375×812 화면 비율을 기준으로 광고 영역의 평균 세로 크기는 약 221픽셀이었어요.
앱 서비스 광고 영역 크기 분석 중
흥미롭게도 사용성 테스트 참가자들이 "광고 같다"라고 평가한 AS-IS 모듈의 세로 크기가 광고 영역 평균 크기와 거의 일치했어요. 5픽셀밖에 차이가 나지 않았거든요. 한 참가자는 "다른 서비스의 광고 크기가 딱 이 정도여서 광고인 줄 알았다"라고 언급하기도 했습니다. 컴포넌트의 크기가 사용자의 광고 인식에 직접적인 영향을 미친다는 것을 확인한 순간이었어요.
TO-BE에서는 모듈의 세로 크기를 400픽셀로 크게 늘렸는데요. 이는 평균 광고 영역 크기인 221픽셀의 약 두 배에 해당해요. 이 정도 차이가 나면 사용자 입장에서도 일반적인 광고 UI와는 확실히 다르다고 인식하게 되고, 중요한 정보라는 것을 직관적으로 파악할 수 있어요.
CTA 문구는 명확한 행동을 유도하도록 설계하기
CTA(Call To Action) 버튼은 "결제하기", "주문하기", "신청하기" 등 사용자의 구체적인 행동을 유도하는 핵심 인터페이스 요소인데요. 광고에서 사용되는 CTA는 대부분 구체적인 행동 유도보다는 모호한 문구를 사용하는 경향이 있어요.
광고 영역에서는 "결제하기"나 "주문하기" 같은 명확한 액션 대신 "더 알아보기", "확인하기"와 같은 표현을 자주 볼 수 있어요. 이런 CTA 문구는 사용자의 호기심을 자극하거나 추가 정보로의 이동을 유도하는 역할을 해요.
따라서 광고 오인을 방지하려면 구체적이고 명확한 액션을 나타내는 CTA를 사용하는 것이 효과적이에요. 사용자에게 해당 기능 및 정보의 가치를 빠르게 전달하는 거죠.
위 예시는 오늘까지만 사용 가능한 쿠폰이 있다는 안내성 알림입니다. 해당 쿠폰을 사용할 의사가 있는 사람에게는 꼭 필요한 안내겠지만, 그렇지 않은 사용자에게는 소비를 유도하는 '광고'로 인식될 수 있어요. 이런 경우에는 CTA 문구를 더욱 신중하게 선택해야 해요.
AS-IS는 "지금 확인하기"라는 모호한 CTA를 사용하고 있어요. 단순히 추가 정보로의 이동만을 유도하는 것이죠. 반면 TO-BE의 "쿠폰 이미지로 저장하기" CTA는 구체적인 액션을 제시합니다. 사용자가 쿠폰을 간편하게 저장해 두고 활용할 수 있도록 실질적인 편의를 제공하면서, 동시에 쿠폰 사용을 자연스럽게 유도하는 효과도 있는 거죠.
지금까지 다양한 프로젝트를 통해 발견한 광고 오인 방지 방법들에 대해 이야기해봤는데요. 물론 서비스 특성이나 사용자층에 따라 적용 방식은 달라질 수 있지만, 비슷한 고민을 하고 있는 UX 디자이너분들께 조금이라도 도움이 되었으면 좋겠습니다.
읽어주셔서 감사합니다.
