# 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
## 자주 묻는 질문 (FAQ)
### Q: Parallax Scrolling이란 무엇인가요?
A: 배경과 전경이 다른 속도로 움직여 깊이감과 몰입감을 제공하는 스크롤 기법입니다.
### Q: Parallax Scrolling의 핵심 디자인 원칙은 무엇인가요?
A: Parallax Scrolling의 핵심 원칙은 깊이와 차원, 시각적 흥미, 자연스러운 움직임입니다.
### Q: Parallax Scrolling은 어떤 프로젝트에 적합한가요?
A: Parallax Scrolling은 브랜드 스토리 사이트, 포트폴리오, 제품 출시 페이지, 이벤트 사이트, 브랜드 스토리 사이트, 포트폴리오, 제품 출시 페이지, 이벤트 사이트 등의 프로젝트에 적합합니다.
### Q: Parallax Scrolling의 장단점은 무엇인가요?
A: 장점으로는 스크롤 시 시각적 흥미 유발, 스토리텔링과 조합 시 강력한 효과, 페이지 체류 시간 증가이 있습니다. 단점으로는 모바일에서 구현 어렵고 성능 저하, 모션 민감 사용자에게 멀미 유발 가능, SEO에 불리할 수 있음이 있습니다.
### Q: Parallax Scrolling에서 색상은 어떻게 사용하나요?
A: 레이어별 색상 깊이. 먼 배경과 가까운 전경의 색 차이로 원근감 강화 색상 역할은 far-background: 가장 어둡거나 낮은 채도 — 멀리 있는 느낌, mid-layer: 중간 명도, foreground: 가장 밝거나 강한 색 — 가장 가까운 레이어입니다. 주의사항: 레이어 간 색 구분 충분히 — 같은 색이면 parallax 효과 약해짐, 너무 많은 레이어 사용 금지 — 3~5레이어 권장.
### Q: Parallax Scrolling에 어울리는 폰트 스타일은 무엇인가요?
A: Parallax Scrolling에는 시각적 임팩트 있는 디스플레이 폰트. 스크롤 경험과 어울리는 대담함 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: hero 텍스트 매우 크게 — parallax의 극적 효과 배가, 스크롤 중 텍스트 가독성 유지.
### Q: Parallax Scrolling 디자인에서 하면 안 되는 것은 무엇인가요?
A: Parallax Scrolling에서 피해야 할 것: 모션 민감 사용자 고려 없이 강한 parallax 사용 금지, 모바일에서 성능 저하 유발하는 heavy parallax 금지.
### Q: Parallax Scrolling을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Parallax Scrolling을 적용한 대표적인 제품·서비스로는 Apple AirPods Pro 제품 페이지, Nike 일부 캠페인 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=parallax-scrolling
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=parallax-scrolling&merged=true
Parallax Scrolling의 핵심 원칙은 깊이와 차원, 시각적 흥미, 자연스러운 움직임입니다.
Parallax Scrolling은 어떤 프로젝트에 적합한가요?
Parallax Scrolling은 브랜드 스토리 사이트, 포트폴리오, 제품 출시 페이지, 이벤트 사이트, 브랜드 스토리 사이트, 포트폴리오, 제품 출시 페이지, 이벤트 사이트 등의 프로젝트에 적합합니다.
Parallax Scrolling의 장단점은 무엇인가요?
장점으로는 스크롤 시 시각적 흥미 유발, 스토리텔링과 조합 시 강력한 효과, 페이지 체류 시간 증가이 있습니다. 단점으로는 모바일에서 구현 어렵고 성능 저하, 모션 민감 사용자에게 멀미 유발 가능, SEO에 불리할 수 있음이 있습니다.
Parallax Scrolling에서 색상은 어떻게 사용하나요?
레이어별 색상 깊이. 먼 배경과 가까운 전경의 색 차이로 원근감 강화 색상 역할은 far-background: 가장 어둡거나 낮은 채도 — 멀리 있는 느낌, mid-layer: 중간 명도, foreground: 가장 밝거나 강한 색 — 가장 가까운 레이어입니다. 주의사항: 레이어 간 색 구분 충분히 — 같은 색이면 parallax 효과 약해짐, 너무 많은 레이어 사용 금지 — 3~5레이어 권장.
Parallax Scrolling에 어울리는 폰트 스타일은 무엇인가요?
Parallax Scrolling에는 시각적 임팩트 있는 디스플레이 폰트. 스크롤 경험과 어울리는 대담함 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: hero 텍스트 매우 크게 — parallax의 극적 효과 배가, 스크롤 중 텍스트 가독성 유지.
Parallax Scrolling 디자인에서 하면 안 되는 것은 무엇인가요?
Parallax Scrolling에서 피해야 할 것: 모션 민감 사용자 고려 없이 강한 parallax 사용 금지, 모바일에서 성능 저하 유발하는 heavy parallax 금지.
Parallax Scrolling을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Parallax Scrolling을 적용한 대표적인 제품·서비스로는 Apple AirPods Pro 제품 페이지, Nike 일부 캠페인 등이 있습니다.