# Storytelling Design

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

- 층: 아카이브 (UI 패턴)
- ID: storytelling-design
- 연도: 2015
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/storytelling-design

## 정의

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

## 주요 특징

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

## 핵심 원칙

- 몰입
- 흐름
- 감성

## 컬러 시스템

이야기 흐름에 따라 색상이 변화. 감정·분위기 전환을 색으로 표현

### 색상 역할

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

### 색상 제약

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

### 다크모드 전략

어두운 톤 스토리텔링은 dark mode와 자연 결합

### 대비 요구사항

각 섹션별 배경-텍스트 대비 WCAG AA

## 타이포그래피

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

### 타이포그래피 제약

- 섹션별 폰트 크기가 감정 강도를 표현 — 클라이막스는 크게

## 설계 제약

### 하면 안 되는 것

- 모든 섹션 동일한 레이아웃 금지 — 리듬 변화 필요
- 정보 전달 위주 레이아웃 금지 — 감성적 몰입 우선

### 반드시 포함할 것

- 섹션 간 시각적 흐름
- 스크롤 기반 이야기 전개
- 감정 전환 포인트 시각화

### 모션 가이드

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

## 사용 사례

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

## 추천 프로젝트 유형

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

## 장단점

### 장점

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

### 단점·한계

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

## 실제 사용 제품·서비스

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

## 자주 묻는 질문

### Q1. Storytelling Design이란 무엇인가요?

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

### Q2. Storytelling Design의 핵심 디자인 원칙은 무엇인가요?

Storytelling Design의 핵심 원칙은 몰입, 흐름, 감성입니다.

### Q3. Storytelling Design은 어떤 프로젝트에 적합한가요?

Storytelling Design은 브랜드 캠페인 사이트, 제품 출시 페이지, 저널리즘 기사, NGO 인지도 캠페인, 브랜드 캠페인, 제품 출시 페이지, 인터랙티브 저널리즘, 포트폴리오 등의 프로젝트에 적합합니다.

### Q4. Storytelling Design의 장단점은 무엇인가요?

장점으로는 감성적 연결로 전환율 향상, 브랜드 스토리 효과적 전달, 시각적으로 인상적인 경험이 있습니다. 단점으로는 개발 비용이 높음, 성능 최적화가 어려움, 모션 민감 사용자에게 불편, SEO에 불리할 수 있음이 있습니다.

### Q5. Storytelling Design에서 색상은 어떻게 사용하나요?

이야기 흐름에 따라 색상이 변화. 감정·분위기 전환을 색으로 표현 색상 역할은 act-1: 도입부 색조 — 중립 또는 어두움, act-2: 전개 색조 — 긴장감 또는 따뜻함, act-3: 결말 색조 — 해결 또는 밝음입니다. 주의사항: 섹션 간 색 전환 너무 급격하면 분위기 끊김 — gradient 전환 권장, 모든 섹션 동일 색 사용 금지 — 이야기 진행감 없어짐.

### Q6. Storytelling Design에 어울리는 폰트 스타일은 무엇인가요?

Storytelling Design에는 이야기 분위기에 맞는 폰트. 드라마틱한 세리프 또는 큰 디스플레이 폰트 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 섹션별 폰트 크기가 감정 강도를 표현 — 클라이막스는 크게.

### Q7. Storytelling Design 디자인에서 하면 안 되는 것은 무엇인가요?

Storytelling Design에서 피해야 할 것: 모든 섹션 동일한 레이아웃 금지 — 리듬 변화 필요, 정보 전달 위주 레이아웃 금지 — 감성적 몰입 우선.

### Q8. Storytelling Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Storytelling Design을 적용한 대표적인 제품·서비스로는 Apple iPhone 제품 페이지, Nike 캠페인 사이트, NYT 인터랙티브 기사 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

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

### 타이포그래피

- fontFamily: 'Playfair Display', 'Nanum Myeongjo', serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em
- titleFont: 'Playfair Display', 'Nanum Myeongjo', serif

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1.25
- borderRadius: sm 4px / md 8px / lg 16px / full 9999px
- shadow sm: 0 2px 6px rgba(245,158,11,0.10)
- shadow md: 0 6px 18px rgba(245,158,11,0.15)
- shadow lg: 0 12px 32px rgba(245,158,11,0.18)
- border: 1px solid #FDE68A

### 컴포넌트 형태

- button: pill / hover lift / text capitalize
- card: elevated / hover lift
- input: underlined / focus border
- badge: pill / subtle
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section spacious
- animation: 500ms ease-in-out
- specialEffects: gradientText

## 관련 링크

### 관련 스타일

- [Parallax Scrolling](https://ui.buildersgate.com/styles/parallax-scrolling)
- [Hero Section](https://ui.buildersgate.com/styles/hero-section)
- [Z-Pattern Layout](https://ui.buildersgate.com/styles/z-pattern)

---

HTML 버전: https://ui.buildersgate.com/styles/storytelling-design

이 문서는 https://ui.buildersgate.com/styles/storytelling-design.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.