한쪽은 고정, 한쪽은 스크롤! sticky scroll 레이아웃으로 몰입감 있는 웹 사이트 만들기
CSS 25.10.30 조회 13한쪽은 고정, 한쪽은 스크롤! sticky 레이아웃으로 몰입감 있는 웹 만들기
✅ 왜 한쪽은 고정되고 한쪽은 스크롤되게 만들까?
스티키 레이아웃은 사용자의 시선을 단계적으로 이끌 수 있는 구조입니다.
특히 브랜드 스토리나 서비스 설명 페이지처럼 정보 전달이 중요한 콘텐츠에서
사용자가 중간에 이탈하지 않고 끝까지 읽게 만드는 데 효과적입니다.
✅ 기본 구조 이해하기
· HTML/CSS로 간단히 구조 잡기 (display: flex or grid)
· 고정 영역: position: sticky; height:100vh 사용
· 스크롤 영역: 일반적인 문서 흐름(flow) 유지
✅ 스티키 레이아웃 효과를 극대화하는 방법은?
· ScrollTrigger 라이브러리 등을 활용해 sticky 레이아웃에 자연스러운 전환 애니메이션을 더함으로써 시각적 몰입감을 극대화 할 수 있습니다.
➰➰➰
✏️ HTML 구조는 이렇게 생겼어요
✔ 고정될 sticky 영역과 scroll 영역을 분리
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <article id="inc01"> <div class="atc__inner"> <div class="group-cont"> <div class="bar"></div> <div class="col-2"> <div class="area-sticky"> <h2>Ingredients Story</h2> </div> <div class="area-scroll"> <div class="pure-skin"> <figure class="main-thumb"> <img src="/img/inc01_img01.jpg" alt="Pure Nature, Pure Skin"> <figcaption>Pure Nature, Pure Skin</figcaption> </figure> <div class="col-2"> <figure class="thumb-s"> <img src="/img/inc01_img02.jpg" alt="Pure Nature, Pure Skin"> </figure> <figure class="thumb-m"> <img src="/img/inc01_img03.jpg" alt="Pure Nature, Pure Skin"> </figure> </div> </div> </div> </div> </div> </div> </article> | cs |
✏️ CSS로 효과 구현하기
✔ 고정 영역에 position: sticky와 height: 100vh를 적용
고정되는 요소는 화면에 고정된 상태로 유지되고, 나머지 콘텐츠는 자연스럽게 아래로 흐르며 스크롤 진행
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #inc01{position:relative;padding-top:15px;transition:color 0.2s;max-width:460px;font-family:var(--e-font);} #inc01 .group-cont{position:relative} #inc01 .group-cont .bar{position:sticky;top:30px;left:0;width:100%;height:1px;background-color:#111;transition:background-color 0.2s} #inc01 .group-cont >.col-2{display:flex;padding-top:15px} /* 고정 영역 */ #inc01 .area-sticky{position:sticky;top:30px;height:100vh} #inc01 .area-sticky h2{padding-bottom:20px;font-family:var(--e-font);font-size:20px;font-weight:normal} #inc01 .area-sticky h3{font-family:var(--k-font);font-size:22px;font-weight:normal} #inc01 .area-sticky p.desc{white-space:pre-line;font-size:16px;color:rgba(17,17,17,0.8);transition:color 0.2s} /* 스크롤 영역 */ #inc01 .area-scroll{position:relative;z-index:1} #inc01 .area-scroll > *{max-width:370px} #inc01 .area-scroll .col-2{display:grid;grid-template-columns:repeat(1,1fr)} #inc01 .area-scroll .col-2 .thumb-s img{width:140px} #inc01 .area-scroll .col-2 .thumb-m{display:flex;justify-content:flex-end} #inc01 .area-scroll .col-2 .thumb-m img{width:200px} #inc01 .area-scroll figure.main-thumb{display:flex;flex-direction:column;align-items:flex-end;gap:20px} #inc01 .area-scroll figure.main-thumb figcaption{font-family:var(--e-font);font-size:18px} /* 이미지 스타일 */ #inc01 .pure-skin figure.main-thumb img{width:100%;object-fit:cover} #inc01 .pure-skin .text-box{position:relative;padding:255px 0 235px} #inc01 .pure-skin .text-box img{position:absolute;opacity:0.2;top:19%;left:90px} #inc01 .pure-skin .text-box p.desc{font-family:var(--k-font);font-size:16px;white-space:pre-line;text-align:center;color:rgba(17, 17, 17, 0.8)} | cs |
➰➰➰
스티키 레이아웃은 복잡한 스크립트 없이도 몰입감 있는 인터랙션을 구현할 수 있는 강력한 방식입니다.
핵심 콘텐츠에 집중시키고, 브랜드 메시지를 선명하게 전달할 수 있다는 점에서 많은 웹사이트가 활용하고 있습니다.
디자인키트에서는 브랜드 페이지나 긴 스토리형 콘텐츠에 활용할 수 있는 다양한 템플릿을 제공합니다.
✨ 관련 링크 ✨
