[UXUI TIL] 230120_UI 디자인 디벨롭
01
제로베이스 ㅣ 포트폴리오 과제
1) 디자인 가이드라인 수정
제작한 가이드라인을 UI 디자인 시안에 적용해 보면서 수정했고 사용하지 않는 컬러나 폰트를 지웠다. 메인 컬러는 진한 파란색에서 좀 더 부드러운 느낌으로 수정하여 친근감을 더했다. 진한 파란색일 때 계속 토스 같은 느낌이 들었는데..ㅠㅋㅋ 바꾸니까 산뜻해 보여서 맘에 든다!
하단 탭 아이콘의 화폐 기호는 로고에 있는 '쀼'로 바꿨다. '쀼'에 화폐 기호가 포함돼 있다! 그리고 기본 아이콘은 iOS에서 제공하는 'SF Symbols'를 사용했다.
2) UI 컴포넌트 정리
UI 컴포넌트에 있는 아이콘을 컴포넌트로 만든 걸로 교체했고, 폰트나 컬러도 스타일로 지정해 놓은 걸로 교체했다. 그리고 필요한 UI 컴포넌트를 추가했다.
3) UI 디자인 디벨롭
원래 가계부 페이지에서 우리집/마이로 나누어 FAB 형태로 디자인 했었다. 그런데 내역 추가하기 버튼이 더 중요하지 않겠냐는 피드백을 받고 어떻게 정보 위계질서를 정리할지 많은 고민을 했다. 좀 많이 막막했다ㅠ 그래서 추가하기를 FAB로 넣었고, 한 페이지에서 우리집 가계부와 내 개인 가계부를 확인할 수 있도록 하되 '프라이버시만 보기'를 필터링처럼 넣어서 선택적으로 볼 수 있도록 수정했다. 쿠팡의 로켓배송만 보기처럼!
자산 페이지에서는 원래 상단 탭 형태로 전체/남편/아내를 나누고, 하단 FAB 형태로 우리집/마이를 나누었었다. 이 부분도 가계부 페이지를 수정하면서 일관성을 유지하기 위해 수정했다. 상단에 세그먼트 피커의 형태로 우리집/프라이버시(마이였는데 수정함)으로 나누었다. 그리고 우리집 탭 안에서는 '남편 자산만', '아내 자산만'을 넣어서 필터링하여 볼 수 있도록 했다.
