Scribble Maps Blog
개발자 가이드: 자동완성 기능으로 Google API 크레딧 절약하기
Google의 새로운 API 요금제 덕분에 많은 이들이 혜택을 보고 있습니다. 하지만 앱에서 지도 기능 전체를 사용하고 있고 사용자 수가 많다면, 크레딧 풀이 빠르게 줄어드는 것을 발견할 수 있습니다. 크레딧 풀에서 직접 차감되며 일일 무료 할당량의 적용을 받지 않는 두 가지 기능은 바로 자동완성(autocomplete)과 장소 검색(place search)입니다.
Scribble Maps API와 함께 Google 라이선스를 사용하는 경우 이러한 최적화 중 일부가 기본적으로 제공되지만, Google Maps API 위에 직접 맞춤형 구현을 구축하는 경우 자동완성 크레딧을 절약할 수 있는 간단한 업데이트 방법이 있습니다.
표준 자동완성 기능은 입력창이 변경될 때마다 자동완성 요청을 전송합니다. 입력이 변경될 때 타임아웃(대기 시간)을 설정하면 사용되는 크레딧의 양을 크게 줄일 수 있습니다.
다음은 매우 기본적인 예시입니다.
이렇게 하면 사용자가 입력창에 타이핑을 시작할 때마다 일시적인 지연이 발생할 때까지 자동완성이 실행되지 않습니다. 자동완성이 더 자주 실행되도록 하려면 250ms의 지연 시간을 줄일 수 있습니다. 사용자가 "Toronto"를 빠르게 입력하는 경우, 사용자가 입력을 멈추었을 때 8번의 호출 대신 단 한 번의 자동완성 호출만 실행됩니다.
저희는 이 시간 지연 방식이 가장 효과적이라는 것을 확인했습니다. 여기서 중요한 점은 사용자가 타이핑하는 동안 검색이 진행 중임을 사용자 인터페이스(UI)에 표시해 주는 것입니다. 저희의 경우에는 애니메이션 스피너를 사용합니다. 이렇게 하면 사용자가 빠르게 타이핑하느라 결과를 바로 보지 못하더라도, 애니메이션 스피너 덕분에 잠시 멈추고 결과를 확인할 수 있게 됩니다.
이 방식을 구현하는 것은 현재 Google의 이용 약관을 준수하는 것임을 알려드립니다. 이 방법이 하는 일은 본질적으로 사용자가 보내는 아웃바운드 자동완성 호출의 빈도를 조절(throttle)하는 것뿐입니다.
Scribble Maps API와 함께 Google 라이선스를 사용하는 경우 이러한 최적화 중 일부가 기본적으로 제공되지만, Google Maps API 위에 직접 맞춤형 구현을 구축하는 경우 자동완성 크레딧을 절약할 수 있는 간단한 업데이트 방법이 있습니다.
표준 자동완성 기능은 입력창이 변경될 때마다 자동완성 요청을 전송합니다. 입력이 변경될 때 타임아웃(대기 시간)을 설정하면 사용되는 크레딧의 양을 크게 줄일 수 있습니다.
다음은 매우 기본적인 예시입니다.
var acTimeOut;
textSearchInput.onkeyup = function() {
clearTimeout(acTimeout);
acTimeout = setTimeout(function() {
//이곳에 자동완성 호출을 넣으세요
}, 250);
}
이렇게 하면 사용자가 입력창에 타이핑을 시작할 때마다 일시적인 지연이 발생할 때까지 자동완성이 실행되지 않습니다. 자동완성이 더 자주 실행되도록 하려면 250ms의 지연 시간을 줄일 수 있습니다. 사용자가 "Toronto"를 빠르게 입력하는 경우, 사용자가 입력을 멈추었을 때 8번의 호출 대신 단 한 번의 자동완성 호출만 실행됩니다.
저희는 이 시간 지연 방식이 가장 효과적이라는 것을 확인했습니다. 여기서 중요한 점은 사용자가 타이핑하는 동안 검색이 진행 중임을 사용자 인터페이스(UI)에 표시해 주는 것입니다. 저희의 경우에는 애니메이션 스피너를 사용합니다. 이렇게 하면 사용자가 빠르게 타이핑하느라 결과를 바로 보지 못하더라도, 애니메이션 스피너 덕분에 잠시 멈추고 결과를 확인할 수 있게 됩니다.
이 방식을 구현하는 것은 현재 Google의 이용 약관을 준수하는 것임을 알려드립니다. 이 방법이 하는 일은 본질적으로 사용자가 보내는 아웃바운드 자동완성 호출의 빈도를 조절(throttle)하는 것뿐입니다.