아임웹 풀페이지 슬라이드 만들기 | 스크롤 연동 메인 비주얼 코드

 

아임웹 메인 비주얼을 더 고급스럽게 만드는 풀페이지 슬라이드

홈페이지 첫 화면은 방문자가 브랜드를 처음 만나는 공간입니다.

하지만 많은 홈페이지가 정적인 배너 한 장으로 끝나는 경우가 많습니다.

이번에 소개하는 코드는 풀페이지 슬라이드 방식의 메인 비주얼입니다.

 

스크롤과 버튼으로 슬라이드를 넘길 수 있으며, 자동 재생 기능과 로딩 프로그레스 바까지 포함되어 있습니다.

실제로 기업 홈페이지, 브랜드 홈페이지, 디자인 에이전시 홈페이지에서 많이 사용하는 구성입니다.

 

실제 구현 예시

믓아 스튜디오

---

 

이 코드로 구현되는 기능

이 코드를 적용하면 아래 기능을 사용할 수 있습니다.

• 풀스크린(100vh) 메인 비주얼
• 자동 슬라이드 전환
• PREV / NEXT 버튼
• 현재 슬라이드 번호 표시
• 슬라이드별 배경 이미지 변경
• 로딩 진행 바 애니메이션
• 마우스 휠 스크롤 이동
• 모바일 스와이프 이동
• 마지막 슬라이드 이후 일반 페이지 스크롤 연결
• 반응형 지원

특히 마지막 슬라이드에서 아래로 스크롤하면 자연스럽게 다음 섹션으로 이동되는 구조가 포인트입니다.

실제 기업 홈페이지에서 많이 사용하는 UX 방식입니다.

---

 

사용하면 좋은 상황

다음과 같은 홈페이지에서 활용하기 좋습니다.

구분	목록	내용
1	홈페이지 제작 업체	브랜드 메시지를 단계별로 전달 가능
2	법률사무소	전문성 → 성공사례 → 상담유도 흐름 구성
3	병원 홈페이지	치료 소개 → 의료진 소개 → 상담 연결
4	제조업 홈페이지	기술력 → 제품 → 문의 연결
5	포트폴리오 사이트	프로젝트 소개용 메인 비주얼
6	브랜드 홈페이지	브랜드 철학을 시각적으로 표현

 

 

---

 

적용 방법

아임웹 기준입니다.

1. HTML 위젯 추가
2. 제공된 전체 코드 붙여넣기
3. 저장 후 게시
4. 이미지 주소 및 문구 수정

별도의 라이브러리 설치 없이 바로 사용 가능합니다.

---

 

전체 코드

아래 전체 코드를 HTML 위젯에 그대로 붙여넣으면 됩니다.

<section class="motsa-fullpage-slider" id="motsaFullSlider">
  <div class="motsa-slide active">
    <div class="motsa-bg"></div>
    <div class="motsa-content">
      <span class="motsa-label">WEB DESIGN STUDIO</span>
      <h1>브랜드의 첫인상을<br>홈페이지에서 완성합니다</h1>
      <div class="motsa-progress"></div>
      <p>기획부터 디자인, 반응형 제작까지 한 번에 진행하는 홈페이지 제작 스튜디오</p>
      <a href="#contact">프로젝트 문의하기</a>
    </div>
  </div>

  <div class="motsa-slide">
    <div class="motsa-bg"></div>
    <div class="motsa-content">
      <span class="motsa-label">CONVERSION DESIGN</span>
      <h1>예쁜 화면보다<br>문의가 생기는 구조</h1>
      <div class="motsa-progress"></div>
      <p>방문자가 이해하고, 신뢰하고, 문의까지 이어지도록 흐름을 설계합니다.</p>
      <a href="#portfolio">포트폴리오 보기</a>
    </div>
  </div>

  <div class="motsa-slide">
    <div class="motsa-bg"></div>
    <div class="motsa-content">
      <span class="motsa-label">IMWEB CUSTOM</span>
      <h1>아임웹을 더 고급스럽게<br>커스텀합니다</h1>
      <div class="motsa-progress"></div>
      <p>기본 템플릿 느낌을 줄이고 브랜드에 맞는 메인 비주얼을 제작합니다.</p>
      <a href="#contact">상담 문의하기</a>
    </div>
  </div>

  <div class="motsa-nav">
    <button type="button" class="prev">PREV</button>
    <span><b id="motsaCurrent">01</b> / 03</span>
    <button type="button" class="next">NEXT</button>
  </div>
