BATADASE
정적 사이트 제네레이터(SSG)나 순수 HTML 게시판 구조로 사이트를 설계할 때 가장 구현하기 까다로운 영역 중 하나가 바로 **'검색 기능'**입니다. 보편적인 웹서비스들은 백엔드 웹 서버(Node.js, Python 등)를 경유하여 MySQL이나 Elasticsearch 같은 대용량 데이터베이스(DB) 서버에 질의(`SQL query`)하여 결과를 인출합니다. 하지만 서버가 일절 개입하지 않는 완전한 정적 호스팅 환경(Cloudflare Pages 등)에서는 DB 질의가 불가능합니다. 이를 타파하기 위해 브라우저단 자바스크립트(JS)의 초경량 메모리 내 검색 기술과 한글 자음/모음 분리 알고리즘을 결합해 순수 클라이언트 리소스로 고속의 검색 엔진을 구현하는 설계 노하우를 해부해 드립니다.
1. 클라이언트단 메모리 검색 엔진의 작동 원리
정적 게시판 검색의 대전제는 **'정적 메타데이터 리포지토리의 메모리 사전 로드'**입니다.
- 미리 정규화된 JSON 데이터: 본 사이트의 [posts.js](file:///Users/20k/Documents/ad/posts.js)와 같이, 전수 포스팅 기사의 ID, 제목(title), 설명글(desc), 태그 정보를 지닌 가벼운 JSON 배열을 브라우저에 초기 인가합니다.
- 브라우저단 탐색 필터: 입력창의 검색 이벤트가 트리거될 때마다 브라우저가 메모리에 상주한 이 JSON 배열을 순회하며 검색어와 부분 매칭되는 원소를 선별해 즉석에서 DOM 요소를 재생성(Re-render)합니다.
2. 한국어 검색 엔진의 꽃: 초성 분리 및 자모 매칭
단순 영문 텍스트 매칭과 달리, 한글 검색의 만족도를 결정짓는 것은 **'초성 검색'**과 **'한글 자모 결합 중 실시간 필터링'**입니다.
사용자가 "부업"을 치기 위해 "ㅂㅜㅇㅓㅂ"을 키보드로 연속 입력하는 매 순간, 자음이 완성되기 전에도 연관 기사들이 실시간으로 매칭되어야 훌륭한 사용자 경험(UX)을 확보합니다. 이를 위해 한글 유니코드 매핑 연산 법칙인 Math.floor((한글유니코드 - 44032) / 588) 공식을 기저에 활용하여 입력 필터링 과정을 자모단위로 정밀 분해하고 매치하는 자바스크립트 커스텀 도구를 프론트엔드단에 통합하여 실현할 수 있습니다.
"정적 사이트의 검색은 무거운 백엔드 네트워크 질의 패킷을 100% 생략하여, 사용자의 자판 클릭 속도보다 빠른 실시간 무딜레이 결과 출력을 보장하는 혜택을 낳습니다."
3. 초경량 클라이언트 검색 라이브러리 추천
포스트 수가 수천 개 이상으로 기하급수적으로 증가하여 커스텀 정규식 순회 속도가 지연될 조짐을 보일 때는 외부 라이브러리 도입이 훌륭한 해법입니다.
Fuse.js는 브라우저단에서 유사 오타 교정 검색(Fuzzy Search) 기능을 지원하는 제로 디펜던시의 3KB급 초경량 라이브러리입니다. 제목과 설명글에 가중치 점수를 다르게 배점(예: 제목 가중치 0.7, 본문 가중치 0.3)하여 검색어와 가장 유사도가 높은 최적 기사들을 내림차순으로 초고속 정렬해 줍니다. 본 BATADASE 사이트 역시 클라이언트단 라이브 검색 아키텍처를 영리하게 도입하여 쾌적한 속도를 보장하고 있습니다.
4. 요약: 무적의 정적 성능 완성
서버 유지비가 전혀 나가지 않고 해킹 리스크가 0%에 수렴하는 완벽한 정적 생태계에 초고속 클라이언트 검색 엔진이라는 날개를 달아보시기 바랍니다. 네트워크 연결이 끊긴 오프라인 환경에서도 원하는 정보를 막힘없이 찾아주는 가장 강인하고 모던한 BATADASE의 웹 퍼포먼스를 경험해 보시기 바랍니다.