Sticky header
아래로 내려도 맨 위 제목줄은
화면 꼭대기에 딱 붙어 있어요
이럴 때 써요
- 쇼핑몰에서 한참 내려도 검색창이 위에 그대로일 때
- 뉴스 앱에서 메뉴 줄이 늘 위에 보일 때
- 회사 홈페이지 맨 위 메뉴를 어디서든 누르게 할 때
#스티키헤더#StickyHeader#고정메뉴#홈페이지
Hide on scroll
내릴 땐 위 메뉴가 쏙 숨고
살짝 올리면 다시 내려와요
LOOP↓ 내리면 숨고
↑ 올리면 나타나요
화면을 더 넓게
쓸 수 있어요
이럴 때 써요
- 모바일 뉴스에서 글 읽을 때 화면을 넓게 쓰고 싶을 때
- 인터넷 창 주소줄이 내릴 때 사라지는 것처럼
- 상세페이지에서 사진을 크게 보여주고 싶을 때
#헤드룸#HideOnScroll#숨는메뉴#모바일화면
Scroll progress bar
글을 읽어 내려간 만큼
위쪽 막대가 조금씩 채워져요
LOOPblog.co.kr/jeju
제주 3박 4일 여행 코스
여행 · 읽는 데 5분
0%
이럴 때 써요
- 블로그 긴 글에서 얼마나 남았는지 알려줄 때
- 온라인 약관·안내문을 끝까지 읽게 할 때
- 회의 요약 문서를 웹페이지로 만들 때
#스크롤진행바#ScrollProgressBar#읽은만큼표시#긴글
Back to top
한참 내려가면 ↑ 버튼이 생기고
누르면 맨 위로 슝 올라가요
이럴 때 써요
- 쇼핑몰 상품 목록을 끝까지 본 뒤 처음으로 갈 때
- 긴 공지사항을 다 읽고 다시 위로 갈 때
- 상세페이지 맨 아래에서 처음으로 돌아갈 때
#백투탑#BackToTop#맨위로버튼#상세페이지
Anchor scroll
메뉴를 누르면 그 내용이 있는 곳까지
미끄러지듯 스르륵 내려가요
LOOPstudio.co.kr
사진 한 장으로 남기는 하루
가족사진 · 프로필 · 우정사진
자연광 스튜디오에서 찍어 드려요
스튜디오 온소개가격문의
이럴 때 써요
- 한 장짜리 회사 소개 페이지에서 '가격' 누를 때
- 자주 묻는 질문에서 원하는 질문으로 바로 갈 때
- 상세페이지에서 '리뷰 보기'를 누르면 리뷰로 갈 때
#앵커스크롤#AnchorScroll#바로가기#한장홈페이지
Lazy loading
사진을 미리 다 불러오지 않고
보일 차례가 되면 그때 띄워요
이럴 때 써요
- 인스타그램처럼 사진이 많은 화면
- 쇼핑몰 상품 사진이 수백 장일 때
- 상세페이지가 무거워서 첫 화면이 느릴 때
#레이지로딩#LazyLoading#빠르게열기#사진많은페이지
Infinite scroll
목록 끝에 닿으면
다음 내용이 알아서 이어 붙어요
이럴 때 써요
- 유튜브·인스타그램 피드를 끝없이 내릴 때
- 쇼핑몰 상품 목록에서 '다음 페이지' 버튼이 없을 때
- 댓글이 많아서 조금씩 나눠 보여줄 때
#무한스크롤#InfiniteScroll#자동이어보기#피드
Pull to refresh
맨 위에서 아래로 쭉 끌어내리면
새 소식을 다시 불러와요
LOOP알림
📦택배가 문 앞에 도착했어요
💳카드 결제 ₩12,900
🎟️쿠폰이 곧 사라져요
⭐리뷰를 남겨 주세요
🚚주문하신 상품 출발
새로고침 중…
이럴 때 써요
- 카카오톡·메일 앱에서 새 메시지 확인할 때
- 배달앱 주문 상태를 다시 볼 때
- 모니터링 대시보드 숫자를 손으로 새로 고칠 때
#당겨서새로고침#PullToRefresh#새로고침#모바일앱
Scroll snap
어중간하게 손을 떼도
카드가 한 칸에 딱 맞춰 멈춰요
이럴 때 써요
- 앱 첫 화면의 이벤트 배너를 옆으로 넘길 때
- 쇼핑몰 '이번 주 기획전' 카드를 넘겨 볼 때
- 카드뉴스를 한 장씩 넘겨 보여줄 때
#스크롤스냅#ScrollSnap#한칸씩넘김#카드뉴스
Horizontal scroll section
아래로 내리고 있는데
이 부분만 옆으로 쭉 흘러가요
이럴 때 써요
- 브랜드 홈페이지에서 신상품을 줄지어 보여줄 때
- 회사 연혁을 연도순으로 옆으로 펼칠 때
- 포트폴리오 작품을 전시하듯 넘겨 보일 때
#가로스크롤#HorizontalScroll#옆으로흐름#브랜드홈페이지
Scroll-triggered animation
내려서 화면에 들어오는 순간
글과 그림이 짠 하고 나타나요
LOOPbrand.co.kr
왜 우리를 고를까요?
내려 보면 하나씩 나타나요
✓ 오늘 주문하면 내일 도착
✓ 30일 무료 반품
✓ 1:1 전문가 상담
✓ 구매 시 포인트 5% 적립
이럴 때 써요
- 회사 홈페이지에서 장점을 하나씩 보여줄 때
- '누적 고객 120만 명' 같은 숫자를 강조할 때
- 상세페이지 설명이 차례로 나오게 할 때
#스크롤트리거#ScrollTriggered#보이면등장#상세페이지
Parallax
멀리 있는 건 천천히, 가까운 건 빨리
움직여서 입체처럼 보여요
LOOPtravel.co.kr
추천 여행지
🏝️ 제주 3박 4일 · ₩389,000
⛰️ 강원 숲속 캠핑 · ₩129,000
🌊 부산 바다 호텔 · ₩159,000
여행 상품 더 보기 →
이럴 때 써요
- 여행·호텔 홈페이지 첫 화면 풍경 사진
- 브랜드 소개 페이지를 영화처럼 보이게 할 때
- 상세페이지 맨 위 큰 사진에 깊이감을 줄 때
#패럴랙스#Parallax#깊이감#첫화면
Scroll-linked text highlight
굴린 만큼 흐린 글자가
앞에서부터 하나씩 진해져요
이럴 때 써요
- 애플 홈페이지처럼 브랜드 한 문장을 강조할 때
- 회사 비전·다짐을 천천히 읽히게 할 때
- 발표자료를 웹으로 옮겨 핵심 문장을 보여줄 때
#스크롤하이라이트#ScrollTextHighlight#읽히는문장#브랜드메시지
Scroll zoom
가운데 작은 사진이 내릴수록
점점 커져서 화면을 가득 채워요
이럴 때 써요
- 새 시즌 광고 사진을 크게 펼쳐 보일 때
- 신차·신제품 공개 페이지 첫 장면
- 포트폴리오 대표 작품을 극적으로 보여줄 때
#스크롤줌#ScrollZoom#확대효과#신제품공개
Stacking cards
카드가 맨 위에 착 붙고
다음 카드가 그 위로 차곡차곡 쌓여요
이럴 때 써요
- 인테리어·이사 업체의 진행 순서 안내
- 서비스 장점 3가지를 한 장씩 보여줄 때
- 회의 요약 카드뉴스를 웹에서 넘겨 볼 때
#스택카드#StackingCards#카드쌓기#단계안내
Pinning
사진은 제자리에 꽂아 두고
옆의 설명만 하나씩 지나가요
이럴 때 써요
- 이어폰·휴대폰 상세페이지에서 제품 사진을 계속 보여줄 때
- 부동산 앱에서 지도는 두고 매물 설명만 내릴 때
- 보고서 웹페이지에서 그림 옆에 설명을 붙일 때
#핀#Pinning#제자리고정#제품상세
Scroll-scrubbed video
내리면 영상이 앞으로 가고
올리면 거꾸로 되감겨요
이럴 때 써요
- 애플 홈페이지처럼 제품이 돌아가는 장면
- 자동차 광고에서 차가 달려 나오는 장면
- 공장·공정 과정을 순서대로 보여줄 때
#스크롤연동영상#ScrollScrubbedVideo#영상스크롤#제품소개
Scrollytelling
그래프는 뒤에 두고 글이 올라올 때마다
강조하는 곳이 바뀌며 이야기가 이어져요
LOOPnews.co.kr
2015년엔 네 집 중 한 집이 혼자 살았어요
2019년엔 30%로 늘었고
2024년, 세 집 중 한 집이 1인 가구예요
이럴 때 써요
- 신문사 인터넷 기사에서 숫자를 풀어 설명할 때
- 연말 결산 페이지에서 한 해를 돌아볼 때
- 모니터링 결과 보고서를 웹으로 읽게 할 때
#스크롤리텔링#Scrollytelling#이야기전개#데이터기사