[240708] UI 분석 기반의 디자인 개선

UI 분석 기반의 디자인 개선

 

개선작업

 

홈화면에서 수정해야할 부분이 두 가지가 있었는데 먼저, 탭 부분과 그 위쪽의 아이콘이 서로 달라보이게 하는 부분을 먼저 진행했다. 

우선 1. 탭 아이콘을 Filled 형식으로 바꾸어 봤지만 검색, 최근 기록, 카테고리 이 3개의 아이콘이 Filled일 때와 Stroke일 때 구분을 주기 어려워서 그것 만으로는 부족해 보였다. 그래서 2. 기존에 배경과 분리가 되지 않았던 화면 안 쪽의 아이콘들의 배경을 제거하고 배경 컬러를 연그레이로 바꾸었다. 그런데도 영역 구분이 아쉬워서 3. 드롭 섀도우의 값을 좀 더 강하게 주었다. 

이 때까지만 해도 선택된 상태를 프라이머리 컬러로 했을 때 괜찮아 보였다. 그러나 이후에 상단 영역에 색을 입히니까 두 가지 컬러가 충돌되어 보여 탭 아이콘을 그레이 스케일로 변경했다.

 

두번째로 수정한 부분은 상단 페이지 이동 버튼 부분이다. 이전에 피드백 받았던 내용을 좀 더 고민을 해봤지만 당장은 마땅한 해결 방안이 떠오르지를 않았다. 간단하지 않거나 문제를 해결하지 못하는 방향성으로만 아이디어가 떠올랐다. 그래서 우선 상단 버튼 영역과 아래쪽을 분리해야 겠다는 생각으로 카카오 T의 디자인을 참고하여 개선해 보았다.

 

왼쪽 사진 = 카카오 T / 가운데 사진 = 교보문고 어플 홈화면/ 오른쪽 사진의 첫번째 이미지가 수정 전, 나머지가 수정 후

 

상단에 중복되는 로고를 제거하고 스테이터스 바의 배경색을 제거한 후, 두가지 방식으로 나누어 진행해 보았다.

첫번째는 이전에 어플 원본에서 사용하던 각 브랜드 별 컬러를 이용하여 각 브랜드가 선택될 때마다 배경색이 바뀌도록 설정했다. 배경색이 강한 편이라 영역은 명확하게 분리되어 보이지만 너무 시선이 위쪽에 집중이 되는 경향이 있어 보인다.

두번째는 배경색은 연한 그레이 톤으로 깔고 선택 시 텍스트의 색이 바뀌는 기존의 방식을 이용했다. 확실히 대비가 적긴 하지만 너무 그레이 스케일 위주의 톤을 설정하여 시각적으로 집중해야할 부분이 보이지 않나 싶기도 하다.

 

팝업 버튼 메뉴로 바꾸고 GNB에 이북을 추가하는 방식, 배너 아래에 이북으로 이동하는 아이콘을 넣는 방식 등 시간이 좀 더 걸릴 것 같은 개선 방안은 차차 진행해보도록 해야 겠다.