# Parallax Scrolling

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

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

## 정의

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

## 주요 특징

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

## 핵심 원칙

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

## 컬러 시스템

레이어별 색상 깊이. 먼 배경과 가까운 전경의 색 차이로 원근감 강화

### 색상 역할

- 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 일부 캠페인

## 자주 묻는 질문

### Q1. Parallax Scrolling이란 무엇인가요?

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

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

Parallax Scrolling의 핵심 원칙은 깊이와 차원, 시각적 흥미, 자연스러운 움직임입니다.

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

Parallax Scrolling은 브랜드 스토리 사이트, 포트폴리오, 제품 출시 페이지, 이벤트 사이트, 브랜드 스토리 사이트, 포트폴리오, 제품 출시 페이지, 이벤트 사이트 등의 프로젝트에 적합합니다.

### Q4. Parallax Scrolling의 장단점은 무엇인가요?

장점으로는 스크롤 시 시각적 흥미 유발, 스토리텔링과 조합 시 강력한 효과, 페이지 체류 시간 증가이 있습니다. 단점으로는 모바일에서 구현 어렵고 성능 저하, 모션 민감 사용자에게 멀미 유발 가능, SEO에 불리할 수 있음이 있습니다.

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

레이어별 색상 깊이. 먼 배경과 가까운 전경의 색 차이로 원근감 강화 색상 역할은 far-background: 가장 어둡거나 낮은 채도 — 멀리 있는 느낌, mid-layer: 중간 명도, foreground: 가장 밝거나 강한 색 — 가장 가까운 레이어입니다. 주의사항: 레이어 간 색 구분 충분히 — 같은 색이면 parallax 효과 약해짐, 너무 많은 레이어 사용 금지 — 3~5레이어 권장.

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

Parallax Scrolling에는 시각적 임팩트 있는 디스플레이 폰트. 스크롤 경험과 어울리는 대담함 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: hero 텍스트 매우 크게 — parallax의 극적 효과 배가, 스크롤 중 텍스트 가독성 유지.

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

Parallax Scrolling에서 피해야 할 것: 모션 민감 사용자 고려 없이 강한 parallax 사용 금지, 모바일에서 성능 저하 유발하는 heavy parallax 금지.

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

Parallax Scrolling을 적용한 대표적인 제품·서비스로는 Apple AirPods Pro 제품 페이지, Nike 일부 캠페인 등이 있습니다.

## 참고 디자인 토큰

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

### 색상

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

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.01em

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

- spacing: unit 8px × scale 1.5
- borderRadius: sm 4px / md 8px / lg 16px / full 9999px
- shadow sm: 0 4px 6px rgba(0, 0, 0, 0.1)
- shadow md: 0 10px 15px rgba(0, 0, 0, 0.2)
- shadow lg: 0 20px 25px rgba(0, 0, 0, 0.3)
- border: 1px solid #4A5568

### 컴포넌트 형태

- button: rounded / hover glow / text none
- card: glass / hover glow
- input: filled / focus glow
- badge: rounded / subtle
- icon: lucide / stroke 1.5 / size 24px
- layout: fluid / section spacious
- animation: 600ms cubic-bezier(0.4, 0, 0.2, 1)
- specialEffects: glassmorphism, gradientText, animatedBackground

## 관련 링크

### 관련 스타일

- [Storytelling Design](https://ui.buildersgate.com/styles/storytelling-design)
- [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/parallax-scrolling

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