시스매

디바운싱과 쓰로틀링 완벽 정복 핸드북 개발자라면 반드시 알아야 할 필수 개념

22 min read

2025-09-23 20:31

  • 디바운싱]과 쓰로틀링]은 이벤트를 그룹화하여 특정 시간 동안 한 번만, 혹은 일정한 주기마다 실행되도록 제한하는 프로그래밍 기술이다.

  • 디바운싱은 마지막 이벤트 이후 일정 시간이 지나야 콜백 함수를 실행하며, 주로 검색 자동완성이나 창 크기 조절 이벤트 처리에 사용된다.

  • 쓰로틀링은 정해진 시간 간격마다 최대 한 번만 콜백 함수를 실행하며, 스크롤 이벤트나 주기적인 데이터 요청에 효과적이다.

디바운싱과 쓰로틀링 완벽 정복 핸드북 개발자라면 반드시 알아야 할 필수 개념

웹 개발을 하다 보면 사용자의 반복적인 입력이나 이벤트에 어떻게 대응해야 할지 고민하는 순간이 온다. 검색창에 글자를 입력할 때마다 API를 호출해야 할까? 스크롤을 내릴 때마다 복잡한 애니메이션을 다시 계산해야 할까? 이러한 고민에 대한 해답이 바로 **디바운싱(Debouncing)**과 **쓰로틀링(Throttling)**이다. 이 두 기술은 무분별한 이벤트 호출을 제어하여 웹 애플리케이션의 성능을 최적화하고 사용자 경험을 향상시키는 핵심적인 역할을 한다.

이 핸드북에서는 디바운싱과 쓰로틀링이 왜 탄생했는지, 어떤 원리로 동작하는지, 그리고 실제 코드에서는 어떻게 구현하고 활용하는지까지 모든 것을 상세하게 다룬다. 단순히 개념을 아는 것을 넘어, 언제 어떤 기술을 사용해야 하는지 명확하게 판단하고 실무에 바로 적용할 수 있도록 돕는 것이 이 글의 목표다.

1. 탄생 배경 모든 것은 물리적 한계에서 시작되다

디바운싱과 쓰로틀링이라는 용어는 원래 전자공학, 특히 기계식 스위치의 물리적인 문제점을 해결하기 위해 등장했다. 이 배경을 이해하면 두 기술의 본질을 더 깊이 파악할 수 있다.

1.1 채터링(Chattering) 현상과 디바운싱의 등장

옛날 기계식 버튼이나 스위치는 내부의 금속 접점이 한 번에 깔끔하게 붙지 않았다. 버튼을 누르는 순간, 아주 짧은 시간 동안 금속 접점이 여러 번 빠르게 붙었다 떨어지기를 반복하는 채터링(Chattering) 현상이 발생했다. 인간의 눈으로는 인지할 수 없는 이 짧은 떨림을 컴퓨터는 여러 번의 입력으로 오인했다. 예를 들어, 버튼을 한 번만 눌렀는데 숫자가 여러 번 입력되는 문제가 발생한 것이다.

디바운싱은 바로 이 문제를 해결하기 위해 고안된 하드웨어 회로 또는 소프트웨어 로직이었다. 마지막으로 신호가 감지된 후, 일정 시간 동안 추가적인 신호가 없으면 그제야 한 번의 유효한 입력으로 처리하는 방식이다. 즉, 불필요한 ‘잔진동’을 무시하고 안정된 최종 신호만을 인정하는 것이다. 이 개념이 소프트웨어 개발, 특히 프론트엔드 이벤트 처리로 확장된 것이다.

1.2 과부하 방지를 위한 쓰로틀링

쓰로틀링은 기계나 엔진의 출력을 조절하는 ‘조절판(Throttle)‘에서 유래했다. 엔진에 연료가 과도하게 공급되어 과부하가 걸리는 것을 막기 위해 조절판으로 유입량을 제어하는 것처럼, 시스템이 처리할 수 있는 용량을 초과하는 요청이 들어올 때 이를 제어하기 위한 목적으로 사용되었다.

예를 들어, 1초에 10개의 요청만 처리할 수 있는 시스템에 100개의 요청이 쏟아지면 시스템은 다운될 수 있다. 쓰로틀링은 이러한 상황에서 1초당 10개의 요청만 받아들이고 나머지는 무시하거나 대기시키는 방식으로 시스템을 보호한다. 이 개념 역시 소프트웨어에서 함수나 API 호출의 빈도를 제어하여 시스템의 과부하를 막는 중요한 기술로 자리 잡았다.

