2rang25 - Scheduler API에 대해 알아보자

웹 개발을 하다 보면 이런 경험이 한두 번은 있을 것이다.

화면 렌더링이 늦어지거나 UI가 멈춘 것처럼 보이는 현상
사용자의 클릭이나 입력이 무시되는 답답한 인터페이스
"뭐야, 왜 이렇게 느려?"라는 사용자 피드백

이는 브라우저가 메인 스레드에서 UI 작업과 비동기 작업을 처리하면서 충돌하거나 과부하가 걸렸기 때문이다. 이 문제를 해결하기 위해 등장한 게 바로 Scheduler API이다.

이번 글에서는 Scheduler API가 어떤 문제를 해결하는지, 기존 방식과 어떤 차이가 있는지, 그리고 실무에 어떻게 적용할 수 있는지 쉽고 구체적으로 알아보겠다.

1. Scheduler API란?

Scheduler API는 브라우저에서 실행되는 작업들의 우선순위를 직접 관리할 수 있는 기능이다. 기존에는 setTimeout이나 requestAnimationFrame을 사용해 비동기 작업을 처리했지만, 이 방식은 작업 순서와 우선순위를 세밀하게 조정하기 어려웠다. Scheduler API는 이를 해결하며 개발자가 더 나은 사용자 경험을 제공할 수 있도록 도와준다.

기존 방식의 한계

기존 방식에서는 작업이 동일한 우선순위로 처리되어 UI가 멈추거나 느려질 가능성이 높았다. 예를 들어, 아래 코드처럼 setTimeout으로 비동기 작업을 처리하면 데이터 처리 시간이 길어질 경우 렌더링이 지연된다.

setTimeout(() => {
    console.log('작업 실행');
}, 0);

이런 문제를 해결하기 위해 Scheduler API는 작업 우선순위(priority)를 직접 설정할 수 있도록 한다.

Scheduler API의 기본 사용법

scheduler.postTask(() => {
    console.log('우선순위에 따라 실행되는 작업');
}, { priority: 'user-visible' });

위 코드에서 scheduler.postTask는 작업을 큐에 추가하고 브라우저가 우선순위를 고려해 실행하게 한다. 우선순위는 세 가지로 나뉜다:

user-blocking: 즉시 실행이 필요한 작업 (예: 사용자 입력 반응)
user-visible: UI 렌더링 등 사용자에게 영향을 주는 작업
background: 덜 중요한 작업 (예: 데이터 처리, 동기화)

2. Scheduler API의 장점

Scheduler API가 기존 방식과 다른 점은 작업 간 우선순위를 조정해 중요한 작업이 먼저 실행되도록 보장한다는 것이다. 다음은 Scheduler API의 주요 장점이다.

작업 우선순위 관리

UI 렌더링과 비동기 작업이 충돌할 때, 중요한 작업을 먼저 처리하도록 우선순위를 설정할 수 있다. 예를 들어, 아래 코드처럼 사용자의 클릭 반응은 즉시 처리하고, 데이터 처리는 백그라운드에서 실행하도록 설정할 수 있다.

scheduler.postTask(() => {
    console.log('UI 업데이트');
}, { priority: 'user-blocking' });

scheduler.postTask(() => {
    console.log('데이터 처리');
}, { priority: 'background' });

렌더링 성능 최적화

브라우저 메인 스레드는 렌더링과 작업 실행을 함께 처리하기 때문에 무거운 작업이 들어오면 화면이 멈춘 것처럼 보일 수 있다.Scheduler API는 이러한 작업을 조정해 렌더링 성능을 개선한다.

사용자 경험 개선

작업 우선순위를 정하는 것만으로도 클릭 이벤트 같은 사용자 입력이 지연되지 않게 처리할 수 있다.즉, "사용자가 즉각적으로 반응하는 웹"을 만드는 데 적합하다.

3. 브라우저 지원과 대체 방안

브라우저 지원

Scheduler API는 현재 실험적인 상태로, 일부 최신 브라우저에서만 지원된다.호환성을 확인하려면 아래 코드를 사용할 수 있다.

if ('scheduler' in window) {
    console.log('Scheduler API를 지원합니다.');
} else {
    console.log('Scheduler API는 지원되지 않습니다.');
}

대체 방안

Scheduler API를 사용할 수 없는 환경에서는 아래 기술들을 활용하면 비슷한 효과를 낼 수 있다:

React Concurrent Mode: React는 자체적으로 작업 우선순위를 관리한다.
Web Workers: 메인 스레드 외부에서 작업을 실행하는 방식이다.
requestIdleCallback: 브라우저가 한가할 때 작업을 실행하도록 한다. 하지만 우선순위 설정은 어렵다.

4. 실무 적용 사례

Scheduler API는 다음과 같은 실무 시나리오에서 유용하게 쓰인다.

대규모 SPA

Single Page Application(SPA)에서 DOM 조작이나 무거운 계산 작업이 많을 때, Scheduler API로 작업을 분리하면 UI 반응성이 크게 개선된다.

대시보드와 데이터 시각화

실시간 데이터 처리와 시각화를 동시에 해야 하는 대시보드에서는 UI 업데이트를 우선순위로 두고, 데이터 처리를 백그라운드로 돌리면 효율적이다.

5. 성능 테스트

아래는 Scheduler API와 기존 방식의 성능을 비교한 테스트 코드이다.

기존방식

setTimeout(() => {
    console.log('기존 방식으로 실행');
}, 0);

Scheduler API 방식

scheduler.postTask(() => {
    console.log('Scheduler API로 실행');
}, { priority: 'user-blocking' });

결과

기존 방식은 작업 실행 순서를 브라우저에 위임하므로 렌더링이 지연될 수 있다.
Scheduler API는 우선순위를 지정해 중요한 작업이 먼저 실행되도록 보장한다.

6. 실무에서 고려할 점

호환성 문제: 모든 브라우저에서 지원되지 않으니, 대체 방안이나 폴리필을 준비해야 한다.
우선순위 전략 설계: 잘못된 우선순위 설정은 중요한 작업이 밀리거나, 불필요한 작업이 너무 빨리 실행되는 결과를 초래할 수 있다.
성능 테스트: 프로젝트에 도입하기 전에 성능 테스트를 통해 실제로 도움이 되는지 확인해야 한다.

결론

Scheduler로 작업 우선순위를 정리해보자.

Scheduler API는 비동기 작업과 UI 렌더링이 얽혀 성능 문제가 생기는 웹 애플리케이션에서 매우 유용하다. 작업의 우선순위를 정할 수 있다는 점만으로도 성능 개선과 사용자 경험 향상에 큰 기여를 한다. 물론 아직 실험적인 기능이라 브라우저 호환성 문제를 고려해야 하지만, 지원이 확대되면 표준적인 작업 관리 도구로 자리 잡을 가능성이 높다.

Scheduler API에 대해 알아보자