아임웹 로딩 애니메이션 만들기 | 홈페이지 오프닝 화면 구현 코드

 

홈페이지에 접속했을 때 브랜드 로고가 먼저 나타나고 로딩 바가 자연스럽게 채워지는 사이트를 본 적 있으신가요?

대기업 사이트나 하이엔드 브랜드 홈페이지에서 자주 사용하는 연출인데요.

 

이번 글에서는 아임웹에서도 쉽게 적용할 수 있는 로딩 애니메이션 코드를 소개합니다.

실제로 믓아스튜디오 홈페이지에서도 사용 중인 방식이며, 방문자에게 조금 더 완성도 있는 첫인상을 전달할 수 있습니다.

 

실제 구현 예시

믓아 스튜디오

---

이 코드로 구현되는 기능

이 커스텀 코드를 적용하면 다음과 같은 효과를 만들 수 있습니다.

• 홈페이지 진입 시 전체 화면 로딩 페이지 표시
• 브랜드명 또는 로고 노출
• 프로그레스 바 애니메이션
• 부드러운 텍스트 등장 효과
• 로딩 종료 후 자연스럽게 메인 화면 노출
• 로딩 중 배경 콘텐츠 노출 방지

특히 페이지가 열릴 때 뒤쪽 콘텐츠가 먼저 보이는 현상을 방지하도록 제작되어 더욱 깔끔하게 동작합니다.

---

사용하면 좋은 상황

다음과 같은 홈페이지에 특히 잘 어울립니다.

• 홈페이지 제작 업체
• 디자인 에이전시
• 건축 회사
• 병원 홈페이지
• 법률사무소 홈페이지
• 브랜드 쇼핑몰
• 포트폴리오 사이트

첫 화면의 완성도를 높이고 싶은 경우 활용하기 좋습니다.

---

적용 방법

1. 아임웹 관리자 페이지

2. 디자인 모드 → 코드 위젯 추가

3. 아래 코드를 그대로 붙여넣으면 됩니다.

보통 메인 페이지 최상단에 넣는 것을 추천합니다.

---

 

전체 코드

<div id="msoaLoadingScreen">
  <div class="msoa-loading-inner">
    <div class="msoa-loading-logo">MEZTAH STUDIO</div>

    <div class="msoa-loading-line">
      <span></span>
    </div>

    <p>Loading your experience</p>
  </div>
</div>

<style>
body.msoa-loading-active > *:not(#msoaLoadingScreen):not(script):not(style){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

html.msoa-loading-active,
body.msoa-loading-active{
  overflow:hidden !important;
}

#msoaLoadingScreen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:2147483647 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#111 !important;
  color:#fff !important;

  opacity:1;
  visibility:visible;
  pointer-events:auto;

  overflow:hidden !important;
  isolation:isolate !important;

  transition:opacity .7s ease, visibility .7s ease;
}

#msoaLoadingScreen.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.msoa-loading-inner{
  width:min(420px,80vw);
  text-align:center;
  font-family:Pretendard,sans-serif;
}

.msoa-loading-logo{
  font-size:clamp(24px,4vw,46px);
  font-weight:800;
  letter-spacing:-0.04em;

  opacity:0;
  transform:translateY(18px);

  animation:msoaFadeUp .8s ease forwards;
}

.msoa-loading-line{
  width:100%;
  height:2px;

  margin:28px 0 16px;

  background:rgba(255,255,255,.18);
  overflow:hidden;
  border-radius:999px;
}

.msoa-loading-line span{
  display:block;
  width:0;
  height:100%;

  background:#fff;
  border-radius:999px;

  animation:msoaLoadingBar 1.6s ease forwards;
}

.msoa-loading-inner p{
  margin:0;

  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(255,255,255,.64);

  opacity:0;
  transform:translateY(10px);

  animation:msoaFadeUp .8s ease .25s forwards;
}

@keyframes msoaLoadingBar{
  0%{ width:0; }
  100%{ width:100%; }
}

@keyframes msoaFadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
</style>

<script>
(function(){
  const html = document.documentElement;
  const body = document.body;
  const loading = document.getElementById("msoaLoadingScreen");

  if(!loading) return;

  body.appendChild(loading);

  html.classList.add("msoa-loading-active");
  body.classList.add("msoa-loading-active");

  window.addEventListener("load", function(){
    setTimeout(function(){
      loading.classList.add("hide");
    }, 1700);

    setTimeout(function(){
      html.classList.remove("msoa-loading-active");
      body.classList.remove("msoa-loading-active");
      loading.remove();
    }, 2500);
  });
})();
</script>

---

 

코드 수정 포인트

1. 로고 문구 변경

<div class="msoa-loading-logo">
MEZTAH STUDIO
</div>

원하는 브랜드명으로 변경하면 됩니다.

 

2. 로딩 문구 변경

<p>Loading your experience</p>

예시

<p>Welcome to our website</p>

---

3. 배경 색상 변경

기본 검정색

background:#111;

화이트 버전

background:#fff;
color:#111;

 

4. 로딩 시간 변경

현재 설정

1700
2500

숫자를 늘리면 더 오래 표시되고 줄이면 더 빨리 사라집니다.

---

 

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

1. 뒤에 메인 화면이 먼저 보이는 경우

대부분 opacity 처리만 한 로딩 화면에서 발생합니다.

이 코드는

visibility:hidden;
pointer-events:none;

까지 함께 적용하여 해결했습니다.

 

2. 모바일에서 화면이 깜빡이는 경우

코드 위젯을 페이지 중간에 넣지 말고

메인 페이지 최상단에 배치해 주세요.

 

3. 로딩 화면이 사라지지 않는 경우

자바스크립트 충돌 가능성이 높습니다.

기존에 설치된 커스텀 코드가 있다면 하나씩 비활성화하며 확인해 보세요.

---

 

아임웹 기본 기능만으로는 구현하기 어려운 고급 로딩 애니메이션도

HTML/CSS/JS 커스텀 코드를 활용하면 손쉽게 제작할 수 있습니다.

 

특히 브랜드 홈페이지나 포트폴리오 사이트에서는 첫인상이 매우 중요하기 때문에

이런 작은 디테일이 전체 홈페이지의 완성도를 크게 높여줍니다.

홈페이지 제작 시 조금 더 프리미엄한 분위기를 만들고 싶다면 한 번 적용해 보시길 추천드립니다.

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

 

홈페이지 인트로 만들기

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