MDN(Mozilla Developer Network)은 파이어폭스 웹브라우저를 만든 모질라 재단에서 운영하는 웹사이트 입니다. MDN는 파이어폭스 소식 뿐만 아니라 웹에 관련된 기술, 문서, 개발에 관한 내용이 모여있는 곳입니다. 필자도 웹개발 하다 참고하는 사이트 중에 W3Schools와 더불어 자주 방문하는 사이트입니다. 최근에 MDN 글을 보던 중 독자분들에게 소개하고 싶은 내용이 있어 이번 주 주제로 골랐습니다.
자동완성 검색은 편합니다. 터미널에서 명령어를 쓸 때나 구글에서 검색을 할 때 찾고 싶은 단어를 다 쓰지 않아도 자동으로 단어를 띄워주는 기능은 마약과도 같습니다. 예상 단어를 자동완성 하는 것도 중요하지만 빠르게 자동완성을 띄워주는 것도 중요합니다. MDN 사이트에서 찾고자 하는 키워드를 검색창에 입력하면 정말 빠르게 자동완성 검색을 해줍니다. 지금 당장 MDN 사이트에 접속하여 'h' 한 단어를 치는 동시에 자동완성 검색 리스트들이 뜹니다. 아니... 어떻게 구현했길래 이렇게나 빠른걸까요? 비밀은 로컬 검색에 있습니다. 대략적인 MDN의 자동완성 검색 과정에 대해서 살펴봅시다.
MDN의 자동완성 검색 리스트에 대한 내용은 서버로부터 오지 않습니다. 사용자가 검색창을 클릭하면 search-index.json 파일을 자동적으로 다운받게 됩니다. 144KB 크기의 이 파일은 약 11,690개의 키-값 내용이 담겨져 있습니다. 그 다음 FlexSearch 라는 라이브러리의 도움으로 json 파일을 인덱싱하고 사용자가 입력한 키워드를 가지고 검색합니다. 마지막으로 downshift 라이브러리로 예쁘게 검색 결과를 보여줍니다. 여기서 라이브러리에 대한 소개를 잠깐 하자면 FlexSearch는 자연어 기반을 둔 인덱싱 및 검색을 하여 단순히 strings들을 비교하여 찾는 방식보다 성능이 좋다고 합니다. downshift는 리액트 라이브러리로 autocomplete, combobox, dropdown를 쉽게 구현하도록 도와주는 라이브러리 입니다.
정리해보면 MDN의 자동완성 검색은 크게 세 부분으로 나뉘어 집니다.
search-index.json 파일을 받는다.자동완성에 대한 내용이라 복잡한 알고리즘 내용이 나오나? 했는데 제가 생각하지도 못 한 방법으로 자동완성 검색을 빠르게 한 방법을 보고 놀랐습니다. 서버 중심으로만 생각해서 로컬을 통해 해결한다는 생각을 못 했는데 이 글을 통해 새로운 인사이트를 얻은 시간이였습니다.
내용을 쉽게 전달하고자 큰 구조만 설명드리고 자세한 구현 내용을 생략하였습니다. 자세한 구현 방법이 알고 싶다면 다음 링크를 참고하여 읽어보는걸 추천드립니다.
How MDN's autocomplete search works - Mozilla Hacks - the Web developer blog