[제로베이스 UIUX스쿨] 8주차_2

오늘은!
클론 디자인을 완성했다. 벌써 네번째 클론디자인이라 수월하게 끝이 났다.
원래는 이미지도 다 채워 넣는데 이번에는 더미만 입혔다..ㅎㅎ

완성된 쏘카 클론디자인 10가지 이유는 블로그 쓰고 작성해야짓

쏘카를 선택한 이유는 지난번 레퍼런스 분석으로 쏘카를 조사하다 쏘카에 디자인 시스템이 구축되어 있는 것을 알게된 것이 가장 큰 이유였다. 정해진 규칙이 있어 클론 디자인을 진행하며 배울 요소가 있을거라 생각했다. 또한 그동안 진행했던 클론디자인과 다른 도메인으로 진행하고 싶어서 모빌리티 분야인 쏘카 선택하였다. 
 
무신사, 마켓컬리, 당근마켓에서 볼 수 없었던 UI요소들이 많았는데 내가 진행한 페이지보다 다른 페이지에 더 많긴했다 ㅎ;ㅎ
나는 메인 홈-결제까지의 피쳐만,, 그 중에서도 핵심 화면만 제작하여 제출했다.
 
쏘카의 컴포넌트는 버튼, 태그, 알럿, 스낵바, 로딩, 프로그레스 바, 탭, 모달 등이 있었다.

로딩 처리 시간을 예측할 수 없을 때는 로딩바를 사용하고 시간을 예측할 수 있을 때 프로그레스바를 사용하고 있었다.
또한 프로그레스바를 노출할 수 있는 영역이 상대적으로 좁거나 진행 상태의 표현이 선형과 잘 어우러질 때는 원형의 프로그레스바 대신 선형 프로그레스바를 사용하고 있었다.
 
모달의 경우 바텀모달(2), 팝업모달(3), 카드 스타일 모달(1)이 있었는데, 팝업 모달의 경우 베이직 팝업, 이미지 팝업, 풀 이미지 팝업으로 나눌 수 있다.
팝업 모달은 반드시 딤 영역 위에 배치되어 있었으며 유저가 반드시 확인해야하는 정보지만 팝업모달보다 중요도가 낮은 경우 스낵바를 사용한다.

 

아 근데 쏘카 아이콘의 경우 상황에 맞게 18,24,48 사이즈의 아이콘을 사용한다하는데 클론디자인을 하며 아이콘을 만드는 중 24로 하면 넘치고 48로 하면 서로 겹쳐져서 사용하지 못하는..? 아이콘이 있었다. 터치 영역이 있으니까 32로 잡고 디자인을 하긴했는데
또 아이콘간의 간격이 달라 뭐가 맞는지 헷갈렸다 .. ㅜㅜ 멘토님께 여쭤봐야겠다.
 
아무튼 이렇게 클론 디자인 끝