craftrun

만들기

서버 없이 사이트 검색 붙이기

정적 사이트에는 검색이 없습니다. 백엔드를 들이지 않고 붙이는 방법과, 한글에서만 생기는 함정 하나.

정적 사이트를 만들면 없는 게 몇 개 있는데, 그중 아쉬운 것이 사이트 내 검색입니다.

글이 늘어나면 방문자가 두 번째 글로 가는 길이 필요합니다. 목록을 훑거나 카테고리를 누르는 것보다 검색이 빠를 때가 많습니다. 그런데 검색은 보통 서버가 하는 일입니다.

검색 하나 때문에 서버를 들이면 "서버 없는 사이트"라는 이점을 통째로 버리게 됩니다. 그래서 브라우저에서 하기로 했습니다.

방법은 단순하다

빌드할 때 글 목록을 작은 파일 하나로 만들어 둡니다.

[
  {"t":"제목","d":"설명","u":"/주소","c":"카테고리","g":["태그"],"s":"2026-08-05"},
  ...
]

방문자가 검색창에 입력하면 브라우저가 이 파일을 받아서 걸러냅니다. 그게 전부입니다.

키 이름을 한 글자로 줄인 이유는 파일 크기 때문입니다. 글이 수백 편이 되면 이 파일도 커지는데, "title" 대신 "t"를 쓰면 꽤 줄어듭니다.

이게 언제까지 되나

솔직히 말하면 이 방식은 영원히 쓸 수 있는 게 아닙니다.

하지만 대부분의 개인 사이트는 첫 번째 구간에 있습니다. 그리고 그 구간에서는 서버 검색보다 오히려 빠릅니다. 왕복이 없으니까요. 한 번 받아 두면 그다음부터는 타이핑하는 즉시 결과가 바뀝니다.

"나중에 느려지면 어쩌지"는 나중에 걱정하면 됩니다. 그때는 글이 수천 편이라는 뜻이고, 그건 좋은 문제입니다.

한글에서만 생기는 함정

여기가 이 글의 핵심입니다. 처음 만들었을 때 한글 검색이 이상하게 동작했습니다.

"성과급"을 치려고 하면 이런 순서로 결과가 바뀝니다.

ㅅ → 서 → 성 → 성ㄱ → 성고 → 성과 → 성과ㄱ → 성과그 → 성과급

영어는 s, sa, sal처럼 완성된 글자가 하나씩 늘어납니다. 그런데 한글은 조합 중에 낱자가 튀어나옵니다. ㅅ이나 성ㄱ 같은 건 검색어로 아무 의미가 없습니다.

문제는 세 가지입니다.

  1. 의미 없는 검색이 9번 돕니다. 글자 하나 칠 때마다 목록 전체를 훑습니다
  2. 결과가 깜빡입니다. 성ㄱ에서 0건이 됐다가 성과에서 다시 나타납니다
  3. 자료를 여러 번 받을 수도 있습니다. 받아 두기 전이면 요청이 겹칩니다

조합이 끝난 뒤에만

해결은 브라우저가 주는 신호를 쓰는 것입니다. 한글처럼 조합해서 만드는 문자는 입력 시작과 끝에 별도 이벤트가 옵니다.

var composing = false;
input.addEventListener('compositionstart', function () { composing = true; });
input.addEventListener('compositionend', function () { composing = false; run(); });
input.addEventListener('input', function () { if (!composing) run(); });

영어는 조합 이벤트가 없으므로 예전처럼 글자마다 검색합니다. 한글만 완성된 글자 단위로 검색합니다.

이 다섯 줄이 한글 사이트의 검색 체감을 완전히 바꿉니다. 안 넣으면 "뭔가 버벅인다"는 인상을 주는데, 원인을 짚기가 어렵습니다.

두 가지 더

첫 글자를 치기 전에 미리 받아 둡니다. 검색창을 클릭하는 순간(포커스) 자료를 받기 시작합니다. 사람이 첫 글자를 치는 데 걸리는 시간이면 대개 도착해 있습니다. 체감 지연이 사라집니다.

input.addEventListener('focus', load, { once: true });

제목에 걸린 글을 위로 올립니다. 설명이나 태그에만 스친 글보다, 제목에 그 단어가 있는 글이 찾던 것일 확률이 높습니다. 정렬 한 줄이면 됩니다.

결과를 만들 때 조심할 것

검색 결과를 화면에 붙일 때 문자열을 그대로 이어 붙이지 말고 요소를 만들어 넣는 편이 안전합니다.

var a = document.createElement('a');
a.href = d.u;
a.textContent = d.t;   // 글자로만 들어간다

우리가 쓴 글이라 위험할 게 없다고 생각하기 쉽지만, 제목에 꺾쇠 같은 게 들어가는 순간 화면이 깨집니다. 붙여넣기 사고 한 번이면 충분합니다.

정리

검색정적사이트한글자바스크립트

같이 읽을 글