2. 핵심 개념 비유로 쉽게 이해하기

디바운싱과 쓰로틀링의 차이점을 비유를 통해 알아보자.

  • 디바운싱(Debouncing): 엘리베이터의 ‘닫힘’ 버튼

    여러 사람이 엘리베이터에 탈 때를 생각해보자. 한 사람이 탄 후 ‘닫힘’ 버튼을 누르려 할 때 다른 사람이 타면, ‘닫힘’ 버튼 누르는 것을 멈추고 기다린다. 마지막 사람이 타고 나서야 비로소 ‘닫힘’ 버튼을 눌러 문을 닫는다. 즉, **연속된 이벤트(사람이 타는 행위)가 모두 끝난 후, 마지막 이벤트를 기준으로 딱 한 번만 동작(문을 닫음)**하는 것이 디바운싱이다.

  • 쓰로틀링(Throttling): 놀이공원의 ‘입장’ 게이트

    인기 있는 놀이기구 앞에는 일정 시간마다 정해진 인원만 들여보내는 게이트가 있다. 사람들이 아무리 많이 줄을 서 있어도, 게이트는 예를 들어 1분에 10명씩만 입장을 허용한다. 즉, 일정한 시간 간격을 두고 주기적으로 이벤트를 처리하는 것이 쓰로틀링이다. 줄을 선 사람(이벤트)이 얼마나 많은지와 상관없이 정해진 규칙대로만 동작한다.

3. 구조와 원리 코드 이면의 동작 방식

디바운싱과 쓰로틀링은 내부적으로 타이머(Timer), 특히 setTimeout과 clearTimeout을 핵심적으로 활용하여 구현된다.

3.1 디바운싱의 동작 원리

디바운싱 함수는 다음과 같은 요소로 구성된다.

  1. 타이머 변수: setTimeout의 ID를 저장할 변수. 클로저(Closure)를 활용하여 함수가 여러 번 호출되어도 타이머 ID를 기억하도록 한다.

  2. 지연 시간(Delay): 이벤트를 얼마나 기다릴지 결정하는 시간.

  3. 콜백 함수: 지연 시간 이후에 최종적으로 실행될 함수.

동작 순서:

  1. 이벤트가 발생하면, 디바운싱 함수가 호출된다.

  2. 함수 내에서는 먼저 기존에 설정된 타이머가 있는지 확인하고, 있다면 clearTimeout으로 즉시 취소한다.

  3. 그리고 새로운 setTimeout을 설정하여, 지정된 지연 시간 후에 콜백 함수를 실행하도록 예약한다.

  4. 만약 지연 시간이 다 지나기 전에 새로운 이벤트가 발생하면, 1번부터 다시 반복된다. 즉, 이전 타이머는 취소되고 새로운 타이머가 설정된다.

  5. 결과적으로, 마지막 이벤트가 발생한 후 지연 시간 동안 아무런 추가 이벤트가 없어야만 콜백 함수가 실행된다.

JavaScript

function debounce(callback, delay) {
  let timerId;
  
  // 디바운스된 함수를 반환한다. 이 함수가 이벤트 핸들러로 사용된다.
  return function(...args) {
    // 기존 타이머가 있다면 취소한다.
    clearTimeout(timerId);
    
    // 새로운 타이머를 설정한다.
    timerId = setTimeout(() => {
      callback.apply(this, args);
    }, delay);
  };
}

3.2 쓰로틀링의 동작 원리

쓰로틀링 함수는 다음과 같은 요소로 구성된다.

  1. 타이머 변수: setTimeout의 ID를 저장할 변수.

  2. 플래그 변수 (Should Wait): 현재 콜백 함수 실행 후 대기 상태인지를 판단하는 boolean 변수.

  3. 시간 간격(Throttle Time): 이벤트를 얼마나 자주 실행할지 결정하는 시간.

  4. 콜백 함수: 주기적으로 실행될 함수.

