Storytelling Design
스크롤과 애니메이션을 활용하여 이야기를 전달합니다.
- YEAR
- 2015
#F59E0B
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
Scroll Progress Indicator
스크롤 진행도를 시각화
스크롤하며 읽는 이야기
사용자가 스크롤할 때마다 이야기가 진행됩니다. 상단의 진행도 바가 얼마나 읽었는지 보여줍니다.
이러한 인터랙티브한 요소는 사용자의 몰입도를 높이고 콘텐츠를 더 기억에 남게 만듭니다.
Sequential Content Reveal
순차적으로 콘텐츠 공개
Chapter 1
여기서부터 이야기가 시작됩니다...
발견
각 섹션이 순차적으로 나타나면서 사용자의 시선을 자연스럽게 유도합니다. 이는 영화나 책처럼 스토리를 전달하는 효과를 만듭니다.
전개
타이밍을 조절하여 사용자가 각 섹션을 충분히 읽을 수 있도록 합니다.
Parallax Scrolling
시차 효과로 깊이감 표현
몰입형 경험
배경과 전경이 다른 속도로 움직이며 깊이감을 만듭니다
Timeline Narrative
타임라인으로 이야기 전달
2020년
회사 설립 및 첫 제품 출시
2021년
사용자 1만명 돌파
2022년
글로벌 진출 시작
2024년
새로운 도약 준비
Chapter-based Navigation
챕터 기반 스토리 네비게이션
Chapter 2: 발전
사용자는 원하는 챕터로 바로 이동할 수 있으며, 각 챕터는 독립적인 스토리를 담고 있습니다.
이러한 구조는 긴 콘텐츠를 소화하기 쉽게 만들고, 사용자가 자신의 속도로 탐색할 수 있게 합니다.
Immersive Hero Section
몰입형 히어로 섹션
당신의 이야기를 시작하세요
스크롤을 통해 펼쳐지는 인터랙티브한 경험
Animated Statistics
애니메이션으로 강조하는 통계
우리의 성과
이웃 스타일
어디에 쓰나
실제로 쓰는 곳
- Apple iPhone 제품 페이지
- Nike 캠페인 사이트
- NYT 인터랙티브 기사
사용 사례
- 브랜드 캠페인 사이트
- 제품 출시 페이지
- 저널리즘 기사
- NGO 인지도 캠페인
이런 프로젝트에 맞습니다
- 브랜드 캠페인
- 제품 출시 페이지
- 인터랙티브 저널리즘
- 포트폴리오
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 몰입
- 흐름
- 감성
주요 특징
- 스크롤 트리거 애니메이션
- 순차적 콘텐츠 공개
- 시네마틱 효과
- 몰입형 경험
- 내러티브 흐름
장점과 한계
장점
- 감성적 연결로 전환율 향상
- 브랜드 스토리 효과적 전달
- 시각적으로 인상적인 경험
한계
- 개발 비용이 높음
- 성능 최적화가 어려움
- 모션 민감 사용자에게 불편
- SEO에 불리할 수 있음
컬러 시스템
이야기 흐름에 따라 색상이 변화. 감정·분위기 전환을 색으로 표현
색의 역할
- act-1: 도입부 색조 — 중립 또는 어두움
- act-2: 전개 색조 — 긴장감 또는 따뜻함
- act-3: 결말 색조 — 해결 또는 밝음
- accent: 핵심 감정 포인트 강조색
제약
- 섹션 간 색 전환 너무 급격하면 분위기 끊김 — gradient 전환 권장
- 모든 섹션 동일 색 사용 금지 — 이야기 진행감 없어짐
다크모드 — 어두운 톤 스토리텔링은 dark mode와 자연 결합
명도 대비 — 각 섹션별 배경-텍스트 대비 WCAG AA
타이포그래피
이야기 분위기에 맞는 폰트. 드라마틱한 세리프 또는 큰 디스플레이 폰트
글꼴은 최대 2종 · 스케일 비율 1.414 이상 — 드라마틱한 계층
- 섹션별 폰트 크기가 감정 강도를 표현 — 클라이막스는 크게
설계 제약
반드시 포함
- 섹션 간 시각적 흐름
- 스크롤 기반 이야기 전개
- 감정 전환 포인트 시각화
하지 말 것
- 모든 섹션 동일한 레이아웃 금지 — 리듬 변화 필요
- 정보 전달 위주 레이아웃 금지 — 감성적 몰입 우선
모션 — 스크롤 트리거 애니메이션. 섹션 진입 시 색상 fade 전환. 타이포 등장 애니메이션으로 강조.
자주 묻는 질문
Storytelling Design이란 무엇인가요?
스크롤과 애니메이션을 활용하여 이야기를 전달합니다.
Storytelling Design의 핵심 디자인 원칙은 무엇인가요?
Storytelling Design의 핵심 원칙은 몰입, 흐름, 감성입니다.
Storytelling Design은 어떤 프로젝트에 적합한가요?
Storytelling Design은 브랜드 캠페인 사이트, 제품 출시 페이지, 저널리즘 기사, NGO 인지도 캠페인, 브랜드 캠페인, 제품 출시 페이지, 인터랙티브 저널리즘, 포트폴리오 등의 프로젝트에 적합합니다.
Storytelling Design의 장단점은 무엇인가요?
장점으로는 감성적 연결로 전환율 향상, 브랜드 스토리 효과적 전달, 시각적으로 인상적인 경험이 있습니다. 단점으로는 개발 비용이 높음, 성능 최적화가 어려움, 모션 민감 사용자에게 불편, SEO에 불리할 수 있음이 있습니다.
Storytelling Design에서 색상은 어떻게 사용하나요?
이야기 흐름에 따라 색상이 변화. 감정·분위기 전환을 색으로 표현 색상 역할은 act-1: 도입부 색조 — 중립 또는 어두움, act-2: 전개 색조 — 긴장감 또는 따뜻함, act-3: 결말 색조 — 해결 또는 밝음입니다. 주의사항: 섹션 간 색 전환 너무 급격하면 분위기 끊김 — gradient 전환 권장, 모든 섹션 동일 색 사용 금지 — 이야기 진행감 없어짐.
Storytelling Design에 어울리는 폰트 스타일은 무엇인가요?
Storytelling Design에는 이야기 분위기에 맞는 폰트. 드라마틱한 세리프 또는 큰 디스플레이 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 섹션별 폰트 크기가 감정 강도를 표현 — 클라이막스는 크게.
Storytelling Design 디자인에서 하면 안 되는 것은 무엇인가요?
Storytelling Design에서 피해야 할 것: 모든 섹션 동일한 레이아웃 금지 — 리듬 변화 필요, 정보 전달 위주 레이아웃 금지 — 감성적 몰입 우선.
Storytelling Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Storytelling Design을 적용한 대표적인 제품·서비스로는 Apple iPhone 제품 페이지, Nike 캠페인 사이트, NYT 인터랙티브 기사 등이 있습니다.