[10/01] 톡딜위크 재구성해보기

카카오톡 > 쇼핑 > 톡딜위크 메뉴 리디자인

어제 진행하던 쿠팡페이지 클로닝은 사실 오늘을 위한 준비 단계였다.

클로닝으로 얻은 분석내용을 가지고 다음 페이지를 리디자인 하는 과제이다.

 

그래서 먼저 Figma로 뚝딱뚝딱 만들기 전에, 해당 스크린샷 페이지를 보고 페이지의 문제점 및 개선점을 생각해보았다.

 

우선 하나하나 디테일을 보기 전에 왜 이 페이지가 이렇게 디자인 될수 밖에 없었는지, 디자이너의 생각을 좇아가보았다.

 

 

[디자이너의 생각 읽어보기]

1. Screen이 한정적이다!

 

톡딜위크... 매일매일 카카오톡 어플을 켜보는 입장에서, 해당 페이지가 있는지 몰랐다...

어찌 되었건 우선 해당 쇼핑 페이지는 카카오톡 App내부에 존재하고 있다.

(카카오톡 어플 자체에 있는 User들을 확보하겠다는 카카오의 굳은 의지가 보인다..)

 

이말은 즉슨, 여타 쇼핑몰 페이지와는 다르게 하단 네비게이션 바에서 쇼핑관련 정보를 넣을 수 있는 메뉴는 단 하나!

-> 그렇기에 톡딜위크(특가)와 같은 페이지로 이동하는 상단 탭바가 불가피하게 존재해야한다

 

+ 카카오톡 사용자에게 혼동을 주지 않기 위해, 최상단에는 '쇼핑'이라는 텍스트가 크게 존재해야 한다

= 벌써, 스크린의 3/8은 다른 외부요인에 먹혀버렸다

설상가상으로, 스크롤이 가능하다는 인식을 심어야했다!

현재 히어로섹션으로 정한 특가상품 그리드는 그 특성상 화면을 차지하는 height가 높을 수 밖에 없다.

일반적인 쇼핑몰 상품 리스트 페이지라면 위 아래로 무한스크롤이 가능하게 만들었겠지만, 특가 상품의 경우 (카카오와 제휴를 맺은 것으로 보이는) 그 상품 수가 적고, 어른의 사정이 있기에... 최대한 노출이 많이되어야 한다

 

-> 페이지 형식으로 구현 할 수 밖에 없었다 & 한 페이지에 최대한 많은 상품을 노출시킬 수 밖에 없었다

 

그렇게 되다보니 스크롤 기능이 자연스래 User인식에서 멀어진다

-> 아래 상세페이지로 보이는 파트로 스크롤유도가 덜 될 것 같다

-> 화면에 아래 상세페이지가 살짝 보이게 설계 할 수 밖에 없었다

<결국 특가상품그리드가 더 작아지게 된다>

 

2. 각 상품 카드에서 들어가야 할 정보가 너무 많았다

 

위에서 언급한대로 최대한 많은 상품카드가 노출되어야하기 때문에 텍스트가 들어갈 공간은 매우 작아졌다
그런데 카카오의 해당 페이지의 경우, 타 쇼핑몰 사이트에 비해 들어가야할 정보가 몇가지 더 있었다.

그래서 내가 유추한 디자이너가 들었을 requirement는,

 

첫쨰, 해당 가격이 '톡딜가'임이 User에게 인식되어야한다 -> 톡딜가가 명시

둘째, 톡딜가에서 더 할인된 최대혜택가도 명시되어야한다

그렇게 정보량이 늘어났기에, 카드의 body는 텍스트로 꽉차야했다.

 

나는 이러했을 디자이너의 상황을 유추했고, 나 또한 위 상황에 있다고 가정하고 리디자인을 시도했다

내가 합의한 가상상황을 정리하면 다음과 같다

 

1. 스크린에서 내가 사용 할 수 있는 상품정보그리드의 크기는 기존과 동일하다

2. 나 또한 2*3의 그리드를 사용한다

2. 현재 카드 내의 정보들은 리디자인시에도 동일해야한다

 

그렇게 제작한 나의 개선방향은 다음과 같다.

 

텍스트 재배치 - 카드 내에 시나리오 만들기 

 

Brand Color를 사용한 근거 : 카카오Talk Deal가

 

톡딜가 톡딜가.. 그러니까 이런 네이밍이 나온 이유는 당연히 카카오'톡'만의 가격이다 이거 아니겠는가?

그말은 즉슨, 특가의 네이밍부터 이미 카카오톡이라는 브랜드 이미지를 각인시키겠다이다.

심지어 현재 페이지가 열려있는 '톡딜확인' Tab의 오른쪽에는 추가할인  이라고 브랜드 컬러를 입힌 라벨도 있다.

이 페이지가 완전히 카카오톡 쇼핑탭에서 브랜드이미지, 컬러를 사용해야하는 사실상 메이페이지이다!

