🎯 Fullpage 웹사이트를 라이브러리 없이 구현하는 방법 – 순수 JavaScript로 실현하는 스크롤 인터페이스

 

 

✅ 개요

많은 웹사이트에서 사용되는 풀페이지(Fullpage) 인터페이스는

사용자 경험을 직관적으로 만들고, 콘텐츠에 몰입할 수 있는 구조를 제공합니다.

 

대표적으로 fullPage.js와 같은 라이브러리가 널리 사용되지만,

순수 JavaScript만으로도 충분히 가볍고 유연하게 구현할 수 있습니다.

 

이 글에서는 바닐라 JS 기반의 fullpage 웹사이트 UI를 직접 만드는 과정을

예제 중심으로 자세히 소개합니다.

 

📦 왜 라이브러리 없이 직접 구현할까?

• 성능 최적화: 라이브러리 불포함으로 페이지 로딩 속도 개선
• 커스터마이징 자유도: 내가 직접 만든 코드로 원하는 대로 수정 가능
• 학습 효과: 스크롤 이벤트와 UI 흐름 이해도가 높아짐

 

🧱 HTML 및 CSS 기본 구조

 

<div class="section-container">
  <section class="section">Section 1</section>
  <section class="section">Section 2</section>
  <section class="section">Section 3</section>
</div>

 

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.section-container {
  transition: transform 0.7s ease;
}

.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

 

⚙️ JavaScript로 부드러운 섹션 전환 구현하기

 

const container = document.querySelector('.section-container');
let currentIndex = 0;
let isScrolling = false;
const sectionCount = document.querySelectorAll('.section').length;

window.addEventListener('wheel', (e) => {
  if (isScrolling) return;
  isScrolling = true;

  const direction = e.deltaY > 0 ? 1 : -1;
  currentIndex = Math.min(Math.max(currentIndex + direction, 0), sectionCount - 1);

  container.style.transform = `translateY(-${currentIndex * 100}vh)`;

  setTimeout(() => {
    isScrolling = false;
  }, 700);
});

 

🎛️ UX 향상을 위한 고급 기능 아이디어

• Dot Navigation: 현재 위치를 보여주는 사이드 인디케이터
• Mobile Touch Event 대응: touchstart, touchend 이벤트로 모바일 친화 UX
• Active 클래스 관리: 현재 섹션에만 .active 부여하여 스타일 분기
• requestAnimationFrame 기반 부드러운 애니메이션

 

📱 모바일 대응 예시 코드

 

let touchStartY = 0;

window.addEventListener('touchstart', (e) => {
  touchStartY = e.touches[0].clientY;
});

window.addEventListener('touchend', (e) => {
  const touchEndY = e.changedTouches[0].clientY;
  const deltaY = touchStartY - touchEndY;

  if (Math.abs(deltaY) < 50 || isScrolling) return;

  isScrolling = true;
  currentIndex = deltaY > 0
    ? Math.min(currentIndex + 1, sectionCount - 1)
    : Math.max(currentIndex - 1, 0);

  container.style.transform = `translateY(-${currentIndex * 100}vh)`;

  setTimeout(() => {
    isScrolling = false;
  }, 700);
});

 

🧠 Fullpage UI의 동작 원리 – 사용자의 스크롤 제어하기

 

fullpage 인터페이스는 기본적으로 한 번의 스크롤 입력에 따라

화면 전체가 한 섹션 단위로 움직이는 형태야.

 

이걸 위해 가장 핵심적으로 처리해야 할 건:

• 사용자의 스크롤을 감지하는 로직
• 현재 섹션을 기준으로 다음 섹션으로 부드럽게 이동
• 스크롤 이벤트가 겹치지 않도록 제어(throttle 또는 flag 처리)

 

let currentIndex = 0;
let isScrolling = false;

