후배들에게 Ajax 를 설명해주고 자동 완성 기능 구현을 실습 과제로 주려다가 문득,
각 포텰별 검색어 추천 기능의 차이점이 궁금해졌습니다.
아래는 주요 포털의 기능을 비교하여 정리한 내용입니다.
구글의 검색어 제안 기능
먼저 글에서 공통적으로 사용할 용어는 아래와 같습니다.
용어 정의
검색인풋: 검색어를 입력하는 input box
서제스트레이어: 검색어 추천 기능을 제공하는 레이어
RMB: Right Mouse Button
LMB: Left Mouse Button
G : Google
N : Naver
D : Daum
기본 공통 특성
모두 타이머 방식으로 구현
한 글자 이상 존재할 경우 보여짐
서제스트레이어의 전반적인 모습
G: 검색어 이외의 단어를 bold 처리해 줌.
서제스트레이어 내에 검색 버튼이 존재함.
검색 버튼이 검색인풋 하단에 있어 서제스트 레이어에 가려지지만,
이를 통해 버튼이 노출될 수 있게 함.
완성된 글자가 아닐 경우, (예를 들어 'ㅇ', '강ㄴ')
모든 제시 검색어가 bold 처리됨.
N: 구글과는 다르게 검색어를 오렌지 bold 로 처리해 줌.
검색어가 제시어와 완벽히 일치될 경우에만 bold 처리
끝 글자 검색, 끄기 버튼 제공됨
D: 검색어를 오렌지 처리해 줌.
역시 검색어와 제시어가 완벽히 일치될 경우에만 오렌지 처림
끝 글자 검색, 끄기 버튼 제공
서제스트레이어의 전반적인 모습에서 찾아볼 수 있는 구글과 네이버/다음의 차이는,
사용자의 관심이 검색어인지, 아니면 검색어 이외의 것인지에 대한 인식의 차이라고 생각합니다.
또한 구글은 검색에만 포커스를 두는 한편,
네이버/다음은 사용자에게 다양한 선택을 제공하고 있다는 것도 찾아볼 수 있습니다.
네이버의 검색어 제안 기능
검색 input 에 포커스가 들어갈 경우 (LMB 클릭)
G: 서제스트 레이어가 보여지지 않음
N,D: 서제스트 레이어를 다시 보여줌
검색 input 에 포커스가 들어갈 경우 (외부에서 tab 키로 들어감)
GND: 키보드 포커스에 의해서는 서제스트 레이어가 보이지 않음
서제스트 레이어가 보여지는 시점
GND: 검색 input 에 포커스가 있고, 한 글자 이상 존재하며 텍스트가 변경될 경우.
N, D: 한 글자 이상 존재하고 마우스 포커스가 들어갈 경우
외부 영역에 LMB 또는 RMB 클릭
GND: 서제스트 레이어가 숨겨짐
다음의 검색어 제안 기능
입력 중 Tab 키를 누를 경우
G: 서제스트 레이어가 닫기고 Search 버튼으로 포커스 이동
N: 서제스트 내 다음 단어로 이동
D: 서제스트 레이어는 그대로 있고 로그인 스팟의 아이디 input 으로 포커스 이동
영문 검색어일 경우, id 입력 칸으로 검색어가 잘라져 들어감
네이버는 Tab 키를 누를 경우, 검색 버튼이 아니라 다음 단어로 이동하도록 되어있습니다.
유용하기도 하지만, 한편으론 일반적인 Tab 키의 기능(element 간 포커스 이동)을 가지도록 하는 것도 좋을 것 같습니다.
예를 들어, 아래의 케이스에선 네이버의 Tab 키의 작동은 기대하지 않은 것일 수도 있습니다.
1. 검색 input 에 검색어 입력
2. 외부 클릭으로 포커스를 잃음
3. 다시 tab 키로 검색 input 으로 포커스
3-1. (tab 키를 눌러서 '검색' 버튼으로 포커스가 이동되기를 기대함)
4. tab 키를 누르면 자동 검색의 다음 단어로 이동함
다음의 경우엔, 검색 창의 영문어를 입력하고 Tab 키를 누를 경우,
자동으로 로그인아이디인풋으로 검색어가 카피되어 들어가고 비밀번호인풋으로 포커스가 이동합니다.
Tab 키를 누르면 '검색' 버튼으로 포커스가 이동하기를 기대했기 때문에,
처음 이런 증상을 확인했을 때에는 버그인가 싶었지만 디테일하게 사용자의 행동을 고려한 것이라는 걸 알게 됐습니다.
전 개인적으로는 거의 포털에서 로그인을 하지 않지만,
로그인이 잦은 사용자라면 포털에 접속하자마자 능숙하게 아이디를 적고 바로 로그인을 할 것입니다.
메인 화면이 로딩됨과 동시에 (또는 로딩되는 중간에) 매우 빠른 속도로 "아이디 - 탭 - 패스워드 - 엔터" 를 입력하겠죠.
검색사이트이기 때문에 기본적으로는 검색인풋에 포커스를 두는 걸 있어야 하겠고,
단골 사용자의 패턴을 고려하여 상세하게 구현한 부분이 인상적입니다.
검색 input 포커스 안에서 RMB 클릭 시
G: 정상적으로 컨텍스트 메뉴가 나옴. 이상 없음.
N: 정상적으로 컨텍스트 메뉴가 나옴. 이상 없음.
클릭 위치의 단어 단위로 선택됨(W3C 브라우저에 한함)
D: 컨텍스트 메뉴가 나오나, 서제스트 레이어가 토글됨.
click 마우스 이벤트 핸들러에 대해, 왼쪽 버튼만 작동하도록 변경이 필요할 듯.
빠른 입력으로 지웠다 삭제할 경우 (예: a 를 썼다 지웠다 썼다 지웠다 할 경우)
G: 빠르게 반복하다가 삭제할 경우 정상적으로 적용됨. 반응 속도가 약간 느림.
빠르게 반복하다가 한 글자를 남길 경우, 서제스트레이어가 보이지 않는 경우가 있음.
N: 빠른 반복에도 모두 정상적으로 작동됨.
D: 내용이 없을 경우에도 서제스트 레이어가 남아 있는 경우가 있음.
구글의 경우 반응 속도가 다른 포털에 비해 약간 늦습니다. 최고보다는 최적을 선택한 것일까요.
네이버의 경우엔 타 포털에 비해 기술적으로 더 꼼꼼하게 구현되어 있는 것 같네요.
기술적 구현의 디테일도 중요한 한편, 최적의 선택도 나쁘지 않다고 생각됩니다.
자음 단위 검색 (예를 들어, '강남' 검색을 위해 '강ㄴ' 까지 입력했을 경우)
GNB: 정상적으로 검색됨
한글 2벌식으로 영문을 입력했을 경우
(입력 예: 영단어가 존재하지 않는 경우: 피카 --> vlzk, 강남 ---> rkdska, 완성 ---> dhkstjd
영단어가 존재하는 경우: 맘스 --> akas)
G: 구글코리아만 해당. 영어 세글자부터 검색되며, 2벌식 결과와 영문 결과를 동시에 보여줌.
N: 영어 네글자부터 검색됨. 정확히 파악되진 않으나,
2벌식의 경우 단순 자소 단위가 아니라 완성된 글자이되 2글자 이상으로 검색되는 듯.
예) rkdsk (강나 부터 검색), dhkstj (완서 부터 검색)
자음 + 모음의 형태로 두 글자가 만들어 질 때부터로 파악됨
D: 영어 네글자부터 검색됨. 한 글자가 만들어 질 때부터 검색도미.
예) dhks(완 부터 검색)
여기까지가 각 포털별 검색어 제안 기능에 대해 비교해본 내용입니다.
전반적으로 느낀 개인적인 느낌은 이렇습니다.
G: 기본과 목적에 충실, 최적을 고려
N: 다양한 선택을 제공하며 실질적인 사용자를 고려. 기술적 디테일이 좋음.
D: 다양한 선택을 제공하며 실질적인 사용자를 고려. 기술적 디테일이 약간 부족.
기술적 디테일에서는 다음이 약간 부족한 듯 느껴졌었으나,
검색어가 Tab 키에 의해 아이디로 변환되어 들어가는 부분은 굉장히 인상적이었습니다.
Tab 키에 구현에 있어서는 구글이 해당 키의 '기본적인 기능' 을 추구했다면,
국내 포털은 나름대로의 '실질적인 기능'을 추구했다는 데에서 좋은 느낌을 받았습니다.
중요한 것은 어느 포털이 더 잘 구현했냐. 보다는
모든 포털이 사용자의 누적된 행동 패턴(User Experience)을 파악해서
조금이라도 더 편리하게 구현하려고 노력한다는 게 아닐까요~
이러한 디테일한 노력을 사용자가 알아주고 잘 사용해준다면,
만든 이도 굉장히 뿌듯할 거라 생각됩니다.^^
UX Symposium 2010 정리.pdf
