아임웹 커버 스크롤 만들기 | 애플 홈페이지 같은 섹션 덮기 효과 구현

 

애플 홈페이지 같은 섹션 덮기 효과 구현

 

홈페이지를 보다 보면 아래 섹션이 위로 자연스럽게 올라오면서 이전 섹션을 덮는 듯한 효과를 본 적이 있을 것입니다.

특히 애플 홈페이지나 글로벌 브랜드 사이트에서 자주 사용하는 방식인데요.

 

이번 글에서는 아임웹에서 구현할 수 있는 Cover Scroll(커버 스크롤) 효과를 소개합니다.

실제로 믓아스튜디오 홈페이지에서도 사용 중인 효과이며, 단순한 스크롤보다 훨씬 고급스러운 사용자 경험을 만들 수 있습니다.

 

실제 구현 예시

믓아 스튜디오

---

이 코드로 구현되는 기능

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

✔ 섹션이 화면에 고정됨

✔ 다음 섹션이 위로 올라오며 이전 섹션을 덮음

✔ 애플 홈페이지 같은 스크롤 인터랙션 구현

✔ 섹션별 스토리텔링 강화

✔ 별도 플러그인 없이 CSS만으로 구현 가능

사용자가 스크롤할 때 단순히 페이지가 이동하는 것이 아니라 콘텐츠가 하나씩 등장하는 느낌을 줄 수 있습니다.

---

사용하면 좋은 상황

다음과 같은 홈페이지 제작 시 활용하기 좋습니다.

• 브랜드 홈페이지
• 포트폴리오 사이트
• 병원 홈페이지
• 법률사무소 홈페이지
• 랜딩페이지
• 기업소개 홈페이지

특히 핵심 메시지를 단계적으로 보여주고 싶을 때 효과가 매우 좋습니다.

---

적용 방법

1단계 아임웹에서 섹션 3개 이상을 생성합니다.

예시

• 섹션 1
• 섹션 2
• 섹션 3

2단계 우클릭 후 섹션 설정에서 각 섹션의 ID를 확인합니다.

예시

#s20260604b35e2634ee4a0
#s20260604566520142f87e
#s20260604374da6b051260

사이트마다 ID가 다르므로 반드시 본인 사이트 ID로 변경해야 합니다.

 

3단계 페이지 하단 코드 위젯 또는 공통 디자인 > HEAD 코드 영역에 아래 코드를 삽입합니다.

---

 

전체 코드

<style>
/* =========================
   Imweb Cover Scroll
   Stacking / Overlap Section
========================= */

#s20260604b35e2634ee4a0,
#s20260604566520142f87e,
#s20260604374da6b051260{
  position:sticky !important;
  top:0 !important;
  min-height:100vh !important;
  height:100vh !important;
  overflow:hidden !important;
  transform:translateZ(0);
}

/* 위로 덮이는 순서 */
#s20260604b35e2634ee4a0{
  z-index:1 !important;
}

#s20260604566520142f87e{
  z-index:2 !important;
}

#s20260604374da6b051260{
  z-index:3 !important;
}

/* 섹션 안 콘텐츠 중앙 정렬 */
#s20260604b35e2634ee4a0 .inside,
#s20260604566520142f87e .inside,
#s20260604374da6b051260 .inside{
  min-height:100vh !important;
  height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  z-index:5 !important;
}

/* 배경 이미지 고급스럽게 고정 */
#s20260604b35e2634ee4a0 .section_bg,
#s20260604566520142f87e .section_bg,
#s20260604374da6b051260 .section_bg{
  transform:scale(1.04);
}

/* 살짝 어두운 오버레이 */
#s20260604b35e2634ee4a0::after,
#s20260604566520142f87e::after,
#s20260604374da6b051260::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.08),
    rgba(0,0,0,.26)
  );
}

/* 모바일 */
@media (max-width:768px){
  #s20260604b35e2634ee4a0,
  #s20260604566520142f87e,
  #s20260604374da6b051260{
    min-height:100svh !important;
    height:100svh !important;
  }

  #s20260604b35e2634ee4a0 .inside,
  #s20260604566520142f87e .inside,
  #s20260604374da6b051260 .inside{
    min-height:100svh !important;
    height:100svh !important;
  }
}
</style>

 

---

 

코드 수정 포인트

1. 섹션 추가하기

4번째 섹션을 추가하려면

#s000000000000000000{
  z-index:4 !important;
}

처럼 z-index를 증가시키면 됩니다.

 

2. 덮이는 순서 변경하기

z-index:1
z-index:2
z-index:3

숫자가 높을수록 위에 표시됩니다.

 

3. 배경 어둡기 변경하기

현재 설정

rgba(0,0,0,.26)

더 어둡게

rgba(0,0,0,.45)

더 밝게

rgba(0,0,0,.10)

---

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

1. 효과가 적용되지 않을 때

대부분 섹션 ID가 다르기 때문입니다.

반드시 자신의 아임웹 섹션 ID로 수정해야 합니다.

 

 

2. 모바일에서 높이가 이상할 때

코드 안에 있는

100svh

설정이 포함되어 있는지 확인합니다.

모바일 주소창 높이 문제를 해결해 줍니다.

 

3. 콘텐츠가 잘려 보일 때

섹션 내부에 너무 큰 요소가 있는 경우 발생합니다.

섹션 안 여백이나 이미지 크기를 조정하면 해결됩니다.

 

4. 섹션 사이가 깜빡일 때

배경색이 투명하거나 이미지 로딩이 느린 경우 발생합니다.

섹션 배경색을 지정하거나 이미지 최적화를 권장합니다.

---

 

마무리

최근 홈페이지 제작 트렌드는 단순히 예쁜 디자인보다 사용자의 시선을 어떻게 움직이느냐가 중요합니다.

이번 Cover Scroll 효과는 복잡한 JavaScript 없이도 아임웹에서 고급 웹디자인 느낌을 구현할 수 있는 방법입니다.

포트폴리오, 브랜드 사이트, 병원 홈페이지, 랜딩페이지 제작 시 활용하면 훨씬 완성도 높은 화면을 만들 수 있으니 한 번 적용해 보시기 바랍니다.

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

고급스러운 홈페이지 만들기

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

 

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