진행 안내 스크롤

Guided Scrolling

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

2026 편집 자료 언급

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

적용하는 곳

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

함께 살펴볼 점

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

직접 해 보기

변화를 직접 살펴보세요

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

직접 만들기

이 기법으로 만들어 보세요

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

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

아래 규칙을 지켜 주세요.
- 한국어 본문은 낱말 단위로 줄을 바꿉니다(word-break: keep-all).
- 글자와 바탕의 명암비는 4.5:1 이상으로 합니다.
- 폭 390px 화면에서 가로 스크롤 없이 읽힙니다.
- 모든 조작은 키보드로도 할 수 있고, 초점 표시가 보입니다.
- 움직임 줄이기 설정에서는 움직임 없이 결과만 보여 줍니다.
- 외부 글꼴과 스크립트를 CDN 에서 불러오지 않고 파일로 함께 둡니다. 글꼴은 이용 조건을 확인한 것만 씁니다.
- 예시 데이터에는 예시임을 표시하고, 실제로 제공하지 않는 기능·통계·후기를 넣지 않습니다.
- 실명·연락처·주소 같은 개인정보를 예시에 넣지 않습니다.

출처와 확인일

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

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

함께 살펴볼 항목

그림을 나란히 비교하기 →

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