</section>

<style>
  .motsa-fullpage-slider,
  .motsa-fullpage-slider * {
    box-sizing: border-box;
    font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
  }

  .motsa-fullpage-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #050505;
  }

  .motsa-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: opacity .8s ease, transform .8s ease, visibility .8s ease;
  }

  .motsa-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 2;
  }

  .motsa-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.08);
    transition: transform 1.4s ease;
  }

  .motsa-slide.active .motsa-bg {
    transform: scale(1);
  }

  .motsa-slide:nth-child(1) .motsa-bg {
    background-image:
      linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.6)),
      url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80");
  }

  .motsa-slide:nth-child(2) .motsa-bg {
    background-image:
      linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.62)),
      url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1800&q=80");
  }

  .motsa-slide:nth-child(3) .motsa-bg {
    background-image:
      linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.62)),
      url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1800&q=80");
  }

  .motsa-content {
    position: relative;
    z-index: 5;
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
  }

  .motsa-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    margin-bottom: 22px;
    color: rgba(255,255,255,.75);
  }

  .motsa-content h1 {
    margin: 0;
    font-size: clamp(44px, 7vw, 96px);
    line-height: 1.08;
    letter-spacing: -0.06em;
    font-weight: 900;
  }

  .motsa-progress {
    width: 0;
    height: 3px;
    margin: 30px 0 28px;
    background: #fff;
  }

  .motsa-slide.active .motsa-progress {
    animation: motsaProgress 4s linear forwards;
  }

  @keyframes motsaProgress {
    from {
      width: 0;
    }
    to {
      width: 220px;
    }
  }

  .motsa-content p {
    max-width: 560px;
    margin: 0 0 34px;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 400;
    color: rgba(255,255,255,.78);
  }

  .motsa-content a {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: all .25s ease;
  }

  .motsa-content a:hover {
    transform: translateY(-3px);
    background: #111;
    color: #fff;
  }

  .motsa-nav {
    position: absolute;
    right: 50px;
    bottom: 42px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #fff;
    font-size: 13px;
    letter-spacing: .08em;
  }

  .motsa-nav button {
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.08);
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(10px);
  }

  .motsa-nav button:hover {
    background: #fff;
    color: #111;
  }

  @media (max-width: 768px) {
    .motsa-content {
      padding: 0 24px;
    }

    .motsa-content h1 {
      font-size: 42px;
    }

    .motsa-content p {
      font-size: 15px;
    }

    .motsa-progress {
      margin: 22px 0;
    }

    .motsa-nav {
      left: 24px;
      right: auto;
      bottom: 28px;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const slider = document.querySelector("#motsaFullSlider");
    const slides = slider.querySelectorAll(".motsa-slide");
    const nextBtn = slider.querySelector(".next");
    const prevBtn = slider.querySelector(".prev");
    const currentText = document.querySelector("#motsaCurrent");

    let current = 0;
    let isMoving = false;
    const total = slides.length;
    const autoDelay = 4000;

    function formatNumber(num) {
      return String(num + 1).padStart(2, "0");
    }

    function resetProgress(slide) {
      const progress = slide.querySelector(".motsa-progress");
      progress.style.animation = "none";
      progress.offsetHeight;
      progress.style.animation = "";
    }

    function goToSlide(index) {
      if (isMoving) return;

      isMoving = true;

      slides[current].classList.remove("active");
      current = (index + total) % total;
      slides[current].classList.add("active");

      resetProgress(slides[current]);
      currentText.textContent = formatNumber(current);

      setTimeout(function () {
        isMoving = false;
      }, 900);
    }

    function nextSlide() {
      goToSlide(current + 1);
    }

    function prevSlide() {
      goToSlide(current - 1);
    }

    nextBtn.addEventListener("click", nextSlide);
    prevBtn.addEventListener("click", prevSlide);

    let autoPlay = setInterval(nextSlide, autoDelay);

    slider.addEventListener("mouseenter", function () {
      clearInterval(autoPlay);
    });

    slider.addEventListener("mouseleave", function () {
      autoPlay = setInterval(nextSlide, autoDelay);
    });

    slider.addEventListener("wheel", function (e) {
      const isLastSlide = current === total - 1;
      const isFirstSlide = current === 0;

      if (e.deltaY > 0 && !isLastSlide) {
        e.preventDefault();
        nextSlide();
      }

      if (e.deltaY < 0 && !isFirstSlide) {
        e.preventDefault();
        prevSlide();
      }

      /*
        마지막 슬라이드에서 아래로 스크롤하면
        e.preventDefault()를 걸지 않기 때문에
        자연스럽게 아래 섹션으로 내려갑니다.
      */
    }, { passive: false });

    let touchStartY = 0;

    slider.addEventListener("touchstart", function (e) {
      touchStartY = e.touches[0].clientY;
    });

    slider.addEventListener("touchend", function (e) {
      const touchEndY = e.changedTouches[0].clientY;
      const diff = touchStartY - touchEndY;

      if (Math.abs(diff) < 50) return;

      const isLastSlide = current === total - 1;
      const isFirstSlide = current === 0;

      if (diff > 0 && !isLastSlide) {
        nextSlide();
      }

      if (diff < 0 && !isFirstSlide) {
        prevSlide();
      }
    });

    resetProgress(slides[current]);
    currentText.textContent = formatNumber(current);
  });