그런데 기존 화면의 카드 내 톡딜가는 브랜드 이미지와 전혀 관계없는 파란색이다

그리고 페이지 내 브랜드컬러인 노랑색은 저 추가할인   뿐이다 1%도 안된다.

 

그래서 각 카드의 톡틸가에 브랜드 컬러를 도입하였다.

그런데 막상 저 카카오옐로를 입히니 딱히 가시성이 없어보였다...

 

이때, 내가 과제에서 건너뛰고 클로닝하지 않았던, 네이버쇼핑 페이지에서 영감을 얻었다.

 

 

 

 

분명 네이버의 브랜드 컬러는 연두색/녹색이나,

네이버스토어의 경우, 스토어만의 브랜드 컬러로 형광보라를 채택하고, Tab과 각 상품카드에서 이 컬러를 적극 활용하였다!

(아마도 카카오처럼, 저 연두색이 흰 배경에 어울리지 않고, 강조효과도 미미해서 그랬을거 같다)

 

그래서 나또한 카카오 쇼핑에 노란색 이외의 새로운 색을 함께 Priority로 사용하기로 하였고,

위의 톡딜가 컬러가 그 결과이다. 

 

 

...

이거 '톡딜가'라서 싼거야!

라는 메시지를 강렬히 전달하기 위해서 기존 노란색의 명도도 높였고, 이를 그라데이션으로 자연스럽게 이어지는 연두계열과 그라데이션으로 색조합하였다.

 

숫자정보의 연속, 서로다른 정렬로 해결하기

여타 쇼핑 플랫폼과는 다르게, 카카오 카드에서는 Long한 숫자정보가 3개나 있다.

이들을 한정렬로 연속되어 표기하면 가독성이 떨어진다고 판단했다.

98을 찾아보세요, 출저 : Youtube

 

그래서 세개의 가격 정보 중, 가장 중요도가 낮은 '할인전 가격'을 상품라벨과 톡딜가 사이로 옮겼다

(이는 쿠팡을 클로닝하면서 얻은 아이디어이다)

이와 동시에 상품라벨과의 gap을 줄여서, User가 상품라벨을 다 보는 동시에, 이전 가격을 인식하게 유도했다.

 

위를 유도하려다 보니, 할인전 가격은 오른쪽 정렬이 더 좋아보였고, 자연스럽게 최대혜택가 정보도 오른쪽 배치를 했다.

 

text container 간 gap 0

...자연스럽게라고는 말했지만 최대혜택가를 오른쪽으로 옮긴 것에 두가지 의의가 있다.

 

1. 안그래도 좁은 카드, Text Container간 Gap을 줄이고싶다!
    -> 그런데 그냥 Gap줄이면, 안그래도 가독성 안좋은데, 최악이 되잖아?

= 가격정보 두개 오른쪽 정렬로 카드 중안부에 빈공간 만들어서 가독성 높이기!

 

2. User의 시선 시나리오 고려

 

내가 생각한 시선 시나리오는 다음과 같다

 

 

"톡딜가라고?" "8,900원?"
"음 뭔데?... 보니까 OOOOO상품이구만아니잠깐 원래 25만원?"
"그리고 더 싸지면 최대 OOO원?
나쁘지 않네 한번 상세페이지 볼까?

 

사실 최대할인가가 중요도는 떨어지지만, CTA 전환에 있어서 매력적인 정보정도로 생각이 들었다.

그래서 마지막으로 시선이 갔으면 했고, (마지막으로 안갈 것 같기도 하지만)

그렇다면, 할인전 가격과 정렬을 맞춰야 한다고 생각했다

 

(글씨가 세컨더리 컬러이기때문에, 톡딜가 이후로 시선이 올 것 같기도 하다만, 막상 상단 이미지가 있다면, 충분히 마지막에 올 수 있다고 생각한다)

 

 

 

최종 결과는 다음과 같다.

상단 메뉴바의 "추가할인"도 새로운 쇼핑탭의 퍼스널 컬러를 적용해서,

톡딜가가 카카오에서만 추가할인 되는 것이라는 인식을 유도했으며,

해당 컬러가 5%정도로 적절히 이용되었다고 생각한다

 

그리고 오른쪽 정렬한 숫자들 덕분에 각 가격정보 간의 가시성도 개선되었으며, 각 그리드간의 경계를 나누는 효과도 주었다고 생각한다.

 

 

글을 작성하는 10월 1일 시점, 

해당 페이지는 카카오톡 업데이트로 리뉴얼된 상태이다.

시간이 된다면, 리뉴얼 된 것과도 비교분석 하고 싶으나

시간이 없으므로 passs....

 

 

 

오늘 그외에 아이콘 제작 실습도 진행하였으나,

딱히 기록은 하지 않을 예정

 

내일도 빡세게 함 해보자