아임웹 풀페이지 슬라이드 코드 | 메인 비주얼을 고급스럽게 만드는 HTML/CSS/JS 커스텀

 

홈페이지 첫 화면은 방문자가 브랜드를 판단하는 가장 빠른 구간입니다.

특히 홈페이지 제작을 할 때 메인 비주얼이 밋밋하면 전체적인 완성도가 낮아 보일 수 있습니다.

이번 코드는 아임웹이나 티스토리 HTML 편집 영역에 활용할 수 있는 풀페이지 슬라이드 커스텀 코드입니다.

큰 타이틀, 배경 텍스트, 우측 네비게이션 버튼, 하단 카운트 숫자, 휠 스크롤 전환 효과까지

포함되어 있어 메인 화면을 조금 더 고급스럽게 보여줄 수 있습니다.

HTML/CSS/JS 구조로 되어 있어 초보자도 텍스트와 색상만 바꿔서 사용할 수 있습니다.

 

실제 구현 확인하기

믓아 스튜디오

 

---

이 코드로 구현되는 기능 설명

이 코드는 한 화면을 가득 채우는 풀페이지 메인 슬라이드입니다.

슬라이드는 총 3개로 구성되어 있으며, 각 슬라이드마다 다음 요소가 들어갑니다.

• 상단 작은 영문 라벨
• 큰 메인 문구
• 설명 문장
• 문의 버튼
• 배경에 크게 깔리는 영문 텍스트
• 우측 슬라이드 이동 버튼
• 현재 슬라이드 번호 표시

마우스 휠을 아래로 내리면 다음 슬라이드로 이동하고, 위로 올리면 이전 슬라이드로 이동합니다.

모바일에서는 손가락으로 위아래 스와이프하면 슬라이드가 전환됩니다.

---

사용하면 좋은 상황

이 코드는 이런 홈페이지 제작에 잘 어울립니다.

브랜드 소개형 홈페이지

포트폴리오 사이트

디자인 스튜디오 홈페이지

병원·에스테틱·프리미엄 서비스 메인 화면

아임웹 메인 섹션 커스텀

 

기본 템플릿보다 조금 더 세련된 웹디자인을 보여주고 싶을 때 사용하기 좋습니다.

---

적용 방법

아임웹에서는 원하는 섹션에 코드 위젯을 추가한 뒤 전체 코드를 붙여넣으면 됩니다.

티스토리에서는 글쓰기 화면에서 HTML 모드로 전환한 뒤 코드를 삽입하면 됩니다.

단, 이 코드는 화면 전체 높이를 사용하는 구조이기 때문에 일반 본문 중간보다는

메인 비주얼 영역이나 코드 예제 소개용으로 사용하는 것이 좋습니다.

 

적용 순서는 간단합니다.

1. 아래 전체 코드를 복사합니다.
2. 아임웹 코드 위젯 또는 티스토리 HTML 모드에 붙여넣습니다.
3. 문구, 버튼 링크, 색상을 내 브랜드에 맞게 수정합니다.
4. 모바일 화면에서 글자 크기와 여백을 확인합니다.

---

전체 코드

<section class="mzt-clean-fullpage" id="mztCleanFullpage">

  <div class="mzt-clean-slide active">
    <div class="mzt-clean-bg-text">WEB</div>

    <div class="mzt-clean-inner">
      <span>WEB DESIGN STUDIO</span>
      <h1>브랜드의 첫인상을<br>홈페이지에서 완성합니다</h1>
      <p>기획부터 디자인, 반응형 제작까지 브랜드의 방향에 맞게 설계합니다.</p>
      <a href="#contact">프로젝트 문의하기</a>
    </div>
  </div>

  <div class="mzt-clean-slide">
    <div class="mzt-clean-bg-text">FLOW</div>

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

  <div class="mzt-clean-slide">
    <div class="mzt-clean-bg-text">CUSTOM</div>

    <div class="mzt-clean-inner">
      <span>IMWEB CUSTOM</span>
      <h1>기본 템플릿을 넘어<br>브랜드답게 커스텀합니다</h1>
      <p>여백, 컬러, 인터랙션을 조정해 더 완성도 있는 메인 비주얼을 만듭니다.</p>
      <a href="#contact">상담 문의하기</a>
    </div>
  </div>

  <div class="mzt-clean-nav">
    <button type="button" class="active" aria-label="1번 슬라이드"></button>
    <button type="button" aria-label="2번 슬라이드"></button>
    <button type="button" aria-label="3번 슬라이드"></button>
  </div>

  <div class="mzt-clean-count">
    <b id="mztCleanCurrent">01</b>
    <span>/ 03</span>
  </div>

</section>