</script>

 

---

 

코드 수정 포인트

1. 슬라이드 제목 변경

<h1>브랜드의 첫인상을<br>홈페이지에서 완성합니다</h1>

원하는 문구로 변경하면 됩니다.

 

2. 설명 문구 변경

<p>기획부터 디자인, 반응형 제작까지 한 번에 진행하는 홈페이지 제작 스튜디오</p>

브랜드 소개 문구로 교체합니다.

 

3. 버튼 링크 변경

<a href="#contact">프로젝트 문의하기</a>

문의폼 또는 포트폴리오 섹션 ID로 변경 가능합니다.

 

4. 배경 이미지 변경

background-image:url("이미지주소");

이미지 URL만 교체하면 됩니다.

고해상도 이미지를 사용하는 것을 추천합니다.

 

5. 자동 슬라이드 시간 변경

현재 설정

const autoDelay = 4000;

4초마다 자동 이동합니다.

예시

const autoDelay = 6000;

6초마다 이동

 

6. 프로그레스 바 길이 변경

현재

width:220px;

예시

width:320px;

더 길게 표시됩니다.

---

 

자주 발생하는 오류와 해결 방법

배경 이미지가 안 보이는 경우

이미지 URL이 잘못된 경우입니다.

직접 이미지 주소를 브라우저에 입력해서 확인해 보세요.

 

1. 버튼 클릭이 안 되는 경우

href="#contact"

연결할 섹션 ID가 실제로 존재해야 합니다.

 

2. 모바일에서 글자가 너무 큰 경우

.motsa-content h1

부분의 값을 줄이면 됩니다.

 

3. 슬라이드가 움직이지 않는 경우

HTML 위젯이 아닌 일반 텍스트 영역에 붙여넣은 경우입니다.

반드시 HTML 위젯 안에 넣어야 합니다.

---

 

홈페이지 제작에서 이런 슬라이드가 중요한 이유

많은 홈페이지가 첫 화면에서 방문자를 설득하지 못합니다.

첫 화면은 단순히 예쁜 이미지를 보여주는 공간이 아니라 브랜드의 핵심 메시지를 전달하는 공간입니다.

이 풀페이지 슬라이드는

• 브랜드 소개
• 서비스 소개
• 문의 유도

를 순서대로 보여줄 수 있기 때문에 일반 배너보다 훨씬 높은 전달력을 만들 수 있습니다.

특히 아임웹 기본 배너에서 벗어나고 싶다면 HTML/CSS/JS 커스텀 코드 활용을 추천합니다.

---

 

이번 코드는 아임웹 홈페이지 제작 시 활용할 수 있는 풀페이지 메인 슬라이드 코드입니다.

스크롤 이동, 자동 재생, 프로그레스 바, 모바일 스와이프까지 포함되어 있어 실제 기업 홈페이지에서도 활용 가능한 수준으로 제작했습니다.

아임웹 기본 디자인이 아쉽거나 브랜드의 첫인상을 더 강하게 만들고 싶다면 한 번 적용해 보시기 바랍니다.

 

홈페이지 문의

믓아 스튜디오

 

아임웹 위젯 사용 방법

아임웹 HTML 위젯 사용법｜초보자도 가능한 커스텀 코드 적용 방법

 

아임웹 CSS 적용 방법

아임웹 CSS 적용하는 방법｜초보자도 가능한 디자인 수정 방법