팀 프로젝트 진행 중 🔥

📌 도서관 검색 화면 UI 개선

(교보문고 전자도서관 어플을 켜고 가장 처음 마주한 화면)

이거 이북 리더 이런거 아니었나...?
도서관을 검색하라고?
내가 이용하는 도서관이 있어...?
어떻게 쓰는지도 모르겠는데 책을 뭘 읽냐..
그럼 검색을 쉽게할 수 있도록 도서관 검색 화면 UI를 개선해보자!

🤔 어떻게 개선을 할 수 있을까?

1. 지역별 구립(공공) 도서관을 선택 ➡️ 지역 선택 필요
2. 내가 속한 기관 선택 ➡️ 기관별 분류 필요

필요한 컴포넌트

1. 탭 바
2. 인풋 필드
3. 칩
4. 리스트 아이템
5. 오버레이 (팀장님께서 맡아주심)

주요 레퍼런스

1. 교보문고 디자인 시스템 (🔗 https://design.kyobobook.co.kr/)
2. 교보문고 어플
3. 예스 24 전자도서관
4. 캐치 테이블 (지역 선택 바텀시트)

완성✨

입력 필드와 기관별 분류 탭 아래에 도서관 리스트를 가나다 순서대로 배치를 함으로써
사용자가 스크롤을 하며 도서관을 선택할 수도 있고 사용자에게 어떤 도서관을 검색하라는 것인지 알려주는 일종의 가이드역할도 할 수 있다고 생각하여 추가하였다.

또한 지역별 공공 도서관을 사용하는 사용자들을 위해 바텀 시트를 추가하여 지역을 선택하면 해당 지역의 도서관을 확인할 수 있도록 하였다.

대략 요정도 (완성 🙅‍♀️)

🎙️느낀점

디자인 시스템의 강력함을 체험했다.

만들어야 할 요소들이 그리 많지는 않았지만 아무것도 없는 상태에서 만든다고 생각해보면 고민이 많이 되고 정해야 할 항목들이 많았을 것 이다.

일관된 UI를 제공해야한다는 목적이 있었기 때문에 막히는 부분이 있어도 최대한 디자인 시스템을 따르려고 노력하여 빠르게 결정해나갈 수 있었다.

또한 협업을 할 때도 디자인 시스템이 타당한 이유와 목표점이 되기 때문에 도움이 많이 됐다.

앞으로 작업할 때 적용해보자!