스크롤텔링

Scrollytelling

스크롤의 진행에 맞춰 설명과 시각 장면을 연결한다. 단계마다 독자가 무엇을 새로 이해해야 하는지 정하는 서사 구조가 먼저다.

기존 기법 · 최근 해설

스크롤텔링 학습용 웹 화면. 관찰할 특징: 단계마다 달라지는 설명, 본문과 함께 바뀌는 도식, 수집·분석·검토의 이야기. — 구성·상호작용 기법을 설명하기 위해 직접 제작한 학습용 화면입니다.그림 원본 열기 ↗

어디에 적용할까요?

프로젝트 과정·제품 원리·연구 해설·교육 단계의 설명에 활용한다.

함께 살펴볼 점

빠른 스크롤이나 중간 지점 진입에서도 해당 장면이 완전해야 한다. 정적 순서로 읽을 수 있는 대안을 제공한다.

TRY THE INTERACTION

변화를 직접 살펴보세요

세 단락을 읽으며 자료를 모으고, 관계를 찾고, 결과를 검토하는 도식의 변화를 살펴보세요.

MAKE YOUR OWN

이 기법으로 만들어 보세요

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

자료 수집·분석·결과 검토의 세 단계를 설명한다. 각 단락 옆의 도식은 해당 단계만 강조하며, 전체 단계는 별도 요약으로 함께 보여준다.

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

출처와 확인일

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

The Pudding 제작 과정 ↗pudding.cool · 게시일 미확인
Webflow의 최근 스크롤텔링 해설 ↗webflow.com · 게시일 미확인

함께 살펴볼 항목

그림을 나란히 비교하기 →

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