동작 순서:

  1. 이벤트가 발생하면, 쓰로틀링 함수가 호출된다.

  2. 함수 내에서는 먼저 플래그 변수를 확인하여 현재 대기 상태(실행되면 안 되는 시간)인지 검사한다.

  3. 만약 대기 상태가 아니라면, 즉시 콜백 함수를 실행한다.

  4. 콜백 함수를 실행한 후, 플래그 변수를 true로 바꿔 대기 상태로 전환한다.

  5. 동시에 setTimeout을 설정하여, 지정된 시간 간격이 지난 후에 플래그 변수를 다시 false로 되돌려놓는다.

  6. 대기 상태인 동안 발생하는 모든 이벤트는 무시된다.

JavaScript

function throttle(callback, limit) {
  let waiting = false; // 플래그 변수
  
  return function(...args) {
    if (!waiting) {
      // 대기 상태가 아닐 때만 콜백 실행
      callback.apply(this, args);
      
      // 대기 상태로 전환
      waiting = true;
      
      // 일정 시간 후 대기 상태 해제
      setTimeout(() => {
        waiting = false;
      }, limit);
    }
  };
}

4. 실전 사용법 언제, 어떻게 사용할까?

이론을 알았다면 이제 실제 프로젝트에서 어떻게 활용할 수 있는지 알아보자.

4.1 디바운싱 적용 사례

디바운싱은 연속된 이벤트의 마지막 결과만이 중요할 때 매우 유용하다.

  • 검색 자동완성 (Search Autocomplete)

    사용자가 ‘javascript’를 입력하는 동안 ‘j’, ‘ja’, ‘jav’, … 각각에 대해 API를 호출하는 것은 엄청난 낭비다. 디바운싱을 적용하면, 사용자의 타이핑이 멈춘 후(예: 300ms) 마지막 입력값인 ‘javascript’에 대해서만 API를 호출하여 서버 부하를 줄이고 비용을 절감할 수 있다.

  • 창 크기 조절 (Window Resizing)

    브라우저 창 크기가 조절될 때마다 resize 이벤트는 수십, 수백 번 발생한다. 이때마다 복잡한 레이아웃 계산을 다시 한다면 브라우저가 버벅거릴 것이다. 디바운싱을 사용하면 사용자가 크기 조절을 마친 후에 한 번만 레이아웃을 다시 계산하여 부드러운 사용자 경험을 제공한다.

  • 버튼 중복 클릭 방지

    사용자가 제출 버튼을 여러 번 빠르게 클릭하여 동일한 요청이 여러 번 서버로 전송되는 것을 방지할 수 있다. 첫 클릭 이후 일정 시간 동안의 클릭은 무시하도록 처리한다.

4.2 쓰로틀링 적용 사례

쓰로틀링은 일정한 주기로 이벤트를 실행하여 중간 과정을 사용자에게 보여줘야 할 때 적합하다.

  • 스크롤 이벤트 처리 (Scroll Event)

    스크롤 위치에 따라 특정 애니메이션을 실행하거나, 무한 스크롤을 구현할 때 scroll 이벤트는 매우 빈번하게 발생한다. 쓰로틀링을 적용하면, 예를 들어 100ms마다 한 번씩만 스크롤 위치를 계산하여 애니메이션을 업데이트하거나 다음 데이터를 불러와 성능 저하를 막을 수 있다.

  • 게임 캐릭터 움직임

    온라인 게임에서 사용자의 키보드 입력에 따라 캐릭터 위치를 서버로 전송할 때, 모든 키 입력을 전송하면 네트워크에 큰 부담이 된다. 쓰로틀링을 이용해 50ms마다 한 번씩만 위치 정보를 전송하여 네트워크 사용량을 최적화할 수 있다.

  • 실시간 데이터 시각화

    빠르게 변하는 주식 시세나 센서 데이터를 차트에 표시할 때, 모든 데이터 포인트를 실시간으로 렌더링하면 브라우저가 멈출 수 있다. 쓰로틀링으로 200ms마다 한 번씩만 차트를 업데이트하여 부드러운 시각화를 구현한다.

5. 심화 내용 더 똑똑하게 사용하기

기본적인 디바운싱과 쓰로틀링 외에도, 특정 요구사항에 맞춰 기능을 확장할 수 있다.

5.1 즉시 실행 옵션 (Leading & Trailing Edge)

