[ Daily UI ] 002. Credit Card Checkout 디자인

Daily UI의 두 번째 미션은 바로, 신용카드 결제 화면 디자인이다.

어제(챌린지 첫날) 메인 레퍼런스 없이 무턱대고 도전했더니 어색한 결과물이 나왔었다.

 

아직 난 UX UI 초보이기도 하고, 아는 것보다 배울 게 훨씬 더 많으니

일단 레퍼런스를 먼저 잡고 들어가기로 했다.

---

오늘의 메인 레퍼런스: 카카오 T

(말이 메인 레퍼런스지 그냥 모작이다..!)

 위 사진은 포인트, 쿠폰 기능만 빼고 모작한 결과물이다.

 

 카카오 T는 최종적으로 사용자가 눌러야 할 '적용하기' 버튼에 행동 유도성이 높다. 카카오 T의 '적용하기' 버튼은 누가 봐도 저게 핵심 버튼이겠구나를 알 수 있다.

 

 또한 '취소'버튼은 고스트 버튼(얇은 선으로 테두리가 있고, 투명하거나 비어있는 버튼)을 사용하여 눈에 띄지 않게 제작했다. 실제로 고스트 버튼을 행동 유도 버튼으로 이용하는 것은 좋지 않다고 한다!

 

 

<새롭게 알게 된 점>

-화면 가장자리와 콘텐츠 간격은 20px

-순수 #000000을 쓰는 올블랙은 없다.

-버튼 round값은 5

-카드 round값은 10

-내비게이션 점 크기 7px*7px

-폰트 크기는 주로 18, 15, 13

 (아무래도 웹이 아닌 앱이라 폰트 최대 크기가 18인 듯하다)