디자인 vs 정보의 싸움

79
0

요즘 내가 일할 때 기획자와 디자인을 가지고 가장 많이 의견차이를 보이는 부분이 어디냐고 하냐면, 바로 [정보를 어디까지 보여주느냐]이다.


상품 이미지, 상품정보(상품명 + 가격 등), 메인 카피, 이벤트 설명 등등. 마케팅 디자인 영역에는 정말 많은 정보들이 들어간다. 만약에 외부 브랜드 또는 회사와 제휴하는 프로모션이라면, 우리가 제어하기 힘든(빼고 싶어도 뺄 수 없는) 정보영역이 생길 수 있다. 그리고 마케터와 디자이너는 이 [정보의 노출]을 가지고 열띤 토론(?)을 벌인다.


[상황 1]

“이 페이지(또는 배너)에 이 정보 모두 넣어주시면 안 될까요?”
“방금 기획서 확인해 봤는데요, 여기에 이 정보들 모두 넣기 힘들 것 같아요. 여기서 몇 개만 추려서 넣을 수 있을까요? 개인적으로는 A, B는 없어도 될 거 같아요.”
“호오… 그렇다면 저희가 제휴사한테 A, B 빼도 되는지랑 꼭 들어가야 하는 게 있는지 물어볼게요. 근데 저희가 이미 제휴사에 받은 내용이라, 말한 부분 빼도 될지는 답변을 들어봐야 알 것 같습니다.”


[상황 2]

“기획서에서 저희 디자인 가이드랑 맞지 않는 부분이 있는데요, 혹시 요 C, D 영역을 아예 뺀 이유가 있을까요?”
“아하 저희가 이 이벤트 설명하는 부분이 최대한 ATF 영역(스크롤 없이 모바일의 한 화면에 보이는 영역. 기기마다 비율이 세세하게 다를 수 있다) 안에 들어오게끔 하고 싶은데요. 그러기에 이 카피가 불필요해 보여서 삭제를 요청했습니다.”
“오… D는 괜찮은데, C 부분은 고객이 이 이벤트를 파악하는 데에 꼭 필요한 요소라서요. 이 부분은 들어가야 할 것 같아요.(+그 외에 C가 들어가야 하는 장황한 이유 설명 블라블라블라)”


내가 마케터와 함께 일하면서 가장 많이 겪는 상황 2가지이다. 서로 정보를 어디까지 넣을지 말지로 의견 차이가 많다. 사실 상황 2는 얼마든지 의견 조율이 가능하다. 아무리 디자인 가이드에 맞지 않아도, 사용자가 봤을 때 정보를 인지하는 데에 큰 어려움이 없다 하면 디자인을 조정할 수 있다.(단, 정책상 문제가 없는지 검토 후 판단한다. 그래서 자꾸 가이드를 깨버린다. 이에 대한 얘기는 [디자인 가이드의 딜레마]에서 확인할 수 있다)


문제는 상황 1이다. 디자이너의 입장에서, 디자인이 복잡해지는 것을 용납할 수 없다. 내용이 너무 많아서 내 시각과 뇌의 과부하가 오는 것은 사용자도 바라지 않을 것이다. 하지만 이 작은 영역에 넣어달라는 정보와 관련 내용이 너무 많다. 마케터의 입장에서는 이 내용도, 저 내용도 정말 중요해서 넣지 않으면 안 될 것이다.


정보를 최소화해서 보여주려는 디자이너, 그리고 정보를 최대한 넣으려는 마케터. 평소에는 서로 백번 양보하고 의견 조정이 잘 되지만, 마케터와 디자이너가 서로 생각하는 [중요한 정보]가 다를 때, 그리고 그 정보의 개수가 다를 때 의견 좁히기가 쉽지 않다.


좁은 화면에 보여줄 수 있는 정보는 한정적이다


온라인상에서 진행하는 마케팅 디자인들은 대다수 작업 영역이 작다. 특히 요즘 모바일의 중요성이 PC를 압도적으로 뛰어넘으면서 이전에 PC와 모바일을 병행하던 시절보다 작업 영역이 더더더 작아졌다. 가로 영역이 넓은 PC웹이 아닌, 가로로 좁은 대신 세로 스크롤을 해야 하는 모바일웹을 대응해야 한다. 가뜩이나 작은 화면에서 사용자는 깨알 같은 글씨가 많으면 보기 어려워한다. (아마 글씨를 크게 보는 시니어 고객은 더 힘들어할 것이다) 그래서 모바일에 들어가는 이벤트페이지 또는 배너를 제작할 때 사용하는 최소의 폰트 크기를 지정해놓기도 했다. “이 크기까지만 일반 사용자가 폰에서 읽을 수 있다”라는 의미다.


문제는 세로 스크롤이다. 스크롤이 매우 긴 화면이라면, 정말 나에게 필요한 정보가 아닌 이상 모든 사용자가 페이지 끝까지 스크롤을 내리지 않는다. 보통 나에게 필요한 정보까지만 확인하고 이탈한다. 그래서 이벤트 페이지를 제작할 때 제일 중요한 정보를 최상단에 올려서 사용자가 스크롤하지 않을 때, 또는 아주 약간만 내려도 이 정보를 볼 수 있게 배치한다.


