2022 Search bar UI — Mobile

컴퓨터가 생긴 이후 키워드 검색은 너무도 당연한 것이 되었다. 이전에는 도서관에서 책과 정보를 찾을 때 색인된 것을 기준으로 데이터를 찾는 것을 수행했다. 하지만 CLI가 생긴 이래로 우리는 키워드를 통해 검색을 하고 검색에 결과가 없다면 몇 번을 더 시도해본 다음 없으면 없다고 생각을 해버리는 시대에 살고 있다. 돋보기는 초등학교 이후로 꺼내본 적이 없지만 검색창에서는 매일 볼 수 있는 픽토그램이자 아이콘이다.

검색 UI 진입

서치바(검색어 입력 영역)에 진입했을 때 크게 2가지의 구분점으로 구분할 수 있다. 하나는 정보 입력 유도 방법, 나머지 하나는 진입했을 때 키보드를 노출하는지 안 하는지로 구분할 수 있다.


Google

구글은 정보 입력을 유도하는 방법으로 상단에 키워드 검색바를 제외한 나머지는 배치하지 않았다. 심플하게 해서 사용자에게 검색엔진이라는 이미지를 심고, 부각하고 싶은 메시지는 doodle을 통해 제공하면서 사용자와 소통을 한다. 검색을 통해 다른 곳으로 이동시켜주는 곳이며 구글이라는 이미지가 강력하게 심어지는 계기가 된다. 물론 이것은 야후와 과거 네이버와 비교했을 때의 이야기이다.


Naver

과거 대비해서 네이버 검색창과 그린닷이 돋보이는 디자인으로 검색을 유도하고 있다. 도입했을 때 유저들의 반발이 심했다. 그전의 디자인과 방향성이 너무 많은 정보를 제공했기에 호불호가 명확하게 갈리는 지점이 있었다. 나는 변경했을 때 바뀐 디자인을 선호했다. 하지만 여기서 하나 배웠다. 급속한 업데이트와 많은 부분에서 변하는 것은 사용자들로부터 반발을 산다는 것을 확인할 수 있었다. 반면 구글은 로고를 교체했을 때를 제외하면 알게 모르게 하나씩 하나씩 바꿔 사용자들도 모르게 업데이트가 되어있다. 이 방법이 사용자들로 하여금 반발 없이 업데이트할 수 있는 방법이라고 생각한다.

사용자가 많이 사용하는 서비스라면 당연히 모든 사람을 만족시키는 디자인을 할 수 없다. 제약 사항을 충분히 확인하고 현실적인 방법을 모색하는 것이 가장 현명한 방법이다.

그리고 구글과 네이버의 방향성이 명확하게 차이나는 것은 데스크톱 검색이다. 하지만 모바일에서도 큰 차이가 나는 것을 확인할 수 있다. 구글은 하단에 다른 콘텐츠가 없는 반면에, 네이버는 하단에 콘텐츠와 광고가 노출되는 것을 확인할 수 있다. 이것이 구글과 네이버의 방향성의 차이라고 본다. 어떤 게 더 좋다, 나쁘다를 판단하기보다 비즈니스 방향성에 따라 UI의 구성과 룩 앤 필이 변경되는 것을 확인할 수 있는 계기가 된다.


G-Market

검색 아이콘을 누르면 하단에서 Floating Layer가 올라와 검색을 진행할 수 있게 만들어주는 UI를 제공하고 있다. 여기서 이렇게 레이어 팝업으로 처리한 이유는 하단의 페이지를 유지하는 니즈가 많았으리라고 판단된다. 화면의 이동이 아닌 팝업으로 처리하는 장점은 해당 검색에 진입하기 전까지 있던 내용을 저장하지 않고 그냥 두고 그 위에서 부가적인 작업을 하는 것이기에 다시 바닥 페이지로 이동하는 것이 유리하다. 이 UI는 11st도 마찬가지로 사용하고 있는 UI이다.


SSG.com

검색 영역을 누르면 검색 영역이 확장되면서 바로 검색어를 입력할 수 있도록 OS 키보드를 호출하는 것을 확인할 수 있다. 검색이 메인되지 않은 서비스에서 검색을 눌렀다는 것은 키워드 검색을 통해 빨리 상품을 찾고 싶은 니즈를 읽었다고 본다. 그래서 해당 페이지로 진입했을 때 바로 키워드를 입력할 수 있게 키보드를 노출하는 것은 정말 세심하게 사용자를 잘 배려했다.


Farfetch

고급 의류 브랜드를 판매하는 서비스의 느낌을 살리기 위해 광고 혹은 이미지로 콘텐츠를 전달하지 않고 사용자에게 최소한의 정보를 통해 상품을 검색할 수 있는 환경을 제공하고 있다.