랜딩 페이지 최적화는 어떤 것이 있을까? ( 디바운스, 인터셉션옵저버 활용하기 )

반응형 랜딩 페이지에서 가장 렌더링 계산이 의외로 많이 들어가는 것은 무엇일까?

디바이스별로 width와 height를 계산하는 것에 많이 들어간다. 리플로우, 리페인드라고 하는데 CSS렌더링 시 

 

랜딩 페이지 최적화: 디바운스(Debounce)와 인터섹션 옵저버(Intersection Observer) 활용하기

 

랜딩 페이지는 사용자가 웹사이트에 처음 방문했을 때 접하게 되는 중요한 지점이다. 사용자가 랜딩 페이지에서 느끼는 첫인상이 곧 이탈률 감소와 전환율 증대로 이어지기 때문에, 랜딩 페이지의 최적화는 디지털 마케팅에서 필수적인 요소이다. 본 포스팅에서는 디바운스(Debounce)와 인터섹션 옵저버(Intersection Observer)를 활용하여 랜딩 페이지를 최적화하는 방법을 개념, 예제, 그리고 실제 사례를 중심으로 알아보자!

---

1. 디바운스(Debounce)란 무엇인가?

 

만약 input창에서 유저의 입력에 따라 자동완성 기능이나 검색 요청을 보낼 때, 한 글자마다 보내게되면 그 횟수가 10만, 1000만, 1억의 대규모 요청으로 쌓였을 때 API 요청에 낭비되는 비용은 엄청날 것이다. 이 때 요청에 지연을 보내는 방법이 디바운스이다. 

 

디바운스는 특정 이벤트가 연속적으로 발생할 때, 마지막 이벤트만 처리하도록 만드는 기법이다. 주로 사용자 입력 이벤트(스크롤, 키 입력 등)에서 과도한 이벤트 핸들링을 방지하여 성능을 최적화하는 데 사용된다.

디바운스 활용 예제

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// 디바운스를 적용한 스크롤 이벤트 핸들러
const handleScroll = debounce(() => {
  console.log("스크롤 이벤트 실행");
}, 200);

window.addEventListener("scroll", handleScroll);

디바운스를 활용한 최적화 포인트

• 입력 필드: 검색창에서 사용자가 입력을 멈춘 뒤에만 검색 API를 호출.
• 스크롤 이벤트: 과도한 스크롤 이벤트로 인한 성능 저하 방지.

디바운스를 활용해 페이지 로딩 속도 개선 및 서버 요청 줄이기

디바운스를 사용하여 사용자가 검색창에 입력을 멈췄을 때만 상품 추천 API를 호출하도록 설정하자 서버 요청을 50% 이상 줄이고 페이지 로딩 속도를 크게 개선할 수 있었다.

---

2. 인터섹션 옵저버(Intersection Observer)란 무엇인가?

인터섹션 옵저버는 특정 요소가 뷰포트(Viewport)에 들어왔는지 여부를 비동기적으로 관찰할 수 있도록 돕는 브라우저 API이다. 이를 통해 스크롤 이벤트 없이 효율적인 화면 요소 로딩이 가능하다.

인터섹션 옵저버 활용 예제

const options = {
  root: null, // 뷰포트를 기준으로 관찰
  rootMargin: "0px",
  threshold: 0.1, // 요소가 10% 노출되었을 때 콜백 실행
};

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log("요소가 화면에 보입니다.");
      // 추가 로직 실행 가능 (예: 이미지 로드)
      observer.unobserve(entry.target);
    }
  });
};

const observer = new IntersectionObserver(callback, options);

document.querySelectorAll(".lazy-load").forEach(el => observer.observe(el));

인터섹션 옵저버를 활용한 최적화 포인트

• 지연 로딩(Lazy Loading): 스크롤에 따라 이미지나 동적 콘텐츠를 로드.
• 애니메이션: 화면에 보일 때만 애니메이션 효과를 실행.

인터섹션 옵저버를 통한 렌더링 속도 개선

많은 양의 데이터를 불러오는 화면일 때 화면에 보이는 양만큼만 보이도록 인터섹션 옵저버로 지연 로딩되도록 구현하자 초기 페이지 로딩 속도가 30% 향상되고 사용자 경험이 개선되었다.

---

3. 디바운스와 인터섹션 옵저버를 결합한 활용 사례

두 가지 기술을 결합하면 랜딩 페이지의 성능과 사용자 경험을 더욱 향상시킬 수 있다. 예를 들어, 사용자가 스크롤하면서 특정 섹션에 도달했을 때만 분석 데이터를 서버로 전송하도록 설정하면 불필요한 트래픽을 줄일 수 있다.

결합 코드

const logSectionView = debounce((sectionId) => {
  console.log(`${sectionId} 섹션이 노출되었습니다.`);
  // 서버로 분석 데이터 전송
}, 300);

const observerCallback = (entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      logSectionView(entry.target.id);
    }
  });
};

const observer = new IntersectionObserver(observerCallback, { threshold: 0.5 });

document.querySelectorAll("section").forEach(section => observer.observe(section));

실제 사례

한 교육 플랫폼에서는 사용자가 강의 섹션에 도달할 때마다 디바운스와 인터섹션 옵저버를 활용하여 학습 진행 데이터를 수집했다. 이를 통해 사용자 활동을 보다 정확하게 분석하고 개인화된 추천 시스템을 강화할 수 있었다.

아직 인터섹션 옵저버와 디바운스를 함께 사용해본 적은 없지만 다음 프로젝트때 함께 사용해봐야겠다.

---

마무리

디바운스와 인터섹션 옵저버는 각각의 장점과 특성을 통해 랜딩 페이지 최적화에 큰 도움을 줄 수 있다. 디바운스는 과도한 이벤트 핸들링을 억제하여 성능을 개선하고, 인터섹션 옵저버는 효율적인 요소 로딩과 애니메이션 처리를 지원한다. 이 두가지를 함께 사용하면 랜딩 페이지의 전반적인 성능과 사용자 경험을 향상시킬 수 있다.

 

추가 참고자료

https://enjoydev.life/blog/frontend/3-reflow-repaint

매끄럽게 동작하는 브라우저 만들기 - 렌더링 최적화 Reflow, Repaint

 

랜딩페이지를 만들때 꼭 학습해야하는 개념

https://velog.io/@young_pallete/Reflow-Repaint%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

Reflow, Repaint을 알아보자!

 

https://csstriggers.com/