와이어프레임 완성, ui 컴포넌트 만들기 시작하기(TIL 19일)

오전 11시쯤에 후딱 완성하고 질문이 몇개 생겨서 튜터님께 질문드리러 갔다!

1. 해결하고 싶은 사용자 문제를 기반으로 추가한 UI 요소인데, 이번 프로젝트에도 여러 아이디어를 먼저 뽑고 그중 하나를 선택해 와이어프레임에 적용하는 게 맞는지, 아니면 가볍게 Ui로 풀어내도 괜찮나요? ->이번 프로젝트에서는 ok
2. IA 구조에 첫번째 화면에다가 검색 필드, 필터 칩을 추가했는데, 이 요소들이 IA 구조로 들어가도 괜찮나요? -> ok
3. 첫번째 와이어프레임의 검색창 밑에 검색 결과(148684개, 추천순 필터)가 있어도 괜찮을까요? 와이어프레임을 너무 복잡하게 구성한 건 아닐까요? -> 이미 만들어진 앱을 개선하는 게 아니라 아무것도 없는 어플리케이션의 화면을 구성할 때에는 이렇게 구성해도 ok, 이미 있는 경우라면 그 위치에 네모 모양으로 여기 요소가 있다고 영역만 잡아줘도 ok!

이정도면 와이어프레임은 완성됐다고 판단해서 ui 디자인에 들어갔다. 와이어프레임을 조금 자세하게 구성했기 때문에, 반복되는 ui가 대충 생각이 되어서 컴포넌트를 만들기 전에 디자인 시스템을 일부 만들어두면 효율적으로 작업할 수 있다고 판단했다.

 

그래서 특강을 듣기 전에 컬러 시스템과 타이포그래피를 만들어두었다.

 

특강을 듣고 난 후에, 레드 컬러는 위험이라는 시각적 의미를 가지고 있기 때문에 초보자가 레드를 브랜드 컬러로 설정하면 조금 어려울 수 있다고 하셔서 추천해주신 블루 색깔로 메인 컬러를 변경하였다.

 

프라이머리 컬러를 블루로 변경한 것

차례대로 무신사, 중고나라, 번개장터, 당근마켓의 검색 화면 ui를 캡쳐한 것

기존 3가지 중고거래 플랫폼만 보면서 ui 디자인 화면을 만들면 그냥 단순 모작이 될까봐 내가 자주 사용하는 커머스 플랫폼 무신사의 검색 화면을 캡쳐해서 다른 화면과의 공통점이 뭘까 비교하면서 컴포넌트를 만들기 시작했다.

 

처음 만든 컴포넌트는 card인데, 썸네일, 상품 이름 라벨, 가격 텍스트로 구성되어있다. 두 텍스트끼리의 간격보다 이미지와 텍스트 묶음의 간격이 더 큰데, 무신사, 중고나라, 번개장터의 간격을 비교해보니 거의 비슷하게 간격이 벌어져있다는 것을 발견했다.

 

그래서 썸네일와 텍스트 묶음의 간격은 12로, 텍스트 간의 간격은 4로 정했다.

 

지금은 필터 칩에 들어갈 아이콘의 크기를 조정하고 있는데, 벌써 9시라 내일 이어서 ui 컴포넌트를 만들 예정이다. 주말 내로 최대한 화면 디자인을 끝내서 월요일 디자인 카타가 끝나자마자 튜터님께 피드백을 받을 예정이다. 수요일에 과제 제출이니까 앞으로 파이팅 해야겠다!!!