<style>
  .mzt-clean-fullpage,
  .mzt-clean-fullpage * {
    box-sizing: border-box;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif !important;
  }

  .mzt-clean-fullpage {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    background: #f3eee6;
    color: #111;
  }

  .mzt-clean-fullpage::before {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(0,0,0,.12);
    pointer-events: none;
    z-index: 5;
  }

  .mzt-clean-fullpage::after {
    content: "";
    position: absolute;
    right: -18vw;
    top: -20vw;
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
    background: #111;
    opacity: .05;
    pointer-events: none;
  }

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

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

  .mzt-clean-inner {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .mzt-clean-inner span {
    display: inline-block;
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .2em;
    color: #8b6f4e;
  }

  .mzt-clean-inner h1 {
    margin: 0;
    max-width: 980px;
    font-size: clamp(48px, 7vw, 104px);
    line-height: 1.05;
    letter-spacing: -0.065em;
    font-weight: 900;
    color: #111;
  }

  .mzt-clean-inner p {
    max-width: 560px;
    margin: 34px 0 42px;
    font-size: 18px;
    line-height: 1.75;
    font-weight: 500;
    color: rgba(0,0,0,.62);
    word-break: keep-all;
  }

  .mzt-clean-inner a {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 26px;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    transition: .25s ease;
  }

  .mzt-clean-inner a::after {
    content: "↗";
    font-size: 17px;
    transition: .25s ease;
  }

  .mzt-clean-inner a:hover {
    background: #8b6f4e;
    transform: translateY(-4px);
  }

  .mzt-clean-inner a:hover::after {
    transform: translate(3px, -3px);
  }

  .mzt-clean-bg-text {
    position: absolute;
    right: -2vw;
    bottom: 8vh;
    z-index: 1;
    font-size: clamp(110px, 22vw, 320px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.09em;
    color: rgba(0,0,0,.045);
    pointer-events: none;
    transform: translateX(60px);
    transition: transform 1s ease;
  }

  .mzt-clean-slide.active .mzt-clean-bg-text {
    transform: translateX(0);
  }

  .mzt-clean-slide.active .mzt-clean-inner span,
  .mzt-clean-slide.active .mzt-clean-inner h1,
  .mzt-clean-slide.active .mzt-clean-inner p,
  .mzt-clean-slide.active .mzt-clean-inner a {
    animation: mztCleanUp .85s ease both;
  }

  .mzt-clean-slide.active .mzt-clean-inner h1 {
    animation-delay: .08s;
  }

  .mzt-clean-slide.active .mzt-clean-inner p {
    animation-delay: .16s;
  }

  .mzt-clean-slide.active .mzt-clean-inner a {
    animation-delay: .24s;
  }

  @keyframes mztCleanUp {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mzt-clean-nav {
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  .mzt-clean-nav::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    background: rgba(0,0,0,.16);
    transform: translateX(-50%);
    z-index: -1;
  }

  .mzt-clean-nav button {
    width: 13px;
    height: 13px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 50%;
    background: #f3eee6;
    cursor: pointer;
    transition: .3s ease;
  }

  .mzt-clean-nav button.active,
  .mzt-clean-nav button:hover {
    background: #111;
    border-color: #111;
    transform: scale(1.45);
  }

  .mzt-clean-count {
    position: absolute;
    left: 72px;
    bottom: 54px;
    z-index: 20;
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #111;
  }

  .mzt-clean-count b {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.04em;
  }

  .mzt-clean-count span {
    font-size: 14px;
    font-weight: 800;
    color: rgba(0,0,0,.42);
  }

  @media (max-width: 768px) {
    .mzt-clean-fullpage {
      min-height: 680px;
    }

    .mzt-clean-fullpage::before {
      inset: 14px;
    }

    .mzt-clean-inner {
      padding: 0 28px;
    }

    .mzt-clean-inner span {
      font-size: 11px;
      margin-bottom: 20px;
    }

    .mzt-clean-inner h1 {
      font-size: 42px;
      line-height: 1.12;
    }

    .mzt-clean-inner p {
      margin: 26px 0 34px;
      font-size: 15px;
    }

    .mzt-clean-bg-text {
      right: -10vw;
      bottom: 12vh;
      font-size: 30vw;
    }

    .mzt-clean-nav {
      right: 24px;
      gap: 18px;
    }

    .mzt-clean-nav button {
      width: 10px;
      height: 10px;
    }

    .mzt-clean-count {
      left: 28px;
      bottom: 34px;
    }

    .mzt-clean-count b {
      font-size: 28px;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const slider = document.querySelector("#mztCleanFullpage");
    if (!slider) return;

    const slides = slider.querySelectorAll(".mzt-clean-slide");
    const navButtons = slider.querySelectorAll(".mzt-clean-nav button");
    const currentText = slider.querySelector("#mztCleanCurrent");

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

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

    function goToSlide(index) {
      if (isMoving || index === current) return;

      isMoving = true;

      slides[current].classList.remove("active");
      navButtons[current].classList.remove("active");

      current = (index + total) % total;

      slides[current].classList.add("active");
      navButtons[current].classList.add("active");
      currentText.textContent = formatNumber(current);

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

    navButtons.forEach(function (button, index) {
      button.addEventListener("click", function () {
        goToSlide(index);
      });
    });

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

      if (e.deltaY > 0 && !isLastSlide) {
        e.preventDefault();
        goToSlide(current + 1);
      }

      if (e.deltaY < 0 && !isFirstSlide) {
        e.preventDefault();
        goToSlide(current - 1);
      }
    }, { 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;

      if (diff > 0 && current < total - 1) {
        goToSlide(current + 1);
      }

      if (diff < 0 && current > 0) {
        goToSlide(current - 1);
      }
    });

    currentText.textContent = formatNumber(current);
  });
</script>

※ CSS와 JavaScript까지 포함된 전체 코드는 사용 시 함께 넣어야 정상 작동합니다.

---

코드 수정 포인트

1. 메인 문구 수정

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

-이 부분을 원하는 제목으로 바꾸면 됩니다.

-<br>은 줄바꿈입니다.
-원하지 않으면 삭제해도 됩니다.

 

2. 버튼 링크 수정

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

-#contact 부분을 원하는 링크로 바꾸면 됩니다.

-예를 들어 카카오톡 문의 링크, 네이버 예약 링크, 포트폴리오 페이지 주소로 변경할 수 있습니다.

 

3. 배경 컬러 수정

background: #f3eee6;

-전체 배경색을 바꾸고 싶다면 이 부분을 수정하면 됩니다.

-아이보리 계열은 차분한 느낌을 주고, 블랙이나 딥그린 계열은 더 프리미엄한 분위기를 줄 수 있습니다.

 

4. 버튼 색상 수정

background: #111;
color: #fff;

-버튼 배경색과 글자색을 수정하는 부분입니다.

-브랜드 컬러가 있다면 이 부분에 맞춰 변경하면 됩니다.

 

5. 슬라이드 개수 추가

슬라이드를 더 추가하고 싶다면 아래 구조를 복사해서 붙여넣으면 됩니다.

<div class="mzt-clean-slide">
  <div class="mzt-clean-bg-text">TEXT</div>
  <div class="mzt-clean-inner">
    <span>LABEL</span>
    <h1>메인 문구</h1>
    <p>설명 문장</p>
    <a href="#contact">버튼 문구</a>
  </div>
</div>

-단, 슬라이드를 추가했다면 우측 네비게이션 버튼과 하단 숫자 / 03도 함께 수정해야 합니다.

---

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

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

JavaScript 코드가 빠졌을 가능성이 높습니다.

HTML과 CSS만 넣으면 디자인은 보이지만, 휠 이동이나 버튼 클릭 전환은 작동하지 않습니다.

 

2. 버튼을 눌러도 이동하지 않는 경우

버튼 링크가 실제 섹션 ID와 맞는지 확인해야 합니다.

예를 들어 버튼이 #contact로 되어 있다면, 이동할 위치에 id="contact"가 있어야 합니다.

 

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

아래 부분의 숫자를 줄이면 됩니다.

.mzt-clean-inner h1 {
  font-size: 42px;
}

모바일 화면에서는 36px~42px 정도가 비교적 안정적입니다.

 

4. 아임웹에서 여백이 이상하게 보이는 경우

아임웹 기본 섹션 여백과 코드 내부 여백이 함께 적용된 경우일 수 있습니다.

이럴 때는 아임웹 섹션 자체의 상하 여백을 줄이고, 코드 안의 padding 값을 조정하면 됩니다.

 

5. 다른 코드와 충돌하는 경우

같은 페이지에 비슷한 슬라이드 코드가 여러 개 있으면 ID가 겹칠 수 있습니다.

이 코드는 mztCleanFullpage라는 ID를 사용합니다.

같은 코드를 한 페이지에 여러 번 넣을 경우 ID와 클래스명을 구분해서 수정해야 합니다.

---

 

홈페이지 제작 상담 문의

믓아 스튜디오

풀페이지 슬라이드는 홈페이지 첫 화면의 인상을 강하게 만들어주는 효과적인 커스텀 코드입니다.

단순히 예쁜 화면을 만드는 것보다 중요한 것은 방문자가 브랜드를 빠르게 이해하고,

자연스럽게 문의나 상담으로 이어지도록 구성하는 것입니다.

아임웹, 티스토리, HTML/CSS/JS 커스텀 코드 작업을 할 때 메인 비주얼에 차별화를 주고 싶다면 이 코드를 활용해 보세요.

 

아임웹 호버 인터랙션 만들기

아임웹 호버 인터랙션 만들기 | 이미지에 마우스를 올리면 배경이 바뀌는 효과