진행 안내 스크롤

Guided Scrolling

현재 읽는 구간과 남은 내용을 진행 표시·목차·단계로 알려준다. 장면으로 이야기를 만드는 스크롤텔링과 별개로 긴 페이지의 위치 안내에 집중한다.

2026 편집 자료 언급

진행 안내 스크롤 학습용 웹 화면. 관찰할 특징: 현재 장을 알려주는 목차, 스크롤에 따른 진행 표시, 다음 읽을 위치의 안내. — 구성·상호작용 기법을 설명하기 위해 직접 제작한 학습용 화면입니다.그림 원본 열기 ↗

어디에 적용할까요?

긴 매뉴얼·제안서·제품 설명·다단계 안내에서 현재 위치를 보여준다.

함께 살펴볼 점

움직이는 장식이 없어도 성립한다. 진행 표시가 본문을 가리거나 스크롤 속도를 강제로 바꾸지 않게 한다.

TRY THE INTERACTION

변화를 직접 살펴보세요

설명 영역을 스크롤하면 목차가 현재 읽는 장을 알려 줍니다.

MAKE YOUR OWN

이 기법으로 만들어 보세요

목적과 콘텐츠를 내 작업에 맞게 바꿔 사용하세요.

긴 안내서에 현재 장과 다음 장을 표시하는 목차를 붙인다. 본문의 스크롤은 자연스럽게 유지하고 각 장으로 바로 이동할 수 있게 한다.

한국어로 읽기 편한 반응형 웹페이지를 설계해 주세요. 모바일·키보드·움직임 감소 설정에서도 핵심 정보를 읽을 수 있게 해 주세요. 예시 콘텐츠임을 표시하고 실제로 제공하지 않는 기능이나 성과는 넣지 마세요. 이 사이트에 구현한다면 외부 의존성 없는 정적 구조를 우선해 주세요.

출처와 확인일

확인일 2026-09-20. 정의와 자료 맥락의 근거이며, 위 그림은 이 도감을 위해 별도로 제작했습니다.

Webflow 2026 웹 디자인 동향 ↗webflow.com · 발표·갱신 2026-01-08

함께 살펴볼 항목

그림을 나란히 비교하기 →

← 구성·상호작용 참고 보기