앞서 살펴본 기본 디바운싱과 쓰로틀링은 이벤트가 발생하고 일정 시간이 지난 후에 함수가 실행(Trailing Edge)된다. 하지만 때로는 이벤트가 시작되는 시점에 즉시 한 번 실행하고, 그 이후의 이벤트를 제어(Leading Edge)하고 싶을 때도 있다.

  • Leading Edge Debounce: 버튼 중복 클릭 방지에 유용하다. 첫 클릭은 즉시 반응해야 사용자 경험이 좋기 때문이다. 첫 클릭에 함수를 실행하고, 이후 일정 시간 동안의 클릭은 무시한다.

  • Leading & Trailing Edge Throttle: 스크롤 이벤트에 적용하면 좋다. 스크롤을 시작할 때 즉시 한 번 실행하여 빠른 피드백을 주고, 스크롤하는 동안에는 주기적으로 실행하며, 스크롤이 끝난 후 마지막 위치를 기준으로 한 번 더 실행하여 최종 상태를 정확히 반영할 수 있다.

이러한 기능들은 lodash와 같은 유명 라이브러리의 debounce, throttle 함수에 옵션으로 구현되어 있다.

옵션설명사용 사례
leading: true이벤트 그룹의 시작 시점에 함수를 즉시 실행한다.버튼 클릭 시 첫 반응을 빠르게 해야 할 때
trailing: true (기본값)이벤트 그룹의 마지막 이벤트 이후 지연 시간 뒤에 함수를 실행한다.검색어 자동완성
leading: true, trailing: true시작과 끝 모두 실행한다. 쓰로틀링에서 유용하게 사용된다.사용자가 놓치는 정보 없이 주기적 업데이트가 필요할 때

5.2 requestAnimationFrame 활용

스크롤 애니메이션이나 캔버스 렌더링처럼 시각적 변화와 관련된 이벤트를 처리할 때는 setTimeout 기반의 쓰로틀링보다 requestAnimationFrame(rAF)을 사용하는 것이 더 효율적이다.

rAF는 브라우저의 렌더링 주기에 맞춰 콜백 함수를 실행시킨다. 보통 1초에 60번(약 16.7ms) 호출되며, 브라우저가 렌더링할 준비가 되었을 때만 실행되므로 불필요한 렌더링을 줄이고 시각적으로 더 부드러운 애니메이션을 만들 수 있다.

JavaScript

function throttleWithRAF(callback) {
  let requestId = null;

  return function(...args) {
    if (requestId) {
      return; // 이미 예약된 프레임이 있으면 무시
    }

    requestId = requestAnimationFrame(() => {
      callback.apply(this, args);
      requestId = null; // 실행 후 초기화
    });
  };
}

window.addEventListener('scroll', throttleWithRAF(() => {
  console.log('Scroll event handled with rAF!');
}));

6. 결론 디바운싱과 쓰로틀링, 현명한 개발자의 무기

구분디바운싱 (Debouncing)쓰로틀링 (Throttling)
핵심 아이디어연속된 이벤트를 하나의 그룹으로 묶어, 마지막 이벤트 후에 한 번만 실행일정한 시간 간격을 두고 이벤트를 주기적으로 실행
비유엘리베이터 닫힘 버튼놀이공원 입장 게이트
주요 사용 사례검색 자동완성, 창 크기 조절, 버튼 중복 클릭 방지스크롤 이벤트, 무한 스크롤, 실시간 데이터 시각화
장점불필요한 API 호출 및 리소스 낭비를 극적으로 줄임주기적인 실행을 보장하여 사용자에게 꾸준한 피드백 제공
주의점이벤트 발생 중간 과정이 무시되므로, 주기적인 업데이트가 필요하면 부적합설정한 시간 간격이 너무 길면 사용자가 답답함을 느낄 수 있음

디바운싱과 쓰로틀링은 단순히 코드를 몇 줄 추가하는 기술이 아니다. 이는 사용자 경험과 시스템 성능 사이의 균형을 맞추는 현명한 전략이다. 무분별한 이벤트 핸들러는 웹을 느리고 불편하게 만들지만, 이 두 기술을 적재적소에 활용하면 부드럽고 반응성이 뛰어난 애플리케이션을 만들 수 있다.

이제 당신은 디바운싱과 쓰로틀링의 탄생 배경부터 심화 사용법까지 모두 알게 되었다. 프로젝트에서 성능 저하가 의심되는 곳이 있다면, 가장 먼저 이벤트 핸들러를 살펴보고 이 강력한 두 무기를 꺼내 들 준비를 하길 바란다.

그래프 뷰