📃구현 CheckList!!
- 검색 시 버튼 생성
- 검색 시 연관된 글자 출력
📖회고 내용
🙋♂️소비자가 원하는 우선순위 정하기
처음 검색창이라는 단어를 들었을 때 Trie자료구조 써서 해야겠다라는 생각이 들었다. Trie를 사용해서 검색어를 표출하는 것도 좋지만 검색창을 설계 시 우선순위가 높지 않다는 생각이 들어, 어떤 기준을 가지고 표출할지를 고민하게 됐다.
첫 번째는 검색어 기준으로 우선순위 판단하기
- 모든 출력 순서는 사전순
- 검색어가 상품명과 브랜드명에 속할 때
- 검색어가 상품명에 속할 때
- 검색어가 브랜드명에 속할 때
이렇게 네 가지 기준을 가지고 검색어 추천을 표출하는 방법을 고민했다. 이렇게 한다면 연관된 검색어가 나오는 것은 맞지만, 검색어 추천에 상품명과 브랜드명이 구분하기 어려워 사용자가 혼란스럽다고 생각하게 됐다.
두 번째는 검색어 입력 시 상품명에 포함된 브랜드명 보여주기
이러면 상품명을 입력할 때 연관된 브랜드가 나오는 것을 볼 수 있는 장점이 있다. 하지만 회의를 통해 이 방법은 브랜드로 검색어에 접근하는 사용자에게 불리할 것으로 생각했기에 합당하지 않은 방법이라 생각했다.
그래서 다시 첫 번째 방법으로 돌아오게 됐다. 대신 검색창을 보여줄 때 브랜드명과 상품명을 분리하는 UI를 만들자는 의견이 나왔다. 이렇게 보여주게 되면 두 번째 방법의 단점을 보완하는 셈이다. 하지만 해당 상품의 브랜드를 알 수 있는 건 아니었다. 그래서 이를 어떻게 해결하면 좋을까 고민한 결과 해당 상품으로 이동한다면 해당 브랜드가 같이 나오게 하자는 의견이 나와 브랜드명과 상품명을 분리하여 보여주는 방법을 선택하게 됐다.(만약 서비스를 만든다면 이라는 가정..미구현..)
👨🎓Hangul.js사용
앞에서 검색어를 포함하는지 확인하려고 Trie구조를 사용하여 검색하려고 생각했지만, 한글로 입력할 때 자음, 모음, 받침을 포함하는지 존재 여부를 알 수 없는 상황을 발견했다.
예를 들어 “가” 는 “강”에 포함되지만 “가”를 한 글자로 인식하기에 “강”에 포함되지 않아 다른 방법을 생각해야 했다.
그래서 나는 사용자 입장에서 하나의 단어를 자음, 모음, 받침을 끊어서 입력하는 경우는 드물다고 생각하여 짧은 시간의 디바운싱을 적용하면 어떨까 하는 생각했다. 하지만 이 생각이 “나”의 경우이지 다른 사람의 경우가 아닐 수 있다고 생각했다.
이 고민에 대해 팀원들과 회의를 통해 라이브러리 중 한글을 자음, 모음, 받침으로 나눠주는 Hangul.js라이브러리가 있어 이를 선택하여 받침이 없어도 자음, 모음을 포함한다면 검색어 추천에 보여주는 기능을 구현할 수 있었다.
🌝느낀점
기존 단순 기능 구현이 아닌 우선순위를 어떻게 정하는지 고민해보는 경험이 새로웠다. 가끔 이렇게 하면 될 거 같은데? 라는 생각이 얕고 위험한 습관이라는 것을 깨닫게 됐다. 특히 우선순위를 정할 때 첫 번째 방법으로 상품명과 브랜드명을 보여주는 생각이 막혔다고 안된다 넘어가는 것이 아니라 다른 방법이 없을까 모색해보는 좋은 경험이었다.