UX를 망치지 않는 설득력 있는 배너 디자인

배너 퍼포먼스 기대치와 인지도 극대화하기

본문은 위시켓과 번역가 앰버(Amber)가 함께 만든 해외 콘텐츠 기반 번역문입니다. UX 디자인을 다루는 블로그 매체 ‘ UX Collective ’의 글을 번역했습니다. 필자인 이샤 베니왈(Isha Beniwal)은 Razorypay의 수석 제품 디자이너로 UX 디자인에 관한 글을 쓰고 있습니다. 본문은 설득력 있는 배너 디자인을 만들기 위해 디자이너가 고려해야 할 점을 소개합니다. 어떤 디자인이 UX를 해치지 않고, 설득력도 있는지 함께 생각해볼 수 있겠습니다.

배너의 뿌리는 광고에 있습니다. 배너는 실생활에 사용되는 배너에서 영감을 받아, 사용자들이 원하는 최종 목표에 도달할 수 있도록 UX 세계로 구체화됩니다. 디자이너로서 다소 짧지만 흥미진진하게 커리어를 쌓는 과정에서, 저는 여러 단계에 걸쳐 설득력 있는 배너를 디자인해달라는 요청을 받아왔습니다. 이때 제가 보통 받은 피드백은 ‘더 매력적이게, 더 많은 시선을 끌 수 있도록' 해달라는 것이었죠.

배너는 외향적입니다! 외향적인 사람들이 항상 관심받고 싶어 하는 모습을 떠올려보세요. 저 또한 외향적인 한 사람으로서, 한 페이지 내에서 여기저기 관심을 끌기 위해 마구 튀어나오는 수많은 배너들을 상상하기란 어렵지 않은 일인데요. 가끔은 마우스 클릭에 목을 매는 배너가 너무 많아서, 사용자들이 실생활에서 이 배너가 필요한 것인지 아닌지 판단하기도 어렵고, 오히려 혼란만 가중시킬 뿐입니다.

그저 ‘저요, 저요, 저요!’를 마구 외쳐 관심을 끌어보려는 배너의 몸부림은 실로 전혀 도움이 되지 않습니다. 이 불쌍한 배너의 인생이란 참 녹록지가 않죠.

배너는 한 페이지에서 가장 빛나는 부분을 장식하며, 많은 클릭을 유도합니다. 이것이 바로 배너가 디지털 플랫폼에서 단순히 사용되는 것을 넘어, 남용되고 오용되는 이유라고 볼 수 있습니다.

배너의 존재를 낱낱이 쪼개고, 배너의 유형과 배치에 있어 방법론적으로 효과적인 접근법을 찾아봅시다. 사용자와 제공자에게 어떤 가치를 제공할 수 있을 것입니다.

배너의 구조 1. 시각자료 : 배너는 보통 전달하고자 하는 기본 아이디어를 보충하는 이미지나 일정한 양식을 가지고 있습니다.

2. 컨테이너 : 모든 요소를 담는 박스를 나타내며, 사용자의 주의를 끌어야 하므로 생생하고 대조되는 색상을 사용하여 나타냅니다.

3. 텍스트 : 배너의 텍스트는 사용자의 행동에 특화된 매우 짧은 메시지를 담습니다. 텍스트는 짧고 간결해야 합니다.

4. 콜 투 액션 [1]: 사용자가 활동을 수행하도록 유도하는 버튼이나 링크, 아이콘이 이에 해당됩니다.

배너의 유형 배너는 주로 두 가지 유형으로 볼 수 있는데, 한 가지는 행동형, 다른 한 가지는 정보형입니다. 두 유형 모두 사용되는 맥락에 따라 세부 유형으로 나누어질 수 있습니다.

행동형: 시간 기반형 : 사용자가 시간이나 제한된 기회를 동기부여 요소로 사용하게끔 하는 유형입니다. FOMO[2]는 이런 배너가 수익을 창출하도록 하는 기반이죠. ‘2개 남았으니 서두르세요! 오늘의 딜, 할인 마감까지 11분 남았습니다!’와 같은 문구를 예로 들 수 있겠습니다. 로그인/회원가입 설득형 : 현금, 할인, 지갑 포인트 등 이익을 제시해서 사용자가 플랫폼에 등록하도록 유도하는 유형입니다. 회원가입은 사용자의 영혼을 들여다보는 창과도 같아서, 사용자의 기호도를 보다 쉽게 파악할 수 있게 해줍니다. 이 데이터는 모든 사용자 프로필에 대한 추천사항과 개인화를 최적화하는데 도움을 줍니다. 영감 기반형 : 사용자의 관심사나 추구하는 바와 잘 들어맞는 흥미진진한 정보를 제공하여 그에 푹 빠지도록 합니다. 예를 들어, 왕좌의 게임 팬들은 작품의 촬영지가 아일랜드인 것을 알면 당연히 아일랜드를 방문하고 싶어 지겠죠? 제안 기반 설득형 : 매력적인 가격, 할인, 그리고 지불 옵션을 사용해서 사용자가 온라인 거래를 하도록 유도하는 것은 책 시장에서 아주 오래도록 사용된 전략 중 하나입니다.

