# Storytelling Design — 디자인 스타일 가이드

## 기본 정보
- **ID**: storytelling-design
- **카테고리**: ui-pattern
- **연도**: 2015

## 설명
스크롤과 애니메이션을 활용하여 이야기를 전달합니다.

## 핵심 원칙
- 몰입
- 흐름
- 감성

## 주요 특징
- 스크롤 트리거 애니메이션
- 순차적 콘텐츠 공개
- 시네마틱 효과
- 몰입형 경험
- 내러티브 흐름

## 컬러 시스템 가이드
이야기 흐름에 따라 색상이 변화. 감정·분위기 전환을 색으로 표현

### 색상 역할
- act-1: 도입부 색조 — 중립 또는 어두움
- act-2: 전개 색조 — 긴장감 또는 따뜻함
- act-3: 결말 색조 — 해결 또는 밝음
- accent: 핵심 감정 포인트 강조색

### 색상 제약 조건
- 섹션 간 색 전환 너무 급격하면 분위기 끊김 — gradient 전환 권장
- 모든 섹션 동일 색 사용 금지 — 이야기 진행감 없어짐

### 다크모드 전략
어두운 톤 스토리텔링은 dark mode와 자연 결합

### 대비 요구사항
각 섹션별 배경-텍스트 대비 WCAG AA

## 타이포그래피 가이드
- **폰트 성격**: 이야기 분위기에 맞는 폰트. 드라마틱한 세리프 또는 큰 디스플레이 폰트
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: 1.414 이상 — 드라마틱한 계층

### 타이포그래피 제약
- 섹션별 폰트 크기가 감정 강도를 표현 — 클라이막스는 크게

## 하면 안 되는 것 (안티패턴)
- 모든 섹션 동일한 레이아웃 금지 — 리듬 변화 필요
- 정보 전달 위주 레이아웃 금지 — 감성적 몰입 우선

## 반드시 포함해야 하는 것
- 섹션 간 시각적 흐름
- 스크롤 기반 이야기 전개
- 감정 전환 포인트 시각화

## 모션 가이드
스크롤 트리거 애니메이션. 섹션 진입 시 색상 fade 전환. 타이포 등장 애니메이션으로 강조.

## 사용 사례
- 브랜드 캠페인 사이트
- 제품 출시 페이지
- 저널리즘 기사
- NGO 인지도 캠페인

## 추천 프로젝트 유형
- 브랜드 캠페인
- 제품 출시 페이지
- 인터랙티브 저널리즘
- 포트폴리오

## 장점
- 감성적 연결로 전환율 향상
- 브랜드 스토리 효과적 전달
- 시각적으로 인상적인 경험

## 단점·한계
- 개발 비용이 높음
- 성능 최적화가 어려움
- 모션 민감 사용자에게 불편
- SEO에 불리할 수 있음

## 실제 사용 제품·서비스
- Apple iPhone 제품 페이지
- Nike 캠페인 사이트
- NYT 인터랙티브 기사

## 관련 스타일
- [parallax-scrolling](https://ui.buildersgate.com/styles/parallax-scrolling)
- [hero-section](https://ui.buildersgate.com/styles/hero-section)
- [z-pattern](https://ui.buildersgate.com/styles/z-pattern)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

### 색상
- primary: #F59E0B
- secondary: #D97706
- accent: #FCD34D
- background: #FFFBEB
- surface: #FFFFFF
- text: #1C1917
- textSecondary: #78716C
- border: #FDE68A

### 헤더
- background: linear-gradient(135deg, #F59E0B 0%, #92400E 100%)
- textColor: #FFFFFF
- titleFont: 'Playfair Display', 'Nanum Myeongjo', serif
- accentColor: #FCD34D

### 타이포그래피
- fontFamily: 'Playfair Display', 'Nanum Myeongjo', serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em

### 스페이싱
- unit: 8px
- scale: 1.25

### 그림자 (Shadows)
- sm: 0 2px 6px rgba(245,158,11,0.10)
- md: 0 6px 18px rgba(245,158,11,0.15)
- lg: 0 12px 32px rgba(245,158,11,0.18)
- xl: 0 24px 56px rgba(245,158,11,0.22)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 16px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #FDE68A

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.4s ease

### 애니메이션
- duration: 500ms
- easing: ease-in-out

### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=lift / textTransform=capitalize
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=underlined / focusEffect=border
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious

### 특수 효과
- glassmorphism: false
- gradientText: true
- animatedBackground: false
- scanlines: false
- noise: false

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=storytelling-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=storytelling-design&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Storytelling Design

스크롤과 애니메이션을 활용하여 이야기를 전달합니다.

연도

2015

#F59E0B

핵심 원칙

1

몰입

2

흐름

3

감성

주요 특징

  • 스크롤 트리거 애니메이션
  • 순차적 콘텐츠 공개
  • 시네마틱 효과
  • 몰입형 경험
  • 내러티브 흐름

장단점

장점

  • +감성적 연결로 전환율 향상
  • +브랜드 스토리 효과적 전달
  • +시각적으로 인상적인 경험

단점 / 한계

  • −개발 비용이 높음
  • −성능 최적화가 어려움
  • −모션 민감 사용자에게 불편
  • −SEO에 불리할 수 있음

적합한 사용처

사용 사례

  • 브랜드 캠페인 사이트
  • 제품 출시 페이지
  • 저널리즘 기사
  • NGO 인지도 캠페인

이런 프로젝트에 추천

브랜드 캠페인제품 출시 페이지인터랙티브 저널리즘포트폴리오

실제 사용 예시

Apple iPhone 제품 페이지Nike 캠페인 사이트NYT 인터랙티브 기사

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 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

애니메이션으로 강조하는 통계

우리의 성과

1M+
사용자
50K+
프로젝트
99%
만족도

관련 스타일 탐색

Parallax Scrolling

배경과 전경이 다른 속도로 움직여 깊이감과 몰입감을 제공하는 스크롤 기법입니다.

Hero Section

페이지 상단의 대형 섹션으로 주요 메시지와 비주얼을 강력하게 전달합니다.

Z-Pattern Layout

시선이 Z자 형태로 움직이도록 설계된 레이아웃 패턴입니다.