딛자인 데이 :: 02 Credit Card 결제
카드 결제 페이지를 만들어보자!
두 번째 딛자인 데이는 Credit Card Checkout 입니다.
역시나 '라프텔'을 바탕으로 리디자인 시작!
1. 목표
심플 & 간편 카드 결제 페이지.
2.리서치 내용
일단 '결제'하면 무조건 '간편'이 최고라고 생각한다. 사실 난 콘텐츠를 소비할 때, 구매 손해 이런 거 별로 생각 안 한다. 그 서비스에 내가 원하는 콘텐츠가 있고 그 콘텐츠에 대한 결제가 물 흐르듯 잘 되는지가 중요하다.
할인 같은 건 그 이후에 추가적인 부분이랄까? 있어도 없어도 상관없는.
아무튼 '간편'을 중점으로 (설령 실상은 간편하지 않을지언정 보자마자 '여기 결제는 간편해 보이는걸?' 하는 느낌적인 느낌이 드는...) 디자인을 해보려고 한다.
이번에는 글 형식의 이론적인 부분보다는 비주얼적인 부분을 더 많이 참고했다.
3.UI 레이아웃 그리기
결제 페이지 역시 앞서 디자인한 회원가입 페이지의 Form을 그대로 따랐다.
통일성을 줄 수 있고 기본적으로 컴포넌트 관리 측면에서도 용이하다고 생각했다.
밑에 영상에서 보듯이 Form을 하나의 Component로써 Symbol로 저장해놨기 때문에 손쉽게 쓸 수 있다.
덧붙이자면 Sketch는 사실 Symbol을 다루는 게 핵심이다. 그래서 초기에 이걸 쓰기 위해 Medium과 브런치에서 많이 보고 배웠다. 그런데 아직도 이 Symbol을 어떻게 효율적으로 관리해야 할지 아리송하다.
그리고 이 관리라는 것은 곧 UI Kit라 불리는 어마 무시한 것으로 이어지기도 하다.
몇 달 전에 티몬이 대대적으로 UI Kit를 제작한 과정을 담은 브런치 글을 본 적이 있다.
엄청나게 전문적이고 방법론적인 프로세스를 통해 UI Kit를 만들어내는 그 일련의 과정을 보면서,
'과연 나도 쏟아지는 일의 홍수 속에서 이걸 해낼 수 있을까?' 하는 생각과 동시에 언젠가 해야 할 일... 까짓것 틈틈이 해보지! 하는 이상한 근자감에 차기도 했다.
그래서 요번에...iOS 디자인에 드디어 힘을 쏟을 기회가 왔는데, 이때 시행착오를 겪으며 UI Kit를 한번 만들어 봐야겠다.
대략의 Prototype저번과 마찬가지로 컬러를 모두 뺀 상태에서 레이아웃만 잡아보았다. 스트리밍 서비스이긴 하지만 상품을 구매하는 과정은 이커머스 쇼핑몰과 다를 바 없다고 생각했다. 그래서 왼쪽에 상품 이미지를 보여주고 중요한 가격을 대문짝만 하게 보여준 다음에 필요한 카드 정보를 오른쪽에서 적도록 하였다.
4.GUI 작업
결과물 따란. 그런데 지금 보니깐 약간 의문인 게, 저 해당 카드 정보를 자동 저장하고 다음 구매에도 사용하겠냐는 옵션은 나라면 왠지 안 할 것 같기도 하다. 뭔가 카드 정보가 자동 저장된다는 게 꺼림칙하다고 해야 되나? 굳이 없어도 될 옵션 같기도 하다.
카드정보 입력 단계
구매 완료 단계구매 완료 후에 감사 문구 페이지를 보여주면 어떨까 싶었다. 오프라인이라고 생각하면 고객이 구매를 하면 점원이 상품과 함께 '감사합니다'라는 말을 해준다. 그래서 온라인에서도 뭔가 결제 성공! 띅-! 이런 멘트보다는 현실 세계와 똑같이 이런 감사의 말을 전하는 게 UX 측면에서 사소하지만 좀 더 정감 있고 좋지 않을까 생각했다.
그리고 원래 여기서 나의 이상은 이러했다. 구매하기를 누르면 저 왼쪽의 바탕 컬러가 옆으로 늘어나면서 이미지가 가운데로 오고 감사 문구 버튼이 스무스하게 나타나는... 아주... 유려한... 인터랙션...
난 그것을 하고 싶다... 하지만 아직 못한다....ㅠㅠ
5. 결론 및 느낀 점
1) 역시나 한 주제에 대한 프로젝트를 하는데에 일주일은 조금 짧은 것 같다. 특히 카드 결제 페이지는 모바일 버전도 만들어보려고 했으나 그것까지는 못했다. (다음에 해봐야겠다.)
어쨌든 해냈다! 호놀룰루! 시간이 지나면 속도가 붙어서 잘 되지 않을까?
2) 새삼 구매는 정말 중요한 부분 중 하나인 것 같다. 민감한 사항의 카드 정보도 적어야 하고 거기에다가 내 피 같은 돈까지 나가니깐...! 돈을 쓰는 과정에서 어떻게 하면 좀 더 행복(?)하게 결제를 완료할 수 있을지를 고민해봐야겠다.
3) 구매 완료 단계를 멋지구리한 인터랙션으로 보여주고 싶었지만 역시나 이상과 현실의 괴리감이란(...) 구현하는 디자이너가 되기 위해 부지런히 공부해야겠다.
4) 11월에는 UI Kit 만들기 도전! 좀 더 효율적인 디자인을 하고 싶다.
5) 다음 주제는 'Landing Page'이다. 우리 서비스는 랜딩페이지가 따로 없다. 홈의 콘텐츠를 보여주는 게 더 매혹적이라 따로 보여줄 필요가 없다. 만약 라프텔에 랜딩페이지가 있다면 어떤 모습일까? 궁금하다. 그럼 다음 주제에서 봐요.
감사합니다.
