아임웹 홈페이지 접속 시 인트로 화면 만들기 | 아임웹 HTML/CSS/JS 코드 공유

안녕하세요.
전환 중심 홈페이지를 설계하고 있는 믓아 스튜디오입니다.

이 블로그에서는 아임웹 실무에서 자주 사용하는
HTML / CSS / JS 커스텀 코드와 인터랙션 제작 방법을 정리합니다.

 

단순히 “예쁜 효과”보다
실제 홈페이지 운영에서 바로 적용 가능한 구조와 사용자 경험 중심으로 공유하고 있습니다.

아래 코드를 그대로 복사해서 사용하셔도 되고,
프로젝트 상황에 맞게 자유롭게 수정하셔도 됩니다.

---

 

홈페이지에 처음 접속했을 때 바로 메인 화면이 보이는 것도 좋지만, 브랜드명이나 핵심 메시지를 짧게 보여주는 인트로 화면을 넣으면 첫인상을 더 강하게 만들 수 있습니다. 이번 글에서는 홈페이지 접속 시 잠깐 노출된 뒤 자연스럽게 사라지는 인트로 화면을 HTML, CSS, JavaScript로 구현하는 방법을 공유합니다.

 

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

 

---

 

이런 경우에 사용하면 좋습니다

브랜드 사이트, 포트폴리오, 랜딩페이지, 기업 홈페이지처럼 첫 화면의 분위기가 중요한 페이지에 적합합니다.
특히 로고, 슬로건, 짧은 문구를 먼저 보여주고 메인 페이지로 진입시키고 싶을 때 사용할 수 있습니다.

 

구현 방식

이번 인트로는 다음과 같은 구조로 제작합니다.

1. 화면 전체를 덮는 인트로 영역 생성
2. 가운데에 로고 또는 문구 배치
3. 일정 시간 후 인트로 화면이 부드럽게 사라짐
4. 사라진 뒤 실제 홈페이지 콘텐츠가 보이도록 처리

코드 사용 전 참고사항

아임웹에서는 HTML 위젯 또는 코드 삽입 영역에 적용할 수 있습니다.

다만 사이트 구조나 사용하는 섹션에 따라 z-index, 로고 텍스트, 노출 시간은 조정이 필요할 수 있습니다.

<!-- 홈페이지 접속 시 처음 보여지는 인트로 오버레이 영역 화면 전체를 덮고, 가운데 로고가 등장한 뒤 아래로 사라지는 구조입니다.-->

<div id="motsa-intro-overlay">
  <!-- 인트로에 사용할 로고 이미지 아래 src 안에 원하는 이미지 URL을 넣어주세요.-->
  <img 
    src="여기에_로고_이미지_URL_입력" 
    id="motsa-intro-logo" 
    alt="인트로 로고"/>
</div>

<style>
  /* 인트로 전체 배경 영역 position: fixed로 화면 전체를 덮습니다. */
  #motsa-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;

    /* 화면 전체 크기 */
    width: 100vw;
    height: 100vh;

    /* 인트로 배경색 */
    background-color: #000;

    /* 로고를 화면 중앙에 배치 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 다른 요소보다 위에 보이도록 설정 */
    z-index: 9999;

    /* 인트로 퇴장 애니메이션 2초 동안 보여준 뒤, 0.8초 동안 아래로 사라집니다. */
    animation: motsa-intro-slide-out 0.8s ease-in-out forwards;
    animation-delay: 2s;
  }

  /* 인트로 로고 이미지 */
  #motsa-intro-logo {
    /* 로고 크기 */
    width: 60vw;
    height: auto;

    /* 처음에는 투명하고 위쪽에 위치 */
    opacity: 0;
    transform: translateY(-100px);

    /* 로고 등장 애니메이션 위에서 아래로 떨어지듯 등장합니다. */
    animation: motsa-intro-drop-in 0.8s ease-out forwards;
  }

  /*  로고 등장 애니메이션 */
  @keyframes motsa-intro-drop-in {
    0% {
      transform: translateY(-100px);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* 인트로 화면 퇴장 애니메이션 */
  @keyframes motsa-intro-slide-out {
    0% {
      transform: translateY(0);
      opacity: 1;
    }

    100% {
      transform: translateY(100%);
      opacity: 0;
    }
  }

  /* 인트로가 끝난 뒤 본문 스크롤을 정상화하기 위한 클래스 */
  body.motsa-intro-loaded {
    overflow: auto;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    /*
      인트로 전체 시간 계산:
      로고 등장 0.8초
      대기 시간 2초
      퇴장 애니메이션 0.8초

      총 2.8초 후 인트로 요소를 숨깁니다.
    */
    setTimeout(function () {
      document.body.classList.add("motsa-intro-loaded");

      var introOverlay = document.getElementById("motsa-intro-overlay");

      if (introOverlay) {
        introOverlay.style.display = "none";
      }
    }, 2800);
  });
</script> 

 

코드 설명

HTML은 인트로 화면의 기본 구조를 만듭니다.
CSS는 화면 전체 배경, 텍스트 위치, 애니메이션 효과를 담당합니다.
JavaScript는 일정 시간이 지난 뒤 인트로를 숨기는 역할을 합니다.

 

해당 코드는 기본형 예시이기 때문에 브랜드 분위기에 맞게 색상, 문구, 애니메이션 속도를 수정해서 사용할 수 있습니다.

홈페이지에 어울리는 인트로 모션, 스크롤 애니메이션, 전환형 섹션 구성이 필요하다면 아래 홈페이지에서 더 많은 작업 사례를 확인해보세요.

 

 

믓아 스튜디오