왼쪽부터 네이버 플러스 스토어, 29cm, 지그재그의 이벤트 페이지

최근 들어 이 스크롤을 최소화하려는 움직임이 조금씩 보인다. 상단의 키비주얼 영역 높이값을 줄여서 아래의 내용이 ATF(Above the fold, 사용자가 앱에 진입했을 때 스크롤 없이 바로 보이는 화면) 영역 내에 보이게끔 한다. 또는 아래 내용을 슬쩍 보여주면서 “이 아래에 이벤트 정보가 있어요!”라는 뉘앙스를 풍긴다. 가끔 특별한 캠페인 페이지 같은 경우 아래 스크롤을 내리라는 인터랙션을 추가할 때도 있다.


그러다 보니 마케터들은 이 ATF 영역 내에 가능하면 중요한 정보들이 모두 보이는 것을 희망한다. 만약 쿠폰을 전개하는 프로모션일 경우 쿠폰을 ATF 영역 내 배치하고 싶어 한다. 이때 쿠폰 또는 이 쿠폰 관련 정보를 얼마나 줄일 수 있냐가 관건이다. 1-2개 정도의 쿠폰은 상관없는데, 3개 이상의 쿠폰은 경우에 따라 하나의 형태로 압축하거나 정보를 최소화해야 한다. 여기서 위의 상황 1이 벌어진다. “이 ATF 영역 내에 이 많은 정보 다 보이면 좋겠어요”라는 것은 “냉장고에 코끼리가 다 들어가는데 코끼리 형태가 다 보였으면 좋겠어요”라는 말과 같다. (아 쓰면서 눈물이 ㅠ)


서비스마다, 이벤트마다 보여주는 정보도 제각각인 쿠폰

쿠폰 디자인 컴포넌트를 만들 때에도 이 정보를 얼마나 넣느냐의 문제가 가장 컸다. 이 컴포넌트를 처음으로 제작할 당시 쿠폰과 연관된 일을 하는 분들은 가능하면 많은 내용을 쿠폰 내에 보여주기를 원했다. 프랜차이즈 할인 같은 경우, 프랜차이즈 이름, 로고, 할인금액(또는 할인율), 선착순, 메뉴할인인지, 브랜드찜 쿠폰인지, 어느 서비스에서 쓸 수 있는지, 쿠폰 사용 기간, 그 외의 쿠폰 사용할 때 알아야 하는 유의사항들 등등등이 있었다.


하지만 안타깝게도 이 정보들을 모두 다 못 넣는다. 이 모든 것을 넣기에는 쿠폰 영역은 너무나도 작다. 이 작은 영역에서 이 정보를 모두 넣는다면 글씨가 작아지고, 사용자들은 그 작은 글을 읽지 않을 것이다. 더 안타까운 점은, 이러한 점들을 데이터로 정량화해서 마케터를 설득하는 게 더 힘들다는 것이다. UT로 얻은 데이터를 들고 “실제로 사용자가 이렇게 행동한다”라고 근거를 가져가면 좋겠지만, 그러지 못해서 마케터를 설득하지 못하는 일이 더 많다. 요즘 마케터가 데이터를 가지고 [이 정보를 넣어달라]는 경우도 있으나 보통은 팀 내에서 각 디자이너들, 각 마케터들 본인의 의견으로만 주장을 내세울 때가 자주 있다. 그래서 접점 없이 평행선만 달리는 무한토론이 계속되는 것 같다.



우선순위 높은 정보의

선택과 집중


넣어달라는 정보는 많고, 그렇다고 스크롤 길어지는 건 싫다 하고. 이럴 경우 디자이너들이 타협점을 보는 방식은 제일 중요한 정보만 노출하고 나머지 정보는 다른 곳에 노출시키는 것이다. 선택과 집중을 하는 것이다.


“이 영역 안에 노출시키려고 하면, 둘 중 하나 선택하셔야 돼요. 이 정보 중 중요한 것만 보여주거나, 스크롤을 줄이거나.”


위에 얘기한 것처럼 [냉장고 안에 코끼리를 다 쑤셔 넣는데 코끼리 형태가 다 보이게] 한다면 이 디자인은 사용성이 좋지 못할 것이다. 코끼리의 눈과 코, 그리고 귀도 안 보일 것이다. 이때 [코끼리의 코를 보이게 할래, 귀를 보이게 할래]를 고르게 한다. (물론 이렇게 우선순위 정보를 고르라고 해도 둘 다 중요하다고 해서 못 고르는 경우가 많고, 디자인 정책을 크게 벗어나는 디자인을 요구할 때가 많다)


29cm와 지그재그 쿠폰. 유의사항을 접고 펼치기(folding) 방식으로 숨겨서 페이지를 간소화했다

