Parallax Scrolling
배경과 전경이 다른 속도로 움직여 깊이감과 몰입감을 제공하는 스크롤 기법입니다.
- YEAR
- 2011
#667EEA
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
Layered Parallax
여러 레이어가 다른 속도로 움직여 깊이감을 표현
Parallax Layers
Multiple layers create depth
Background Parallax
배경이 전경보다 느리게 움직이는 효과
Hero Section
배경은 천천히, 콘텐츠는 빠르게 움직여 깊이감을 만듭니다.
Horizontal Parallax
수평 방향의 시차 효과
Image with Parallax
이미지와 텍스트의 시차 스크롤
Mountain View
이미지는 느리게, 텍스트는 빠르게 스크롤되어 몰입감 있는 경험을 제공합니다.
Depth Visualization
깊이를 시각화한 레이어 구조
Depth Layers
Far → Mid → Near → Front
Parallax Cards
카드에 적용된 시차 효과
Design
Develop
Deploy
Text Parallax
텍스트 레이어의 시차 효과
이웃 스타일
어디에 쓰나
실제로 쓰는 곳
- Apple AirPods Pro 제품 페이지
- Nike 일부 캠페인
사용 사례
- 브랜드 스토리 사이트
- 포트폴리오
- 제품 출시 페이지
- 이벤트 사이트
이런 프로젝트에 맞습니다
- 브랜드 스토리 사이트
- 포트폴리오
- 제품 출시 페이지
- 이벤트 사이트
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 깊이와 차원
- 시각적 흥미
- 자연스러운 움직임
주요 특징
- 다층 레이어 구조
- 시차 효과
- 깊이감 표현
- 스크롤 기반 애니메이션
- 몰입형 경험
장점과 한계
장점
- 스크롤 시 시각적 흥미 유발
- 스토리텔링과 조합 시 강력한 효과
- 페이지 체류 시간 증가
한계
- 모바일에서 구현 어렵고 성능 저하
- 모션 민감 사용자에게 멀미 유발 가능
- SEO에 불리할 수 있음
컬러 시스템
레이어별 색상 깊이. 먼 배경과 가까운 전경의 색 차이로 원근감 강화
색의 역할
- far-background: 가장 어둡거나 낮은 채도 — 멀리 있는 느낌
- mid-layer: 중간 명도
- foreground: 가장 밝거나 강한 색 — 가장 가까운 레이어
- text: 전경 레이어 위 — 배경과 충분한 대비
제약
- 레이어 간 색 구분 충분히 — 같은 색이면 parallax 효과 약해짐
- 너무 많은 레이어 사용 금지 — 3~5레이어 권장
다크모드 — 배경 레이어 더 어둡게, 전경 레이어 밝기 유지
명도 대비 — 각 레이어 위 텍스트 대비 확인
타이포그래피
시각적 임팩트 있는 디스플레이 폰트. 스크롤 경험과 어울리는 대담함
글꼴은 최대 2종 · 스케일 비율 1.5 이상
- hero 텍스트 매우 크게 — parallax의 극적 효과 배가
- 스크롤 중 텍스트 가독성 유지
설계 제약
반드시 포함
- prefers-reduced-motion 지원
- 레이어별 다른 스크롤 속도 (0.3~0.8 배율)
- intersection observer 기반 진입 트리거
하지 말 것
- 모션 민감 사용자 고려 없이 강한 parallax 사용 금지
- 모바일에서 성능 저하 유발하는 heavy parallax 금지
모션 — 스크롤에 반응하는 transform: translateY. will-change: transform 성능 최적화. prefers-reduced-motion: reduce 시 비활성화.
자주 묻는 질문
Parallax Scrolling이란 무엇인가요?
배경과 전경이 다른 속도로 움직여 깊이감과 몰입감을 제공하는 스크롤 기법입니다.
Parallax Scrolling의 핵심 디자인 원칙은 무엇인가요?
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 일부 캠페인 등이 있습니다.