AJAX기반의 프로그램을 하다보면 사용자의 입력을 받을때 마다 어떤 결과를 서버에서 돌려 주어야 하는 경우가 발생한다. 대표적으로 포털에서 검색창에 검색어를 입력 하면 제시어를 콤보에서 보여주는데 이렇게 보여주려면 사용자가 글자를 입력 하기만 하면 바로 서버에서 데이터를 찾아서 보여 주어야 한다. 아무리 간단하게 통신내용을 줄여도 한글자 입력 할 때 마다 400바이트가 오고 가야 한다. 꼭 그래야 하나?
물론 서버가 아주 빠르고 네트웍 대역도 충분히 여유가 있다면 글자를 입력하자 마자 바로 값을 가져오는 것도 괜찮을 것이다. 그러나 이것은 아무리 봐도 네트웍 트래픽의 낭비다. 트래픽의 낭비뿐만이 아니라 한글 2벌식의 속성상 입력하는 동안 콤보박스가 겁나게(?) 껌뻑거리게 된다. 왜?
예를 들어 "네트웍"이라고 입력 한다고 하자. 자판은 2벌식이라고 가정한다. 그러면 각 입력 단계별로 단어를 보면
1. ㄴ
2. 네
3. 넽
4. 네트
5. 네틍
6. 네트우
7. 네트워
8. 네트웍
이렇게 되는데 자소가 모두 8개이므로 8단계의 입력이 이루어진다. 글자수는 불과 3자이지만 말이다. 그리고 이중 1,3,5 단계는 실제 한글에서 거의 사용하지 않는 조합이 일어난 글자들인데 이런 단어들에 대해서 제시어가 있을 수가 없다. 그러므로 2단계에서는 제시어가 있다가 3단계에는 제시어가 없어지고 4단계에 다시 제시어가 나타나고 5단계에서 다시 없어진다. 그러니 껌뻑거릴 수 밖에.
이러한 문제는 사실 2벌식자판의 고질적인 문제이지만 지금와서 자판 타령을 해봐야 소용없으므로 해결책을 찾아 보도록 하자. 다양한 해결책이 있겠지만 가장 간단하게 구현할 수 있고 실질적인 방안은 사용자가 입력을 멈추기를 기다리는 것이다. 즉 대부분의 사용자를 "네트웍"을 입력할 때 입력을 멈추지 않는다. 즉 한번에 다다닥 입력해 버릴 것이라는 것이다.(독수리 타법으로 입력 하는 사람은 생각하지 말자) 그렇다면 일반적인 사용자가 입력하는 속도를 고려한다면 0.4초 이하의 시간은 입력이 계속된다고 보고 기다리고 0.4초이상 입력이 없다면 그때 제시어를 찾아서 제시하면 네트웍 트래픽의 문제와 2벌식에 의한 이상조합의 문제를 동시에 해결할 수 있다. 다음 예제를 보자.
<
textarea
onkeyup
="ProcessKeyUpEvent()"
cols
=60
rows
=6></
textarea
><
br
>
<
label
id
="Status"></
label
>
<
script
>
var
waitCount = 0;
function
ProcessKeyUpEvent() {
if (waitCount == 0) {
document.getElementById("Status").innerHTML = "Waiting...";
WaitingFinishUserInput();
} else
waitCount = 1;
}
function
WaitingFinishUserInput() {
waitCount++;
if (waitCount > 10) {
waitCount = 0;
PostInputProcess();
return ;
}
window.setTimeout("WaitingFinishUserInput()", 40);
}
function
PostInputProcess() {
document.getElementById("Status").innerHTML = "Finished!";
}
</
script
>
코드는 매우 간단하다. 사용자가 입력을 하는 동안은 waitCount를 계속 1로 리셋한다. 사용자의 입력이 없으면 WaitingFinishUserInput함수가 0.04초마다 waitCount를 증가시키게 되고 10번을 증가하는동안 사용자 입력이 없으면 사용자가 입력을 끝낸것으로 판단하는 것이다. 이 간단한 코드로 위의 예제에서 본 "네트웍"을 사용자가 단숨에 입력 한다면 단한번의 서버 쿼리로 답을 제시해 줄 수 있을 것이다. 기다리는 시간을 적절히 조절하면 사용자는 아무런 불편을 느끼지 못하면서도 효율적인 트래픽운영이 가능해 질 수 있을 것이다.
www.stocky.co.kr에 가면 이렇게 구현된 제시어를 보여주는 콤보를 볼 수 있다.