window.addEventListener('wheel', (e) => {
  if (isScrolling) return;
  isScrolling = true;
  const direction = e.deltaY > 0 ? 1 : -1;

  currentIndex = Math.min(Math.max(currentIndex + direction, 0), sectionCount - 1);
  container.style.transform = `translateY(-${currentIndex * 100}vh)`;

  setTimeout(() => isScrolling = false, 700); // 전환 시간과 일치
});

✨ 여기서 중요한 점은 isScrolling이라는 플래그를 활용해서 연속 입력을 막는 거야.
이 방식은 Debounce나 Throttle보다 직관적으로 구현할 수 있고, UX 안정성을 높여줘.

 

🧩 transition과 requestAnimationFrame 차이점

 

대부분 CSS에서 transition: transform 0.7s ease;를 사용하지만,

좀 더 물리적이고 부드러운 움직임을 원한다면

requestAnimationFrame으로 커스터마이징하는 방법도 있어:

 

function smoothScroll(targetY) {
  const startY = container.getBoundingClientRect().top;
  const diff = targetY - startY;
  let start;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const easing = Math.min(progress / 700, 1); // 700ms 기준
    container.style.transform = `translateY(${startY + diff * easing}px)`;
    if (easing < 1) requestAnimationFrame(step);
  }

  requestAnimationFrame(step);
}

🔍 이 방식은 성능 제어가 더 필요하지만,
복잡한 애니메이션이나 커스텀 easing 커브를 적용하기에 유리해.

 

📱 모바일 터치 대응에 따른 UX 개선

 

스크롤과 터치를 모두 지원하려면 데스크탑과 모바일 이벤트를 병행 처리해야 하고,

각각의 특징을 반영해야 UX가 깨지지 않아:

• 터치는 touchstart와 touchend를 조합해서 사용자의 스와이프 방향을 판단
• 터치 감도 조절이 UX에 큰 영향을 미침
• 작은 움직임(delta < 50)은 무시하여 오작동 방지

 

let touchStartY = 0;

window.addEventListener('touchstart', (e) => {
  touchStartY = e.touches[0].clientY;
});

window.addEventListener('touchend', (e) => {
  const touchEndY = e.changedTouches[0].clientY;
  const deltaY = touchStartY - touchEndY;

  if (Math.abs(deltaY) < 50 || isScrolling) return;
  isScrolling = true;
  currentIndex = deltaY > 0 ? Math.min(currentIndex + 1, sectionCount - 1) : Math.max(currentIndex - 1, 0);
  container.style.transform = `translateY(-${currentIndex * 100}vh)`;

  setTimeout(() => isScrolling = false, 700);
});

 

🎛️ Dot Navigation의 UX적 가치

 

점 내비게이션은 사용자가 현재 어느 섹션에 있는지 시각적으로 알 수 있게 해줘.

또한 클릭으로 해당 섹션으로 점프할 수 있어:

 

<div class="dot-nav">
  <div class="dot active" data-index="0"></div>
  <div class="dot" data-index="1"></div>
  <div class="dot" data-index="2"></div>
</div>

 

document.querySelectorAll('.dot').forEach(dot => {
  dot.addEventListener('click', (e) => {
    currentIndex = Number(e.target.dataset.index);
    container.style.transform = `translateY(-${currentIndex * 100}vh)`;
    updateActiveDot();
  });
});

function updateActiveDot() {
  document.querySelectorAll('.dot').forEach(dot => dot.classList.remove('active'));
  document.querySelector(`.dot[data-index="${currentIndex}"]`).classList.add('active');
}

🎨 내비게이션은 접근성, 사용성, 시각적 피드백까지
모두 챙길 수 있어서 “작지만 큰” UX 요소야.

 

 

🚀 마무리하며

 

풀페이지 웹사이트는 시각적으로 강렬하고

UX에 강한 인상을 남길 수 있는 UI 패턴입니다.

 

꼭 라이브러리에 의존하지 않아도

직접 구현하면서 학습과 효율을 동시에 잡을 수 있습니다.

 

앞으로 이 방식을 확장해 모달, 슬라이더, 내비게이션 등

다른 컴포넌트와도 연결해보세요!