[UX/UI] Daily UI : 002

002. 신용카드 결제 화면 

두번째 UI 챌린지는 신용카드 결제 (Check Out) 화면이다. 

 

아직 툴 다루는 것도 익숙치 않아 스스로 디자인하는 것이 조금 어려워서 

 

피그마에 익숙해질겸 기존 서비스의 화면을캡처 해서 목업을 똑같이 만들어보는 연습도 좋은 것 같다. 

 

직접 앱을 다운 받아 화면 캡처하는 것도 괜찮지만 mobbin이나 wwit에서 원하는 화면을 쉽게 찾아볼 수 있다.

(혹시 mobbin.design을 모르시는 분들을 위해) 

https://mobbin.design

은 해외 유명 서비스들의 어플 전체 화면을 쉽게 찾아볼 수 있는 사이트다. 

국내에도 거의 동일한 서비스가 있는 것도 오늘 처음 알았다. https://wwit.design

UX/UI 디자이너나 프로덕트 디자이너, PM같은 분들이 타사 서비스를 참고할 때 이용해보면 좋은 것 같다. 

What Was IT

 

002번 챌린지로는 쿠팡의 결제화면을 한개 목업을 해봤다. 

 

글씨체도 다르고 완벽히 똑같지는 않지만 연습용으로 할만했다. 

 

이 화면 하나 하는데 엄청 오래 걸렸다.. 내 손이 느린건가보다 ㅠ (앱 디자인 하시는 분들 존경..) 

 

쿠팡 화면을 따라만들어보면서 느낀건, 쿠팡 앱이 비주얼적으로 발전할 수 있는 부분들이 많이 보였다.

 

글씨도 너무 많고 일관적이지 않고 디자인 시스템이 아름답다고 느껴지지는 않는다. 

 

정보가 많아 꼭 필요한 메인 버튼이랑 가격 같은거 외에는 사실 눈에 들어오지도 않는다. 

 

요소들이 그리드에 적절하게 배치되어 보이지도 않는 것처럼 느껴졌다. 

 

쿠팡은 내가 제일 자주이용하는 앱중 하나라서, 애정이 있기 때문에 나중에 포트폴리오 프로젝트로 쿠팡 리디자인에 꼭 도전해보고싶다. 

 

다음은 피그마로 만들어본 화면이다. 

 

쿠팡 주문/결제 화면 목업

피그마 연습 진짜 많이 해봐야겠다.