# Parallax Scrolling — 디자인 스타일 가이드

## 기본 정보
- **ID**: parallax-scrolling
- **카테고리**: ui-pattern
- **연도**: 2011

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

## 핵심 원칙
- 깊이와 차원
- 시각적 흥미
- 자연스러운 움직임

## 주요 특징
- 다층 레이어 구조
- 시차 효과
- 깊이감 표현
- 스크롤 기반 애니메이션
- 몰입형 경험

## 컬러 시스템 가이드
레이어별 색상 깊이. 먼 배경과 가까운 전경의 색 차이로 원근감 강화

### 색상 역할
- far-background: 가장 어둡거나 낮은 채도 — 멀리 있는 느낌
- mid-layer: 중간 명도
- foreground: 가장 밝거나 강한 색 — 가장 가까운 레이어
- text: 전경 레이어 위 — 배경과 충분한 대비

### 색상 제약 조건
- 레이어 간 색 구분 충분히 — 같은 색이면 parallax 효과 약해짐
- 너무 많은 레이어 사용 금지 — 3~5레이어 권장

### 다크모드 전략
배경 레이어 더 어둡게, 전경 레이어 밝기 유지

### 대비 요구사항
각 레이어 위 텍스트 대비 확인

## 타이포그래피 가이드
- **폰트 성격**: 시각적 임팩트 있는 디스플레이 폰트. 스크롤 경험과 어울리는 대담함
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: 1.5 이상

### 타이포그래피 제약
- hero 텍스트 매우 크게 — parallax의 극적 효과 배가
- 스크롤 중 텍스트 가독성 유지

## 하면 안 되는 것 (안티패턴)
- 모션 민감 사용자 고려 없이 강한 parallax 사용 금지
- 모바일에서 성능 저하 유발하는 heavy parallax 금지

## 반드시 포함해야 하는 것
- prefers-reduced-motion 지원
- 레이어별 다른 스크롤 속도 (0.3~0.8 배율)
- intersection observer 기반 진입 트리거

## 모션 가이드
스크롤에 반응하는 transform: translateY. will-change: transform 성능 최적화. prefers-reduced-motion: reduce 시 비활성화.

## 사용 사례
- 브랜드 스토리 사이트
- 포트폴리오
- 제품 출시 페이지
- 이벤트 사이트

## 추천 프로젝트 유형
- 브랜드 스토리 사이트
- 포트폴리오
- 제품 출시 페이지
- 이벤트 사이트

## 장점
- 스크롤 시 시각적 흥미 유발
- 스토리텔링과 조합 시 강력한 효과
- 페이지 체류 시간 증가

## 단점·한계
- 모바일에서 구현 어렵고 성능 저하
- 모션 민감 사용자에게 멀미 유발 가능
- SEO에 불리할 수 있음

## 실제 사용 제품·서비스
- Apple AirPods Pro 제품 페이지
- Nike 일부 캠페인

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

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

### 색상
- primary: #667EEA
- secondary: #764BA2
- accent: #F093FB
- background: #1A202C
- surface: #2D3748
- text: #F7FAFC
- textSecondary: #CBD5E0
- border: #4A5568

### 헤더
- background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%)
- textColor: #FFFFFF
- accentColor: #F093FB

### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.01em

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

### 그림자 (Shadows)
- sm: 0 4px 6px rgba(0, 0, 0, 0.1)
- md: 0 10px 15px rgba(0, 0, 0, 0.2)
- lg: 0 20px 25px rgba(0, 0, 0, 0.3)
- xl: 0 25px 50px rgba(0, 0, 0, 0.4)

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

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

### 이펙트
- blur: 8px
- opacity: 0.9
- transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1)

### 애니메이션
- duration: 600ms
- easing: cubic-bezier(0.4, 0, 0.2, 1)

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=glow / textTransform=none
- 카드: style=glass / hoverEffect=glow
- 인풋: style=filled / focusEffect=glow
- 배지: shape=rounded / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24

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

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

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

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

← 홈으로 돌아가기

Parallax Scrolling

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

연도

2011

#667EEA

핵심 원칙

1

깊이와 차원

2

시각적 흥미

3

자연스러운 움직임

주요 특징

  • 다층 레이어 구조
  • 시차 효과
  • 깊이감 표현
  • 스크롤 기반 애니메이션
  • 몰입형 경험

장단점

장점

  • +스크롤 시 시각적 흥미 유발
  • +스토리텔링과 조합 시 강력한 효과
  • +페이지 체류 시간 증가

단점 / 한계

  • −모바일에서 구현 어렵고 성능 저하
  • −모션 민감 사용자에게 멀미 유발 가능
  • −SEO에 불리할 수 있음

적합한 사용처

사용 사례

  • 브랜드 스토리 사이트
  • 포트폴리오
  • 제품 출시 페이지
  • 이벤트 사이트

이런 프로젝트에 추천

브랜드 스토리 사이트포트폴리오제품 출시 페이지이벤트 사이트

실제 사용 예시

Apple AirPods Pro 제품 페이지Nike 일부 캠페인

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Layered Parallax

여러 레이어가 다른 속도로 움직여 깊이감을 표현

Parallax Layers

Multiple layers create depth

Background Parallax

배경이 전경보다 느리게 움직이는 효과

Hero Section

배경은 천천히, 콘텐츠는 빠르게 움직여 깊이감을 만듭니다.

Horizontal Parallax

수평 방향의 시차 효과

Layer 1
Layer 2
Layer 3

Image with Parallax

이미지와 텍스트의 시차 스크롤

🏔️

Mountain View

이미지는 느리게, 텍스트는 빠르게 스크롤되어 몰입감 있는 경험을 제공합니다.

Depth Visualization

깊이를 시각화한 레이어 구조

Depth Layers

Far → Mid → Near → Front

Background
Midground
Foreground

Parallax Cards

카드에 적용된 시차 효과

🎨

Design

💻

Develop

🚀

Deploy

Text Parallax

텍스트 레이어의 시차 효과

PARALLAX
PARALLAX
PARALLAX EFFECT

관련 스타일 탐색

Storytelling Design

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

Hero Section

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

Z-Pattern Layout

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