가령 쿠폰을 예로 들면, 쿠폰에서 제일 중요한 것은 [얼마나 할인해 주는 쿠폰인지] [어떤 혜택이 있는 쿠폰인지]다. 이 부분은 정말 쿠폰에서 최우선 정보라서 이 부분은 필수로 쿠폰에 노출시켜야 한다. 이다음으로 중요한 것은 [쿠폰 받는 액션]이다. 버튼을 받게 하든지, 이미 지급을 완료한 상태인지를 표시해야 한다. 그럼 이 외의 정보들은 어떻게 하냐면, 이 페이지에서 [숨긴다]. 버튼을 눌렀을 때 해당 영역이 표시되는 접고 펼치기(folding) 방식을 사용하거나 팝업을 사용한다. 중요도가 낮은 정보들은 “확인하고 싶은 사용자들은 이 버튼을 누르면 확인할 수 있어요”라고 유도하는 것이다.


이처럼 정보의 우선순위 위계를 정해서 제일 중요한 정보는 가장 잘 보이게 하고, 중요도가 낮은 정보들은 1차, 2차 flow를 응용해서 숨기는 방법을 사용한다. 아예 정보를 생략하는 방법도 있고, 어쩔 수 없이 스크롤이 길어지는 것을 감안하더라도 정보가 잘 구분될 수 있게 [덩어리화]를 잘하는 방법도 있다.


아마 대다수의 디자이너들은 자신들이 디자인하는 영역의 사이즈가 제한되어 있을 것이다. 그리고 내용이 너무 많아서 복잡해진 디자인을 [잘 된 디자인]으로 부르는 경우도 거의 없다. 이를 잘 알기 때문에 작은 영역에서 많은 정보가 한 번에 들어가면 어떤 결과물이 나올지 떠올라서 힘들어한다. 이 많은 정보를 꾸역꾸역 넣는다 해도 사용자가 보지 않는다. 그러면 이 디자인에서 정보를 얻을 수 없어지고, 이 디자인은 쓸모없어진다. 마케팅 디자인은 사용자가 [나에게 필요한 혜택]을 확인하는 1차 관문이다. 여기서 1차 관문이라고 하는 것은, 2차 또는 3차 관문에서도 정보를 확인할 수 있다는 것이다. 중요도가 낮은 정보는 굳이 1차 관문에 보여주지 않아도 2, 3차 관문이 있다면 그곳에서도 확인할 수 있다. 


만약 마케터와 디자이너가 서로의 의견을 좁히지 못하는 상황에서 이 글을 디자이너들이 본다면 내가 디자인 작업할 때 넣어야 하는 정보를 어떻게 정리하는지, 다른 사람들이 내 디자인에서 정보를 알 수 없다고 하는지를 생각해 봤으면 좋겠다. 내가 만든 쿠폰을 보고 쿠폰 받는데 무리가 없는지 주변 사람들에게 물어보는 것도 좋다. 그리고 만약에 이 글을 마케터나 기획자가 본다면… 모바일 환경에서 보여줄 수 있는 정보는 제한되어 있는 것을 알았으면 좋겠다. 적당한 정보는 보여줄 수 있으나, 너무 많은 정보는 모두 보여주기 어렵다. 특히나 페이지의 스크롤을 줄이고 싶은 니즈가 크다면 더더욱 이 부분을 기억했으면 좋겠다.


(이벤트 페이지 기획하는 이 세상의 모든 마케터 기획자들 응원합니다…. 우리 모두 평행선 달리지 말고 의견 조율 잘해서 접점을 찾자고요!)

HYO의 더 많은 글이 궁금하다면? 👉 https://brunch.co.kr/@designerhyo/

HYO
글쓴이

HYO

마케터와 제일 가까이서, 제일 오래 함께 일한 디자이너입니다.

큐레이션된 정보를 전달드립니다. 

합격보상금 100만원

[블라이드 코스메틱] 해외 마케터 시니어

밸류크리에이션서비스(블라이드)

2025-05-16

합격보상금 100만원

디지털 퍼포먼스 마케팅

솜씨당컴퍼니

상시

합격보상금 100만원

[hourplace] 퍼포먼스 마케터

먼치팩토리

상시

합격보상금 100만원

그로스 마케터

큐피스트(글램)

상시

합격보상금 100만원

[마플샵] 그로스 마케터

마플코퍼레이션(Marpple)

2025-04-30

합격보상금 100만원

글로벌 모바일게임 Performance Marketer (3년이상)

비트망고(BitMango)

상시

출처: 원티드

답글 남기기

브런치프로필 - hyo jin Kwon

HYO

다른 아티클 보기

시니어 마케팅 디자이너가 본 여기어때 BX 디자인

회의 참석자 말고 [회의 진행자]

배너 작업의 모순

아직 구독 전이신가요?
구독하고 더 많은 콘텐츠를 확인해보세요.

이름/회사명

마케터에게 제안하기

마케팅, 강연, 출판, 프로젝트 제안을 해보세요