반죽을 할 때 어떻게 치댈까?
Daily Ui 2일 차
Daily Ui
'Daily Ui'는 하루에 하나씩(주말 제외) 주제를 이메일로 보내주며 '형태'에 구속받지 않고 내 맘대로 디자인하여 #daily ui를 붙여 인터넷 세상에 공유하는 챌린지를 운영한다. 이는 100일 동안 계속되며 중간중간에 상품을 지급한다고 한다.
2일 차의 주제는
신용카드 결제
E-커머스 앱을 사용하는 사용자 혹은 E-커머스 개발자 입장에서 신용카드 결제 화면은 없어서는 안 되는 필수 화면이다. 사용자는 나의 장바구니의 물건들을 구매하는 것을 검토하며 결제 방식을 택할 수 있다. 그리고 개발자는 사용자의 주문이 잘못되거나 사용자가 주문을 환불하는 번거로움을 거치지 않게 하며 사용자의 결제가 올바르게 되도록 하기에 필수 화면이라고 할 수 있다.
https://www.figma.com/file/oDvD5dHAuNAP7dMHIeatVU/1-10?node-id=20%3A121&t=F4W3WiyuidBnxEwZ-1
2일 차 Ui의 콘셉트는 반죽이다. 빵 반죽을 할 때 제일 중요한 것은 밀가루, 계란, 물 등을 잘 치대 하나의 덩어리로 만들어지냐 안 만들어지냐이다.(본인은 팬케이크 만들다가 덩어리가 안 됐음)
사용한 폰트는 Eland Choice라는 폰트로 Eland 40주년을 맞아 개발된 것이다. 고딕으로 디자인되어 가독성이 좋으며 세련된 것이 특징이다.
컬러칩은
Purple(Hex : 4327FD)
BG(Hex : 202020)
Gray(Hex : 404040)
Gray 80%(Hex : 666666)
Gray 50%(Hex : A0A0A0)
Gray 10%(Hex : ECECEC)
를 사용하였고 상단의 피그마 링크에 접속을 하여 더 자세하게 볼 수 있다.
결제 창이다.
앞에서 언급한 것처럼 같은 카테고리 별로 덩어리가 져있는 모습을 볼 수 있다. 사람들은 이렇게 말할 수도 있다. '엥? 근데 그냥 사각형으로 구분 져서 덩어리 지게 할 수 있는 거 아닌가??' 맞다.
무신사 결제화면이 화면은 글로벌 패션 플랫폼 1등(2022.03 기준 시장 점유율 50%)인 무신사의 결제 화면이다.
수익 측면에선 무신사에게 가장 중요한 화면 중의 하나이다. 무신사는 사각형 레이아웃과 두꺼운 구분선을 통해 덩어리를 지고 있다.
디자인에는 이게 맞고 저게 맞는 것은 없다. 하지만 이 화면은 실눈을 뜨면 구분선이 안 보인다.(구분선 말고도 덩어리 지게 할 수 있는 요소들은 많다.)
본인의 해결책은 다크 모드와 Black 구분선이다.
유저의 시선
당신은 3.5㎠의 화면을 볼 때 위부터 보는 가? 아래부터 보는 가?(사바사겠지만) 위부터 보지 않는가? 위부터 봤을 때 자연스러운 내용으로 만들었다.
주문 상품
배송지 목록
결제 방식
결제 동의
결제하기
대형마트에서 장을 본다고 가정해 보자.(온라인과 오프라인은 다르겠지만..) 우리는 카트에 살 물건들을 담는다. 물건들을 다 담고 계산대에 가 결제할 카드를 내밀며 결제를 한다. 어쩌면 당연한 거지만 난 이 당연한 거에 집중을 했다.
온라인 결제도 똑같은 과정을 통해 진행되길 바랐다.
주문 상품에서 내가 살 제품들에 대한 검토를 하고 어디로 와야 할지 정한 다음 결제를 어떻게 할지 생각한 다음 마지막에 결제하는 절차를 만들었다. (배송지의 유무는 온라인 / 오프라인에 따라 다르지만 온라인 특성상 배송지는 어쩔 수 없기에 넘어간다.)
만약!!
결제방식을 신용카드로 하고 주문 상품을 보여준다면 마트에서 카드를 들고 카트를 끌고 다니는 거나 다름없다. 앞뒤가 안 맞고 서순이 맞지 않는 것이다.
앞에서 유저의 시선을 중요하게 생각했다고 했다. 위 화면을 실눈 뜨고 봐보면 채도가 높은 '배송지 별명'과 '결제하기'가 눈길이 갈 것이다. 결제하기까지 가는 서순도 중요하지만 요소들 간에 위계질서 또한 중요하다. 배송지는 무시할 수 없는 요소다.(자취 시작하고 4번이나 본가로 택배 보냄) 내가 이사를 갈 수도 있고 누군가에게 시켜줄 수도 있고 친구 집에 놀러 가서 시킬 수도 있고... 변수가 너무 많다. 따라서 배송지를 강조하는 것은 유저가 유저 뜻대로 배송을 완료하여 반품, 택배 기사님에게 전화 등의 번거롭고 짜증 나는 것을 미연에 방지할 수 있다.
그럼 '결제하기'는 왜 강조를 했냐? 결제하는 화면은 대부분 E-커머스 서비스이다. E-커머스는 유저들의 결제들로 비즈니스를 운영하고 기업 규모가 커진다. 그럼 답이 될 것이다.
어김없이 돌아온 쉬는 시간(신이 만든 시간)
오늘의 디자인은 사실 1시간 안에 작업하였다.
타임테이블을 짜보면
이메일이 오고부터 토론까지의 시간들이다. 이 날 시간이 촉박했다. 어제는 전에 작업하던 거 수정하는 작업만 하여서 촉박하진 않았지만 오늘은 그랬다.
사실 뭐 업무가 없을 때마다 피그마 작업하고 브런치 작성하고 레퍼런스 찾으면서 빈둥대지만 뭔가 오늘은 그럴 시간이 없었던 것도 있었다.
결론은 그래서 토론 시간 미뤘다. 그렇다 간단한 해결책이었다.
쉬는 시간 끝
어떤 디자인보다 Ui 디자인은 유저를 심층 있게 생각해야 한다. 유저의 손가락 동선, 유저의 생각, 유저의 사고방식 등을 고려하여야 UX를 적용했구나~라고 말할 수 있다. 오늘의 디자인은 유저의 감각 중 시각에 초점을 두었다. 숏폼 SNS가 유행하는 시점에 유저의 시각을 고민하는 것은 시간을 투자할 만하다.
결제 화면이 누가 보면 별 게 아니라고 생각이 들지만 서비스의 성패는 작은 요소가
파장
을 일으킨다고 생각한다.
(파장을 보니 짜장면이 먹고 싶다.)
피그마로 작업하다 보면 나의 꿈과 희망을 펼치고 싶어지는 일들이 많은데, 이번 리스트 열고 닫음이다. 한번 보면 신기해할 거 같다.