정보형: 상태 기반형 : 사용자의 활동에 상태를 기반으로 한 피드백을 줍니다. 사용자의 활동을 완료/실패/진행 중 세 가지로 보여줍니다. USP[3] 강조형 : 사용자에게 왜 우리 회사가 해당 업계에서 최고인지 납득시킵니다.

배너 디자인 시 주의할 점 1. 배너 배치: 배너의 존재가 페이지의 흐름을 어느 정도 끊어가는 효과가 있는데요. 이런 배너가 흐름을 방해하는 정도는 배너가 해당 페이지에서 차지하는 중요성의 정도와 동등한 수준이어야 합니다. 당신은 눈에 띄면서도 페이지를 둘러보는 데 거슬리지 않는 위치에 배너를 두고 싶을 거예요. 어떤 사용자들에게는 이런 배너가 너무 과하게 느껴질 수 있기에 배너를 보이지 않도록 설정할 수 있는 옵션이 필요합니다. 사용자의 눈이 페이지에서 어떤 식으로 이동하는지 참고하여 페이지에 여러 요소를 배치하고자 할 때, 자주 사용하는 툴[4]이 있으니 한번 참고해보세요.

2. 눈에 띄게 만들기: 경사도, 색상, 볼드 타이포그래피 모션 등 시각자료를 살펴보고, 실험적으로 이것저것 시도하면 더 돋보이는 배너를 만들 수 있습니다. 아이콘이나 관련성 있는 일러스트레이션을 활용해, 이미지를 더해주면 끊임없는 흥미로움을 유발할 수 있어요. 배너가 배치되어 있는 주변 환경의 일정한 패턴에서 벗어나 새로움을 줄 수 있는 전략입니다.

다양한 배너들 예: Dushyant 가 만든 한 공간 안에서 다양한 배너를 보여주고자 사용한 모션

3. 디자인 확장성: 한 배너가 제작되면 개발자가 얼마나 많은 방식으로 이 배너를 사용할 수 있을지 상상해보세요. 또한 만들어진 배너를 서로 다른 가로 세로 비율과 크기로 조정해서 활용해보세요. 페이지에서 잠깐 눈이 쉬어가는 구간을 위한 배너 디자인을 생각해 볼 수도 있고요. 배너를 활용할 수 있는 모든 경우를 생각해보세요.

배너를 클릭한 뒤 이어지는 활동을 시각적으로 잘 표현해내는 것이 배너 그 자체보다 훨씬 더 중요합니다.

4. 배너 광고 회피[5]: 무리하게 배너를 쌓아 올리거나, 너무 많은 공간을 차지하도록 배열하면 어떠한 배너도 바람직한 효과를 얻기 힘듭니다. 제작자는 이 카리스마 넘치는 배너를 어떻게 사용하고, 언제 힘을 실어 등장시켜야 할지 매우 신중하게 결정해야 합니다.

사용하는 배너의 수량을 신중하게 결정하고, 이 수량이 적절한지 수시로 확인해야 합니다.

5. 오용과 남용: 어떤 배너를 랜딩 페이지 특정 위치에 배치한 후, 한동안 변동 없이 그대로 두었다면 해당 랜딩 페이지에서 이 배너가 제공하는 정보가 그 자리에 계속 필요한 건지 생각해보세요. 말 그대로 고정관념에서 벗어나 보는 겁니다!

관련성 유지하기: 유용할 수 있는 정보도 해당 정보에 관심 없는 사람에게 보이면, 으레 귀찮고 불필요한 정보로 인식되기 마련입니다. 개인에게 최적화된 데이터를 활용해서 가급적 사용자의 관심사와 관련 있는 배너를 노출시킬 수 있도록 하세요.

“설득"이라는 단어는 조종, 술책, 그리고 디자이너에게는 특히 다크 패턴[6] 을 사용하는 것과 종종 밀접한 관련성을 띕니다. 단어 그 자체로 이미 평판이 굳어져버렸죠. 이 같은 일이 반복되지 않도록 노력해야 합니다.

결론 이 미녀와 야수와도 같은 에피소드를 요약하자면, 배너의 존재는 무심하고 불분명한 커뮤니케이션으로 가득한 페이지를 잠시나마 덮는 임시 방편책이 될 수 없다는 것입니다. 따라서 다음 번에 당신의 프로젝트 매니저가 설득력 있는 배너를 만들기 위한 필수적 요소들이 무엇인지 늘어놓는다고 칩시다. 그럼 스스로에게 한번 질문해보세요. 그게 정말 필요할까? 같은 정보라도 좀 더 신선하게 전달할 수 있는 방식들을 떠올려보거나, 위에서 언급했던 부분들을 잘 전달할 수 있는 배너의 유형이나 내용을 추려보세요. 이 팁들이 당신의 작업 과정에 도움이 될 수 있길 바랍니다.

[1] Call to action: 홈페이지 방문자에게 어떤 행동을 권하거나 유도하는 도구 또는 기법

[2] Fear Of Missing Out: 좋은 기회를 놓치고 싶지 않은 증후군

[3] Unique Selling Points; Unique Selling Proposition: 고유한 강점

[4] https://vas.3m.com/

[5] Banner Blindness: 의식적 혹은 무의식적으로 온라인 배너 광고에 주목하지 않는 현상

[6] Dark Pattern: 사용자들을 속여 보험을 들거나 장기결제를 하도록 유도하는 웹 디자인