필터 UI 토의 내용 공유

[nan-noo]

필터 UI 관련해서 병민 및 다른 프론트 크루와 나눴던 이야기를 공유합니다.

기존

• 모두 AND 조건 -> 필터끼리 동등한 위치
• UI: 구분 없이 리스트로 보여줌
• 리스트가 늘어날 수 있기 때문에 검색 기능 추가
  

변경

• 카테고리는 AND 조건, 카테고리 내 필터는 OR 조건
• UI: 카테고리를 구분하여 보여줌
• 카테고리를 구분했기 때문에 각 카테고리마다 필터 개수가 적어서 검색 기능 제거
  

토의 과정

1. 카테고리를 구분해서 필터를 플랫하게 보여주자.
   

2. 단계를 거치지 않고 바로 클릭할 수 있는 필터가 있으면 좋을 것 같다.
   -> 분야, 기수는 항상 고정이니 바로 클릭할 수 있는 체크박스를 만들고 태그는 양이 많으니 기존처럼 검색과 클릭을 할 수 있도록 하자.

3. 그러면 기존 방식에서 화면에 추가되는 Chip은 어디에 배치할 것인가.
   -> Chip을 제거하면 추가 필터(드롭 박스)를 닫았을 때, 어떤 필터를 선택했는 지 알기 어렵다. 따라서 Chip은 필요하다.
   -> 체크박스와 Chip이 같은 위치에 있는 것은 보기 이상하다.

   a. 라인을 두 개로 나누자.

   • 아예 사이드바로 만드는 것은 어떨까?
     -> 사이드바는 검색 내용이 많을 때 좋을 것 같은데, 지금은 필터가 적다.
   • 네이버 쇼핑몰처럼 모든 필터를 처음부터 펼쳐서 보여주자.
     -> 스터디 카드 부분이 주 내용인데, 이렇게 하면 필터 때문에 스터디 카드가 아래로 밀려난다.

   b. stackoverflow처럼 Chip이 필터 검색 인풋에 추가되도록 하자.
   -> 이 방식이 기술적으로 챌린징한 것은 맞지만, 편한 방식은 아니다.
   -> 그렇다면 기술적인 부분을 어디에서 챙길 것인가?

4. 어떤 유저가 필터 기능을 사용할까?
   -> 필터를 사용하는 유저와 검색을 사용하는 유저의 목적이 다를 것이다.

   • 필터를 사용하는 유저: 어떤 스터디를 하겠다는 구체적인 목적은 없지만, 어떤 스터디가 있는지 단순 구경하고 싶어할 것

     • 필터는 최대한 단순하게 만들어서 편하게 둘러볼 수 있도록 하자.
     • 에어비앤비처럼 클릭만으로 바로 결과를 볼 수 있도록 하자.

   • 검색을 사용하는 유저: 어떤 스터디를 하겠다는 구체적인 목적이 있어, 필터 기능보다는 검색 기능을 바로 사용할 것

     • 검색 기능을 고도화하자.
     • 유사 검색어를 처리해서 관련 스터디 디테일 페이지로 갈 수 있는 링크를 제공하자.

토의 결론

• 필터는 단순화, 검색은 고도화

[jaejae-yoo]

에어비앤비처럼 클릭만으로 바로 결과를 볼 수 있도록 하자. 를 하면 사용자가 굉장히 편할 것 같아요!

추가로 이야기해 보고 싶은 점은,
현재는 1) 키워드(제목)로 검색 하거나, 2) 키워드(제목) + 필터로 검색하는 두 가지 경우를 지원하고 있는 데,
제목 검색과 필터를 아예 분리하는 방법일까요 ??